Memasang Sidebar Social Link

Memasang Sidebar Social Link - Seperti sudah selayaknya di setiap blog biasa terdapat social link. Begitu juga dengan saya, kali ini Kuntil Design akan berbagi tutorial Memasang Sidebar Social Link dengan bentuk kotak yang tersedia dari 6 kolom.

Namun sedikit berbeda pada tutorial Memasang Sidebar Social Link, karena tutorial kali ini saya dapatkan dari Simplify 2 Responsive Blogger Template.

Manfaat dari memasang sidebar social link ini blog anda akan semakin di kenal oleh khalayak umum dan juga mendapat tanggapan dari mereka melalui media sosial.

Bagi yang ingin memasangnya, silakhan ikuti langkah-langkah Memasang Sidebar Social Link berikut ini.

Memasang Sidebar Social Link

1. Buka Blogger > Template > Edit HTML > Sisipkan kode di bawah ini sebelum tag ]]></b:skin>/kbd>

/* Social Media */
#socialcounter{overflow:hidden;margin:0 0 20px 0}
#socialcounter ul{margin:0}
#socialcounter ul a{color:#fff}
#socialcounter ul li.social_item-wrapper{float:left;width:48%;text-align:center;margin:0 4% 10px 0;color:#fff}
#socialcounter ul li a.social_item{position:relative;display:block;opacity:.9;height:50px;line-height:50px;overflow:hidden}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0}
.social_icon{float:left;line-height:50px;width:41px;font-size:1.3rem}
#socialcounter ul li a.social_item.social_facebook{background:#3F5B9B}
.fa-facebook.social_icon{background:#2E4372}
#socialcounter ul li.social_item-wrapper:hover .fa-facebook.social_icon{background:#3F5B9B}
#socialcounter ul li.social_item-wrapper:hover .social_facebook{background:#2E4372}
#socialcounter ul li a.social_item.social_twitter{background:#1C97DE}
.fa-twitter.social_icon{background:#1571A5}
#socialcounter ul li.social_item-wrapper:hover .fa-twitter.social_icon{background:#1C97DE}
#socialcounter ul li.social_item-wrapper:hover .social_twitter{background:#1571A5}
#socialcounter ul li a.social_item.social_youtube{background:#E22020}
.fa-youtube.social_icon{background:#B31919}
#socialcounter ul li.social_item-wrapper:hover .fa-youtube.social_icon{background:#E22020}
#socialcounter ul li.social_item-wrapper:hover .social_youtube{background:#B31919}
#socialcounter ul li a.social_item.social_rss{background:#E86321}
.fa-rss.social_icon{background:#C2521B}
#socialcounter ul li.social_item-wrapper:hover .fa-rss.social_icon{background:#E86321}
#socialcounter ul li.social_item-wrapper:hover .social_rss{background:#C2521B}
#socialcounter ul li a.social_item.social_google-plus{background:#E82C2C}
.fa-google-plus.social_icon{background:#BF2424}
#socialcounter ul li.social_item-wrapper:hover .fa-google-plus.social_icon{background:#E82C2C}
#socialcounter ul li.social_item-wrapper:hover .social_google-plus{background:#BF2424}
#socialcounter ul li a.social_item.social_instagram{background:#8E714D}
.fa-instagram.social_icon{background:#6F583C}
#socialcounter ul li.social_item-wrapper:hover .fa-instagram.social_icon{background:#8E714D}
#socialcounter ul li.social_item-wrapper:hover .social_instagram{background:#6F583C}
#socialcounter ul li a.social_item.social_pinterest{background:#CA2027}
.fa-pinterest.social_icon{background:#AB1B21}
#socialcounter ul li.social_item-wrapper:hover .fa-pinterest.social_icon{background:#CA2027}
#socialcounter ul li.social_item-wrapper:hover social_pinterest{background:#AB1B21}

2. Tambahkan HTML di bawah ini tepat sesudah kode <kbd><aside id='sidebar-wrapper' itemscope='itemscope' itemtype='http://schema.org/WPSideBar'&gt;</kbd> atau dibawah struktur main wrapper. Lebih jelasnya lihat gambar dibawah

<div id='socialcounter'>
    <ul class='social-counter'>
        <li class='social_item-wrapper'><a class='social_item social_facebook' href='#' rel='nofollow' target='_blank'><i class='fa fa-facebook social_icon'/><span class='social_num'>Facebook</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_twitter' href='#' rel='nofollow' target='_blank'><i class='fa fa-twitter social_icon'/><span class='social_num'>Twitter</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_youtube' href='#' rel='nofollow' target='_blank'><i class='fa fa-youtube social_icon'/><span class='social_num'>Youtube</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_rss' href='#' rel='nofollow' target='_blank'><i class='fa fa-rss social_icon'/><span class='social_num'>RSS</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_google-plus' href='#' rel='nofollow' target='_blank'><i class='fa fa-google-plus social_icon'/><span class='social_num'>Google+</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_instagram' href='#' rel='nofollow' target='_blank'><i class='fa fa-instagram social_icon'/><span class='social_num'>Instagram</span></a>
        </li>
    </ul>
</div>

Selanjutnya, Cari dan ganti semua tanda # dengan link sosial media Anda.

Jadi, setelah anda memasang sidebar social link ini anda akan bisa mendapatkan popularitas dan juga tanggapan melalui media sosial dari pengunjung blog anda. Jangan lupa juga untuk like dan share serta komentar di blog Kuntil Design ini. Demikian tutorial Memasang Sidebar Social Link. Terima kasih sudah berkunjung dan Semoa bermanfaat.