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 ---

2 Facebook Auto Liker

By the “Facebook Auto liker” you can get unlimited number of likes. Facebook Autoliker is a software through which by you can get millions of likes within hour without doing any efforts. A lot of tips and tricks are available on search engines but all are fake and don’t work. You must keep in your mind that no one facilitate you without getting reward. So people are offering free tips and tricks to get free facebook auto likes, just to get traffic on their pages.

How To Get Facebook Auto Liker?

I am introducing the “Facebook Auto liker” which definitely is not free. To get “Facebook Auto liker” you have to pay amount of just 12$. This is one time payment. I will give you complete “Facebook Auto liker” package in just 12$. The software and script is 100% working and genuine. If the software or script doesn’t work then I will give you new software and the complete step by step guide again and again till your satisfaction.

100% safe facebook likes

High quality facebook likes

Payment Method

Pricing: 12$

If you want to get the “Facebook Auto Liker” then Contact Us.

Note:

All the payments will be in PayPal dollar or through Bank wire.

No other way of payment is acceptable.

In all orders the buyer has to pay first, and then the order will be fulfilled within 24hours.

Published By:
OperaOrbis
on 10:14

Read More ---

0 Different Styles For Popular Posts Widget

Blogger gives us opportunity to easily add a “Popular Posts Widget”. Do you wish to change your Blogger’s popular Posts widget to form it additional outstanding and engaging for your visitors? Having a popular Posts widget within the sidebar has countless benefits. It helps new guests to select those articles that are most trending on an internet site. However, Blogger’s inbuilt popular posts widget isn't very much attention-grabbing in terms of planning and displaying. Because the blogger’s default “Popular Posts widget” offers following settings

• 1-      Only the title of posts
• 2-      A thumbnail of the image and post title
• 3-      Post title with a summary
• 4-      Post title with a thumbnail, with a post title and summary

Therefore, if you want to remodel your popular Posts widget into a masterpiece then, by following this "Blogger Tutorial" , you can use any one of the blogger styles given in this post.

Preliminary Steps: Add the Popular posts gadget, if you have not added yet

STEP 1: Add the popular posts widget (if you have not added yet)

• 1-  To work on this "blogger widget" Go to Blogger dashboard, and then go to Layout, in the layout area click on “Add a Gadget” link. Within seconds a window will open there click on Popular Posts.

• 2-   Now we will configure the “Popular Posts gadget” by checking the box, according to our needs as

a)   Image thumbnails

b)   Snippet

• 3-   After configuration, SAVE the widget by clicking on save.

STEP 2: Add the CSS to create different styles of Popular Post

• 1-   Choose any one of the styles given below
• 2-   The copy the CSS code of the style you have selected
• 3-   Open the Template > Customized > Advanced > Add CSS > Paste the CSS code, you have selected before in step 2

• 4-   Once you have pasted the code, click on “Apply to blog” button.

That’s it you have done.

Note:

Some blogger template doesn’t allow the CSS addition.

In that case you have to follow the following steps

Go to Template > Edit HTML > search the code ]]></b:skin>

Now paste the CSS code just above ]]></b:skin>

Now click on SAVE. That’s it.

Styles

Style 1:

#PopularPosts1 h2{
position:relative;
padding:8px 10px 6px 10px;
width:100%;
margin-bottom: 5px;
font-size:17px;
color:#757575; /* Color of the widget&#039;s title */
text-align:left;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 1px 12px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
left: -30px;
top: 50%;
margin-top: -13px;
background: #8E8E8E; /* background color of the numbers */
height: 1.9em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
color: #fff;
font-size: 14px;
}
#PopularPosts1 ul li:after{
position: absolute;
content: &#039;&#039;;
left: -2px;
margin-top: -.7em;
top: 50%;
width: 0;
height: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left:10px solid #8E8E8E; /* background color of the right arrow*/
}
#PopularPosts1 ul li a{
color: #444;
text-decoration: none; 
font-size:15px;
}
#PopularPosts1 ul li {
position: relative;
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 0.4em;
background: #ddd;
transition: all .3s ease-out;
text-decoration:none;
transition: all .1s ease-in-out;
}
#PopularPosts1 ul li:hover{
background: #eee; /* Background color on mouseover */
} 
#PopularPosts1 ul li a:hover{
color:#444; /* Link color on mouseover */
margin-left:3px;
}

 Style 2:

 #PopularPosts1 h2{
padding:7px 0 3px 0;
width:100%;
margin-bottom:10px;
font-size:1.3em;
text-indent:-12px;
font-size:18px;
text-align:center;
color: #757575; /* Color of the widget's title */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:8px 0px 1px;
left:-7px;
width:290px;
}
#PopularPosts1 li{
position:relative;
margin:0 0 10px 0;
padding: 3px 2px 0 17px;
left:-5px;
width:285px;
}
#PopularPosts1 ul li{
background: #eee;
position: relative;
display: block;
padding: .4em .2em .4em 2em;
*padding: .2em;
margin: .5em 0;
background: #ddd;
text-decoration: none;
border-radius: .3em;
transition: all .3s ease-out; 
}
#PopularPosts1 ul li:before{
content: counter(li);
counter-increment: li;
position: absolute;
top: 50%;
margin: -1.3em;
height: 2em;
width: 2em;
line-height: 2em;
font-size: 15px;
color: #fff; /* text color of numbers */
background: #FB8835; /* background color of numbers */
border: .2em solid #fff; /* border color */
-webkit-box-shadow: 0 8px 5px -7px #888;
-moz-box-shadow: 0 8px 5px -7px #888;
box-shadow: 0 8px 5px -7px #888;
text-align: center;
font-weight: bold;
border-radius: 2em;
position: absolute; 
left: 0;
transition: all .3s ease-out;
}
#PopularPosts1 ul li:hover{
background: #eee;
}
#PopularPosts1 ul li:hover:before{
transform: rotate(360deg); 
}
#PopularPosts1 ul li a{
font: 14px Georgia, serif; /* font size of post titles */
text-shadow: 0 -1px 2px #fff;
color: #444;
display:block;
min-height:25px;
text-decoration:none;
text-transform: uppercase;
}
#PopularPosts1 ul li a:hover{
color: #444;
}

Style 3:

  #PopularPosts1 h2{
position:relative;
right:-2px;
padding:8px 63px 6px 17px;
width:100%;
margin:0;
font-size:16px;
background:#4F4F4F; /* Background color */
color:#f2f2f2; /* Color of the widget's title */
text-align:left;
text-indent:18px;
}
#PopularPosts1 h2:before{
position:absolute;
content:"";
top:36px;
right:0px;
width: 0px;
height: 0px;
border-bottom:12px outset transparent;
border-left:12px solid #000000;
}
#PopularPosts1 h2:after{
position:absolute;
content:"";
top:-6px;
left:-5px;
width: 0px;
height: 0px;
border-bottom:24px outset transparent;
border-top:24px outset transparent;
border-left:24px solid #ffffff; /* Arrow background color on the left */
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
left:-8px;
width:100%;
}
#PopularPosts1 li{
width:100%;
position:relative;
left:0;
margin:7px 0 16px 12px;
padding:10px  4px 0 5px;
}
#PopularPosts1 ul li:before{
content:counter(li);
counter-increment:li;
position:absolute;
top:-2px;
left:-20px;
font-size:35px;
width:20px;
color:#888888;
}

#PopularPosts1 ul li a{
display:block;
font-size:16px; /* Font size of the links */
color: #666; /* Color of the links */
text-decoration:none;
transition: all .1s ease-in-out;font-weight: bold;
}
#PopularPosts1 ul li a:hover{
color:#3366FF;
margin-left:3px;
}

 

Style 4:

 #PopularPosts1 h2{
padding:8px 10px 3px 0;
width:100%;
margin:0;
font-size:16px;
position:relative;
left:-20px;
display:block;
border-bottom:2px solid #ccc;
}
#PopularPosts1 ul{
list-style:none;
counter-reset:li;
padding:10px;
width:100%;
}
#PopularPosts1 li{ /* Styles of each element */
width:100%;
position:relative;
left:0;
margin:0 0 6px 10px;
padding:4px 5px;
}
#PopularPosts1 ul li:before{ /* Style of the numbers */
content:counter(li);
counter-increment:li;
position:absolute;
top:3px;
left:-39px;
font-size:21px;
width:28px;
height:28px;
border-radius: 50%;
color:#777; /* Text color */
border: 2px solid #ddd; /* Rounded border color */
padding:0;
text-indent:9px;
}
#PopularPosts1 ul li a{
display:block;
position:relative;
left:-45px;
width:100%;
margin:0;
min-height:28px;
padding: 5px 3px 3px 39px;
color:#333; /* color of the links */
text-decoration:none;
font-size:14px; /* Font size of the links */
font-style: italic;

}
#PopularPosts1 ul li a:hover{
color:#3366ff;
margin-left:3px;
}

Note:

All the CSS is valid and working.

But the numbering does not supported in Internet explorer 7.

All the properties are not supported in IE8;

In IE8 style 4 shows the square boxes instead of circles.

All other browsers show all the properties.

Add About Author Box in Blogger with social buttons

How to add Contact Us form in blogger

Add Multi-Color bookmarking widget in blogger

Published By:
OperaOrbis
on 07:32

Read More ---

0 How to place Adsense in sidebar

Today in these "blogger tutorials" , I will guide you about “How to place AdSense in sidebar”. In this post through "blogger Tips" , I will tell you about how to put add in blogger sidebar and about how we can implement this code. This is one of the easiest areas to put AdSense.

How to implement AdSense in sidebar?

STEP 1:

Go to Blogger dashboard, and then go to Layout

Now click on “Add a Gadget” link

 After this click on HTML/JavaScript link or AdSense

Now put your AdSense code inside this (if you have selected HTML/JavaScript)

that's it.

Alternatives to Google Adwords

 

Recommended Format

To apply AdSense in sidebar the recommended formats are

125x125

Or

120x600

Or

160x600

Or

300x600

Make money with Infolinks

AdSense code error

Sometimes blogger’s Template reads AdSense code as text and not as code, so it is better to avoid any error when trying to save it. To avoid this type of errors you must convert the AdSense code through AdSense Code Converter.

I hope these "Blogger tricks" will help those people who want to put the AdSense properly in blogger.

Why blogging is better business?

Follow 7 things if you want to make more money

Published By:
OperaOrbis
on 10:27

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 ---