Membuat Widget Label Elegan Pada Sidebar Blogger

//lh3.googleusercontent.com/-K5UKWzgJhmU/AAAAAAAAAAI/AAAAAAAACdI/CN3nwiBZsGE/s512-c/photo.jpg
November 08, 2018




Selamat siang sobat blogger, bagaimana kabar anda semua, kali ini kami akan share bagaimana membuat labe elegan pada sidebar blog anda. Lebel ini dibuat secara manual menggunakan font awesome.

Past banyak yang mengatakan percuma blog anda tampilannya terlihat bagus jika pengunjung blog anda hanya sedikit, itu saya setuju, tetapi lebih bagusnya blog anda juga terlihat bagus.

langsung saja bagaimana membuat sidebar blog anda menjadi elegan, dan yang terpenting juga adalah sidebar ini juga responsive.



Yang mesti anda lakukan adalah login ke blog anda, kemudian klik template dan edit template anda, kemudian masukka kode css dibawah ini sebelum ]]></b:skin>


 #sidebar .guideicons{
    text-align: center;

 
}


.sidebar a.guideicon {
    text-align: center;
    width: 31%;
    color: #444;
    font-size: 13px;
    padding: 1em 1em;
    margin: 0.5em 0.5em 0.2em 0.5em;
    display: inline-block;
    vertical-align: middle;
 /*border-radius: 1.5em;*/
    border: 1px solid #f3f6f8;
 
}

.sidebar a.starting:before {
    content: "\f219";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}


@media screen and (max-width: 960px)
.sidebar a.guideicon {
    text-align: center;
    display: inline-block;
    width: 30%;
    color: #666;
    margin: 25px 0;
}


@media screen and (max-width: 860px)
.sidebar a.guideicon {
    text-align: center;
    display: inline-block;
    width: 30%;
    color: #666;
    margin: 25px 0;
}

.sidebar a.speed:before {
    content: "\f080";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px;
    line-height: 20px;
}

.sidebar a.security:before {
    content:  "\f0d6";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px;
    line-height: 20px;
}

.sidebar a.seo:before {
    content: "\f13c";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px;
    line-height: 20px;
}

.sidebar a.errors:before {
    content: "\f201";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px;
    line-height: 20px;
}

.sidebar a.store:before {
    content: "\f1fe";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px;
    line-height: 20px;
}



 .sidebar a.adobe:before {
    content: "\f024";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
}


.sidebar a.amp:before {
    content: "\f170";
    font-family: FontAwesome;
    font-size: 25px;
    color: #46a5ff;
    text-align: center;
    display: block;
    padding: 0 0 15px 5px;
    line-height: 20px;
} 

Setelah itu simpan template anda, kemudian kalian menuju, layout pada blog anda kemudian tambahkan gadget baru, dan pilih HTML/JavaScript kemudian masukkan script dibawah ini.

 <div class="guideicons">
 <a href="Your Link" class="guideicon starting">3D<br/>Animation</a>
 <a href="Your Link" class="guideicon speed">Teknik<br/>SEO</a>
 <a href="Your Link" class="guideicon security">Make<br/>Money</a>
 <a href="Your Link" class="guideicon seo">Tutorial<br/>CSS</a>
 <a href="Your Link" class="guideicon errors">Goggle<br/>Chart</a>
 <a href="Your Link" class="guideicon store">Tutorial<br/>Highcharts</a>
 <a href="Your Link" class="guideicon adobe">Adobe<br/>Flash</a>
 <a href="Your Link" class="guideicon amp">AMP<br/>Template</a>
</div> 

Simpan dan selesai, oh ya jangan jika kalian ingin mengubah font awesome silahkan masuk ketemplate nada dan edit css diatas, kalian bisa memodifikasi sesuai dengan keinginan kalian.

Jika kalian ingin melihat demo di atas silahkan lihat widget sidebar label pada blog ini, apa yang saya share di atas persis dengan apa yang saya gunakan saaat ini. Makasih dan selamat mneikmati hari kalian.


Related Post

SUBSCRIBE TO OUR NEWSLETTER

closed