Cara Memasang Tombol Share Keren di Blogspot
Cara Memasang Tombol Share Keren di Blog – Sobat Pena Indigo tentu pernah melihat tombol share yang dipasang pada samping postingan blog, diatas artikel dan dibawah artikel postingan blogspot. Ini bertujuan agar artikel kita dapat di share oleh pengunjung blog ke media sosial seperti Google Plus, Facebook dan Twitter.
Baca Juga: Cara Membuat Menu Navigasi Responsive di Blogspot
Nah, Pada postingan kali ini saya akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini dibuat oleh Mas Sugeng yang dipasang di beberapa template populernya dengan tulisan Please share, kini anda dapat memasangnya diblog dengan mudah. Kurang lebih tampilannya seperti gambar berikut ini:
Baca Juga: Cara Membuat Menu Navigasi Responsive di Blogspot
Nah, Pada postingan kali ini saya akan berbagi cara memasang tombol share keren di bawah artikel blog. Tombol share ini dibuat oleh Mas Sugeng yang dipasang di beberapa template populernya dengan tulisan Please share, kini anda dapat memasangnya diblog dengan mudah. Kurang lebih tampilannya seperti gambar berikut ini:
1. Silahkan login akun Blogger >> Template >> Edit HTML
2. Selanjutnya cari kode
2. Selanjutnya cari kode
]]></b:skin> atau </style> kemudian letakkan kode berikut tepat diatas kode tadi./*Tombol Share*/
.tombol-share-box {height: 67px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjby4MND9B76kCxFNGn7WuaXFq-yvcYjn2_DpJ3S1Pq05xq0VNnNgtC5AGBcRHqhv4evTwbu2FHKoj0Y79tU81IZnW9BFhVAb_NGE-i9ZdMe4TEfp-nmKKg4tPs7jgeESQNN-nM6_30PCSR/s1600/share.png) no-repeat 300px 10px;margin:20px 0 15px;overflow:hidden;}
.tombol-share-keren{margin:0 0;height:67px;float:left}
.tombol-share-keren .share{float:left;margin-right:10px;display:inline-block}
.tombol-share-keren .tweet {margin-top: 41px;}
3. Lalu cari kode
<data:post.body/> biasanya terdapat lebih dari satu, silahkan pilih yang ke dua atau yang terakhir.
4. Jika sudah ketemu, silahkan pasang kode berikut tepat dibawah kode ini
<data:post.body/><div class='tombol-share-box'>
<div class='tombol-share-keren'>
<div class='share gplus'><div class='g-plusone' data-size='tall' expr:data-href='data:post.url'/></div>
<div class='share like'><div class='fb-like' data-action='like' data-layout='box_count' data-share='false' data-show-faces='false' expr:data-href='data:post.url'/></div>
<div class='share fbshare'><div class='fb-share-button' data-type='box_count' expr:data-href='data:post.url'/></div>
<div class='share tweet'><a class='twitter-share-button' data-count='vertical' data-lang='en' data-size='normal' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a></div>
</div>
</div>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
5. Jika pemasangan diatas sudah selesai, selanjutnya cari kode
</body> kemudian pasang kode dibawah ini tepat diatas kode tersebut.<script>
window.___gcfg = {lang: 'id'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script><div id='fb-root'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>
6. Selesai dan lihat hasilnya
Dengan cara diatas tombol share akan muncul dibawah artikel blog, Jika tidak muncul coba perhatikan pemasangan kode HTML dibawah kode
<data:post.body/> Silahkan coba satu persatu sampai muncul dibawah postingan blog.
Blog Bamz merupakan salah satu master pembuat template blogspot yang cukup populer, karyanya banyak digunakan blogger yang suka tampilan simple dan ringan. berikut tombol share yang sering digunakan oleh blog bamz.
Sebelum memasang tombol share, sebaiknya anda backup template terlebih dahulu untuk menghindari kesalahan yang fatal.
- Login blogger >> pilih menu Template >> edit HTML
- Lalu letakkan kode CSS berikut tepat diatas kode
</style>.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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6I7ol6N1fyWy_smRkXbPKy47ezZp01o8pFG_kwBlTpI40m3XisFYvP32d6sfGHwx6cWAGWoHt-vvkAONVDSFX0Z-R4CCSGHY9mpWv9CsH0d57dEpgmjAHwffvl04LXClCpMjCFtt-dOQ/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} - Kemudian letakkan kode HTML berikut tepat diatas kode
<data:post.body/><div class='tombol-share-penaindigo'> <div class='tombol-share-fb-cont'> <a class='tombol-share-fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'></a> <a class='tombol-share-fb-label' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + 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='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'></a> <a class='tombol-share-gp-label' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank'>Share on Google+</a> </div> </div> - Silahkan Save dan lihat hasilnya.
Jika tidak ada kesalahan, maka tombol share keren sudah terpasang dibawah halaman postingan blog anda.
Sekian informasi singkat tentang Cara Memasang Tombol Share Keren di Blog semoga dapat bermanfaat dan artikel anda dapat dibagikan ke berbagai media sosial. Jika tutorial ini bermanfaat silahkan share dengan tombol media sosial yang sudah tersedia.
No comments:
Post a Comment