Blog

Membuat Follow Blog Sendiri Keren

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.

Anda bisa menggantinya menjadi seperti ini dengan mengikuti tutorial di blog ini.

    1. Masukkan javascript Font Awessome jika blog anda belum di pasang di dalam <head>

 

 <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 

 

    1. Lalu Buka Blogger > Tata Letak > Pilih HTML/JavaScript > Pastekan code di bawah ini di atasnya

 

 <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>

 

  1. Lalu Simpan dan lihat hasilnya
Untuk Halaman Demonya bisa dilihat didemo di sidebar sebelah kanan

 

Penting :
1. Ubah ID Blog dengan ID Blog Anda 7073025969604553555 Gunakan Ctrl + F untuk mencarinya lalu save.
2. Ubah Kecoa INDO dengan Nama blog anda.

Jika Ada Error atau Widget tidak bisa atau tidak work silahkan anda berkomentar di bawah ini.

4 Comment(s)

  1. Sang Pemula
    April 10, 2016

    wah, hebat nih tipsnya, jadi bisa follow blog sendiri sekarang, tapi bakalan di penalti nanti gak ya ?

  2. Seo Anyaran
    April 10, 2016

    Oke deh gan lebih simple ini kayaknya gan. Mantap banget kalau work

  3. Ryan Pratama
    April 11, 2016

    engga bakalan kena pinalti gan 🙂

  4. Eko Sutrisno
    December 12, 2016

    Wah bisa dicoba nieh thx yah

Write a comment

RYANPRATAMADOTCOM

hosting terbaik

Categories

Newsletter