Skip to content Skip to sidebar Skip to footer
Home / Blogger / CSS / HTML

Membuat Tombol Share Pop-Up Di Blogspot

By Anonymous Post a Comment
Memang kita sanggup membuat aneka macam model – model untuk tombol share pada blog menyerupai tombol share sticky, tombol show hide share menyerupai google+ dan masih banyak lagi. Umumnya tombol share dikala di klik akan menghasilkan dua kondisi, dikala ditekan tombol share maka browser akan membuka tab baru, atau dikala di tekan tombol share akan membuat browser memnculkan pop-up.

Pada artikel sebelumnya wacana 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 dibentuk juga membutuhkan font awesome untuk icon tombol, kalau template Anda tidak / belum ada fontawesomenya, silahkan menambahkan <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 instruksi CSS pada template atau <b:skin><![CDATA[/*  kemudian menambahkan CSS diberikut 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 instruksi <data:post.body/> kemudian menambahkan instruksi diberikut 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 menyerupai diberikut

    Memang kita sanggup membuat aneka macam model Membuat Tombol Share Pop-up di Blogspot
  5. Bila tombol share di klik, maka akan menghasilkan popup menyerupai yang terlihat pada gambar dibawah ini

    Memang kita sanggup membuat aneka macam model Membuat Tombol Share Pop-up di Blogspot
Kode <data:post.body/> pada template umumnya lebih dari satu, Pada template yang Saya gunakan terdapat tiga instruksi <data:post.body/> dan Saya tempelkan script yang berada pada poin dua dibagian instruksi <data:post.body/> yang terakhir sebab biar tombol share ditampilkan di penggalan final artikel

Post a Comment for "Membuat Tombol Share Pop-Up Di Blogspot"