Cara Memasang Widget Social Media Di Sidebar

Cara Memasang Widget Social Media Di Sidebar - Membagi artikel ke aneka macam social media ialah 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 sanggup 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 gampang dilakukan, namun sebelumnya pastikan Anda telah mempunyai 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 bab 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://2.bp.blogspot.com/-kLbDAB6nJT0/WAreGsb_HEI/AAAAAAAAGLs/ogXAV8d3uPogZDLFjmgaYjD6EfwcYPQaQCLcB/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="Cara Memasang Widget Social Media Di Sidebar Cara Memasang Widget Social Media Di Sidebar"><a class="icon facebook" href="https://www.facebook.com/User ID" target="blank">Follow us on Facebook</a></li> <li data-alt="Cara Memasang Widget Social Media Di Sidebar Cara Memasang Widget Social Media Di Sidebar"><a class="icon twitter" href="https://twitter.com/User UD/" target="blank">Follow us on Twitter</a></li> <li data-alt="Cara Memasang Widget Social Media Di Sidebar Cara Memasang Widget Social Media Di Sidebar"><a class="icon googleplus" href="https://plus.google.com/User ID/posts" target="blank">Follow us on Google+</a></li> <li data-alt="Cara Memasang Widget Social Media Di Sidebar Cara Memasang Widget Social Media Di Sidebar"><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 sanggup mengikuti blog Anda dan mengetahui setiap artikel terbaru blog Anda melalui social media yang mereka gunakan. Semoga bermanfaat.