Bosan dengan tampilan widget follow blog yang gitu-gitu aja, pastinya kurang keren dan kurang enak dilihat. Ya memang sekarang jamannya desain flat jadi ya tidak ada salahnya mengubahnya mejadi desain Flat seperti gambar di bawah ini.
- Masukkan javascript Font Awessome jika blog anda belum di pasang di dalam <head>
- Lalu Buka Blogger > Tata Letak > Pilih HTML/JavaScript > Pastekan code di bawah ini di atasnya
- Lalu Simpan dan lihat hasilnya
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <div class='KC-post'>
<ul>
<li><a class='INDO kecoa-fuck kecoa-fuck-top' data-kecoa-fuck='Follow this Blog' expr:href='https://www.blogger.com/follow-blog.g?blogID=7073025969604553555' href='https://www.blogger.com/follow-blog.g?blogID=7073025969604553555' rel='nofollow' target='_blank'><i class="fa fa-users"></i> Kecoa INDO </i></a></li>
</ul>
</div>
<style>
/* CSS fuck */
.kecoa-fuck {position:relative;display:inline-block;}
.kecoa-fuck:before, .kecoa-fuck:after {position:absolute;opacity:0;z-index:1000;pointer-events:none;}
.kecoa-fuck:hover:before, .kecoa-fuck:hover:after {opacity:1;}
.kecoa-fuck:before {content:'';position:absolute;background:transparent;border:4px solid transparent;position:absolute;}
.kecoa-fuck:after {content:attr(data-kecoa-fuck)!important;background:#EC6616;color:#fff;padding:6px 30px;
font-size:11px!important;font-family:'Open Sans'!important;white-space:nowrap;border-radius:2px;-webkit-backface-visibility:hidden;margin-left:initial;}
.kecoa-fuck-top:before {bottom:140%;left:10%;margin:0 0 -9px 0;border-top-color:#E26A19;}
.kecoa-fuck-top:after {bottom:125%;left:10%;margin:0 0 3px -10px!important;}
/* CSS KC Button */
.KC-post{text-align:center;margin-bottom:20px;margin-top:20px;padding:10px 0;}
.widget .post-body > .KC-post ul {padding:0;}
.KC-post li{float:left;margin:0 1%;width:150px;padding:0;list-style:none;position:relative;}
.KC-post li a{padding:10px;color:#fff;display:block;border-radius:2px;font-size:13px;transition:all 0.6s ease-out;font-family:sans-serif;background-color:#FF7504}
.KC-post li a:hover{color:#fff;}
.KC-post.kecoa-fuck:after li .INDO{background-color:#E26A19;}
.KC-post li:last-child{margin-right:0}
.KC-post li .fa:before{position:absolute;top:0;left:0;display:inline-block;padding:5.5px 12px;font-family:fontawesome;text-align:center;color:#fff;line-height:20px;text-shadow:2px 2px rgba(0,0,0,0.1);font-size:14px;transition:all 0.6s ease-out;}
.KC-post li:hover .fa:before
{text-shadow:-2px 2px rgba(0,0,0,0.1);}
.KC-post li .fa {display:initial;}
@media only screen and (max-width:640px){
.KC-post li a{padding:6px 0 6px 0;}
.KC-post li .fa:before{display:none;}}
@media screen and (max-width:480px) {
.KC-post li{width:150px}}
</style>
Untuk Halaman Demonya bisa dilihat didemo di sidebar sebelah kanan
Penting :Jika Ada Error atau Widget tidak bisa atau tidak work silahkan anda berkomentar di bawah ini.
1. Ubah ID Blog dengan ID Blog Anda 7073025969604553555 Gunakan Ctrl + F untuk mencarinya lalu save.
2. Ubah Kecoa INDO dengan Nama blog anda.
Wah bisa dicoba nieh thx yah
BalasHapusOke deh gan lebih simple ini kayaknya gan. Mantap banget kalau work
BalasHapuswah, hebat nih tipsnya, jadi bisa follow blog sendiri sekarang, tapi bakalan di penalti nanti gak ya ?
BalasHapusengga bakalan kena pinalti gan :)
Hapus