How to Customize Blogger Popular Posts Widget

Blogger�s can easily change each element of blog with the help of CSS and JavaScript. Blogger have many widgets in Blog which you want to change for best looking. Popular post widget is one of them which you might to customize to make more beautiful.Today�s post is very useful and about popular post widget customization in blogger. This widget have two styles default and custom. Default style is very simple and have no attraction or beauty but today with the help of this post you can easily customize default style into custom style and make it more stylish and beautiful.

How to customize blogger Popular Posts widget?

Let's Follow this simple guidliness below as under to customize your blog popular posts widget:

First Sign-in to your blogger

In blogger dashboard go to the blogger Template option

Click to edit HTML

After this search this code with the help of Cntrl+F keys: ]]>

Just above before ]]> paste the following codes which you can get from Get Code link.

Multiple Color Blogger Popular Post Widget

                                                                         

                           Get Code

Black Color Blogger Popular Post Widget

                                                                         

                               Get Code

If you are not satisfy from this popular post widget than you can also try more stylish popular post widget with extra featured.

Read More

How to Change Your New Blogger Template

If you are a new blogger user then you must need to know about blogger template customization. If you don't know about this, you can't make changing in your new blogger template. How to make different changes and edit your new blogger template, you must follow this simple articles....

How to Add Featured Content Slider on your Blog

When we compare Blogger with WordPress, we see that blogger is limited features compare WordPress such as You can easily install plugins on wordpress but difficult to install plugins on Blogger. You can only changing in blogger template with manually. Today i will guide you how to add feature post slider in blogger template which looks     <Read More>

How to Ad a Logo to your Blogger Template

Every person wish to ad a blog logo in template when they uploaded a new blogger template. There are many Logo creating websites who provide free services for the new bloggers. With the help of these sites you can create your blog logo. Today i will teach you how you can ad a logo in your blog. Follow step by step these following instruction...  <Read More>

How to Change a Header Image in Blogger Template

Blogger is a free publishing source provided by google. Blogger facilitate you to post your own contents in blog. You can also change blog look and design with your choice. If you want to change header image in blogger template, you can do this to edit the blog HTML and add your own header image code.       <Read More>

How to Remove Featured Post Slider from Blogger Template

Most of blogger templates have image slideshow. They show your featured article post. Every blog owner don't want to like these slider in template and he want to remove the slider from blogger template. Many bloggers does not know about template HTML code so they fail to remove slider but today i will teach you this method. Let's follow these instruction   <Read More>

Read More

How to Ad a Logo to your Blogger Template

Every person wish to ad a blog logo in template when they uploaded a new blogger template. There are many Logo creating websites who provide free services for the new bloggers. With the help of these sites you can create your blog logo. Today i will teach you how you can ad a logo in your blog. Follow step by step these following instruction...

• First login to your blogger account

• Go to the Blogger dashboard and click on the Layout option

• When you click this you will see top of the header gadget option

• Click on gadget and then choose a file to add a picture

• Now upload your logo picture and then click to save

Now you will see your own logo picture on the top of header bar.

Read More

How to Change a Header Image in Blogger Template

Blogger is a free publishing source provided by google. Blogger facilitate you to post your own contents in blog. You can also change blog look and design with your choice. If you want to change header image in blogger template, you can do this to edit the blog HTML and add your own header image code. Follow these simple steps....

• Login to your blogger account

• Go to the Template option and click this and than again click the Edit HTML button.

• Now you will see a new window box 

• To find header code press control+F keys and then find �/* Header�

• Now you will see like this HTML codes

#header {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIW7FVV8BoNJ4Frwh5z301u6DiSsKt82TMCP1RCgHBMwsCkYGnSx30sSBcqNpA9wFYEKLP6rK6WMk0Ji9f_NwIHmi3SeZ5cZGVALNhCMWs9ksLUi2Z-gYpynfVPQTvZ8w8yKcE3tcfns0/s1600/ggg.jpg);

background-image:opacity:0px;

background:#FDF5E6;

•  you will see header image URL code replace this with your new image URL and click to save template

Now you successfully change your blog header image.

Read More

How to Remove Featured Post Slider from Blogger Template

Most of blogger templates have image slideshow. They show your featured article post. Every blog owner don't want to like these slider in template and he want to remove the slider from blogger template. Many bloggers does not know about template HTML code so they fail to remove slider but today i will teach you this method. Let's follow these instruction step by step...

• First you need to login your blogger account

• Go to you Dashboard and select your template option

• After this you will see Edit HTML option click on this

• Now you opened the whole Template HTML codes

• Find or search <!-- Featured Content Slider Started -->

• The slider HTML code will show like this

<!-- Featured Content Slider Started -->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='fp-slider clearfix'>

<div class='fp-slides-container clearfix'>

<div class='fp-slides'>

<!-- Slide 1 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCl6nhNTMgzTsnrKYiRWK3IHN9H2zBLIL-Hc4G4zi_0o1bdqup4erBf6RkHrDyChHqrz2BvsdhDsBFbv6sqt1Bx-rPi9QaKm_lddv9gct3x0am37rMUl86VmZuUuPR3Dnga0BoMMTllh7b/s1600/1.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 1 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 1 Code End -->

<!-- Slide 2 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz-rS_YHUk0mhJx8qOcjqJfSx5UrbYxCUl_WQQuOEMwPZxoVKVOu6m8wDhPm4tHppJfUmzYamamJXHtnnEDKdOBxWBeT9KPNDbehyphenhyphenko8VWyEyV1OMNpR_M562Wazkfp2QIkD3rzkEC-TuN/s1600/2.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 2 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 2 Code End -->

<!-- Slide 3 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGwrVxA3ID9Yvu-7rteIPmpMkkp_ZslGBJC0C0L6l2ScMy2LcVGWjNVvBaYa8b0F1u1DjDJgpHWdqt4ak_DSYhrDoWH5-dVv1GY5P1pNtUp4E0wg_1wIdeBqIoNGpMAiux-0NjtmeFCbdV/s1600/3.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 3 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 3 Code End -->

<!-- Slide 4 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLZHR-tbQ-QtPwDtIDz0QUfJgUFiqQLTkCS_IhCr6ATRwYPY5n83fojr1tKdca7dbCozOKbGzlY9BrBii_qz78Dn0WoCG8X1H5H79l_AyGnbqp2zddUhg3rCS3mp6BBVK_YrNL-ZW7SThD/s1600/4.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 4 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 4 Code End -->

<!-- Slide 5 Code Start -->

<div class='fp-slides-items'>

<div class='fp-thumbnail'>

<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd1UOOqlE2Zx8nxWemH0rhAcb9j8d58vsQeYphFEPNns7xj4zdqs1A7ptsf33t_y1GE6zKvXdgB8838GMspBjnJxIRS6pX7Hty3SMDPRZBuP3Xs68GJ_mRtVQ9kN9_6pIgVY2putde9PID/s1600/5.jpg'/></a>

</div>

<div class='fp-content-wrap'>

<div class='fp-content'>

<h3 class='fp-title'>

<a href='#'>This is default featured slide 5 title</a>

</h3>

<p>

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.This theme is Bloggerized by Lasantha Bandara - bangashtemplates.blogspot.com. 

</p>

</div>

<div class='fp-prev-next-wrap clearfix'>

    <a class='fp-next' href='#fp-next'/>

    <a class='fp-prev' href='#fp-prev'/>

</div>

</div>

</div>

<!-- Slide 5 Code End -->

</div>

<div class='fp-nav'>

    <span class='fp-pager'/>

</div>  

            

</div>

</div>

<div style='clear:both;'/>

</b:if></b:if>

<!-- Featured Content Slider End -->

• When you find this than you also search <!-- Featured Content Slider End -->

• Now remove all the HTML codes from  <!-- Featured Content Slider Started --> to <!-- Featured Content Slider End -->

And after this save the template now you will see your template without any slider show feature.

Read More