Friday, August 21, 2020

Blogger Label widget with Custom Counter Button

Blogger Label widget with Custom Counter Button Blogger label is very important because it work like navigation for visitors. There are many label widget has developed by different blogger. Because we can customize the label widget by adding different CSS code. But most of them are based on Cloud style label. But there are very few trick available for list style label with post counter. So I am going to share with you a list style custom label widget with counter button where your label widget will display as a list at left side and number of post per label will display at the right side or the widget. I have also added hover effect where it will change the color on mouse hover. I hope this unique widget you will like. So let's proceed to the tutorial- Step 1Log into yourBloggerAccount and Go to yourBloggerDashboard Step 2Click on Now click on-Template-EditHTML- Unfold code Step 3Now Find this code]]/b:skinby PressingCtrl+F Step 4Pastethebelow code Before/above]]/b:skin /* Widget by www.bloggerspice.com */.Label li {background: none repeat scroll 0 0 #Label1 li:hover .label-counter {background-color:#000000;color:white} Step 5Now find the code like below span dir='ltr'(data:label.count/)/span Step 6And Replace the above code by below code span class='label-counter'data:label.count//span Step 7 Savethetemplates now. Customization Alter #02D8F8 this code for background color. Alter #0676EA for counter button background color. Alter #000000 for counter button hover color. I have tested this custom label widget on Google Chrome, Mozila Firefox and Opera. It is working well. However if your label widget is customized previously then this trick may not work. Anyway best of luck.

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.