Online Blogger Tricks | Blogger Widgets | Blogger Templates | Tips etc

How to check my content is duplicate

2013-08-10T01:43:00.000-07:00

Bismillah Hir-Rahman Nir-Rahim.
Start with the name of Allah the most merciful and the most beneficent. Everyone wants to know that is their content is duplicate or not. Blog author always tries to give unique content to its visitors, but sometimes your keywords match with other blog contents and, then we get in big trouble because if Google found that your blog content is duplicate, then it will remove your blog from their search engine and disable Google ads from your blog or if you make your blog from blogger, so it will also block your blog. Now you know how important to check your content.

What is Duplicate Content:

For example, you write content on any topic and you wrote suitable keywords related to your topic and when you published your content and then your content keywords matching with other blog content keywords called Duplicate Content. I wrote this example for the beginners, although every experienced author knows that what is duplicate content.

Why we check our content is duplicate:

You should check that your content is not matching to other content. If your content topic is matching with others, then not to worry. Yea, but if your keywords are matching to other content then you have to worry because Google and other blog providing service gives you a blog to explore unique content not for duplicate content. Duplicate content helps you banned your blog, helps in disable Google Ads from your blog, helps you in blocked your blog from search engines and helps in everything which harmful for your blog. But what we have to do? From where we check our content is duplicate or not? So the answer is just read this article till the end and you will get your questions answers.

Duplicate content checking site:

There are thousands of sites which helps in check your content is duplicate or not. You don't have to check your content from all the duplicate content sites because I am going to suggest the best and reliable duplicate content checking site that I also use. That is Plagspotter.
Go to the link.
Paste the URL of your content.
Then you know which keywords are matching with other blog contents and then kindly change those keywords which are matching and then again check it, do the same again and again till your match content source is less than 20%.

Last Words:

Hope you easily understood how to check duplicate content and if you still are in trouble then simply paste your problem in the comment box. The blog author will give you your problem solved soon.

2013 Eid with Online Blogger Tricks (2013 Eid Mubarak)

2013-08-09T22:52:00.000-07:00

Assalaam alaikum rahmatullahi wa barakatuh, today is the day of happiness, day of joy, day of Eid-ul-Fitr literally meaning "feast of breaking the fast". This article is also like a tutorial because I will tell you that what is Eid-ul-Fitr and why we celebrate it. I know that every Muslims know what is Eid-ul-Fitr, but it's being good that you get more knowledge about Eid-ul-Fitr. Eid-ul-Fitr is not only celebrating by Muslims, but also some Non-Muslims celebrate it because this festival is the festival of love and peace.

Before Eid-ul-Fitr people were going to shops to buy the clothes, shoes, watches, etc. Today is the 2nd second Eid-ul-Fitr in Pakistan and in some other countries. Had 29 fasted[roza] in Pakistan. Eid-ul-Fitr month is a present giving by Allah[God] after the month of Ramadan. Also, read below paragraph to get more knowledge about Eid-ul-Fitr.

Introduction of what is Eid-ul-Fitr:

How to make a privacy policy page in blog or blogger

2013-08-06T23:20:00.002-07:00

Bismillah Hir-Rahman Nir-Rahim. Start with the name of Allah the most merciful and the most beneficent. Privacy policy is the most important page for your blogger blog. Privacy policy example:

Privacy policy helps the blog visitors to know that how we collected their information.

If you are going to add any advertisement service to your blog so you should add privacy policy page to your blog to compliance these programs. How to make a privacy policy page in blog or blogger? There are several sites who create a privacy policy, so you can easily make privacy policy from there. Or you can also make a privacy policy by yourself....

Privacy policy page also good for Google Adsense. If you had not privacy policy page to your blog and you tried to add Google Adsense to your blog and your account was disabled so it is the one main reason. But now don't worry I am going to tell you how you can easily make a privacy policy for your blog. This privacy policy creator make a website privacy policy.

You may also like:

Make a privacy policy for your blog:

Click to the link
Enter your blog URL and your Email address
Choose any of Advertisement information why you want
Click to create privacy policy
Kindly copy the privacy policy and paste it to your privacy policy page.

Conclusion:

The most main page has been added to your blog and if you have a question about privacy policy, then kindly use OBT blog comment box. Please make me glad by share this article with others.

Add read more button to blogger

2013-08-02T20:11:00.001-07:00

Bismillah Hir-Rahman Nir-Rahim.

Start with the name of Allah the most merciful and the most beneficent. Add read more button to blogger is a very common tutorial in blogger. Read more helps in showing a post in a short way to homepage. When you click to jump break icon in blogger than read more text automatically added, but I don't like only read more text, do you? If your answer is no, so don't worry. I am going to tell you that how can you add read more button to your blog. There is a variety of read more buttons, but I'm providing you the unique and simple read more button.

Demo

also read:

Add read more button to blogger.

Go to blogger dashboard,
paste the below code just above the </head> tag:

<script type='text/javascript'> summary_noimg = 40; summary_img = 40; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

Customization:

summary_noimg = 40; change the value of post summary if no image is in the post.
summary_img = 40; change the value of post summary if image is in the post.
img_thumb_height = 120; change the value of read more thumbnail height.
img_thumb_width = 120; change the value of read more thumbnail width.

Now find <data:post.body/> and replace the code with below code:

<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'>
<style>
.jump-link {
    font-size: 0px;

}

.jump-link a {
    font-size: 0px;
    color: #ffffff;

}
          </style>
<div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> </b:if> </b:if> <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if> <b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if> <b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div style='float:right;margin-right:10px;margin-top:5px;'> <a expr:href='data:post.url'><img class="readmoreimg" height="35" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprL2WiUUEi5R5aghqoQBSCLLnOwzelXhNcReSue5p7nDV1zwUT2G0WOpKZkNS9FHz27izyPfp8bY58DmuWXu_Qh7TKG22sPARNnHVNksCW_A89GbLLCjJQEjhN4i8T6eDS_mForbl73nw/s200/Read+more+by+obt.jpeg" width="90" /></a> </div> </b:if> </b:if>

Note:
If you have more than one <data:post.body/> tag so try to replace the code with first <data:post.body/> tag, if its not work than press CTRL+Z and find second <data:post.body/> tag and replace it with the above code. Do the same with every <data:post.body/> tag, until its not work.

Click to save template and its done.

Last Words:

I know that add read more button is a difficult tutorial and if you faced any problem regarding this tutorial so feel free to tell us by your comments. I'll reply to you as soon as possible. If you want to change the image of read more button, than find https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgprL2WiUUEi5R5aghqoQBSCLLnOwzelXhNcReSue5p7nDV1zwUT2G0WOpKZkNS9FHz27izyPfp8bY58DmuWXu_Qh7TKG22sPARNnHVNksCW_A89GbLLCjJQEjhN4i8T6eDS_mForbl73nw/s200/Read+more+by+obt .jpeg and replace this link with your image URL.

Add a flap social media buttons widget to blogger

2013-07-28T05:57:00.002-07:00

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ

Start with the name of Allah the most merciful and the most beneficent. Flapping social media buttons is a very beautiful widget. When you hover your mouse on this social media buttons it will flap and link will display, you can also see in image that Facebook and Twitter button are simply displaying, but when you hover your mouse on it, it will look like Google plus button. Are you still not understand that what is flap social media buttons widget? So don't worry I have demo of flap social media buttons widget in my lab just click to demo button and you will know flap social media buttons widget.

Demo

Understood what is flap social media buttons widget? Want to add this widget to your blog? So don't worry just follow below steps.

also read:

Add drop down menu in blogger.
Sticky Bar: Add top sticky notification bar to blogger.
Add auto hide social bookmarking widget to blogger.

Adding a flap social media buttons widget to blogger.

Go to blogger dashboard,
go to layout >> add a gadget >> HTML/JavaScript,
now paste the below code in the HTML area of gadget:

          <div id="fb-root"></div>

         <style> .obt-flapwid { font-family:Cambria, Georgia, serif; font-weight:300; font-size:15px; color:#333; overflow-y:hidden; overflow-x:hidden; height:270px; font-smoothing:antialiased; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -o-font-smoothing:antialiased; -ms-font-smoothing:antialiased; margin:1px; }    .obt-flapwid a { color:#555; text-decoration:none; }    .obt-bdy { width:600px; position:relative; margin:1px; }    .clr { clear:both; height:0; margin:0; padding:0; }    .obt-fgt { list-style:none; display:block; text-align:center; width:100%; margin:5px 0 0; padding:0; }    .obt-fgt:after,.obt-itm:before { content; display:table; }    .obt-fgt:after { clear:both; }    .obt-fgt span { width:170px; height:170px; display:inline-block; margin:10px; }    .obt-itm { width:100%; height:100%; border-radius:50%; position:relative; cursor:default; -webkit-perspective:900px; -moz-perspective:900px; -o-perspective:900px; -ms-perspective:900px; perspective:900px; }    .obt-tgf { position:absolute; width:100%; height:100%; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -o-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; }    .obt-tgf > div { display:block; position:absolute; width:100%; height:100%; border-radius:50%; background-position:center center; -webkit-transition:all .4s linear; -moz-transition:all .4s linear; -o-transition:all .4s linear; -ms-transition:all .4s linear; transition:all .4s linear; -webkit-transform-origin:50% 0; -moz-transform-origin:50% 0; -o-transform-origin:50% 0; -ms-transform-origin:50% 0; transform-origin:50% 0; }    .obt-tgf .obt-tgf-front { box-shadow:inset 0 0 0 10px rgba(0,0,0,0.3); }    .obt-tgf .obt-tgf-backfb { -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); background:#4668af url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqLon1q_iDPwRxQxlYg7fgElENz6cNl1z4jmkaX9caEv_jn4Fs7pw-e6ETLszmHNb7AC6_PJco5npP9tdO-gAG9hh6ZrmhNCVEghjuwsp77hxB72vgVSFhBUvAxLiP79e68gMdmgYYNA/s1600/widget-obt.png); opacity:0; }    .obt-tgf .obt-tgf-backgp { -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); background:#de3a26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqLon1q_iDPwRxQxlYg7fgElENz6cNl1z4jmkaX9caEv_jn4Fs7pw-e6ETLszmHNb7AC6_PJco5npP9tdO-gAG9hh6ZrmhNCVEghjuwsp77hxB72vgVSFhBUvAxLiP79e68gMdmgYYNA/s1600/widget-obt.png); opacity:0; }    .obt-tgf .obt-tgf-backtw { -webkit-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -moz-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -o-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); -ms-transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); transform:translate3d(0,0,-170px) rotate3d(1,0,0,90deg); background:#0dace1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHqLon1q_iDPwRxQxlYg7fgElENz6cNl1z4jmkaX9caEv_jn4Fs7pw-e6ETLszmHNb7AC6_PJco5npP9tdO-gAG9hh6ZrmhNCVEghjuwsp77hxB72vgVSFhBUvAxLiP79e68gMdmgYYNA/s1600/widget-obt.png); opacity:0; }    .obt-img-1 { background:#4668af url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjura0eSzYJNY5G9Gz2khgIcPc54UaEWPk1I6JUSueezwkv5I8MfZ-z8vYy7aqwv6Ksdof-KG-gaLo5Ar7x3p6vAlrvrmBf3TRhAX7-5wIzQYKX93fAun32wSAaWcR3aaLnCWdZHH4gDqg/s1600/obt-facebook.png) center no-repeat; }    .obt-img-2 { background:#de3a26 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9qkJvf1SjhAIWm5xABPk_-Q2qM1BaXH1gQoGsti3A5KBSN7Tnu9oUhp7s1jef1H82dv9v5ZO2Wa8OJgVjaZM8USGcD5sfzpH0m6dKgIMKVAsxboCuEaWKJ8pBYJ5EDAYNpLR1h0Gzgxc/s1600/obt-googleplus.png) center no-repeat; }    .obt-img-3 { background:#0dace1 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7MXo-ueG14CIlWFmCmDgqoba4QutUghgMfU3T2fp5rtfmbSQOFkvd0nHLLQTEnmPKoQE36uC-OLvmGkvnCXcXUiNdqRi_ox2PFnT5e9EqGYmL-64xxumUjjxGX9L-ttK-y3mJIbhFbV4/s1600/obt-twitter.png) center no-repeat; }    .mytitle{ color:#fff; text-transform:uppercase; letter-spacing:0; font-size:24px; height:40px; font-family:'Open Sans', Arial, sans-serif; text-shadow:0 0 1px #fff, 0 1px 2px rgba(0,0,0,0.3); margin:0 20px; padding:40px 0 0; }    .obt-tgf p { color:#fff; font-style:italic; font-size:12px; border-top:1px solid rgba(255,255,255,0.5); margin:10px 0; padding:0; }    .obt-tgf p a { display:block; width:100px; height:30px; background:rgba(0,0,0,0.3); border-radius:2px; color:#fff; font-style:normal; font-weight:700; text-transform:uppercase; text-decoration:none; font-size:9px; letter-spacing:1px; padding-top:3px; font-family:'Open Sans', Arial, sans-serif; text-shadow:0 0 0 #fafafa, 0 0 1px rgba(0,0,0,0.3); -webkit-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -moz-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -o-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -ms-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; transition:transform .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; margin:7px auto 0; }    .obt-tgf p a:hover { background:rgba(0,0,0,0.2); text-shadow:none; -webkit-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -moz-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -o-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; -ms-transition:0 .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; transition:transform .3s ease-in-out .2s opacity .3s ease-in-out .2s background .2s linear 0; }    .obt-itm:hover .obt-tgf-front { -webkit-transform:translate3d(0,230px,0) rotate3d(1,0,0,-90deg); -moz-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg); -o-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg); -ms-transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg); transform:translate3d(0,210px,0) rotate3d(1,0,0,-90deg); opacity:0; }    .obt-itm:hover .obt-tgf-backfb,.obt-itm:hover .obt-tgf-backgp,.obt-itm:hover .obt-tgf-backtw { -webkit-transform:rotate3d(1,0,0,0deg); -moz-transform:rotate3d(1,0,0,0deg); -o-transform:rotate3d(1,0,0,0deg); -ms-transform:rotate3d(1,0,0,0deg); transform:rotate3d(1,0,0,0deg); opacity:1; } </style>    <br/><a href='http://www.onlinebloggertricks.blogspot.com/'></a> <div class="obt-flapwid"> <div class="obt-bdy"> <section class="main"> <ul class="obt-fgt"> <span> <div class="obt-itm"> <div class="obt-tgf"> <div class="obt-tgf-front obt-img-1"></div> <div class="obt-tgf-backfb"> <div class="mytitle">Facebook</div> <p><a href="http://facebook.com/onlineloggertricks">Like us On Facebook</a></p> </div> </div> </div> </span> <span>   <div class="obt-itm"> <div class="obt-tgf"> <div class="obt-tgf-front obt-img-2"></div> <div class="obt-tgf-backgp">   <div class="mytitle">Google+</div> <p><a href="https://plus.google.com/104207330518745395146">Add me on Google+</a></p> </div> </div> </div> </span> <span>   <div class="obt-itm"> <div class="obt-tgf"> <div class="obt-tgf-front obt-img-3"></div> <div class="obt-tgf-backtw"> <div class="mytitle">Twitter</div> <p><a href="http://twitter.com/OnlineBTricks">Follow Us on Twitter</a></p> </div> </div> </div> </span> </ul> </section></div> </div>

Customization:

Now find OnlineloggerTricks and replace with your Facebook page.
Now find OnlineBTricks and replace with your Twitter account.
Now find 104207330518745395146 and replace it with your Google plus id.

Last words:

This widget credit goes to Widget Generators. and if you having any trouble in adding this widget so kindly tell me by your comments.

Add drop down menu in blogger

2013-07-28T03:22:00.001-07:00

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ

Start with the name of Allah the most merciful and the most beneficent. Drop down menu is the most important part of blogger, you can't do blogging until you haven't menu to your blog. Today I am providing you the best and the great drop down menu for your blog you can easily being add this drop down menu to blogger. Drop down menu will help you in containing your links on it and help your blog visitors to browse your blog. This drop down menu has been made of only HTML and CSS I have not used JavaScript in this drop down menu. Click below button to see the demo or live preview of drop down menu.

Demo!!!

like this drop down menu, want to add it to your blog? Than follow below steps.

also read:

Sticky Bar: Add top sticky notification bar to blogger.
Add auto hide social bookmarking widget to blogger.

Adding drop down menu in blogger

Go to blogger dashboard,
go to layout >> add a gadget,
now paste the below code in the HTML area of gadget:

<style>#obtmenu1 ul,
#obtmenu1 li,
#obtmenu1 span,
#obtmenu1 a {
margin: 0;
padding: 0;
position: relative;
}
#obtmenu1 {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#obtmenu1:after,
#obtmenu1 ul:after {
content: '';
display: block;
clear: both;
}
#obtmenu1 a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;

background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#obtmenu1 ul {
list-style: none;
}
#obtmenu1 > ul {
float: left;
}
#obtmenu1 > ul > li {
float: left;
}
#obtmenu1 > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#obtmenu1 > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#obtmenu1 > ul > li:last-child > a {
border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
}
#obtmenu1 > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#obtmenu1 > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAx CAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;

background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#obtmenu1 .has-sub {
z-index: 1;
}
#obtmenu1 .has-sub:hover > ul {
display: block;
}
#obtmenu1 .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#obtmenu1 .has-sub ul li {
*margin-bottom: -1px;
}
#obtmenu1 .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#obtmenu1 .has-sub ul li:hover a {
background: #0c7fb0;
}
#obtmenu1 .has-sub .has-sub:hover > ul {
display: block;
}
#obtmenu1 .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#obtmenu1 .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#obtmenu1 .has-sub .has-sub ul li a:hover {
background: #095c80;
}
</style>
<div id='obtmenu1'>
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Products</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Product 1</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>Product 2</span></a>
            <ul>
               <li><a href='#'><span>Sub Item</span></a></li>
               <li class='last'><a href='#'><span>Sub Item</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>

Customization:

Change the position of your gadget where you want drop down menu display.
If you want to add a link just simply replace your link with (#)Hash tag.
If you want to change the name of any tab than simply change the text which is written between the <span></span> tag.

If you want to add any tab just simply add the code like this:

<li><a href="your-link"><span>your tab name</span></a></li>

If you want to make any tab drop down than add the code like this:

<ul>
         <li class='has-sub'><a href='your-link'><span>your tab name</span></a>
            <ul>
               <li><a href='your-link'><span>your tab name</span></a></li>
               <li class='last'><a href='your-link'><span>your tab name</span></a></li>
            </ul>
         </li></ul>

Last words:

This drop down menu credit goes to css menu maker and if you like this menu so tell me via your comments.

Sticky Bar: Add top sticky notification bar to blogger

2013-07-27T05:21:00.000-07:00

Bismillah Hir-Rahman Nir-Rahim.

Top sticky notification bar is mostly used when you have any notification. You can easily put your any link to this top sticky bar, You can use this top sticky notification for any reason i.e add top sticky notification bar to blogger by click here. You can also see the top sticky notification bar to my blog and at lots of blogs. If you want to see a demo of this top sticky notification bar so just click to demo button.

Demo!!!

Is you liked top sticky notification bar? want to add it? so you are at right place.

also read:

Add auto hide social bookmarking widget to blogger.

Fade-in read more in JavaScript.

Adding top sticky notification bar to blogger:

Go to blogger,
go to template >> edit HTML,
now paste the below code just below the <body> tag:

<style type='text/css'>
#obt-sticky
{
background: #7d7e7d; /* Old browsers */
background: -moz-linear-gradient(top, #7d7e7d 6%, #7d7e7d 9%, #0e0e0e 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(6%,#7d7e7d), color-stop(9%,#7d7e7d), color-stop(99%,#0e0e0e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* IE10+ */
background: linear-gradient(top, #7d7e7d 6%,#7d7e7d 9%,#0e0e0e 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */

border-bottom:2px solid #999;

color:#fff;
text-align: center;
margin:-12px auto;
padding-bottom:1px;
border-top: 1px solid #333;
height:38px;
font-size:13px;
position:fixed;
vertical-align: baseline; overflow:hidden;
z-index:999;
width:100%;
border-bottom-left-radius:6px;
border-bottom-right-radius:6px;
display:block;
font-weight: bold;
font-family: arial,"Helvetica";
font-color:#fff;
-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
}
#obt-sticky:hover
{

background-color:#333;background-image:-moz-linear-gradient(top,#555555,#434343);background-image:-ms-linear-gradient(top,#555555,#434343);background-image:-webkit-gradient(linear,0 0,0 100%,from(#555555),to(#434343));background-image:-webkit-linear-gradient(top,#555555,#434343);background-image:-o-linear-gradient(top,#555555,#434343);background-image:linear-gradient(top,#555555,#434343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#555555', endColorstr='#434343',GradientType=0)

-webkit-transition:all 1.3s ease-in-out;-moz-transition:all 1.3s ease-in-out;-o-transition-duration:all 1.3s ease-in-out;transition:all 1.3s ease-in-out;

-moz-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);
-webkit-box-shadow: 0 2px 4px hsla(0,0%,0%,.35);

}

#obt-button {background:#fff; padding:4px; color:black;text-shadow:0 -1px 0 rgba(255,255,255,0.25);background-color:white}

#obt-sticky p{line-height:5px; font-size:13px; text-align:center; width:95%; float:left;}
#obt-sticky p a{ text-decoration:underline; padding:4px; color:#FFFF33;}
.obt-cross{display:block; position:relative; right:15px; top:4px;float:right;}
.obt-cross a{font-size:18px; font-weight:bold; font-family:"Arial"; color:#FF0000; line-height:30px;}
.obt-cross, a:hover{color:#DDD; text-decoration:none;}

</style>
<div id='obt-sticky'>
<p style='padding-top:17px;'>Your Text <a class='obt-button' href='http://onlinebloggertricks.blogspot.com/2013/07/sticky-bar-add-top-sticky-notification.html' target='_blank'>link Here!</a></p>
<div class='obt-cross'><a href='javascript:hide_cross();'>x</a></div>
</div>
<script language='JavaScript'>
function hide_cross() {
crosstbox = document.getElementById("obt-sticky");
crosstbox.style.visibility = 'hidden';
}
</script>

Customization:

Find your text and replace it with your text,
find link here and change the link text with your own,
find http://onlinebloggertricks.blogspot.com/2013/07/sticky-bar-add-top-sticky-notification.html and change the link with your own.

Add auto hide social bookmarking widget to blogger

2013-07-25T16:40:00.000-07:00

Bismillah Hir-Rahman Nir-Rahim.

Auto hide social bookmarking is a sharing buttons. I also shared an article of How to add stylish social sharing buttons below every post in blogger. Social bookmarking widgets is a very important widget of blogger because bookmarking widgets will help you to increase your blog publicity. This auto hide social bookmarking widget is very beautiful and suitable for simple blog. I have also demo of this auto hide social bookmarking widget. Just click to below demo button.

Live Demo!!!!

Hope you like and understand auto hide social bookmarking widget. Just follow the below steps and you will be done in adding auto hide social bookmarking widget to your blog.

Adding auto hide social bookmarking widget to blogger:

Go to blogger dashboard,
go to template >> edit HTML,
now paste the below code just above </head> tag:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<link href='https://googledrive.com/host/0B-vI--U2PptrTV91YVFQdjJEdms' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
    jQuery(document).ready(function() {
    jQuery('.socialshare-bookmarks a.external').attr("target", "_blank");
    var socialshareBaseHeight = jQuery('.socialshare-bookmarks').height();
    var socialshareFullHeight = jQuery('.socialshare-bookmarks ul.socials').height();
    if (socialshareFullHeight > socialshareBaseHeight) {
        jQuery('.socialshare-bookmarks-expand').hover(

        function() {
        jQuery(this).animate({
            height: socialshareFullHeight + 15 + 'px'
        }, {
            duration: 800,
            queue: false
        });
        }, function() {
        jQuery(this).animate({
            height: socialshareBaseHeight + 'px'
        }, {
            duration: 800,
            queue: false
        });
        });
    }
    if (jQuery('.socialshare-bookmarks-center')) {
        var socialshareFullWidth = jQuery('.socialshare-bookmarks').width();
        var socialshareBookmarkWidth = jQuery('.socialshare-bookmarks:first ul.socials li').width();
        var socialshareBookmarkCount = jQuery('.socialshare-bookmarks:first ul.socials li').length;
        var numPerRow = Math.floor(socialshareFullWidth / socialshareBookmarkWidth);
        var socialshareRowWidth = Math.min(numPerRow, socialshareBookmarkCount) * socialshareBookmarkWidth;
        var socialshareLeftMargin = (socialshareFullWidth - socialshareRowWidth) / 2;
        jQuery('.socialshare-bookmarks-center').css('margin-left', socialshareLeftMargin + 'px');
    }
    });
</script>

Now find <data:post.body/> and paste the below code just above the following code:

<b:if cond='data:blog.pageType == "item"'>
<div id='post-width-onlinebtricks' style='width:600px;'>

<div class='socialshare-bookmarks-bg-socialshare socialshare-bookmarks socialshare-bookmarks-expand socialshare-bookmarks-center '>


<ul class='socials'>
   <li class='socialshare-yahoomail'>
   <a class='external' expr:href='"http://compose.mail.yahoo.com/?Subject= " + data:post.title + "&body=Link:"+ data:post.url' rel='nofollow' title='Email this via Yahoo! Mail'/>
   </li>
   <li class='socialshare-gmail'>
   <a class='external' expr:href='"https://mail.google.com/mail/?ui=2&view=cm&fs=1&tf=1&su=" + data:post.title + "&body=Link:" + data:post.url' rel='nofollow' title='Email this via Gmail'/>
   </li>
   <li class='socialshare-twitter'>
   <a class='external' expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' title='Tweet This!'/>
   </li>
   <li class='socialshare-facebook'>
   <a class='external' expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow' title='Share this on Facebook'/>
   </li>
   <li class='socialshare-linkedin'>
   <a class='external' expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' title='Share this on LinkedIn'/>
   </li>
   <li class='socialshare-googlebuzz'>
   <a class='external' expr:href='"http://www.google.com/buzz/post?url=" + data:post.url + "&imageurl="' rel='nofollow' title='Post on Google Buzz'/>
   </li>
   <li class='socialshare-yahoobuzz'>
   <a class='external' expr:href='"http://buzz.yahoo.com/submit/?submitUrl=" + data:post.url + "&submitHeadline=" + data:post.title + "&submitSummary=&submitCategory=science&submitAssetType=text"' rel='nofollow' title='Buzz up!'/>
   </li>
   <li class='socialshare-blogger'>
   <a class='external' expr:href='"http://www.blogger.com/blog_this.pyra?t&u=" + data:post.url + "&n=" + data:post.title + "&pli=1"' rel='nofollow' title='Blog this on Blogger'/>
   </li>
   <li class='socialshare-googlebookmarks'>
   <a class='external' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Google Bookmarks'/>
   </li>
   <li class='socialshare-googlereader'>
   <a class='external' expr:href='"http://www.google.com/reader/link?url=" + data:post.url + "&title=" + data:post.title + "&srcUrl=" + data:post.url + "&srcTitle=" + data:post.title + "&snippet="' rel='nofollow' title='Add this to Google Reader'/>
   </li>
   <li class='socialshare-stumbleupon'>
   <a class='external' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'/>
   </li>
   <li class='socialshare-delicious'>
   <a class='external' expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on del.icio.us'/>
   </li>
   <li class='socialshare-digg'>
   <a class='external' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Digg this!'/>
   </li>
   <li class='socialshare-comfeed'>
   <a class='external' expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default?alt=rss"' rel='nofollow' title='Subscribe to the comments for this post?'/>
   </li>
   <li class='socialshare-orkut'>
   <a class='external' expr:href='"http://promote.orkut.com/preview?nt=orkut.com&tt=" + data:post.title + "&du=" + data:post.url + "&cn="' rel='nofollow' title='Promote this on Orkut'/>
   </li>
   <li class='socialshare-designbump'>
   <a class='external' expr:href='"http://designbump.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Bump this on DesignBump'/>
   </li>
   <li class='socialshare-reddit'>
   <a class='external' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Reddit'/>
   </li>
   <li class='socialshare-designfloat'>
   <a class='external' expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to DesignFloat'/>
   </li>
   <li class='socialshare-friendfeed'>
   <a class='external' expr:href='"http://www.friendfeed.com/share?title=" + data:post.title + "&link=" + data:post.url ' rel='nofollow' title='Share this on FriendFeed'/>
   </li>
   <li class='socialshare-zabox'>
   <a class='external' expr:href='"http://www.zabox.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Box this on Zabox'/>
   </li>
   <li class='socialshare-dzone'>
   <a class='external' expr:href='"http://www.dzone.com/links/add.html?url=" + data:post.url + "&title=" + data:post.title + "&description="' rel='nofollow' title='Add this to DZone'/>
   </li>
   <li class='socialshare-webblend'>
   <a class='external' expr:href='"http://thewebblend.com/submit?url=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Blend this!'/>
   </li>
   <li class='socialshare-propeller'>
   <a class='external' expr:href='"http://www.propeller.com/submit/?url=" + data:post.url ' rel='nofollow' title='Submit this story to Propeller'/>
   </li>
   <li class='socialshare-tumblr'>
   <a class='external' expr:href='"http://www.tumblr.com/share?v=3&u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Share this on Tumblr'/>
   </li>
   <li class='socialshare-squidoo'>
   <a class='external' expr:href='"http://www.squidoo.com/lensmaster/bookmark?" + data:post.url ' rel='nofollow' title='Add to a lense on Squidoo'/>
   </li>
   <li class='socialshare-posterous'>
   <a class='external' expr:href='"http://posterous.com/share?linkto=" + data:post.url + "&title=" + data:post.title + "&selection="' rel='nofollow' title='Post this to Posterous'/>
   </li>
   <li class='socialshare-technorati'>
   <a class='external' expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' title='Share this on Technorati'/>
   </li>
   <li class='socialshare-hotmail'>
   <a class='external' expr:href='"http://mail.live.com/?rru=compose?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Email this via Hotmail'/>
   </li>
   <li class='socialshare-bebo'>
   <a class='external' expr:href='"http://www.bebo.com/c/share?Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Bebo'/>
   </li>
   <li class='socialshare-bitacoras'>
   <a class='external' expr:href='"http://bitacoras.com/anotaciones/" + data:post.url ' rel='nofollow' title='Submit this to Bitacoras'/>
   </li>
   <li class='socialshare-blinklist'>
   <a class='external' expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title ' rel='nofollow' title='Share this on Blinklist'/>
   </li>
   <li class='socialshare-100zakladok'>
   <a class='external' expr:href='"http://www.100zakladok.ru/save/?bmurl=" + data:post.url + "&bmtitle=" + data:post.title ' rel='nofollow' title='Add this to 100 bookmarks'/>
   </li>
   <li class='socialshare-blogengage'>
   <a class='external' expr:href='"http://www.blogengage.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Engage with this article!'/>
   </li>
   <li class='socialshare-blogmarks'>
   <a class='external' expr:href='"http://blogmarks.net/my/new.php?mini=1&simple=1&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Mark this on BlogMarks'/>
   </li>
   <li class='socialshare-bobrdobr'>
   <a class='external' expr:href='"http://bobrdobr.ru/addext.html?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on BobrDobr'/>
   </li>
   <li class='socialshare-bonzobox'>
   <a class='external' expr:href='"http://bonzobox.com/toolbar/add?pop=1&u=" + data:post.url + "&t=" + data:post.title + "&d="' rel='nofollow' title='Add this to BonzoBox'/>
   </li>
   <li class='socialshare-boxnet'>
   <a class='external' expr:href='"https://www.box.net/api/1.0/import?url=" + data:post.url + "&name=" + data:post.title + "&description=&import_as=link"' rel='nofollow' title='Add this link to Box.net'/>
   </li>
   <li class='socialshare-current'>
   <a class='external' expr:href='"http://current.com/clipper.htm?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Post this to Current'/>
   </li>
   <li class='socialshare-diigo'>
   <a class='external' expr:href='"http://www.diigo.com/post?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Post this on Diigo'/>
   </li>
   <li class='socialshare-ekudos'>
   <a class='external' expr:href='"http://www.ekudos.nl/artikel/nieuw?url=" + data:post.url + "&title=" + data:post.title + "&desc="' rel='nofollow' title='Submit this to eKudos'/>
   </li>
   <li class='socialshare-evernote'>
   <a class='external' expr:href='"http://www.evernote.com/clip.action?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Clip this to Evernote'/>
   </li>
   <li class='socialshare-faqpal'>
   <a class='external' expr:href='"http://www.faqpal.com/submit?url=" + data:post.url ' rel='nofollow' title='Submit this to FAQpal'/>
   </li>
   <li class='socialshare-fwisp'>
   <a class='external' expr:href='"http://fwisp.com/submit?url=" + data:post.url ' rel='nofollow' title='Share this on Fwisp'/>
   </li>
   <li class='socialshare-globalgrind'>
   <a class='external' expr:href='"http://globalgrind.com/submission/submit.aspx?url=" + data:post.url + "&type=Article&title=" + data:post.title ' rel='nofollow' title='Grind this! on Global Grind'/>
   </li>
   <li class='socialshare-hackernews'>
   <a class='external' expr:href='"http://news.ycombinator.com/submitlink?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Submit this to Hacker News'/>
   </li>
   <li class='socialshare-hatena'>
   <a class='external' expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Bookmarks this on Hatena Bookmarks'/>
   </li>
   <li class='socialshare-hyves'>
   <a class='external' expr:href='"http://www.hyves.nl/profilemanage/add/tips/?name=" + data:post.title + "&text=Text about this site+-+" + data:post.url + "&rating=5"' rel='nofollow' title='Share this on Hyves'/>
   </li>
   <li class='socialshare-identica'>
   <a class='external' expr:href='"http://identi.ca//index.php?action=newnotice&status_textarea=Reading:" + data:post.title + "+-+from+" + data:post.url ' rel='nofollow' title='Post this to Identica'/>
   </li>
   <li class='socialshare-izeby'>
   <a class='external' expr:href='"http://izeby.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Add this to Izeby'/>
   </li>
   <li class='socialshare-jumptags'>
   <a class='external' expr:href='"http://www.jumptags.com/add/?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this link to JumpTags'/>
   </li>
   <li class='socialshare-kaevur'>
   <a class='external' expr:href='"http://kaevur.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Kaevur'/>
   </li>
   <li class='socialshare-mail'>
   <a class='external' expr:href='"mailto:?subject=%22" + data:post.title + "%22&body=Link: " + data:post.url + " (sent via onlinebloggertricks) "' rel='nofollow' title='Email this to a friend?'/>
   </li>
   <li class='socialshare-memoryru'>
   <a class='external' expr:href='"http://memori.ru/link/?sm=1&u_data[url]=" + data:post.url + "&u_data[name]=" + data:post.title ' rel='nofollow' title='Add this to Memory.ru'/>
   </li>
   <li class='socialshare-meneame'>
   <a class='external' expr:href='"http://meneame.net/submit.php?url=" + data:post.url ' rel='nofollow' title='Submit this to Meneame'/>
   </li>
   <li class='socialshare-misterwong'>
   <a class='external' expr:href='"http://www.mister-wong.com/addurl/?bm_url=" + data:post.url + "&bm_description=" + data:post.title + "&plugin=socialsharebookmarks"' rel='nofollow' title='Add this to Mister Wong'/>
   </li>
   <li class='socialshare-moemesto'>
   <a class='external' expr:href='"http://moemesto.ru/post.php?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to MyPlace'/>
   </li>
   <li class='socialshare-mylinkvault'>
   <a class='external' expr:href='"http://www.mylinkvault.com/link-page.php?u=" + data:post.url + "&n=" + data:post.title ' rel='nofollow' title='Store this link on MyLinkVault'/>
   </li>
   <li class='socialshare-myspace'>
   <a class='external' expr:href='"http://www.myspace.com/Modules/PostTo/Pages/?u=" + data:post.url + "&t=" + data:post.title ' rel='nofollow' title='Post this to MySpace'/>
   </li>
   <li class='socialshare-n4g'>
   <a class='external' expr:href='"http://www.n4g.com/tips.aspx?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit tip to N4G'/>
   </li>
   <li class='socialshare-netvibes'>
   <a class='external' expr:href='"http://www.netvibes.com/share?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Netvibes'/>
   </li>
   <li class='socialshare-netvouz'>
   <a class='external' expr:href='"http://www.netvouz.com/action/submitBookmark?url=" + data:post.url + "&title=" + data:post.title + "&popup=no"' rel='nofollow' title='Submit this to Netvouz'/>
   </li>
   <li class='socialshare-newsvine'>
   <a class='external' expr:href='"http://www.newsvine.com/_tools/seed&save?u=" + data:post.url + "&h=" + data:post.title ' rel='nofollow' title='Seed this on Newsvine'/>
   </li>
   <li class='socialshare-ning'>
   <a class='external' expr:href='"http://bookmarks.ning.com/addItem.php?url=" + data:post.url + "&T=" + data:post.title ' rel='nofollow' title='Add this to Ning'/>
   </li>
   <li class='socialshare-nujij'>
   <a class='external' expr:href='"http://nujij.nl/jij.lynkx?t=" + data:post.title + "&u=" + data:post.url + "&b="' rel='nofollow' title='Submit this to NUjij'/>
   </li>
   <li class='socialshare-oknotizie'>
   <a class='external' expr:href='"http://oknotizie.virgilio.it/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on OkNotizie'/>
   </li>
   <li class='socialshare-pfbuzz'>
   <a class='external' expr:href='"http://pfbuzz.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on PFBuzz'/>
   </li>
   <li class='socialshare-pingfm'>
   <a class='external' expr:href='"http://ping.fm/ref/?link=" + data:post.url + "&title=" + data:post.title + "&body="' rel='nofollow' title='Ping this on Ping.fm'/>
   </li>
   <li class='socialshare-plaxo'>
   <a class='external' expr:href='"http://www.plaxo.com/?share_link=" + data:post.url ' rel='nofollow' title='Share this on Plaxo'/>
   </li>
   <li class='socialshare-plurk'>
   <a class='external' expr:href='"http://www.plurk.com/m?content=9+beautiful+web+forms+for+free+download+-+" + data:post.url + "&qualifier=shares"' rel='nofollow' title='Share this on Plurk'/>
   </li>
   <li class='socialshare-printfriendly'>
   <a class='external' expr:href='"http://www.printfriendly.com/print?url=" + data:post.url ' rel='nofollow' title='Send this page to Print Friendly'/>
   </li>
   <li class='socialshare-pusha'>
   <a class='external' expr:href='"http://www.pusha.se/posta?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Push this on Pusha'/>
   </li>
   <li class='socialshare-scriptstyle'>
   <a class='external' expr:href='"http://scriptandstyle.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to Script & Style'/>
   </li>
   <li class='socialshare-slashdot'>
   <a class='external' expr:href='"http://slashdot.org/bookmark.pl?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Submit this to SlashDot'/>
   </li>
   <li class='socialshare-sphinn'>
   <a class='external' expr:href='"http://sphinn.com/index.php?c=post&m=submit&link=" + data:post.url ' rel='nofollow' title='Sphinn this on Sphinn'/>
   </li>
   <li class='socialshare-springpad'>
   <a class='external' expr:href='"http://springpadit.com/clip.action?body=&url=" + data:post.url + "&format=microclip&title=" + data:post.title + "&isselected=true"' rel='nofollow' title='Spring this on SpringPad'/>
   </li>
   <li class='socialshare-strands'>
   <a class='external' expr:href='"http://www.strands.com/tools/share/webpage?title=" + data:post.title + "&url=" + data:post.url ' rel='nofollow' title='Submit this to Strands'/>
   </li>
   <li class='socialshare-stumpedia'>
   <a class='external' expr:href='"http://www.stumpedia.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Stumpedia'/>
   </li>
   <li class='socialshare-techmeme'>
   <a class='external' expr:href='"http://twitter.com/home/?status=Tip+@Techmeme+" + data:post.url + "--" + data:post.title + "&source=onlinebtricks"' rel='nofollow' title='Tip this to TechMeme'/>
   </li>
   <li class='socialshare-tipd'>
   <a class='external' expr:href='"http://tipd.com/submit.php?url=" + data:post.url ' rel='nofollow' title='Share this on Tipd'/>
   </li>
   <li class='socialshare-tomuse'>
   <a class='external' expr:href='"mailto:tips@tomuse.com?subject=" + data:post.title + "&body=Link: " + data:post.url ' rel='nofollow' title='Suggest this article to ToMuse'/>
   </li>
   <li class='socialshare-twittley'>
   <a class='external' expr:href='"http://twittley.com/submit/?title=" + data:post.title + "&url=" + data:post.url + "&desc=&pcat=Technology&tags="' rel='nofollow' title='Submit this to Twittley'/>
   </li>
   <li class='socialshare-viadeo'>
   <a class='external' expr:href='"http://www.viadeo.com/shareit/share/?url=" + data:post.url + "&title=" + data:post.title + "&urlaffiliate=31138"' rel='nofollow' title='Share this on Viadeo'/>
   </li>
   <li class='socialshare-virb'>
   <a class='external' expr:href='"http://virb.com/share?external&v=2&url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Virb'/>
   </li>
   <li class='socialshare-wikio'>
   <a class='external' expr:href='"http://www.wikio.com/sharethis?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Share this on Wikio'/>
   </li>
   <li class='socialshare-wykop'>
   <a class='external' expr:href='"http://www.wykop.pl/dodaj?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Add this to Wykop!'/>
   </li>
   <li class='socialshare-xerpi'>
   <a class='external' expr:href='"http://www.xerpi.com/block/add_link_from_extension?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' title='Save this to Xerpi'/>
   </li>
   <li class='socialshare-yandex'>
   <a class='external' expr:href='"http://zakladki.yandex.ru/userarea/links/addfromfav.asp?bAddLink_x=1&lurl=" + data:post.url + "&lname=" + data:post.title ' rel='nofollow' title='Add this to Yandex.Bookmarks'/>
   </li>
   <li class='socialshare-onlinebloggertricks'>
      </li>
</ul>
   </div>
</div>
</b:if>

Customization:

Now find width:600px and change the width with your post width.

Last Words:

This widget credit goes to Shareaholic. If you want to change the header image of auto hide social bookmarking widget so kindly tell me by your comments, I will soon change it.

Send free sms in pakistan

2013-07-24T06:10:00.001-07:00

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ
Start with the name of Allah the most merciful and the most beneficent. In this article, I am going to tell you that how you can send free SMS to anyone in Pakistan. I shared this send free article because in Pakistan there is too much value of free SMS. This service is only for Pakistanis so enjoy Pakistanis.

How to send free SMS in Pakistan?

There are many sites who provide you send free SMS service but this is the most easiest site to send free SMS in Pakistan

Go to Ciasms,
then fill out the form,
after some seconds you got a message to your mobile phone.

In the end.

I hope that I make you happy with this send free SMS article and hope you will also make me happy by share this send free SMS article.

Fade-in read more in JavaScript

2013-07-17T06:09:00.000-07:00

Fade in read more text is a very simple trick in JavaScript. It is very amazing and helpful trick, if you want to know that what is fade in read more text so below is a demo of this.

Demo:

My name is Muhammad Aseel.

Hope you understand what is fade-in read more in JavaScript. If you want to add this trick to your blog so just follow the below few steps.

Add fade in read more in JavaScript.

Go to your blog dashboard.
Then below any post and below any page paste the below code.

<script type="text/JavaScript" src="http://yourJavaScript.com/60172417532/jquery-fade-in.js"></script>
   <script type="text/JavaScript">
   $(document).ready(function() {

       $("span.spoiler").hide();

       $('<a class="reveal">Read more>></a> ').insertBefore('span.spoiler');

       $("a.reveal").click(function(){
           $(this).parents("p").children("span.spoiler").fadeIn(2500);
           $(this).parents("p").children("a.reveal").fadeOut(600);
       });

   });
   </script>
<style>
a.reveal { cursor:pointer;}
</style>

And then if you want to make any paragraph short just paste the below code before where you want read more.

<span class="spoiler">

And when you end your paragraph just paste the below code just after the paragraph.

</span>

Note:

when you are going to publish your article then click to HTML and add <p> tag before paragraph is starting and add </p> tag after </span> tag either it will not work.

For Example:

<p>This is a paragraph and now I want read more tag so I paste here <span class="spoiler"> and this paragraph will show when you click read more okay now my paragraph is finished so I add </span><p>.

Last words:

Hope you like this article and hope you will also share this article with your friends. If you having any trouble in adding fade in read more so don't worry just tell me your problem by your comment.

Blogger templates: Top 5 blogger templates for free

2013-07-12T05:29:00.000-07:00

Start with the name of Almighty Allah. Today I am going to give you 5 blogger templates for free. Yesterday I shared an article about which template should you use for your blog. Before starting your blog you should choose a responsive blogger template. It is the best collection of blogger templates you ever seen. These templates are SEO optimized and with other lots of features.

Before starting top 5 blogger templates you should read this below articles.

Which template can I use for my blog?
How to upload template to blogger?

Top 5 Blogger Templates:

Kent blogger template:

Kent blogger template is a very good template with tabbed widget and with more other features.

Demo / Details.

Techroadies blogger template:

Demo / Details.

Avada blogger template:

Avada blogger template is one of my favorite blogger template and hope you like this template too much.

Demo / Details.

Adsosive blogger template:

Adsosive blogger template is another good blogger template.

Demo / Details.

Super seo blogger template:

Super seo blogger template is seo optimized blogger template.

Demo / Details

Last words:

Hope you like this all blogger templates and if you having any trouble with any template feel free to share you problem with us through comments.

How to remove or hide blogger Navbar

2013-07-11T21:56:00.000-07:00

Bismillah Hir-Rahman Nir-Rahim.

Start with the name of Allah the most merciful and the most beneficent. How to remove blogger Navbar? it is our topic. When you start a blog so blogger Navbar is automatically enable but it is very easy to remove blogger Navbar, it will take only one minute to remove blogger Navbar. Many of blogger author know that how to remove blogger Navbar by themselves because it is too easy and simple. Why should we remove blogger Navbar? We should remove blogger Navbar because of its advantages and disadvantages..

Advantages:

Advantages is that it will help you go to blogger dashboard by clicking Blogger image, this Navbar help in share your blog with others and have much more advantages. But there are also some disadvantages of this Navbar.

Disadvantages:

Disadvantage is that this Navbar decrease or ruins your blog beauty. I know that this Navbar help go blogger dashboard easily, I know that this help in share your blog, but you can also go to blogger dashboard by writing a link to web browser. For that you would like to decrease your blog beauty? Now we have too much of stylish and simple sharing buttons. So it's being good that you remove this Navbar.

also read:

Which template can I use for my blog?
Popular posts: add a customized popular posts widget to blogger.
Add a flap social media buttons widget to blogger.

How to remove or hide blogger Navbar:

Go to blogger dashboard >> layout.
now look for the Navbar gadget and there is Edit link display,

click the edit link and select off to remove or hide blogger Navbar,

click to save arrangement and blogger Navbar has been removed done!!!
now you can't find the Navbar to your blog.

Which template can I use for my blog?

2013-07-09T12:37:00.001-07:00

السلام عليكم my friends today's topic is that which type of template should you use for your blog? It is very important question in blogging. It's being very good for you that you spend one minute of yours in reading this article. If your blog template is simple to use and reliable for the visitors so they should attract to your blog.

Many people ask me that should they use blogger provided templates and this is a very famous question. So, I have simply answer that it dose not necessary that template only seems attractive from outside, it should attractive from inside too. In starting many of blog author maintain their blog simple and their blog speed has been also good, but after some time they add too much of widgets on their blog and their blog become starting lag. So I advice to them that only use important widgets like:

Popular post widget.
Subscribe to our blog.
Facebook like box.
Add me to your circle.
Labels widget.
Archive widget.
Join this site widget.
You might also like widget

I think its good enough for a blog.

Blogger template is commonly designed for using HTML, CSS, Javascript and programming with XML and all templates are based on these programming languages. Every articles are based on these codes you can also easily understood these codes. You also able to do editing with this codes for example:
Changing font-style, font-weight, font-size, headings, making font bold, italic, underline, strike, changing font-color, background-color, making links, changing image height, width, adding bullet list, block quotes, etc. You can also make your own templates but it's being hard, but don't worry I'll provide the best templates.
You can find every good templates from here.

Templates main code:

<HTML>

<head>

<title>Title Area</title>

<style>

CSS Area

</style>

<script>

Javascript Area

</script>

</head>

<body>

HTML area

<body>

</HTML>

Okay now lets talk about which template can I use?

Which Template Can I Use For My Blog???

Simple blogger template.

SEO optimized template.

Ads supporter template.

Simple blogger template:

You should use a simple blogger template, simple template means that have simple background, easy to use. Every experience blog author will suggest you a simple template because blog visitors like this type of templates.

SEO optimized template:

SEO optimized template means that in which all headings are properly set and have meta tags etc. If you find any simple blog template and you like that most and if that template isn't SEO optimized so don't worry. You also able to do changes to that template for better SEO. SEO optimized template will help you to increase your blog page rank (PR).

Ads support template:

If you making a blog and you have a lots of traffic on your blog then you try to make money by your blog so you apply for different ads and you also apply for Google ads(adsense) and if your account is deactivated by Google ads. So your template is also one reason for this. So also use Ads support template.

Conclusion:

I hope you get too much knowledge about blogger templates and hope now no question will open that which template can I use for my blog? Also remember this things and then choose or select blogger template.

If you have any suggestion about templates so please type that suggestion in a comment box.

How to add 4 in 1 social subscribing slide out widget to blogger

2013-07-02T08:46:00.001-07:00

Assalam-U-Alaikum my friends today I am going to tell you that how to add 4 in 1 social subscribing slide out widget to blogger. It's very easy to add 4 in 1 social subscribing slide out widget to blogger. 4 in 1 social subscribing slide out widget is an attractive widget and help in increase social followers. To see this 4 in 1 social subscribing slide out widget click below demo button.

Live Demo!!!!

Hope you like this 4 in 1 social subscribing slide out widget and to add 4 in 1 social subscribing slide out widget into blogger you just want to follow below easy steps.

Add 4 in 1 social subscribing slide out widget into blogger:

Go to blogger.com.
Log-in to your account.
Then go to layout >> add gadget >> HTML/Javascript and paste the below code.

<style>
img,a {
    border: 0;
}

#on {
    visibility: visible;
}

#off {
    visibility: hidden;
}

#facebook_div {
    width: 196px;
    height: 340px;
    overflow: hidden;
}

#twitter_div {
    width: 246px;
    height: 353px;
    overflow: hidden;
}

#google_plus_div {
    width: 152px;
    height: 97px;
    overflow: hidden;
    margin-left: 50px;
    margin-top: 10px;
}

#knfeedburner_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
    margin-top: 5px;
    margin-left: -4px;
}

#kakinetwork_div {
    width: 300px;
    height: 97px;
    overflow: hidden;
}/* right side style */#facebook_right {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    right: -200px;
}

#facebook_right img {
    position: absolute;
    top: -2px;
    left: -35px;
}

#facebook_right iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    left: -2px;
    top: -3px;
}

#twitter_right {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    right: -250px;
}

#twitter_right_img {
    position: absolute;
    top: -2px;
    left: -35px;
    border: 0;
}

#google_plus_right {
    z-index: 10003;
    background-color: #F2F2F2;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-right: 2px solid #0056a0;
    border-left: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    right: -154px;
}

#google_plus_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#feedburner_right {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-right: 2px solid #5b5b5b;
    border-left: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    right: -303px;
}

#feedburner_right_img {
    position: absolute;
    top: -2px;
    left: -33px;
    border: 0;
}

#kakinetwork_right {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_right img {
    position: absolute;
    top: -2px;
    left: -101px;
}/* left side style */#facebook_left {
    z-index: 10005;
    border: 2px solid #3c95d9;
    background-color: #fff;
    width: 196px;
    height: 353px;
    position: fixed;
    left: -200px;
}

#facebook_left img {
    position: absolute;
    top: -2px;
    right: -35px;
}

#facebook_left iframe {
    border: 0px solid #3c95d9;
    overflow: hidden;
    position: static;
    height: 360px;
    right: -2px;
    top: -3px;
}

#twitter_left {
    z-index: 10004;
    border: 2px solid #6CC5FF;
    background-color: #6CC5FF;
    width: 246px;
    height: 353px;
    position: fixed;
    left: -250px;
}

#twitter_left_img {
    position: absolute;
    top: -2px;
    right: -35px;
    border: 0;
}

#google_plus_left {
    z-index: 10003;
    background-color: #006ec9;
    border: 2px solid #006ec9;
    border-top: 2px solid #0056a0;
    border-bottom: 2px solid #0056a0;
    border-left: 2px solid #0056a0;
    border-right: hidden;
    width: 152px;
    height: 97px;
    position: fixed;
    left: -154px;
}

#google_plus_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#feedburner_left {
    z-index: 10003;
    background-color: #fefefe;
    border: 2px solid #5b5b5b;
    border-top: 2px solid #5b5b5b;
    border-bottom: 2px solid #5b5b5b;
    border-left: 2px solid #5b5b5b;
    border-right: hidden;
    width: 300px;
    height: 97px;
    position: fixed;
    left: -303px;
}

#feedburner_left_img {
    position: absolute;
    top: -2px;
    right: -33px;
    border: 0;
}

#kakinetwork_left {
    z-index: 10003;
    border: 2px solid #303030;
    background-color: #fff;
    width: 300px;
    height: 97px;
    position: fixed;
}

#kakinetwork_left img {
    position: absolute;
    top: -2px;
    right: -101px;
}

.box-title1 {
    border: 1px solid #ddd;
/*border-radius*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
/*box-shadow*/
    -webkit-box-shadow: 5px 5px 5px #CCCCCC;
    -moz-box-shadow: 5px 5px 5px #CCCCCC;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding: 10px;
    margin: 10px 0;
}

.enteryouremail {
    background: #fff !important;
    border: 1px solid #d2d2d2;
    padding: 0px 8px 0px 8px;
    color: #a19999;
    font-size: 12px;
    height: 25px;
    width: 165px;
/*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin: 0px;
}

.submitbutton {
    background: #F2F2F2;
    border: 1px solid #F66303;
/*box-shadow*/
    -webkit-box-shadow: 3px 3px 3px #666;
    box-shadow: 3px 3px 3px #666;
    font: bold 12px Arial, sans-serif;
    color: #000000;
    height: 25px;
    padding: 0 12px 0 12px;
    margin: 0 0 0 5px;
/*border-radius*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    cursor: pointer;
}
</style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOEdusvy9MUJerYYTsa5OT3XxuhqTpAgCbMiyDewO3Rb9eQIfeig1F67jymFjzZknRBukuxPDl307t78sBGObYy3NbcIaGrYQ8Si53WLS-R-hWaKXdy4W9Dafmga8TXvbHDbdFJ9F174U/s1600/fb.jpg" alt=""/>
   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR-FB-Page-URL&width=200&height=346&colorscheme=light&show_faces=true&border_color&stream=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">
   </iframe>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 35%;">
<div id="twitter_div">
   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAYEShPmpoCrOXohNzwLJHlokHHatjHsWiXighWTZk_1_rHhPtE8FNScOK3aOOjmP5Ts0B6tk09alqV3t5tJINbPCkCagb-VhJQ29ofGGL_fUqkIxw_biXuo8wNvSr7QocyiK1h7d_DxY/s1600/twitter.JPG"/>
   <script src="http://widgets.twimg.com/j/2/widget.js"></script>
   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('your-twitter-url').start();</script>
</div>
</div>
</div>
<div id="on">
<div id="google_plus_right" style="top: 52%;">
<div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNrmqmjIwN90wsWAitLFbYjC0UKEysN2ZVAg4hg3bnZV4xKj7e4LG_tY7mHcdurjhDLm1YVax9Wo4kCQ1dEKhZ6T1Wuytc4vEK7FE-FpQjqZdrRwzICy-RBcjVBsCIaca4xLEub_6qV1Y/s1600/google.jpg.bmp"/>
   <div style="float:left;margin:10px 10px 10px 0;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
   </div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
   <div id="knfeedburner_div">
    <center>
    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>
    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('Your-feed-url', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text"/><input value="Muhammadaseel" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>
    </form>
    </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH1gOI2Caef8dsN2OLs5dxKzTrCo3PVSvL0zftwDxALUjxQULgsioc7HuLyKvQBqtxzQaFkJBOJXPbDdOA7Iqt2uXtWgsXfFKuatP4_9dWj1cFmdvMw-cXjJ1gkHnQZ8bmH43zzBF39E4/s1600/subscribe.bmp"/>
   </div>
</div>
</div>
</div>

Change YOUR-FB-Page-URL with your face book fan page
Change your-twitter-url with your twitter url
change Your-feed-url with your feed burner url
Now click to save and done.

You Might Also Like:

Add hover effect social media icons widget to blogger

Hope you like this article and have any trouble in adding 4 in 1 social subscribing slide out widget into blogger feel free to leave your complain in comment box.

How to add social media buttons widget (hover effect) to Blogger

2013-06-28T14:03:00.004-07:00

Start with the name of Allah who is most merciful, Social media buttons make your blog more attractive and gorgeous. Social media buttons help in increase your social followers and when social followers increases then automatically blogger visitor increase. Most blogs have high visitors and the reason is, they catch visitors from social sites.

Live Demo!!

Add social media buttons with hover effect to Blogger

Go to Blogger.com.
Login to your blog.
Then go to template >> customized >> advanced >> add CSS and paste the following below code to CSS area.

.hovereffect:hover
{
width: 250px;
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease;
}

Then click apply to blog.

Now go to layout >> add a gadget >> HTML/Javascript and paste the following below code in HTML area.

<a href="facebook.com"><img class="hovereffect"src="http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx" width="150px" height="150px"
onmouseover="this.src='http://www.fwccworld.org/css/images/facebook.jpg'"
onmouseout="this.src='http://t2.gstatic.com/images?q=tbn:ANd9GcRH873-Q1et_jYIXszW82jAIz5hJPGTDeNYwFCO2zV4KfdagLUx'" /></a>
<a href="plus.google.com"><img class="hovereffect"src="http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg" width="150px" height="150px"
onmouseover="this.src='http://www.pearse-trust.ie/Portals/43760/images/Follow%20Pearse%20Trust%20on%20Google%20Plus.jpg'"
onmouseout="this.src='http://www.technewspaper.net/wp-content/uploads/2013/05/google1.jpg'" /></a> <br/></a>
<a href="pinterest.com" target="_blank"><img class="hovereffect"src="http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png" width="150px" height="150px"
onmouseover="this.src='http://mommyedwards.com/wp-content/uploads/2013/01/follow-me-on-pinterest-v01.jpg'"
onmouseout="this.src='http://www.shoutlet.com/blog/wp-content/uploads/2013/03/pinterest_badge_red.png'" /></a>
<a href="twitter.com"><img class="hovereffect"src="http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H" width="150px" height="150px"
onmouseover="this.src='http://www.twittericon.com/wp-content/uploads/2010/08/glossy-cute-blue1.png'"
onmouseout="this.src='http://t1.gstatic.com/images?q=tbn:ANd9GcTME0j5vvmTav1_EAhLtE84zVUbm7Q6St6YMI50Q_wXfns2C46H'" /></a>

Customization

Change Facebook.com with your Facebook page url.
Change Twitter.com with your twitter url.
Change plus.Google.com with your Plus Google url.
Change Pinterest.com with your Pinterest url.

Click to save and social media buttons with hover effect has been applied to your blog

Is the social media buttons with hover effect bug to your site or blog? Like this:

Don't worry I have also solution for this problem just copy all the images and save these pictures to your PC and then upload it to your blog and then replace all the images link with your uploaded pictures link. Hope social media buttons with hover effect will work properly.

How to add CSS hover effect social media buttons widget to Blogger

2013-06-28T13:56:00.000-07:00

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ

Today I will tell you that how you can add CSS hover effect social media buttons to Blogger. You can also see in this picture that when I hover my mouse to these buttons they increase their width. This CSS hover effect social media buttons will also help you increase your social media followers. Yesterday I published an article about How to add social media buttons with hover effect to Blogger, but this CSS hover effect social media buttons widget is different. Click this live demo button to see CSS hover effect social media buttons.

Live Demo!!!

To add CSS hover effect social media buttons to Blogger you just need to follow some steps

Add CSS hover effect social media buttons to Blogger

Go to blogger.com.
Sign in to your blog.
Go to template >> customize >> add CSS and paste the following code:

#Ma1
{ color: transparent; font-size: 15px; font-family: "Bold"
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma1:hover { color: red;
background-color: blue;}
#Ma1 img{ width: 100px; height: 50px; }
#Ma1 img:hover{ width: 150px; }
#Ma2
{ color: transparent; font-size: 15px; font-family: "Bold"
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma2:hover { color: red;
background-color: #00FFFF;}
#Ma2 img{ width: 100px; height: 50px; }
#Ma2 img:hover{ width: 150px; }
#Ma3
{ color: transparent; font-size: 15px; font-family: "Bold"
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma3:hover { color: blue;
background-color: #FF0000;}
#Ma3 img{ width: 100px; height: 50px; }
#Ma3 img:hover{ width: 150px; }
#Ma4
{ color: transparent; font-size: 15px; font-family: "Bold"
-webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; -o-transition: all 2.5s ease; }
#Ma4:hover { color: red;
background-color:#00FF00;}
#Ma4 img{ width: 100px; height: 50px; }
#Ma4 img:hover{ width: 150px; }

Click apply to blog.
Then go to layout >> add a gadget >> HTML/Javascript and paste the following below code:

<div id="Ma1">
<a id="Ma1" href="YOUR_FB_URL"><img src="http://www.logomyway.com/logos_new/2828/thumb/facebook_logo2.png"><p>Like Us On Facebook</p></a></div>
<div id="Ma2"><a id="Ma2" href="YOUR_Twitter_URL"><img src="http://1twp.com/1twp-img/twitter.jpg"><p>Follow Us On Twitter</p></a></div>
<div id="Ma3"><a id="Ma3" href="YOUR_pinterest_URL"><img src="http://tblc.org/wp-content/uploads/2012/03/Pinterest_Logo.png"><p>Follow Us On Pinterest</p></a></div>
<div id="Ma4"><a id="Ma4" href="YOUR_googleplus_URL"><img src="http://cdn.ninjamarketing.it/wp-content/uploads/2012/07/come_unire_due_profili_googleplus.jpg?3f3a34"><p>Follow Us On google plus</p></a></div>

Change YOUR_Fb_URL with your Facebook URL.
Change YOUR_Twitter_URL with your Twitter URL.
Change YOUR_Pinterest_URL with your Pinterest URL.
Change YOUR_Googleplus_URL with your Google plus URL.
Click to save and CSS hover effect social media buttons has been applied to your Blog.

Have any trouble to apply CSS hover effect social media buttons to Blogger just tell your problem via comments and I will soon give your problem solution as soon as possible.

How to add stylish social sharing buttons below every post in blogger

2013-06-28T13:50:00.000-07:00

السلام عليكم و رحمة الله و بركاته

Today's topic is that how to add stylish social sharing buttons below every post in blogger. Social sharing buttons is the basic part of a blogger. This social sharing buttons help you increase your blogger publicity and when your blog visitors likes your content so they have to share your article with their friends so they look for social sharing buttons to share your article and below every post add social sharing buttons is the best thinking so that's the reason I share an article about how to add stylish social sharing buttons below every post in blogger. Click demo button to see the demo of stylish social sharing buttons below every post.

Live Demo!!!

Related Articles:-

Add stylish social sharing buttons below every post in blogger

Go to blogger.com.
Sign in to your account.
Then go to template >> edit HTML >> now find the following below code.

]]></b:skin>

and paste the below code just above ]]></b:skin>.

.Ma5 img{ width: 45px; height:45px; float: left; border: 5px solid #ccc; margin: 2px; -webkit-transition: margin 0.5s ease-out;

-moz-transition: margin 0.5s ease-out; -o-transition: margin 0.5s ease-out; }
.Ma5 img:hover { margin-top: -8px; zoom: 50px; opacity: 0.5; -webkit-transition: transition: opacity .15s ease-in-out}

Now find this code <data:post.body/>.
And paste the below code just above the above tag.

<b:if cond='data:blog.pageType == "item"'><b:if cond='data:blog.url == data:blog.homepageUrl'><div class='Matext2'><span style='color: red;'><u><i><span style='font-size: 30px; text-decoration: blink; opacity:10.5; border-radius:10px;border:10px solid #EE872A;'><b>Share This with your friends and others</b></span></i></u></span></div>
<br/>
<div class='Ma5'>
<a expr:href='"http://www.Facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-J2DqyrKTG4_DZ-4d0qTJPVG8YxxL4TKRkVtBCIlloyBgUu-I-boxeLpO4kPujviB5JDcj4gp7Kotp-TG7qArawcUppWqexpKolesy4uAMZ0SyYKhjdQJCRgrCnBpVHK6_tKN3KAob4/s50/facebook.png' title='facebook'/></a>
<a expr:href='"http://www.twitter.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-4vT6LZaM_zP32dh7oKuGH5DjtVV8eCmQMapz_cWgE9I_zonoK6PscZtnZYq-PTa5UbEkCesRKWiogs8k_5nbFQs_BL-89x6TaMkCNkGSaK3OsUJSmmtgV3s4lT4A1rk9OvRMaGkjrM/s50/twitter.png' title='twitter'/></a>
<a expr:href='"http://www.plus.google.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIV68n-sTXxyuVRHJaPqdHSzYbUdICGZChe5gN21sdT1GftG5gIT_BscZI1G4O_1z3PEyTB-kSwxHip-gqow1CElpQaHO8_aaS09A3p_5RhNNyRzsaX9AFD4h7pTGwXeJ0xTZ2j_kjVK0/s50/google%252B.png' title='google'/></a>
<a expr:href='"http://www.pinterest.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGu80k6IndKdyqoB90wXlyG1HbMyHdEufOfuZtzribQ89vq-d1Hl5od5paNpV2otpQx8MN8_gwpfHNfdWfIGTcbrWws-Oi14tuBzpCpQFNIFEnEOkJFyEDhiLYKVtse2l55Ahz0G9GqkI/s50/pinterest.png' title='pinterest'/></a>
<a expr:href='"http://www.stumbleupon.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvO80n2SuST14DmBV4bg6HYNPKfAyGrmIn5_yUYG2kiJNcnWxQiscZTUSqx40bjxmxXxPyI65BIyi4c93HfL5P_bCXMRJJIZ5WkoYUmsrmFU7mFVpanedX-NlzoKNQ38QS_yzjrRALSoo/s50/stumbleupon.png' title='stumbleupon'/></a>
<a expr:href='"http://www.Delicious.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikX10Cdvlj5RcsuUo7Zj5YSVzkDZtzv3fQAKiScMcEg8JCZkjULqKpaGDczV1lG4wyWgK0zT0SeP0pfr0fF-bOCU1PzU1eX5e2T_uSfthnSrJ-UT2MPdZ11AxEk_Ypcg0ENW0JEXMAxZI/s50/delicious.png' title='delicious'/></a>
<a expr:href='"http://www.Linkedin.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdRA__cMRfaCYkI5rLnXlTOwezZnKrN0k4luDlQbmfBGffTOjG1yie7FPdZAMxkhXmTFN0tjks1asXYjpfDe4C1k1AqjlYzkobGm4XJsccLGQYSNuoUInojFuexx_5ARV6VffeojDV55I/s50/linkedin.png' title='linkedin'/></a>
<a expr:href='"http://www.reddit.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7sRr4PnF6Qx_4gy4OoVpdCfwT5S_DL6C4nyRjwUk_4x3r1hksSMHrG1t8aipRhbP8CT_4SOwEKkvjAi0UDSaGcyubptDu6dgqvXx68txUUdfCtb2I7x8v3evvp3E4v640o14IVajiQtc/s50/reddit.png' title='reddit'/></a>
<a expr:href='"http://www.technorati.com/share.php?v=4&src=bm&u=" + data:post.url +   "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436');   return false;' rel='nofollow'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtCNu1RCj12pzhuYAikGMyw-O3uzStVV63Fh9F4gfR69pscuIfYUB27hy86GDFkr5jxd2nAA2apI41S7pLqYpK4HxM0w33dS9t-vk2ZCQ-8EHnC0Fa3krbHXSlhUODsT0or_fRLsJ6LhAG/s1600/TBI-technorati.png' title='technorati'/></a>

</div></b:if>

Click to save template and stylish social sharing buttons below every post in your blogger has been added.

Is having any trouble in adding stylish social sharing buttons below every post in blogger so please tell your problem in a comment box I will soon solve your problem. Thank you.

How to make a CSS button

2013-06-28T13:46:00.000-07:00

Today I am going to tell you that how to how to make a button in CSS. If your blog is about to download anything then, this button will help you too much after too much of hardworking I made this button in CSS which you like most. Want to make a CSS button so don't worry you just want to do some easy steps and you will be done in adding CSS button to your blog.

You might also like:

Add stylish social sharing buttons below every post in blogger

Make a button in CSS

Go to blogger.com.
Sign in to your account.
Now go to template >> edit HTML.
And paste the below code just above the code ]]></b:skin>.

.center
{
font-family:"Times New Roman",Times,serif;
background-color: red;
margin:auto;
width:70%;
font-family: "bold"
color:green:
overflow:auto;width:150px;height:auto;
background :red;
border : 50px solid #EEEEEE;
border-left:43px solid #000;
border-right:43px solid #000;
padding : 2px 2px 3px 2px;
-webkit-transition:all 10.0s ease-in-out;-moz-transition:all 10.8s ease-in-out;-o-transition-duration:all

10.8s ease-in-out;transition:all 1.3s

ease-in-out;-webkit-border-radius:2px;-moz-border-radius:13px;border-radius:13px;
-moz-border--moz-border-radius: 80px 80px 80px 80px;border-radius: 90px 90px 90px;
-webkit-box-shadow: 90px 90px 80px rgba(90, 90, 90, 9.3);
-moz-box-shadow: 90px 90px 90px rgba(90, 90, 90, 9.3);
box-shadow: 20px 20px 20px rgba(90, 90, 90, 9.3);
}

.center:hover{
background : blue;
border : 61px solid #EEEEEE;
border-left:20px solid #ffffff;
border-right:20px solid #ffffff;
-webkit-box-shadow: 90px 90px 190px rgba(90, 90, 90, 120.3);
-moz-box-shadow: 90px 90px 190px rgba(90, 90, 90, 9.3);
box-shadow: 0px 0px 10px rgba(90, 90, 90, 9.3);
}
a { color: green;}

Click to save template and add this below code where you want to add the CSS button:

<div class="center ><h3 style=" left="" text-align:="">
<span style="font-family: Times,"Times New Roman",serif;"><span style="color: green;"><u><i><a href="YOUR_URL"><h3>
<span style="font-family: Georgia,"Times New Roman",serif;"><span style="font-size: large;"><center>YOUR TEXT HERE</center></span></span></h3></a></i></u></span></span></div>

Just change YOUR TEXT HERE with your text and Change YOUR_URL with your url

Hope you like this CSS button and please share this CSS button with your friends.

Add hover effect social media icons widget to blogger

2013-06-28T13:26:00.001-07:00

Today's topic is that how to add hover effect social media icons to blogger. Yesterday I shared an article about how to make a CSS button. I also shared many articles about social media buttons that you like most. You can also see in this picture when I hover my mouse to that black icons it will change their colors. To see the demo of this hover effect social media icons click to the demo button.

Demo!!!

Hope you like this hover effect social media icons and to add this hover effect social media icons just follow below steps.

Add hover effect social media icons to blogger

Go to blogger.com.
Sign in to your account.
Go to template >> edit template.
And paste the below code just above ]]></b:skin> tag.

.Mafacebook
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ4Ghdy6vI3CQipsUmbfzq3VXbG-hP_xrfW44uBrcPjIyjAVwzADmHKhEppQce_ABRo7PQuuC5KPufG0uKDdCVbXuJE6M47qFUgt4R5ZywjUE7CY7jE4vK1vmrxDm59Bf1sfTrkI0QOpvO/s1600/facebook_dark.png');

     height: 65px;
     width: 65px;
     display: block;

}

.Mafacebook:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGkYeLmGU7PQScBrcEcOHMTcnK-Zsuo9n9BDUh3saf8dbYfcDp-sFtXMFPZkTOgwOSuf2UNPkg-618NmxfNgx6UA8KesKQay-jzJ61e1jWLjNKeFpWFzcUxR83nmoVa7XDLlTYFL-qMfYM/s1600/facebook_active.png')

}

.Matwitter
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidRC1aB93M_HqJvmPlK9fUaK4-A8zluScj15T7MunnMLq8BpZEKPj_ikIxt3HtZdydFDxKjpv62HDCCyhYwnkQki2Fxv5u_7JbaAbYL1qc5P1I9BX_iFc_DqbfScGfHqdEnxToMeObyQZF/s1600/twitter02_dark.png');

     height: 65px;
     width: 65px;
     display: block;

}

.Matwitter:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmXKbJzsWmH9JtIu3uNLpvy59obKEYU4njjDR_ZJ1i79rmYxHOoWDpG92YLJMxtVivNBGHCo3ZntJtGHunvr_FJSlUO2Gbad6JmSRao0GEy1MgQ2P9RfG9NfVFPtRTGIk7ODhD4z2Y97Z/s1600/twitter02_active.png')

}
.Mapinterest
{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-rqzHqVZTkWsUNoq8ktFca92st7WpvMwLcfC6TwJbfDlgn0sOf6wKAEwD14ija7Ms7A_x2TL-pMtYo0AKcgzXMogodibqi4Iaweb-YPVNWpmy5Ep5Iymk1MlqKndzRzMUbjfnTIKKLG4/s105/pinterest_icon.png');



     height: 65px;
     width: 65px;
     display: block;
}

.Mapinterest:hover
{
    background: url('https://addons.cdn.mozilla.net/img/uploads/addon_icons/428/428922-64.png?modified=1365933367')

}

.Madelicious
{
     background: url('http://www.horizonsend.com/img/icons/delicious-dark.png');

     height: 65px;
     width: 65px;
     display: block;

}

.Madelicious:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEichJAibFP8V438sLm0e4nbUNLLIsBo1px1yOR2gdZ98D6A6WBCOr9iuSPBRp4f63vOqlO-GzFq_ljw0t-AcMdXd5LXWbbRLhnszfB8PpBVbpO_MzddzHSA5CJu8Zg6kU_QQdSOg-s_HQSU/s1600/delicius_active.png')

}

.Madigg
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-r5R831iYGIvgrUPQOqsI6mon5WzVsetHloN3DPmEKdXsnhhG4L5exOREY-m2dA4wFmT5FnB6Tjxp9WwFKiNbbMHfpUIrAk09cfvH3roTZLW59lNopJ8uX87vaMwbN9fpDAamKXKzjEYC/s1600/digg_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Madigg:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhekIGnuM0OPRP9KKb1ygs9mEc0gL1jZA2CkBR0DVzw1_-9AsFnRoeGMiAQwkZoAcfr_OeHKC-UXPqb5VKDcYfFvKSIh7HK-ygeB0U5mLCSiQCpzn3nkOE-QhEMHcCZuC1iD1zX5x21Bmy-/s1600/digg_active.png')

}

.Madribble
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfnMeHPutF44-e2Y5-Z5Aff6KeiY32m33FqPzMfPy10-Foj9gdIAdj7CkmRg9x6fpdVuz0FsRLxTVBowrUOo340Zcbt7gUAVrU1AWGCFoE3SLCaCjkRADRZJ-mlt6Hl4bdWjuC-Qe8a2A0/s1600/dribbble_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Madribble:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwmWlbyNWJzdwVpRgjJnoBmIGenykWT0sELLMqS6352uamfgxskSTUeEULhNLZCQwMdppgCJsYtrjWgvUqA60Sap3v00dCSfbco8g_3zC1DdMOyKPTM9u0rgGGF_qTTYaRe9mVMAxEN0kU/s1600/dribbble_active.png')

}

.Malinkedin
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQN3QtZg2fm6YrbIPLqjl9BCCeKtMiQ5AdcKQA8GycGEvzMXEqs3SdMNWgD2jSWIJlNvoHaQA568mQrOJ3J7fWJqKmvrfSafgWGtaLIHEVola7f1gXJW3bCZpJVZ90Z8k1t2Bb2OmqhYGt/s1600/in_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Malinkedin:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNyZSVMQZa-lyF-acFhBZILzSZFx1EV4hkDX3AYVYI4lEQqHmvZ1ToXQQR83ZU_vK9luUBZM233ZDzrB7bX_FS6Artz1YRgbqnbyoAjsveJyAqg_GCSNTczdYGBDiaF0_X8kArBYLk6uSW/s1600/in_active.png')

}

.Mareddit
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhn-LtApdHyD9gWV3Z5m9iW4X6vngVzf7EL8MElI_BPG0meI6gtyTBdlQ30miP3dGf_faxOo3HIeW-JCqeMprXTRHO4wDucwwfHQ3nPFSRSATnXJcAlPtmKNd6Wb2V5s0kFwu_BCzW-vFo9/s1600/reddit_dark');

     height: 65px;
     width: 65px;
     display: block;
}

.Mareddit:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNpAs3t2kGWytnZS2DIWISxhItRZvAb_cCDypmvdDs8CkpNE_tJjkFqOFXUbrM83TEz2dEhDxvUftFJiaJXLEeV2xJkvSXop-LwCZRnUAXvKlgtPOZIzI_jd6WBakBDm8I-qnSpauXcDWT/s1600/reddit_active.png')

}

.Mastumbleupon
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc5_FnTdqeaxQ9VAq4XjXXg1pnARWEtbb7sLVr9tUPsLp7VUZqi3eCA0jDEpoJ9iSGYyHHxn2V1yFjF_LoYRRnhK_MB-Q6PWSh_wCYkcCjujBvGtCCn0nkpdZ5TZhYAZpukPWx5BfirFxl/s1600/stumbleupon_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Mastumbleupon:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_nAtWaMpgE8UhRe-pmMnYpLjQy3E6-FXW6Yf4yH_SmQ3Qwe2YNvdnfSyBPWsbb7N6jcXrmwmrrhiMd-CCdxbvo2cPkXtPZWUg01lwYJuKjEF7eKQQHvYKKESuLO4EYeMyzoe5jWdFbs4A/s1600/stumbleupon_active.png')

}

.Matechnorati
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3niNU9B6cnpFLSQv7ePbUdGDkJGjUuuCELY3brJcSUqzdPZAmFEqElKfcISmu1FpcAywDYyxsTh9Z28-SeP9TT29CBbN9hB-jSIf02PcDTFp5XypUAi2PAJy2PP9BXXTIwKK_OdKq__n1/s1600/technorati_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Matechnorati:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioePHGMe3yprdAQlZ8mT9-716EyWoHjzCQVJwyfotipqOdtrzzwDV3rI_t9Vu4VBoqiE7rdaIUpXnslBzwVfJC5-DwI0wevUuLferysN1BbmdhP2eGAfpxM7yIJ93pRzHPcpouuE45LlNV/s1600/technorati_active.png')

}

.Matumblr
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih2FUDRqa7Ir2vyJ7rNcoXpY-teEshxZJl8mgw11Z4-qH2H475dLZ8Ph6IFSRqVKufK6iBFwOYq5iQQhllZbf3PxOfMVhirO3zTm8IzSmd0DQxA6ImMOXDSgVzDBPURewcfoSx57pkY0Ng/s1600/tumbrl_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Matumblr:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkhpBz-CjgugzrzDhIMauo181ru3Crif58q1ha6ZMUpKUQqWn5SIVTHV_5Ev2cXMI_XZs49uDxgrVHfs7XYArROZ9NfNRBTRe5u6JC0DGohzAgrCRM5WchN3umzVNGYXzGmv1tSbnRUvZG/s1600/tumbrl_active.png')

}

.Mayoutube
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxeDvsNTVZK78Thwq0oLhKs-C6P7w8RLVRznod2eEScdy4NSR01SWUG9PouunX-Kmvw8_jUApU1jywtam2fzMb047aG0xe7Auba4rLEJvLOaHpASreZG_2zN19XK63j3cUm5Pfsm5yf6nN/s1600/youtube_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Mayoutube:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXc2cVQwWuSs7D_9RuNlGCq4cjxUX-DSyIFKmpzzsB9b3ZDgwlrCaIxQHHJkiYs8ZztC_iapoKVfaEDQRZkpTx22PC5zkCmhrgdIbSKjDPEAhJZiqaUnx9lSAkhu82MPgdAmAGYvt87JYY/s1600/youtube_active.png')

}

.Marss
{
     background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtnGFvGmfEVGw9_qrPmfznQhhQ_ztG0bERbeph5Us6SR-DXzA4a05mh6jQrcs871KxApWrHdOw_3Pfs0lGZb3VrTCuJrTIPDckZa9-BsiafRgL8qGuYNTdur2j3IjCcWwuUKsX6yOBYDN/s1600/rss_dark.png');

     height: 65px;
     width: 65px;
     display: block;
}

.Marss:hover
{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPizzu4ZrFDzXD_zalwtyomAU8dBB9Axu4Scz4VEWXSgpjSHzBENNt-kM5tmYsF6bMmne-BtDKeEG_-fR43UOAvMMfzDqvOMd1QwEea_CpCnPLjAvz03QP9kA8hqsGq3lVp3u-Jm01ma0D/s1600/rss_active.png')

}

Now click to save.
Now go to layout >> edit HTML >> and paste the following below code:

<a class="Mafacebook" href="http://facebook.com/YOUR_URL"></a>

<a class="Matwitter" href="http://www.twitter.com/YOUR_URL"</a>

<a class="Magoogleplus" href="http://www.plus.google.com/YOUR_URL"</a>

<a class="Madelicious" href="http://www.delicious.com/YOUR_URL"</a>

<a class="Madigg" href="http://www.digg.com/YOUR_URL"</a>

<a class="Madribble" href="http://www.dribble.com/YOUR_URL"</a>

<a class="Malinkedin" href="http://www.linkedin.com/YOUR_URL"</a>

<a class="Mamyspace" href="http://www.myspace.com/YOUR_URL"</a>

<a class="Mareddit" href="http://www.reddit.com/YOUR_URL"</a>

<a class="Matechnorati" href="http://www.technorati.com/YOUR_URL"</a>

<a class="Mastumbleupon" href="http://www.stumbleupon.com/YOUR_URL"</a>

<a class="Matumblr" href="http://www.tumblr.com/YOUR_URL"</a>

<a class="Mapinterest" href="http://www.pinterest.com/YOUR_URL"</a>

<a class="Mayoutube" href="http://www.youtube.com/YOUR_URL"></a><a class="Marss" href="www.yourrssfeedurl.com"></a>

Now change all YOUR_URL with your own.
Click to save and hover effect social media icons has been applied to your blog.

Super Seo

2013-06-28T05:36:00.000-07:00

Demo Download

Password: onlinebloggertricks.blogspot.com

Description: Super SEO is free Not defined template. Super SEO Not defined theme is very good for websites. Super SEO have some features like . You can download Super SEO at Not defined Templates Gallery.

Adsosive blogger template

2013-06-28T05:31:00.000-07:00

Descriptions:
Adsosive is beautyful responsive blogger template layout with many future. It's 2 columns and right sidebar the color is blue, white and grey with top navigation menu, tab widget siderbar, JSON search result, custom lightbox, social icon, emoticon and more.

Demo Download

Password: onlinebloggertricks.blogspot.com

Features:
Adsosive is a free blog template with type : 2 column, Blue, Fluid Width, Grey, Premium, Responsive, Right Sidebar, Slider, Social Media Icon, Tabbed widget, Top Navigation Bar, White

Avada blogger template

2013-06-28T05:25:00.000-07:00

Template Name: Avada Blogger Template
Platform: Blogger / Blogspot
Release date : 31, December 2012
Author : www.onlinebloggertricks.blogspot.com
License : Creative Commons Attribution 3.0

Demo Download

Password: onlinebloggertricks.blogspot.com
Avada is so flexible, clean and has fully mobile responsive design (Try resizing the page of your browser). Built with CSS3 and Lightweight Blogger XML, a lot of hard work went into making Avada a pleasure to use. Avada has with a bucket full of features and has powerful customization options. It’s extremely nippy and easy to customize. This theme’s has clean modern design, which could decorate any kind of website; portfolio, corporate, business, blog, products, etc.
Features of Avada Blogger Template:

WordPress Look: This Blogger theme has fresh and elegant Look that is adapted from WordPress. We are sure your visitors would adore this Template.

Responsive Design: It has responsive design that supports different resolutions i.e. iPad, iPod, Android and etc. (Try resizing the page of your browser and see the magic).

SEO Friendly: This Blogger Template is SEO-friendly because it is pre-optimized for Search engines. According to Google Page speed it has obtained 93 score out of 100 which is indeed overwhelming for SEO.

Drop Down Menu: We have also added a Drop down (Sub menu) that works splendidly well. There is no jQuery associated to this Drop down Menu. Therefore, it’s ultra-fast.

Auto Thumb with Read More: It automatically displays Small Thumbnails, a little summary of content and read more buttons on the Homepage.
More Features: 1 Sidebar, 2 columns Blog Layout, 3 Colum Footer, Fixed Width, Light Greenish Color Scheme, Threaded commenting system and much more.
How To Customize Drop Down Nav Menu?

To customize drop down menu of this blogger template Go to Blogger >> Template >> Edit HTML >> Proceed >> then Search for the following HTML Coding and do changes according to your desire needs.
<nav class='nav-holder' id='nav'>
<ul class='menu' id='nav'>

<li><a href='http://www.onlinebloggertricks.blogspot.com/'>Home</a>
<ul class='sub-menu'>
<li><a href='#'>Home Version 1</a></li>
<li><a href='#'>Home Version 2</a></li>
<li><a href='#'>Home Version 3</a></li>
</ul>
</li>

<li><a href='#'>Sliders</a>
<ul class='sub-menu'>
<li><a href='#'>Revolution Slider</a></li>
<li><a href='#'>Layer Slider 3.0</a></li>
<li><a href='#'>FlexSlider</a></li>
<li><a href='#'>ThemeFusion Slider</a></li>
</ul>
</li>

<li><a href=''#'>About Us</a></li>
<li><a href=''#'>Contact Us</a></li>
<li><a href=''#'>Blog</a>
</li>
</ul>
</nav>
Adding Widgets Below/Above Posts:

If anyone desire to add widgets below/above posts of this theme, then he can follow the following instructions. (We have added this feature because many uses complains that Blogger Themes don't have user-friendly customization interface).

Go To Blogger.com >> Template >> Edit HTML >> Proceed and Search for the Following coding.

To Show Below Post Title:
<b:if cond='data:blog.pageType == "item"'>

</b:if>
To Show at The End of Posts:
<b:if cond='data:blog.pageType == "item"'>

</b:if>
Replace:
 To Show widget Below Post Title.
 To display Widget at the end of posts.
From The Designer's Desk:

This Theme is ideal for Blogs because it has all the sparks that are needed to run a Blogger community. The header of this theme is one of its kind. This is the reason, why it looks classy and elegant. Avada also has tons of marvel features which a person might discover when he would use this FREE Theme. What are your thoughts about this Theme? Suggestions and problems are more than welcomed.

Techroadies blogger template

2013-06-28T05:14:00.000-07:00

Password : onlinebloggertricks.blogspot.com

Demo Download

Password : onlinebloggertricks.blogspot.com

Password : onlinebloggertricks.blogspot.com

TechRoadies is a free blogger template best suited for tech, tricks and tips blog. It is clean and fresh blogger template for those user who want simple but an awesome design for there blog. Best thing about this template is that every post & widget are separated with a beautiful border with each other.

Features

3 column footer: We have added beautiful 3 column footer to this theme, it will help you to add more widget to your blog footer with an awesome layout.
Auto Read More: You don't need to insert jump break every time while writing a blog post, we have added a charming looking auto read more java plugin to this theme which will automatically arrange your post.
Relates Post: Turn one visitor into multiple pageviews thanks to the related posts widget that shows readers more of the content they love. Related post widget will also help you in improving your blog bounce rate.
Widget Less: We have added lot of awesome widget to this theme which will help you in many ways, Customize label cloud, elegant search box, popular post etc.

More Features: Numbered Page Navigation, Search Box, Adsense Ready, Social Sharing Buttons, Seo Friendly, Threaded Comment Style and much more.

Customize Drop Down Menu

Go To Blogger.com >> Template >> Edit HTML >> Proceed. Now search for the following coding in the template. After finding it Replace # with your URLs and Save the template.

<div class="menutop"><ul><li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#"> Portfolio</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Web Development</a></li>
<li><a href="#">Illustrations</a></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul></div>

Online Blogger Tricks | Blogger Widgets | Blogger Templates | Tips etc

How to check my content is duplicate

What is Duplicate Content:

Why we check our content is duplicate:

Duplicate content checking site:

Last Words:

2013 Eid with Online Blogger Tricks (2013 Eid Mubarak)

Introduction of what is Eid-ul-Fitr:

How to make a privacy policy page in blog or blogger

Make a privacy policy for your blog:

Conclusion:

Add read more button to blogger

Add read more button to blogger.

Customization:

Last Words:

Popular posts: add a customized popular posts widget to blogger

Adding a customized popular posts widget to blogger

Still remaining:

Last word:

Add a flap social media buttons widget to blogger

Adding a flap social media buttons widget to blogger.

Customization:

Last words:

Add drop down menu in blogger

Adding drop down menu in blogger

Customization:

Last words:

Sticky Bar: Add top sticky notification bar to blogger

Adding top sticky notification bar to blogger:

Customization:

Add auto hide social bookmarking widget to blogger

Adding auto hide social bookmarking widget to blogger:

Customization:

Last Words:

Send free sms in pakistan

How to send free SMS in Pakistan?

In the end.

Related Posts: Add Own Created Related Posts Widget With Thumbnail

Adding Related Posts Widget To Blog.

Customization:

Last Words:

Fade-in read more in JavaScript

Add fade in read more in JavaScript.

For Example:

Last words:

Blogger templates: Top 5 blogger templates for free

Top 5 Blogger Templates:

Kent blogger template:

Techroadies blogger template:

Avada blogger template:

Adsosive blogger template:

Super seo blogger template:

Last words:

How to remove or hide blogger Navbar

Advantages:

Disadvantages:

How to remove or hide blogger Navbar:

Which template can I use for my blog?

Templates main code:

Which Template Can I Use For My Blog???

Simple blogger template:

SEO optimized template:

Ads support template:

Conclusion:

How to add 4 in 1 social subscribing slide out widget to blogger

Add 4 in 1 social subscribing slide out widget into blogger:

You Might Also Like:

How to add social media buttons widget (hover effect) to Blogger

Add social media buttons with hover effect to Blogger

Customization

How to add CSS hover effect social media buttons widget to Blogger

بِسْمِ اللَّهِ الرَّحْمَـٰنِ الرَّحِيمِ

Add CSS hover effect social media buttons to Blogger

How to add stylish social sharing buttons below every post in blogger

Add stylish social sharing buttons below every post in blogger

How to make a CSS button

Make a button in CSS

Add hover effect social media icons widget to blogger

Add hover effect social media icons to blogger

Super Seo