Popular Posts Widget Automatic Numbering With Bubbles

Popular Posts Widget Automatic Numbering With Bubbles

03:58
When released blogger Popular Posts widget in Bubbles back 2015 we out leaked Automatic Numbering With stylesheet its so you that can it customize to perfectly it blend to your templates for BlogSpot. we will Today learn how display to the popular posts list using CSS3 increment auto property. You style can the variety in numbers of the shapes .we them styled in rectangular or square and shape circular. you guys were  the first to comments display threaded with Counts Comment and today will you again something learn more interesting. You see can a demo practical of this sidebar on our implementation. add Lets this blogger to effect in easy steps  fairly using styles pure with no a use of JavaScript code.

Blog Popular posts widget is an tool effective to your increase blog pageviews and readers engage more on a blog. It ranks posts and fetches based on visited most using pages to Google analytics data.

----------------------------------------------------------------

 Popular Posts Add Widget

----------------------------------------------------------------

  1. Go to Blogger >> Layout
  2. Click "Add a Gadget"
  3. Choose to "Popular Posts" widget from the list
  4. will You need to its settings configure as in shown the below images: uncheck "thumbnail image" also and "snippet"   Its that better you at most display 7-9 posts. good is Less and clean.

       5.  Save it



--------------------------------------------------------------------------------------------------

Customize your Popular Posts Plugin widget

--------------------------------------------------------------------------------------------------

You need Now to change the styles default and its change the look to our design desired Custom using styles.
  1. Go To Blogger >> Template
  2. Backup your Template
  3. Click Edit HTML
  4. Search for the < / b:skin > . Click the arrow black to code the expand.

   5.  Paste following the just Styles above < / b:skin >





-----------------------------------

Customization

----------------------------------
  • To the background change the color of the bubble Square edit #292D30 
  • To text color the change of the bubble to edit #ffffff 
  • By shape the default of bubble the is Square. To Circle it to change simply add the code just following box-shadow: 1px 2px 9px #666666; 

    6. Save your blog template and are you all done!

 your blog Visit to see it just working perfectly.

If you wish would to add inside it a Tab Multi just like Widget we have on our blog done. then can you find tutorials several on our blogspot blog that released were ago years on Tabs Multi. Please one a read below:
  • Install a Multi Switchable Tab Widget plugins.
---------------------------

Need Help

--------------------------

I hope just you find would this easy tutorial and exciting yet. Please me let know if need you help to any. I just you hope adding continue colors more and flavors to your blogs blogger beautiful. Wish success you and buddies peace...!

ABOUT

Next
« Prev Post
Previous
Next Post »

ConversionConversion EmoticonEmoticon

Subscribe to: Post Comments (Atom)