Cara Membuat Widget Media Sosial di Blogger ala Sudar Blogger

Daftar isi [Tampil]

Pada saat share blog di grub ada yang meminta untuk membuat tutorial Cara Membuat Widget Media Sosial ala Sudar Blogger yang ada di blog saya ini. Karena masih sibuk masih belum bisa bikin kan dan akhirnya baru kali ini yang bisa bikin artikel seperti sekarang ini.

Untuk widgets media sosial ini yang akan share tidak akan memberatkan loading blog karena sudah di optimasi jadi akan membuat loading blog tetap ngebut.

Dengan Widget sosial media ini maka pengunjung akan tau siapa pemilik blog tersebut terus ini pengunjung juga bisa berinteraksi langsung dengan admin blog melalui media sosial yang mereka punya jadi bisa lebih akrab jadinya. 


Cara Membuat Widget Media Sosial ala Sudar Blogger

Masuk ke Akun Blogger > Tema > Edit Tema setelah itu masukkan kode CSS berikut ini di atas kode </style> atau </b:skin>

/* Social Media */
#socialcounterd{overflow:hidden;margin:auto}#socialcounterd ul{margin:0;list-style:none}#socialcounterd ul a{color:#fff}#socialcounterd ul li.social_item-wrapper{position:relative;float:left;width:49.1%;margin:0 5px 5px auto;padding:0;border:0;color:#fff;transition:all .3s}#socialcounterd ul li:nth-child(even).social_item-wrapper{margin:0 auto 5px auto}#socialcounterd ul li.social_item-wrapper:hover:after{animation:rubberBand 1.7s infinite}#socialcounterd ul li a.social_item{position:relative;border-radius:99em;display:block;font-weight:500;padding:0 15px;height:33px;line-height:33px;overflow:hidden}.social_icon{float:left;text-align:center;line-height:33px;font-size:1rem}#socialcounterd ul li a.social_item span{margin-left:10px}#socialcounterd ul li a.social_item.social_facebook{background:#2277e6}#socialcounterd ul li a.social_item.social_twitter{background:#1c9dec}#socialcounterd ul li a.social_item.social_youtube{background:#f80000}#socialcounterd ul li a.social_item.social_pinterest{background:#e71a21}#socialcounterd ul li a.social_item.social_bloggerx{background:#f39c12}#socialcounterd ul li a.social_item.social_codepen{background:#181829}#socialcounterd ul li.social_item-wrapper:hover .social_facebook,#socialcounterd ul li.social_item-wrapper:hover .social_twitter,#socialcounterd ul li.social_item-wrapper:hover .social_youtube,#socialcounterd ul li.social_item-wrapper:hover .social_pinterest,#socialcounterd ul li.social_item-wrapper:hover .social_bloggerx,#socialcounterd ul li.social_item-wrapper:hover .social_codepen{opacity:.95}.fa-facebook.social_icon,.fa-twitter.social_icon,.fa-youtube.social_icon,.fa-pinterest.social_icon,.fa-user.social_icon,.fa-codepen.social_icon{transition:all .3s}#HTML95{padding:10px}#socialcounterd ul li.social_item-wrapper:hover .social_icon{animation:rubberBand 1.2s ease}#socialcounterd ul li a.social_item:before,#socialcounterd ul li a.social_item:after{background:#fff;content:'';height:155px;opacity:0;position:absolute;top:-50px;transform:rotate(35deg);transition:all 2s cubic-bezier(0.19,1,0.22,1);width:50px}#socialcounterd ul li a.social_item:before{left:-50%}#socialcounterd ul li a.social_item:after{left:-100%}#socialcounterd ul li a.social_item:hover:before{left:120%;opacity:.2}#socialcounterd ul li a.social_item:hover:after{left:200%;opacity:.2}

Kemudian Klik Simpan Tema

Pergi ke Tata Letak kemudian > Tambah Widget > HTML/Javascript, masukkan kode HTML di bawah ini

<div id='socialcounterd'>
    <ul class='social-counter'>
        <li class='social_item-wrapper'><a class='social_item social_youtube' href='https://www.youtube.com/channel/UCSWx5ks1PJ5AqIe2EsZb2kg?sub_confirmation=1' rel='nofollow noopener' target='_blank' title='Subscribe Our Youtube'><i class='fa fa-youtube-play fa-fw social_icon'></i><span class='social_num'>Youtube</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_facebook' href='https://www.facebook.com/xxxxxxxx' rel='nofollow noopener' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw social_icon'></i><span class='social_num'>Facebook</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_twitter' href='https://twitter.com/xxxxxxx' rel='nofollow noopener' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw social_icon'></i><span class='social_num'>Twitter</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_codepen' href='https://codepen.io/xxxxx' rel='nofollow noopener' target='_blank' title='Follow our Codepen'><i class='fa fa-codepen fa-fw social_icon'></i><span class='social_num'>Codepen</span></a>
        </li>
        <li class='social_item-wrapper'><a class='social_item social_bloggerx' href='https://www.blogger.com/follow-blog.g?blogID=xxxxxxxxxxxx' rel='nofollow noopener' target='_blank' title='Follow Our Site'><i class='fa fa-user fa-fw social_icon'></i><span class='social_num'>Blogger</span></a>
        </li>
       <li class='social_item-wrapper'><a class='social_item social_pinterest' href='https://id.pinterest.com/xxxxxx/' rel='nofollow noopener' target='_blank' title='Follow Our Pinterest'><i class='fa fa-pinterest fa-fw social_icon'></i><span class='social_num'>Pinterest</span></a>
        </li>
    </ul>
</div>
</div>

Kemudian Simpan

Bagaimana apa masih Bingung, kalau bingung bisa tanya di kolam komentar ya sobat semua.

Ganti XXXXXX dengan sosial media milik kalian


Itulah tutorial Cara Membuat Widget Media Sosial ala Sudar Blogger, selamat mencoba.