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
  1. Masuk ke mode Edit HTML template blog
  2. 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}
    
    
    
  3. 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'/>  
    
  4. Terkahir tampilan tombol share akan terlihat seperti berikut

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

    ketika tombol share ditekan akan muncul popup
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

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

  1. Kebetulan saya mah udah ada tombol share yang standar, jadi merasa belum perlu menggunakan tombol share pop up.

    ReplyDelete
  2. 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.

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

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...