Serba Tutorial | Internet Marketing | Blogging | Komputer | Smartphone

Cara Membuat Tombol Share ala Blog Bamz



TWD.WEB.ID - Tombol share sosial media pada blog memiliki peran yang cukup penting, tombol share berfungsi agar artikel pada blog kita dapat di share oleh para pengunjung ke berbagai sosial media. Seperti Google Plus, Facebook dan Twitter dan lainnya.

Blog Bamz merupakan salah satu master pembuat template blogger/blogspot yang sudah cukup populer di kalangan para blogger Indonesia, karena karyanya telah banyak digunakan oleh blogger yang suka dengan tampilan simple dan ringan. Seperti template yang saya pakai pada blog ini adalah karya dari Blog Bamz, yaitu template Speed up premium yang memiliki desain yang simple namun tidak mengesampingkan kesan elegan, selain itu juga template Speed up cukup ringan di gunakan.

Nah setelah sebelumnya saya telah membagikan turorial Cara Membuat Tombol Share ala Mas Sugeng pada Blog, pada kesempatan kali ini saya akan berbagi tutorial cara memasang tombol share keren ala Blog Bamz di bawah artikel blog.

Cara Membuat Tombol Share ala Blog Bamz

Cara Membuat Tombol Share ala Blog Bamz

Untuk cara pemasangan tombol share sebenarnya cukup mudah, terdapat 2 jenis script yang harus anda tambahkan pada template blog, silahkan simak saja tutorialnya berikut ini:

1. Langkah pertama yang harus anda lakukan adalah login ke blogger terlebih dahulu.

2. Jika sudah silahkan buka menu Template >> edit HTML

3. Selanjutnya cari kode ]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi. (agar lebih mudah saat mencarinya gunakan CTRL+F)

.tombol-share-penaindigo{width:100%;height:43px;margin-bottom:10px}
.tombol-share-fb-cont,.tombol-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.tombol-share-tw-cont,.tombol-share-other-cont,.tombol-share-like-cont{float:left;width:114px;height:inherit;padding:0 7px;border-left:solid 1px #d8d8d8}
.tombol-share-fb-cont,.tombol-share-other-cont{float:left;width:138px;width:114px;padding:0 7px;height:inherit}
.tombol-share-fb,.tombol-share-tw,.tombol-share-gp,.tombol-share-li,.tombol-share-pi{float:left;display:block;background:url('http://3.bp.blogspot.com/-3ypydr9U3DI/U9DHOBQy-vI/AAAAAAAAAbs/hvhfDPIpevI/s1600/share.png') no-repeat;width:42px;height:41px;margin-right:3px}
.tombol-share-fb-label{color:#2d609b}
.tombol-share-fb-label,.tombol-share-tw-label,.tombol-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}
.tombol-share-tw{background-position:0 -43px}
.tombol-share-tw-label{color:#00c3f3}
.tombol-share-gp{background-position:0 -86px}
.tombol-share-gp-label{color:#f00}

4. Lalu cari kode <data:post.body/> jika kode tersebut terdapat lebih dari satu kode, silahkan pilih yang ke dua atau yang terakhir. Jika sudah ketemu, silahkan pasang kode berikut ini tepat dibawah kode <data:post.body/>

<div class='tombol-share-penaindigo'>
<div class='tombol-share-fb-cont'>
<a class='tombol-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='tombol-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='tombol-share-tw-cont'>
<a class='tombol-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='tombol-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='tombol-share-other-cont'>
<a class='tombol-share-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' rel='nofollow' target='_blank'></a>
<a class='tombol-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>

5. Simpan dan silahkan lihat hasilnya.

6. Selesai.

Inilah tutorial singkat kali ini mengenai Cara Membuat Tombol Share ala Blog Bamz. Cukup sekian dan semoga bermanfaat.


Share on Facebook
Share on Twitter
Share on Google+
Berlangganan Artikel Gratis Via Email



Copyright © 2016 - 2017 TWD.WEB.ID All Rights Reserved | About me | Contact us | Privacy Policy | Disclaimer | Sitemap | Link Partner