Inserting Designer Bullets To Your Blogger (Blogspot) For Decorating Design Of Your Blogs



Dear friends you will agree that subject of blog writing is like space as much as we proceed ahead its length keeps on increasing, but I am sure you must be enjoying these discussions because personally I feel that sharing experience is the best way of enriching knowledge. Today also we shall be focusing on more feature of blogger (blogspot) that will enhance design of your blog, in our learning series now we shall learn How to Change Bullet Point Style in Blogger (Blogspot) Lists? . Normally these are fixed for content written in list style.


This discussion is divided into three parts
1.Changing style of bulleted points in unordered list
2. Inclusion of bullet points in unordered
3.Adding an image rather than bullet on the listed content. Let us now begin with first subject i.e,

How to Add Bullet on Blogger Post:


Before proceeding ahead let us check which blogger editor is being used by you, if you are still working on traditional blogger editor that you will be required to insert bullet points to unordered lists. On the contrary if you are using latest blogger editor than this is automatically in your blog.  In both ways the following code will appear:
  

                           <ul><li>Create your own list markers in Blogger</li>
                           <li>Create unordered lists in Blogger</li>
                           <li>Create bullet points in Blogger</li>
                            </ul>
 
You can mention text between <li><li) tags.


Circlular Bullet Points: This type of bullets will appear on your blogger blogspot by default. Thus, whenever <ul></ul> tags are placed in blogger blogspot a circlular bullet appears against every content indicated by <li>.

            



Inserting square bullet design to blogger (blogspot)

    1.  As the first step login to blogger.

    2.  Move to design > Edit HTML widget.

    3.  Take back up of your template.

    4.  You see posts portion of your CSS stylesheet that are before ]]<>/b:skin> tag.

    5.  For the default blogger templates insert CSS code as mentioned below in the post section.


                                                      .post ul li {
                                                     list-style: square;
                                                    } 


          

         
      




Inserting circle bullet points to blogger (blogspot)

  

    1. Carry out the steps from 1-4 as mentioned above for square bullets.

    2. Now insert the code given below to the posts section of the CSS stylesheet of your blogger template.


                                      .post ul li {
                                     list-style: circle;
                                     }

 


                    
      



   3. As the final step saving, preview the blog post, and if you find it properly designed than save these changes.


Indenting bullet points in blogger (blogspot): 


This can be done in the following ways:

  1. Inside or Outside element: Normally by default indenting is shown outside, the inside indentation can be done by using the following code


          
                                                    post ul li {
                                                    list-style: circle inside;
                                                   }
    

      
                
         


  2. CSS Styling Indentation: The custom indentation can be done by using following code, mentioning necessary em say for instance 3em.


                                              .post ul li {
                                             list-style: circle;
                                             margin-left: 3em;
                                           } 


How to replace bullet points with Image in blogger (blogspot)?


In various blogs and articles you would have noticed images placed for listed content rather than numbering them or bulleting them. These images are mainly uploaded from various websites providing the facility of free image hosting. This can be done in the following ways:

  1. Carry out the process as used in inserting square bullet .

  2. Before the </head> option mention the code given below:


      .post ul li {
list-style: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsVEobgGLD4bUhP7z5dU1wG6dGrxy61Pn51QIzyGjdbtRZzQLigg.gif");
 }
 
  3. Replace URL address of image with URL address of the image from where you have downloaded the image. It would be worth mentioning here that image may have .gif code, if extension code is other than .gif than you will be required to change it also 


   4. As usual save the changes.


How to remove bullets from blogger post?

   1. As the first step, carry out the steps from 1-4 as mentioned in various sections above.
  
   2. Before </head> add the code mentioned below:


                                                 .post ul li {
                                              list-style: none;
                                                }    
   

 

                 



Hope after this discussion you will undoubtedly use these strategies for making your blog more attractive.
 



 



No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check