Cara Memasang Widget Media Sosial Di Sidebar - Memasang widget media sosial di blog bagi sebagian Blogger dianggap penting, sebab selain membuat tampilan blog lebih menarik, widget media sosial juga dapat menjadi sarana berbagi artikel sehingga dapat meningkatkan kunjungan ke blog. Widget media sosial dapat diletakan di area manapun di blog Anda, salah satunya dapat Anda meletakannya di sidebar blog.
Sebelum memasang widget media sosial, pastikan bahwa Anda sudah memiliki akun media sosial yang akan dipasang. Bagi Anda yang ingin menampilkan widget media sosial di sidebar blog Anda, berikut ini cara memasang widget media sosial yang bisa Anda lakukan :
Baca juga artikel : Cara Membuat Widget Email Subscribe Di Sidebar
1. Login ke blog Anda.
2. Pada menu navigasi, klik "Tata Letak".
3. Klik "Tambahkan Gadget" kemudian pilih "HTML/JavaScript".
4. Copy salah satu Script di bawah ini dan pastekan di kolom gadget.
Widget Media Sosial 1
<style>
.socialsharing a {
display:block;
height:50px;width:50px;padding:0 4px;float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVNvW0WAETElfoSDekW1x9zV4Lnfte2lslN6zfc2bSsKxSTYxnj9zjYy3mMB4631wcM4Oj8e7z-HEO_2jKyhToZBjaC4Bd1pgBJoHIOdPjuFJ_AHcNuS_qSY9Q6fFMZSWTe6WwgC5V45b/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>
Ganti tulisan "User ID" dengan user id Anda
Widget Media Sosial 2
<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>
Ganti tulisan "User ID" dengan user id Anda
Baca juga artikel : Cara Memasang Widget Fanspage Facebook Di Blog
Itulah Cara Memasang Widget Media Sosial Di Sidebar yang bisa Anda lakukan dengan mudah. Semoga bermanfaat.
Share artikel... !
