Cara Membuat Tombol Share di Dalam Blog

Monday, March 5, 2018

Bagi kalian yang suka dengan tema-tema  blog minimalis dan fast loading serta seo pasti ketahui yang  namanya Blogbamz , yups blog yang beralamatkan www.blogbamz.com ini diketahui dengan template - templatenya yang benar-benar  pantas sekali untuk bermain adsense, sebab desain templatenya hal yang demikian meletakan space iklan adsense yang lokasinya gampang diamati oleh pengunjung sehingga menjadikan template yang high ctr dan klik valid yang tinggi.

Terdapat tema-tema blog yang di jual oleh  admin dari blog  template yang digunakanya pun juga tidak kalah keren dan unik dengan template premiumnya. Salah satu komponen yang saya menyukai dengan template blogbamz tersebuat  yaitu pada komponen share button nya, Sebab widget tombol sosial media nya {hal yang demikian} belum pernah ada yang menggunakannya selain mas selain itu juga widgetnya ringan banget tanpa memakai javascript , serta enak di pandang.

Seperti apakah demo dari tombol share dibawah postingan seperti blogbamz ? sobat dapat memperhatikan demonya secara seketika di blognya mas bamz sendiri, atau dapat memperhatika gambar dibawah ini.

Cara Membuat Tombol Share di Blog Tanpa Javascript

Langsung teristimewa dari widget share button ini ialah pembuatanya tanpa disertai dengan javascript, seperti yang kita kenal bahwa javascipt ialah salah satu pemicu blog anda menjadi lamban ketika diakases, apalagi javasciptnya tak di syncron khususnya dulu. Setelah itu langsung saja  saja tanpa basa-basi berikut panduan membuat tombol share dibawah postingan blog :

1. Seperti umumnya anda mesti login dahulu ke akun dasbhor blog akan , sesudah itu masuk ke komponen template > Edit html

2. Setalah masuk ke halama editor template copy dan pastekan kode dibawah ini {pas|ideal} diatas kode </style>

.article-share-masyadi{width:100%;height:43px;margin-bottom:10px} .article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit} .article-share-tw-cont,.article-share-other-cont,.article-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8} .article-share-fb-cont,.article-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit} .article-share-fb,.article-share-tw,.article-share-gp,.article-share-li,.article-share-pi{float:left;display:block;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgR_Ox0VsBa2h24vO0fWqWGmxoeZcAWbOem4OxBpoIwCPGFM37uu9wnH1ve9YVnO6ngpsRkoAW2YnrP5LP3Ni04Q6ScdehmsoU7jk5RW1drnDXR9oeF2WFbthmPm0Y_adKyFjRwPEXCByQ/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px} .article-share-fb-label{color:#2d609b} .article-share-fb-label,.article-share-tw-label,.article-share-gp-label{float:left;width:58px;height:inherit;font-size:12px;font-family:'Open Sans Bold',Arial,sans-serif;line-height:14px;margin:5px 0 0 4px} .article-share-tw{background-position:0 -43px} .article-share-tw-label{color:#00c3f3} .article-share-gp{background-position:0 -86px} .article-share-gp-label{color:#f00}

3. Selanjutnya anda pasang kode htlmnya supaya css diatas befungsi, caranya ialah salin dan tempelkan kode dibawah ini diatas kode <data:post.body/> ( umumnya kode hal yang demikian lebih dari 2 , anda pilih aja yang terakhir atau di coba satu persatu ) 

<div class='article-share-masyadi'> <div class='article-share-fb-cont'> <a class='article-share-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'></a> <a class='article-share-fb-label' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'> Share on Facebook</a> </div> <div class='article-share-tw-cont'> <a class='article-share-tw' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'></a> <a class='article-share-tw-label' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' target='_blank'>Share on Twitter</a> </div> <div class='article-share-other-cont'> <a class='article-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a> <a class='article-share-gp-label' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> </div>

4. Langkah yang terkahir klik save dan lihat hasil nya

Labels: BLOG

Thanks for reading Cara Membuat Tombol Share di Dalam Blog. Please share...!