0 How To Add MultiColor Bookmarking Widget On Blog?

Another most important ,blogger tutorial, about “how to Multi Color Bookmarking Widget On Your Blog”. Yes I am introducing you about eye catching and fascinating bookmarking ,widget,. This is very much important or blog to bookmarked by others to increase readers traffic on blog. This widget is fancy and easy to use.

How To Add Multi Color Widget in blog?

Do these steps to add multicolor Social bookmarking widget

• 1.      Go to Blogger.com
• 2.      Sing in to your blogger account
• 3.      Go to your blog
• 4.      Go to the layout
• 5.      In layout go to gadget
• 6.      In gadgets select HTML/JavaScript
• 7.     Copy the code given below and paste in HTML/JavaScript

<style type='text/css'>
/****** coded by www.operaorbs.blogspot.com *******/
.oo-multicoloredwidget {  width: 295px;  margin: -5px;  text-decoration: none; }
.oo-multicoloredwidget ul {  margin: 0px;  padding: 0px;  text-decoration: none;}
.oo-multicoloredwidget ul li {  list-style:none;   padding: 0px; text-transform: none; text-decoration: none;}
.oo-multicoloredwidget ul li a {   color: #ffffff;   display:block;  text-decoration: none;}
.oo-multicoloredwidget ul li a:hover {  color: #ffffff;  background-color: #333;  text-decoration: none; }
.oo-multicoloredwidget ul li .rss { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/RSS-1.png") no-repeat scroll 11px center #4CBB17; background-size: 20px; padding: 18px 45px; }
.oo-multicoloredwidget ul li .facebook { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Facebook-1.png") no-repeat scroll 11px center #499DF5; background-size: 20px; padding: 18px 45px; }
.oo-multicoloredwidget ul li .google { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/google.png") no-repeat scroll 11px center #E0464A; background-size: 20px; padding: 18px 45px; }
.oo-multicoloredwidget ul li .twitter { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/Twitter.png") no-repeat scroll 11px center #7D26CD; background-size: 20px; padding: 18px 45px;}
.oo-multicoloredwidget ul li .linkedin { background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/social-icons/LinkedIn-1.png") no-repeat scroll 11px center #FF664A; background-size: 20px; padding: 18px 45px; }
/****** coded by www.operaorbis.blogspot.com *******/
</style>
<div class="oo-multicoloredwidget">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/OperaOrbis">Subscribe to Our RSS Feed</a></li>
<li><a class="facebook" href="https://www.facebook.com/PrinxessRabi.OperaOrbis">Find Us on Facebook</a></li>
<li><a class="google" href="#">Join Us on Google+</a></li>
<li><a class="twitter" href="https://twitter.com
/PrinxessRabi">Follow Us on Twitter</a></li>
<li><a class="linkedin" href="#">We are on LinkedIn</a></li>
</ul>
</div>

Customize

• Change Pink colored text with your Google+ username.
• Change Yellow colored text with your Twitter username.
• Change Green colored text with your LinkedIn username.
• Change Red colored text with your Feed-burner username.
• Change Orange colored text with your Facebook page username.
• Click on "save" button and visit your blog.

Congratulations! you have done.

Final Words

I hope you will really enjoy blogger tutorial about “how to Multi Color Bookmarking Widget On Your Blog”. This multicolor blog will really be very helpful and for any problem comment below. I will fix the problem.

Add smileys to your blogger commets

Why Google is not indexing your blog posts

Published By:
OperaOrbis
on 09:24

Read More ---

0 How to Add a Separator To Blogger Comments

The comments are a very much necessary part of any blog/website as in them readers categorically tells their opinions related to the post of a blog/website. So it's necessary to pay a bit of our time to create this part so that it can look additional trendy, accessible and neat.

To put our comments neatly and properly, we should always build every comment simple to identify, so that we can find and easily recognise from wherever it begins and to wherever it ends, otherwise it becomes a jumble of letters and our guests might run away.

Here are some strategies to create some separating lines or borders to separate and differentiate every comment. One of these blogger tips and tricks related to blogger comments is “How to Add a Separator/Border to Blogger Comments.”

Add smileys to blogger comments

By this blogger tutorial which is on HTML based, we can separate each comment by lines or borders.

How to Add a Separator/Border to Blogger Comments?

STEP 1:

Go to Blogger dashboard, and then go to Template

Now click on Edit HTML

Expand the template

 

STEP 2:

Click anywhere inside the Code area and by using Ctrl+F open search box

STEP 3:

By using search box,

Find this code

]]></b:skin>

If in our blog/website, threaded comments system (with the reply option) is being used

Just  above  ]]></b:skin>

, paste the below given code

.comment-block {
border-bottom: 1px solid #000000;
}
.comments .continue {
  border-top: 0px solid #000000;
}

If in our blog/website, previous comments system (with no reply option) is being used

Just  above ]]></b:skin>

, paste the below given code

#comments-block .comment-footer {
border-bottom:1px solid #000000;
}

Customization

Add a different background for Author comments in blogger's threaded comments

Customize settings as:

• 1-   To change the border color replace the value #000000 (use this tool to get new hex code freely)
• 2-   To change the border style change the solid to dashed, dotted, outset, inset etc
• 3-   To change the border thickness edit the 1px value

After completing customization, click on Save.

Congratulations! That’s it…

By using simple HTML coding you have easily applied or Added a Separator/Border to Blogger Comments.

Add recent comments widget in blogger

How to number comments in blogger/blogspot

How to remove blogger threaded comments

Published By:
OperaOrbis
on 04:59

Read More ---