Cara Membuat Social Share Bagus Dibawah Postingan Blog

Social share button responsive yang ingin saya bagikan disini akan membuat ringan jika dipasang di blog Anda karena tidak menggunakan Javascript. Selain itu, social share button ini juga responsive serta valid HTML5 dan CSS3. Dalam widget ini menggunakan tiga media sosial yang populer seperti berbagi ke facebook, twitter, dan google +. Bagi Anda yang berminat untuk memasang social share responsive ini, silahkan ikuti langkah-langkah yang harus Anda perhatikan yaitu :

• Login ke blogger.com, masuk ke dashboard, kemudian klik pada menu Template > Edit HTML
• Copy kode CSS berikut ini dan letakkan di atas kode ]]></b:skin>  atau </style>

#share-this{text-align:center;float:center;overflow:hidden;margin:30px 0 0 0;padding:15px;line-height:1.4em;background:#f5f5f5;}
#share-this a{float:center;display:inline-block;color:#fff;padding:10px 14px;text-align:center;margin:0 3px 3px;font-size:12px}
#share-this a.this-fb{background:#395796;}
#share-this a.this-tw{background:#4cb0ea;}
#share-this a.this-gp{background:#de3425;}
#share-this a.this-fb:hover,
#share-this a.this-tw:hover,
#share-this a.this-gp:hover {opacity:.5}
#share-this i {margin-right:12px}
.this-fb i,.this-tw i,.this-gp i{background:url(https://lh3.googleusercontent.com/-3feUQV1fYJw/Vo6SSrMNHWI/AAAAAAAABN4/97odFI5E6LA/s226-Ic42/social%252520share%252520hafidnotes.blogspot.co.id.png) no-repeat;width:22px;height:18px;display:inline-block;vertical-align:text-top;margin-top:-6px;text-align:center}
.this-fb i{background-position:0 -100px;margin-top:-4px}
.this-tw i{background-position:0 -150px}
.this-gp i{background-position:0 -200px}

@media screen and (max-width:414px){
#share-this{margin:10px 15px}
#share-this a{width:100%;padding:0;text-align:center;height:45px;line-height:45px;margin:0 auto 3px;}
#share-this a.this-gp i, #share-this i{display:none}
#share-this a.this-gp{height:auto;margin:0 auto;padding:0}
}

• Kemudian cari kode <data:post.bo

<!--Share This button Start -->
<div id='share-this'>
<center style='margin-top:10px;margin-bottom:30px;font-weight:700;font-size:28px;'>SHARE THIS</center>
<a class='this-fb' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Facebook'><i class='fb-1'/>Share on Facebook</a>
<a class='this-tw' expr:href='&quot;http://www.blogger.com/share-post.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;target=twitter&quot;' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Twitter'><i class='tw-2'/>Tweet on Twitter</a>
<a class='this-gp' expr:href='&quot;https://plus.google.com/share?url=&quot; + data:blog.url' onclick='window.open(this.href,&quot;popupwindow&quot;,&quot;status=0,height=500,width=500,resizable=0,top=50,left=100&quot;);return false;' rel='nofollow' target='_blank' title='Google+'><i class='gp-2'/>Plus on Google+</a></div>
<!--Share This Button End -->

• Simpan Template

Jika ada sebuah pertanyaan yang ingin disampaikan, saya akan senang untuk menjawabnya dengan semampu saya. Semoga bermanfaat :).

Tweet