Cara Membuat Akun Media Sosial di Sidebar Blog dengan CSS

pekanan.com | Pada kali ini saya akan berbagi tutorial cara untuk menambahkan akun sosial media di sidebar blog menggunakan CSS tanpa javascript.

yang pasti dengan menambahkan akun sosial media ini tidak akan memberatkan loading blog sobat, jadi blog sobat akan tetap fastloading dan pastinya akan lebih keren jika ditambahkan akun sosial media ini.

selain untuk lebih dekat dengan visitor blog sobat, akun sosial media juga bisa untuk mempercantik tampilan blog sobat.

dengan adanya media sosial dalam bog sobat, visitor akan lebih akrab sehingga mereka akan menjadi visitor yang royal dan blog sobat akan semakin berkembang.

cara memasang sosial media di sidebar ini tidak rumit, karena sobat cukup memasang CSS dalam template sobat, kemudian tambah layout baru di blog sobat, ,maka akun sosial media pun akan tampil dengan profesionla.

lalu bagaimana cara untuk menambahkan akun sosial media di sidebar blog dengan CSS?

yuk simak tutorialnya berikut ini:

Cara Membuat Akun Media Sosial di Sidebar Blog dengan CSS


1. pertama sobat masuk pada mode edit HTML
caranya: masuk blog>Tema>edit HTML


2. kemudian sobat cari kode  ]]></b:skin> atau bisa juga </style>
caranya klik CTR+F pada keyboard sobat, kemudian ketikan kode barusan.


3. setelah ketemu kode tersebut silahkan paste kan kode dibawah ini tepat diatas kode  ]]></b:skin> atau </style>


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

4. agar tampilanya responsive saat di buka di ponsel, silahkan tambahkan kode dibawah ini.
sebelum kode </style>


@media screen and (max-width:240px) {
#socialcounter ul li.social_item-wrapper{float:none;width:100%}
#socialcounter ul li.social_item-wrapper:nth-child(2n+2){margin:0 4% 10px 0}

5.  jangan lupa di save templatenya.


6. setelah selelai sekarang masuk ke layout blog sobat.


kemudian tambahkan layout baru di sidebar HTML/Javascript

lalu paste kan kode dibawah ini:


<div id="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper"><a class="social_item social_facebook" href="https://www.naminakiky.com/" rel="nofollow" target="_blank"><i class="fa fa-facebook social_icon"></i><span class="social_num">Facebook</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_twitter" href="https://www.blogger.com/blogger.g?blogID=4130400771076571949#" rel="nofollow" target="_blank"><i class="fa fa-twitter social_icon"></i><span class="social_num">Twitter</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_youtube" href="https://www.blogger.com/blogger.g?blogID=4130400771076571949#" rel="nofollow" target="_blank"><i class="fa fa-youtube social_icon"></i><span class="social_num">Youtube</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_rss" href="https://www.blogger.com/blogger.g?blogID=4130400771076571949#" rel="nofollow" target="_blank"><i class="fa fa-rss social_icon"></i><span class="social_num">RSS</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_google-plus" href="https://www.blogger.com/blogger.g?blogID=4130400771076571949#" rel="nofollow" target="_blank"><i class="fa fa-google-plus social_icon"></i><span class="social_num">Google+</span></a>
</li>
<li class="social_item-wrapper"><a class="social_item social_instagram" href="https://www.blogger.com/blogger.g?blogID=4130400771076571949#" rel="nofollow" target="_blank"><i class="fa fa-instagram social_icon"></i><span class="social_num">Instagram</span></a>
</li>
</ul>
</div>


Nah, demikian sob cara untuk memasang akun media sosial di blog, mudah bukan?

jika ada pertanyaan silahkan tuliskan pada kolom komentar, semoga bermanfaat