By 
iMbledoz – Kali ini saya
akan berikan tips bagaimana cara membuat tombol sosia share responsive dibawah
posting blog. Saya tidak akan jelaskan panjang lebar soal fungsi dari tombol
ini karena saya kira semua blooger baik pemula atau pro sudah paham akan
fungsinya.
Membuat Social Share Button Responsive di Bawah Posting Blog
1. Silahkan masuk ke akun Blogger Anda
2. Masuk ke Dashboard
>> Template >> Edit HTML
3. copy kode CSS dibawah ini
sebelum kode </style>
/* CSS Share Button */
.sharepost
li{width:19%;padding:0;list-style:none;}
.sharepost li
a{opacity:0.8;padding:10px 0;color:#fff;display:block;border:double #fff;}
.sharepost{overflow:hidden;text-align:center;margin-bottom:20px;margin-top:20px;}
.sharepost li
a:hover{opacity:1;color:#444;border:double #fff;}
.sharepost li
.twitter{background-color:#55acee;}
.sharepost li .facebook{background-color:#3b5998;}
.sharepost li
.gplus{background-color:#dd4b39;}
.sharepost li
.pinterest{background-color:#cc2127;}
.sharepost li
.linkedin{background-color:#0976b4;}
.sharepost li
.twitter:hover,.sharepost li .facebook:hover,.sharepost li .gplus:hover,
.sharepost li
.pinterest:hover,.sharepost li
.linkedin:hover{background-color:#444;color:#fff;}
.sharepost
li{float:left;margin-right:1.2%}
.sharepost
li:last-child{margin-right:0}
.sharepost li
.fa:before{margin-right:5px}
4.
Copy
kode dibawah ini diatas kode </head>
<link
href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'
rel='stylesheet'/>
5.
Copy kode dibawah ini setelah kode <data:post.body/>
<b:if cond='data:blog.pageType ==
"item"'>
<div class='sharepost'>
<ul>
<li><a class='twitter'
expr:href='"http://twitter.com/share?url=" + data:post.url'
rel='nofollow' target='_blank' title='Twitter Tweet'><i class='fa
fa-twitter'/>Tweet</a></li>
<li><a
class='facebook'
expr:href='"http://www.facebook.com/sharer.php?u=" +
data:blog.url' rel='nofollow' target='_blank' title='Facebook Share'><i
class='fa fa-facebook'/>Share</a></li>
<li><a class='gplus'
expr:href='"http://plus.google.com/share?url=" +
data:blog.url' rel='nofollow' target='_blank' title='Google Plus
Share'><i class='fa fa-google-plus'/>Share</a></li>
<li><a class='linkedin'
expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url="
+ data:post.url + "&amp;title=" + data:post.title +
"&amp;summary=" + data:post.snippets'
target='_blank'><i class='fa fa-linkedin'/>Share</a></li>
<li><a class='pinterest'
expr:href='"http://pinterest.com/pin/create/button/?url=" +
data:post.url + "&amp;media=" +
data:post.thumbnailUrl + "&amp;description= + data:post.title"'
target='_blank'><i class='fa fa-pinterest'/>Share</a></li>
</ul>
</div>
</b:if>
6.
Kemudian Simpan Template…… selesai
Semoga bermanfaat
