Membuat Tombol Share Pop-up di Blogspot

Memang kita bisa membuat banyak sekali model – model untuk tombol share pada blog seperti tombol share sticky, tombol show hide share seperti google+ dan masih banyak lagi. Umumnya tombol share ketika di klik akan menghasilkan dua kondisi, ketika ditekan tombol share maka browser akan membuka tab baru, atau ketika di tekan tombol share akan membuat browser memnculkan pop-up.

Pada artikel sebelumnya tentang Membuat Tombol Share Sosial Media di Blog saya membuat jenis tombol share yang apabila di klik akan membuat browser membuka tab baru, sedangkan kali ini Saya akan membuat tombol share yang apabila di klik akan membuat browser memuncul jendel popup. Disini model tombol share yang dibuat juga membutuhkan font awesome untuk icon tombol, jika template Anda tidak / belum ada fontawesomenya, silahkan tambahkan <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet'/> Dibawah tag <head>

Membuat Tombol Share Popup di Blogspot

Masuk ke mode Edit HTML template blog

Cari susun kode CSS pada template atau <b:skin><![CDATA[/* lalu tambahkan CSS berikut dibawahnya


.shareroot{position:relative;display:block;overflow:hidden;margin:20px 0;padding:15px 0;border-top:1px dotted #f0f0f0;border-bottom:1px dotted #f0f0f0}
.sh-title{display:block;float:left;height:30px;line-height:30px;margin:8px 15px 8px 0;padding:0}
.sh-title strong{font-size:16px;display:block}
.shareroot a{float:left;font-size:12px;line-height:30px;color:#fff;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;margin:8px 3px;padding:0 10px;height:30px;min-width:30px;text-align:center}
.shareroot a:hover{background-color:#222;color:#fff}
.shareroot a i.fa{margin-right:7px;font-size:12px}
.shareroot .facebook{background-color:#003471}
.shareroot .twitter{background-color:#00BFF3}
.shareroot .googleplus{background-color:#EA4D29}
.shareroot .pinterest{background-color:#C6393D}
.shareroot .linkedin{background-color:#0077B5}

Selanjutnya cari kode <data:post.body/> lalu tambahkan kode berikut untuk menampilkan tombol sharenya di blog


<!--TOMBOL SHARE POP-UP ROOT93-->
<div class='share-box'>
                 
                <div class='shareroot'>

                  <div class='sh-title'>
                    <strong>SHARE THIS</strong>
                  </div>

                  <a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-facebook'/><span> Share it</span></a>

                  <a class='twitter' expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-twitter'/><span> Tweet</span></a>

                  <a class='googleplus' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-google-plus'/><span> Share it</span></a>

                  <a class='linkedin' expr:href='&quot;http://www.linkedin.com/shareArticle?url=&quot; + data:post.url + &quot;&amp;title=&quot;+ data:post.title' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-linkedin'/><span> Share it</span></a>

                  <a class='pinterest' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url + &quot;&amp;media=&quot; + data:post.firstImageUrl + &quot;&amp;description=&quot; + data:post.snippet' onclick='window.open(this.href, &apos;windowName&apos;, &apos;width=600, height=400, left=24, top=24, scrollbars, resizable&apos;); return false;' rel='nofollow' target='_blank'><i class='fa fa-pinterest-p'/><span> Pin it</span></a>  

                </div>
               </div>

                <div style='clear:both'/>

Terkahir tampilan tombol share akan terlihat seperti berikut
Bila tombol share di klik, maka akan menghasilkan popup seperti yang terlihat pada gambar dibawah ini

Kode <data:post.body/> pada template umumnya lebih dari satu, Pada template yang Saya gunakan terdapat tiga kode <data:post.body/> dan Saya tempelkan script yang berada pada poin dua dibagian kode <data:post.body/> yang terakhir karena supaya tombol share ditampilkan di bagian akhir artikel

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple

3 Responses to "Membuat Tombol Share Pop-up di Blogspot"

Maman AchmanApril 19, 2017 at 10:40 AM

Kebetulan saya mah udah ada tombol share yang standar, jadi merasa belum perlu menggunakan tombol share pop up.
Djangkaru BumiApril 19, 2017 at 4:47 PM

Tombol share sebenarnya memang enak model pop up daripada tab windows baru. Tapi semua memang sesuai dengan selera masing-masing. Intinya, tombol share itu harus menjadai widget wajib.
defantri.comApril 19, 2017 at 8:01 PM

tadinya saya mau test apakah di blog root93 sudah diterapkan, eh ternyata belum dipakai toch :)
iya uda di share aja dech

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin