tombol share
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/AVvXsEj319x4ZqnuKvNU1__vso98pIA8JTO4tJXw32zmEKi-4r6dwMnQ3ig66J-OGhq_nxYhW0Aj_tfuodxBUptqukcD4tRVSofgPcjhALKu643UiMB9RxHYgFhWBkBmKUirt6U-oZvYnvKzwqlw/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.Membuat Tombol Share Keren di Blogger Ala Bamz
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/AVvXsEgz5hKhBD2PqFXA9JJwA0hFVavn4PbAp8SK7aBm2zSast4O-_bw8GZ855O7OHtPCcL272cdfiK8QFHuJxpxtc4vN1lW175_nzTe5jaW1NO_OnI9KpZii9OtEmKr8AU5le-VElAduUPXwDM/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.
