Cara Menciptakan Tombol Share Di Blogger Ala Blog Bamz

Cara Buat dan Memasang Tombol share di Blogger Seperti BlogBamz - Bagi sahabat Blogger pecinta template minimalis dan fast loading serta seo niscaya kenal yang namanya Blogbamz , yups blog yang beralamatkan www.blogbamz.com ini dikenal dengan template - templatenya yang sangat cocok sekali untuk bermain adsense, alasannya desain templatenya tersebut meletakan space iklan adsense yang letaknya gampang dilihat oleh pengunjung sehingga menghasilkan template yang high ctr dan klik valid yang tinggi.

Selain template - template  premium yang di jual oleh Mas Bambang Ghozali ( admin dari blogbamz ) template yang digunakanyapun juga tidak kalah keren dan unik dengan template premiumnya. Salah satu bab yang saya suka dengan template blogbamz tersebuat yaitu pada bab share button nya, Karena widget tombol sosial media nya tersebut belum pernah ada yang memakainya kecuali mas bamz itu sendiri dan juga widgetnya ringan banget tanpa menggunakan javascript , serta yummy di pandang.

Seperti apakah demo dari tombol share dibawah postingan menyerupai blogbamz ? sahabat dapat melihat demonya secara eksklusif di blognya mas bamz sendiri, atau dapat melihat gambar dibawah ini.

Cara Membuat Tombol Share Keren di Blogger Tanpa Javascript

Yang teristimewa dari widget share button ini yaitu pembuatanya tanpa disertai dengan javascript, menyerupai yang kita ketahui bahwa javascipt merupakan salah satu pemicu blog anda menjadi lamban ketika diakases, apalagi javasciptnya tidak di syncron terlebih dahulu. Langsung saja tanpa basa-basi berikut tutorial menciptakan tombol share dibawah postingan blog :
1. Seperti biasanya agan harus login dulu ke akun dasbhor blog akan , sesudah itu masuk ke bab template => Edit html
2. Setalah masuk ke halama editor template copy dan pastekan isyarat dibawah ini sempurna diatas isyarat </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/AVvXsEgtrlf9wZRx2rOsrVATKaQkjlmFS6bgxjgoVDPAIrDH3Jd_EBV9eK3aEm0_EUYr0kkTW_znnENNb5ZiQ29hflc2Fi6g7IIt15_OxKm6F-gqyZ8lM_LcVdn_COTT3bFTZYK4ue5a_TT9ht8/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. Setelah sahabat selesai menyimpan isyarat css diatas, langkah selanjutnya yaitu kita memasang isyarat htlmnya supaya css diatas befungsi, caranya yaitu salin dan tempelkan isyarat dibawah ini diatas kode <data:post.body/> ( biasanya isyarat tersebut lebih dari 2 , sahabat 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 kesannya

NOTE:
Jika sahabat belum terbiasa mengubrek - ubrek editor template, saya sarankan untuk mencobanya di blog dummy terlebih dahulu

Sampai disini cara menciptakan tombol share tanpa javascript yang ringan banget dibawah postingan blog sudah selesai, kalau sahabat tertaik dengan tombol share ala blogbamz ini dan ingin mengganti widget share button yang usang dengan yang ini, silahkan sahabat praktekan cara diatas, kalau ada hambatan atau duduk perkara silahkan corat - coret di kolom komentar bawah ini.

Bagikan Artikel ini