Full Akses: Cara Membuat Tombol Share Keren Di Bawah Postingan Blog

Bagi sobat Blogger pecinta template minimalis dan fast loading serta seo pasti kenal yang namanya Blogbamz , yups blog yang beralamatkan www.blogbamz.com ini dikenal dengan template - templatenya yang sangat cocok sekali untuk bermain adsense, karena desain templatenya tersebut meletakan space iklan adsense yang letaknya mudah 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 bagian yang saya suka dengan template blogbamz tersebuat adalah pada bagian 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 enak di pandang.

Seperti apakah demo dari tombol share dibawah postingan seperti blogbamz ? sobat bisa melihat demonya secara langsung di blognya mas bamz sendiri, atau bisa melihat gambar dibawah ini.

Cara Membuat Tombol share di Blogger Ala Blog Bamz

Cara Membuat Tombol Share Keren di Blogger Tanpa Javascript

Artikel Terkait

Yang teristimewa dari widget share button ini adalah pembuatanya tanpa disertai dengan javascript, seperti yang kita ketahui bahwa javascipt merupakan salah satu pemicu blog anda menjadi lamban saat diakases, apalagi javasciptnya tidak di syncronterlebih dahulu. Langsung saja tanpa basa-basi berikut tutorial membuat tombol share dibawah postingan blog :
1. Seperti biasanya agan harus login dulu ke akun dasbhor blog akan , setelah itu masuk ke bagian template => Edit html
2. Setalah masuk ke halama editor template copy dan pastekan kode dibawah ini tepat 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/AVvXsEi-Bm2bf8F7KVdPgARp2hCWpSVYnVFqrG3wBZSt65fnELTJj7hXd6yVf0UVpDqrJ0Vi8GpiAYPJLf5hahvmWhZO5i0Ic7zu-KYEMSiR_ArXYqpnK9c48oHPXeEhTcleZWySHqxyyhVhO-g/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 sobat selesai menyimpan kode css diatas, langkah selanjutnya adalah kita memasang kode htlmnya agar css diatas befungsi, caranya adalah salin dan tempelkan kode dibawah ini diatas kode <data:post.body/> ( biasanya kode tersebut lebih dari 2 , sobat 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 hasilnya

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

Full Akses

Translate

Kamis, 14 Mei 2015

Cara Membuat Tombol Share Keren Di Bawah Postingan Blog

Cara Membuat Tombol Share Keren di Blogger Tanpa Javascript

Artikel Terkait