Cara Memasang Widget Social Media Di Sidebar - Membagi artikel ke berbagai social media adalah salah satu cara mengenalkan blog ke publik sekaligus meningkatkan pengunjung blog. Hal itu bukan saja dilakukan oleh Anda sendiri, tetapi para pembaca yang telah mengikuti blog Anda melalui social media juga dapat melakukannya dengan cara membagi artikel yang masuk di akun mereka (facebook, twitter, atau google plus) ke teman-teman mereka.
Untuk memasang icon social media di blog sangat mudah dilakukan, namun sebelumnya pastikan Anda telah memiliki akun social media yang ingin dipasang. Bagi yang ingin memasang icon social media di sidebar blog, berikut ini langkah-langkah yang harus dilakukan ;
1. Login ke blog Anda.
2. Masuk ke bagian Tata Letak blog Anda.
3. Klik "Tambahkan Gadget".
4. Pilih "HTML/JavaScript".
5. Copy salah satu script dibawah ini, kemudian pastekan ke kolom gadget blog Anda.
<style>
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGRDzIrsSnrdpwIhLAS_9sVVYQ44KYuhiogzjDRVhdCw4i1FH_FrjMnSsPajqrfnO4PM35GTsLwbKrl7D8iZXSsmtfLarWlTSNaYXZf7v198mHxYhpxR3oD2lBxZWDniJhjYqnGMvpTle1/s1600/socialsharing.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}
.socialsharing a.googleplus {
background-position: 0px -58px;
}
.socialsharing a.googleplus:hover {
background-position: 0px 0px;
}
.socialsharing a.twitter {
background-position: 0px -290px;
}
.socialsharing a.twitter:hover {
background-position: 0px -232px;
}
.socialsharing a.facebook {
background-position: 0px -406px;
}
.socialsharing a.facebook:hover {
background-position: 0px -348px;
}
.socialsharing a.rss {
background-position: 0px -174px;
}
.socialsharing a.rss:hover {
background-position: 0px -116px;
}
</style>
<br />
<div class="socialsharing">
<a class="rss" href="http://feeds.feedburner.com/User ID" rel="external nofollow" target="_blank"></a>
<a class="googleplus" href="https://plus.google.com/User ID" rel="external nofollow" target="_blank"></a>
<a class="facebook" href="http://facebook.com/User ID" rel="external nofollow" target="_blank"></a>
<a class="twitter" href="https://twitter.com/User ID" rel="external nofollow" target="_blank"></a>
</div>
<style>
#socialsharing{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#socialsharing a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#socialsharing li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#socialsharing .facebook, .googleplus, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://2.bp.blogspot.com/-kfF_sopSlXc/WAr2_aJdlvI/AAAAAAAAGMY/2LbaINJxnF4ot0TWVQ0GOQpXakk9v_yqQCLcB/s1600/socialsharing.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#socialsharing li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;}
#socialsharing .icon{overflow:hidden; color:#fafafa;}
#socialsharing .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#socialsharing .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#socialsharing .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#socialsharing .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#socialsharing li:hover .icon,
.touch #socialsharing li .icon{width:210px;}
.touch #socialsharing li .facebook, #socialsharing li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #socialsharing li .twitter, #socialsharing li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #socialsharing li .googleplus, #socialsharing li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #socialsharing li .rss, #socialsharing li:hover .rss{background-color:rgba(255,102,0,1);}
</style>
<ul id="socialsharing">
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="https://www.facebook.com/User ID" target="blank">Follow us on Facebook</a></li>
<li data-alt="Follow us on twitter"><a class="icon twitter" href="https://twitter.com/User UD/" target="blank">Follow us on Twitter</a></li>
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="https://plus.google.com/User ID/posts" target="blank">Follow us on Google+</a></li>
<li data-alt="Subscribe via RSS"><a class="icon rss" href="http://feeds.feedburner.com/User ID" target="blank">Subscribe via RSS</a></li>
</ul>
Silahkan ganti "User ID" dengan User ID milik Anda.
Itulah Cara Memasang Widget Social Media Di Sidebar blog Anda. Dengan adanya widget tersebut, maka para pengunjung dapat mengikuti blog Anda dan mengetahui setiap artikel terbaru blog Anda melalui social media yang mereka gunakan. Semoga bermanfaat.
