Don't Miss

How to Customize Labels Cloud Widget in Blogger

By Zohaib Liaqat - 15 Comments
Website design has always been a great challenge for bloggers. We spend hours and hours for searching a perfect template and on its design. Okay, say you found a perfect template, but remember not any template is perfect, you've to make customizations. After you found a template, now its time to add some important widgets, such as a popular posts widget, subscription boxes, label cloud, etc. After adding all these widgets, it's important to give them a professional look. If you're a web designer then you can easily customize them, but if not, then don't worry there are hundreds of tutorials available on the internet. So, today in this article we'll show you that how to customize labels cloud widget in blogger. Label Cloud is a widget provided by blogger, which is used to display labels on your blog. Simply labels are tags or categories which we use for categorizing our posts under different groups. You can easily customize Label cloud widget using CSS. Today when I came to update Blogolect, I thought to share something new and I started customizing my label cloud widget on a demo blog. After making some customizations, I created a new labels design using some simple CSS codes and transitions too. This widget shows a beautiful and smooth transition on hover and I hope this widget will give a professional look to your blog.
How to Customize Labels Cloud Widget in Blogger

How to Customize Labels Cloud Widget in Blogger

First and foremost log in to your Blogger Account and go to Template >> Click Edit HTML >> Click inside the code area, use Ctrl+F and search for the ]]></b:skin> tag
Now copy(Ctrl+C) the below code and paste(Ctrl+V) it just above/before the ]]></b:skin> tag

/*--- Custom Label Cloud With CSS3 By --- */
.Label a{
padding:0 20px;
border:none !important;
-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;transition:all .4s ease-in-out;
.Label a:hover{
color:#000 !important;
background:#00cc00; }
/*--- Custom Label Cloud With CSS3 By --- */

Hit the Save Template button and you're done!
Congratulations: You've successfully customized your label cloud widget in blogger.

15 comments to ''How to Customize Labels Cloud Widget in Blogger"

  1. It is very good label design. I used on Electrical Objective Questions blog.
    Thanks admin.

  2. Well, i guess this one is best tho the others. I like minimalistic design with black accent and hover colors. Im changing the hover colors to the Blue.

  3. Thanks for widget source code, another tips to be best blog.
    sbobet maxbet m8bet

  4. โปรโมชั่นใหม่ “แจกโบนัส สูงสุดทันที 1,000 บาท”
    gclub online โปรโมชั่น แบบครบวงจรที่คอยอัพเดทข่าวสารเกี่ยวกับโปรโมชั่น จีคลับ บาคาร่าออนไลน์ สล็อตออนไลน์ ตลอดทั้ง 24 ชั่วโมง เพื่อให้ท่านได้สามารถเข้าร่วมสนุกไปกับเกมออนไลน์ของเราได้ตลอดเวลาโปรโมชั่นสำหรับสมาชิก Premium, VIP ที่แจกโบนัสให้สูงที่สุด 10% และโปรโมชั่นแบบรายวัน สำหรับคำขอบคุณที่มอบให้กับ โปรโมชั่น gclub

  5. One of the strategies the company has adopted in becoming the best Urgent College Paper Writing Services providing company in the industry is the focus on delivering College Essay Writing Service that are 100% unique.

  6. CASA98 บริการ แทงบอลออนไลน์ แทงบอลเดี่ยว บอลเต็ง บอลสเต็ป
    สมัคร casa98