How To Add Animated Buttons in Blogger

Animated Buttons For Blogger : Let's Do Something interesting , today we are going to share some beautiful style buttons which can be easily made by using CSS.Actually these buttons makes your "download links" attractive and stylish.For adding these buttons you have to add a Script in template HTML , so first backup your Blog Template and then implement this hack !

How To Add Animated Buttons in Blogger

• Go To Blogger
• Click On Template
• Edit HTML
• Search For  ]]></b:skin> 
• Copy the Below CSS Script and paste it above  ]]></b:skin>

CSS Script

.button {display: inline-block;position: relative;padding: 10px 20px;-webkit-border-radius: 8px;-moz-border-radius: 8px;border-radius: 8px;text-decoration: none!important;text-shadow: 1px 1px 0 rgba(255,255,255,0.4);font: 15px Calibri,Arial,sans-serif;white-space: nowrap;vertical-align: baseline;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png');background-position: bottom left;background-position: bottom left,top right,0 0,0 0;background-repeat: no-repeat;background-clip: border-box;-webkit-box-shadow: 0 0 1px #fff inset;-moz-box-shadow: 0 0 1px #fff inset;box-shadow: 0 0 1px #fff inset;-webkit-transition: background-position 1s;-moz-transition: background-position 1s;transition: background-position 1s;cursor: pointer;}
.button:hover {background-position: top left;background-position: top left,bottom right,0 0,0 0;}
.button:active {bottom: -1px;}
.button.big {font-size: 30px;}
.button.medium {font-size: 18px;}
.button.small {font-size: 13px;}
.blue.button {border: 1px solid #84acc3!important;color: #0f4b6d!important;background-color: #48b5f2;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1) ),to(rgba(89,208,244,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#4fbbf7),to(#3faeeb));}
.blue.button:hover {background-color: #63c7fe;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1) ),to(rgba(109,217,250,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#63c7fe),to(#58bef7));}
.green.button {border: 1px solid #96a37b!important;color: #345903!important;background-color: #79be1e;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1) ),to(rgba(162,211,30,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#82cc27),to(#74b317));}
.green.button:hover {background-color: #89d228;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1) ),to(rgba(183,229,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#90de31),to(#7fc01e));}
.orange.button {border: 1px solid #bea280!important;color: #693e0a!important;background-color: #e38d27;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1) ),to(rgba(232,189,45,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f1982f),to(#d4821f));}
.orange.button:hover {background-color: #ec9732;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1) ),to(rgba(241,192,52,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#f9a746),to(#e18f2b));}
.gray.button {border: 1px solid #a5a5a5!important;color: #525252!important;background-color: #a9adb1;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1) ),to(rgba(197,199,202,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#c5c7ca),to(#92989c));}
.gray.button:hover {background-color: #b6bbc0;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG5YW6fSSZknCR7W6D6vZBNkoULKIYAW2sUbEYjUNCPOsGsKolewVLy6m2niap0QIQN0Z03zE4qLgaICqOw-7jX1llm48lY6yUBW8bnaqmkPtbvrhUczJ-9GBEH4J_x8sY0n4z6moixI5a/s144/button_bg.png') ,-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1) ),to(rgba(202,205,208,0) )),-webkit-gradient(linear,0% 0,0% 100%,from(#d1d3d6),to(#9fa5a9));}

• After adding this CSS Script Save the template!
• Now Add any of the below HTML Code/Script in Post where you want to appear the Buttons.

 HTML For Large Size Buttons

<a class="button big blue" href="#">text</a>
<a class="button big green" href="#">text</a>
<a class="button big orange" href="#">text</a>
<a class="button big gray" href="#">Text</a> 

HTML For Media Size buttons

<a class="button medium blue" href="#">text</a>
<a class="button medium green" href="#">text</a>
<a class="button medium orange" href="#">text</a>
<a class="button medium gray" href="#">Text</a>

Customization : Replace # in the script(HTML) with the URL and Text with the Anchor Text .

So What's Up : Adding these Bubble Buttons makes your post more attractive and Cool.So if You Can why not implement it?Stay Blessed , Happy Blogging!

Show Post Titles Only On HomePage in Blogger

 This Tutorial will enables you to Display Posts Titles in a dwelling sheet along-with Comments Bubble on your Blog Home Page.These Titles are link with the original posts , the time One Click On Any title it brings him/her into the Specific Post.Moreover it makes your Blog Easy to navigate, so your Blog readers can easily navigate any post.Now How To Implement this Hack in Blogger, follow the below easy steps.

 How To Show Post Titles Only On HomePage in Blogger

• Go To Blogger Dashboard
• Click On Template
• Then Click On Edit HTML
• Search For </head> Tag
• Now Copy the Below Script and paste it Before </head> tag

<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

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

</style>

• Now Just Hit Save Template
• Now Go To Layout >>  Page Elements >> Click Edit >> Enter The "Number Of Posts On Main Page".

• Hit Save and that's it!

Cool Advertise Here Text with Hover Effect

Cool Advertise Here Text with Hover Effect: Keeping Affiliate and Link Selling in view the Ad which will be placed on your site should be an attractive One.Visitors really like creativity and awesomeness of any thing in Your Web Log,it is a common problem these days that every Blogger who Place ads in his/her blog is really a dull One.In This regards,we gonna help you to add a significant Style Advertise Banner which will surely help you to get some bounty from visitors and you will get alot of chances to get advertisement from different Companies.

How To Add Cool Advertise Here Text with Hover Effect

• Go To Blogger Dashboard.
• Click On Layout
• Click On Add a Widget at the Right Side-bar
• A Box will Pops-up
• Select HTML/JavaScript
• Copy the Below Script and paste it over there

<style>#text{-moz-transform:rotate(-5deg);-o-transform:rotate(-5deg);-webkit-transform:rotate(-5deg);color:#FFF!important;font-family:arial;font-size:60px;font-weight:300;letter-spacing:-5.5px;line-height:45px;text-align:center;margin:20px 10px}#text a{color:#333;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 7px #AAAAAA, -1px -1px #000;text-transform:lowercase;-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0}#text a:hover{-moz-transition:all .3s ease-in 0;-webkit-transition:all .3s ease-in 0;-o-transition:all .3s ease-in 0;-kmoz-transition:all .3s ease-in 0;text-shadow:1px 1px #000, 3px 3px #EEEEEE, 5px 5px #DDDDDD, 7px 100px transparent, -1px -100px transparent;color:transparent}inf{color:#d2a}#text a:focus,#text a:active{color:#eee!important;-moz-transition:all 0 ease-in-out!important;-o-transition:all 0 ease-in-out!important;-kmoz-transition:all 0 ease-in-out!important;-webkit-transition:all 0 ease-in-out!important}</style><div id="text" class="rent"><a href="URL" target="blank"><blink>&#8669;</blink> Here is a free space.<br />Contact <inf>α&#8574;мїη for more information</inf><blink>&#8668;</blink></a></div>

Note: Change "URL" to the link of the Page where you want to redirect the visitors when they click the ad.Now Just hit Save and that's it ! Ask any Question freely ;) We are here to Solve Your Problems,Happy Blogging!

Cool Advertise Here Text with Hover Effect
Last Reviewed by Iftikhar on July 31 2013
Rating: 4.5

How To Link Google AdSense And Google Analytics Accounts

It is necessary for you to incorporate Search engines AdSense Consideration with your Search engines Statistics.The Reward Factor is that you can quickly monitor the ad performance(i.e CPM,CTR,etc) of every web page of your Weblog without developing AdSense Programs.You Can See all details About your Blog/Website at Search engines Statistics.

How To Link Google AdSense And Google Analytics Accounts

• Go To Your Google Analytics Account and Login there(if you don't have any account create it)
• Once You enter into Google Analytics Dashboard >> Click On Admin Tab as shown

• Now There Click On The Site(URL) which You want to link with AdSense Account.
• Another Window will Pops-up >> Click On User Tab

• Now Click On New User Tab

• Now After these Steps add your AdSense E-mail Address which you want to Link with Google Analytics >> Give Administrator Permission to the entered e-mail.

• Now Logout from Google Analytics Account and Sign in to AdSense Account >> Click On Account Settings Tab

• Now Go To Access and Authorization Tab >> There Click Google analytic integration tab and Edit(Accounts Link).

• Now for linking Account Just Click On Link and for Unlinking Click Unlink Option !

• That's it ! Happy Blogging!

So What's Up : By Linking Google AdSense and Google Analytics Accounts You will get some extra information's about Your AdSense Earning and improvement or dropping in Earning.However for the best analysis I recommend "Linking Of Adsense Account with Google Analytics".

How To Link Google AdSense And Google Analytics Accounts
Last Reviewed by IfTiKhar! on July 23 2013
Rating: 4.5

How To Add Each Blog Post in Separate box

Add Each Blog Post in Separate box:-In many Blogger Templates you may have seen that there is not a separate box for every Post,but each post is completely shown as in Dynamic Blogger Templates.Here we will show you How to Add Each Post in a Separate Beautiful Box along-with many Color Schemes.Actually this hack can be applied by using CSS ,Applying this hack each post will be shown in a separate box and when ones hover mouse it will change the Border Color and When Again Hover it will automatically again change the Color.Now How to do it,Let me Elaborate it in some easy steps.

How To Add Each Blog Post in Separate box

• Go To Blogger.com
• Sign in There and Go To Blogger Dashboard
• There Click on Template
• Then Click On Customize
• After that Click On Advanced Option
• And Then Select CSS(i.e Add CSS)
• Now Copy the below Code and paste it over there.

.post {
background:#FFFFFF;
border: 2px solid #000000;
padding-right:7px;
padding-left:7px;
}
.post:hover {
border: 2px solid #FF0000;
}
.post:active {
border: 2px solid #0004FF;
}

• That's it

Customization :- If You are interested in Changing the background Color then Replace #FFFFFF with Your Own Color Code.And If you want to change the Border Color then Change #000000 #FF0000 #0004FF  to Your Desired Color Code

How To Add Each Blog Post In Separate box
Last Reviewed by The Gameron October 29 2013
Rating: 4.5

Easy Way To Create Sitemap For Blogger

Sitemap is a list of pages Of a Blog or Website which enables the Search Engine Crawlers to crawl the blog/website pages.Actually there are two types of Sitemap.

1. XML Sitemap
2. HTML Sitemap

XML Sitemap is actually a structured format which a user can't see i.e it may be in the coding of Template or hidden. But the bonus point of this Sitemap is they tell the search Engines for crawling the web pages while on the other side HTML Site-Map are specially designed for the users to enable them to find content on your Blog/website,this visitors and Search Engine Bots find the pages of such Site-mapped blog.

How To Create Sitemap For Blogger

• All you have to do is making a new page in your Blog
• After Creating a Page Click On The Pages
• And Then Click On The Page you have Created
• Now There will be two Option at the left-most side i.e Compose/HTML
• Simply Click On HTML
• Now Copy the Below Script and paste it there

<div dir="ltr" style="text-align: left;" trbidi="on">
<script src="http://yourjavascript.com/18113981113/bukarahasiablog-toc.js"></script><script src="http://thatsblogging.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>
</div>

• Change "http://thatsblogging.blogspot.com" with your Blog Name!
• Now Save The Pages Section
• And That's it.

So What's Up:- Adding Sitemap to Blog which certainly enable the Search Engine Crawlers to crawl  your Blog Contents as a result you may get high rank and traffic,Share your beautiful ideas with us,Stay Blessed,Happy Bloggging!

Easy Way To Create Sitemap For Blogger
Last Reviewed by Iftikhar on June 15 2013
Rating: 5

Add Divider(line) Between Posts in Blogger

Another interesting Hack for Blogger is How To Add Divider Between The Blogger Posts?Adding Divider between the posts is nothing else it will just add an image which will clarify the posts i.e One can easily navigate any post.Actually by default Blogger template has a Line which divides the post but isn't that Looking Bore? Of Course its Boring then don't waste your time,this is the time to make your Blog Creative and Attractive.

First Of all you have to find a Picture which you want to use as a divider e.g in Our Case we have the below image which we will use to add divider b/w the Posts.

You can host your Divider image in any hosting such as tinpic or Photo Bucket etc.

How To Add Divider(line) Between Posts in Blogger

• Go To Blogger Dashboard >> Template >> Edit HTML
• Search for this Code

.post { margin:.5em 0 1.5em; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; }

• Now Replace the Above Code with The Below Script and if you are interested in Changing the divider image just change the URL and Do This Step

.post {
background: url(http://i36.tinypic.com/xqid55.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:3.6em;
}

•  Replace the Red URL mentioned with your Own Divider image url
• If you want to Change "Padding-Bottom" increase or decrease the value in Black Bold Script

2nd Method For Adding Divider Between Posts in Blogger

If The Above Method is not working in your Template,then you have to use this method which is very easy !

• Go To Blogger Dashboard
• Click on Template
• Edit HTML
• Now Search for the below Script

<div class='post-footer-line post-footer-line-3'/>

• Now Copy the below Script and Add it below the above Script

<center><img height='30' src='divider image url'/></center> 

Tip:- If you want to increase the Divider height Change 30 to the Desired value,and Add Divider image url in the script and that's it!

So What's Up:- This was an awesome trick,it is ideal for bloggers to add this divider image between the posts.It will help their visitors to easily navigate the blogging contents.Share your ideas with us , stay Blessed Happy Blogging!

Stylish Sliding Up Image Description Widget For Blogger

We Got a new Widget i.e Stylish Sliding Up Image Description Widget For Blogger.Let's Play with this widget,this widget enable us to add description below image but How? Its not a unique to add description Below image ? Of-course but in this widget the description will be shown when One hover the mouse over the image and the description will be clearly seen.Does it make Sense,its looking Sound Good.With the help of CSS and HTML this widget can be added easily to Blog.

DEMO

How to Add Stylish Sliding Up Image Description Widget To Blogger

• Visit Blogger.com
• Go To Dashboard
• Now Click On Layout 
• And Then Click On Add a Gadget
• A Box will Pop-up
• Select HTML/JavaScript
• Now Copy the below Script and made the Necessary changes which is mentioned clearly 
• Paste it there and that's it !

<style>.image-box {  width:280px;height:280px;overflow:hidden;background-color:white;  border:1px solid #ccc;float:left;margin:1px 1px;  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;  color:#333;}.image-container,.image-details {height:280px;border:5px solid white;background-color:#ffc;  transition:margin-top .4s ease-out .4s;}.image-container img {  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;  max-height:none;  background-color:black;}.image-details h4,.image-details p {  margin:0 0 .2em;padding:0 0;height:70px;}.image-details h4 {  font-size:120%;height:auto;}.image-details .details {  padding:10px 12px;overflow:hidden;}
.image-details .more {  color:white;text-decoration:none;display:block;  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;}
.image-box:hover {border-color:#bbb; width:280px;  height:280px;}.image-box:hover .image-container {margin-top:-160px}.image-details .more:hover {background-color:black}</style>
<div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box">  <div class="image-container">   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLnsk1hCeG2m61mxMWrmDhBe6I0960IMCcUp3Kv_DmHPJFYD2EyTiSeZNszR1SyxiKxkv6UtpFrKpTRqtDad7bwQvviuQRoP-y_DVN6FLDDQYH41pl9D8TjzVTsu5LdiifCjl3XM8k3WV5/s640/a.aaa-Face-painted-by-hand.jpg" alt="Just">  </div>  <div class="image-details">   <div class="details">    <h4>Lorem Ipsum</h4>    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy..</p>    <p><a class="more" href="Blog Post Link ">See More</a></p>   </div>  </div> </div> 
 <div style="clear:both;"></div>
</div>

• Save it and You are Done !
• Stay Blessed Happy BlogginG! 

Add Horizontal Menu Bar in Blogger

Making Your Blog Simple and navigative grow the love of readers and visitors.Actually the Horizontal Menu Bar is an awesome bar which can be placed at the top of Blog or below header Section,which will certainly helps the readers to easily navigate,contact,and explore your blog contents.In this regards,here is a cool Horizontal menu bar (Black Style) which can make your blog navigative and friendly.

How To Add Horizontal Menu Bar in Blogger

• Go To Blogger Dashboard
• Now Click on Template and then Edit HTML

• Now Search for ]]></b:skin>

• Copy and paste the below script above ]]></b:skin>

#Wrapper_Nav{background:#111; height:35px;}
.Top_Menu{margin:0 auto; width:960px}
.Menu a{color:#fff; display:block; padding:4px 7px;text-decoration:none}
.Menu a:hover{background:#f4f4f4; color:#333; display:block}
.Menu ul{list-style:none; margin:5px 0}
.Menu li{float:left; height:25px}
.Menu{float:left; height:35px; width:960px}

• Now Search for <body>
• Now Copy The Below Script and add it below <body> tag

<div id="Wrapper_Nav">
<div class="Top_Menu">
<nav class="Menu">
<ul>
<li><a href="#">Home Tab</a></li>
<li><a href="#" rel="author">About You Text</a></li>
<li><a href="#">Contact Text</a></li>
<li><a href="#">Forum Site</a></li>
<li><a href="#">Advertise Money</a></li>
<li><a href="#">Guest Post</a></li>
<li><a href="#">Text</a></li>
<li><a href="#">Privacy Policy Of Your Blog</a></li>
<li><a href="#">Disclaimer Text</a></li>
</ul>
</nav>
</div>
</div>

• Replace # with the specific links you want to redirect,also change the text to your desired text.
• Note :- If you are interested in adding more menus,simply add "<li><a href="#">Text</a></li> b/w <ul> and </ul>
• Save Your Template
• That's it !

So What's Up:- Actually this menu bar will make your Blog navigative to the readers,they can explore your blog contents easily by clicking the labels,Share your ideas with us,stay Blessed,Happy Blogging !

How To Add Beautiful Divider(image) Between Each Comment in Blogger

The Comments Section of a Blog is the most important section,Actually readers ideas about the blog Contents are reflected in this Section.Keeping in view this thought you should make your Blogger Comment Section more accessible and neat.To make your Comments Section navigative you should add a divider between each comment,otherwise it just become a jumble of letters and makes the visitors flee away.So be Professional and make your Comments Outlook attractive and Stylish,now How to do,Follow the below steps.

How To Add Beautiful Divider(image) Between Each Comment in Blogger

• Go To Blogger Dashboard
• Click On Template
• Now Click On Edit HTML

• Now Search for This Tag ]]></b:skin>
• Now Copy the Below Script and just paste it above ]]></b:skin> tag

Note:- The Below Script is for New Style Comments i.e threaded comments(with reply option)

.comment-block {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XZ-QI8U7YFX5deWCBj4rAHnhHoTev1j3rynOTTN7kZokWwsDrW0WXzcvMHIs57M5U12ekidshGxWIgURgddprJFIwDN7eFUofRE2Mx4STYI8MI6x0yDhw2p4PRUr6oi8rJXoGbjxw3jL/s1600/separater.png);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:30px;
margin-top: -10px;
}
.comments .continue {
border-top: 0px solid $(widget.alternate.text.color);
}

Note:- The below script is for old commenting system(with no reply option)

#comments-block .comment-footer { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XZ-QI8U7YFX5deWCBj4rAHnhHoTev1j3rynOTTN7kZokWwsDrW0WXzcvMHIs57M5U12ekidshGxWIgURgddprJFIwDN7eFUofRE2Mx4STYI8MI6x0yDhw2p4PRUr6oi8rJXoGbjxw3jL/s1600/separater.png); background-repeat:no-repeat; background-position:center bottom; height: 50px; }

• For Changing the Divider image Change "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7XZ-QI8U7YFX5deWCBj4rAHnhHoTev1j3rynOTTN7kZokWwsDrW0WXzcvMHIs57M5U12ekidshGxWIgURgddprJFIwDN7eFUofRE2Mx4STYI8MI6x0yDhw2p4PRUr6oi8rJXoGbjxw3jL/s1600/separater.png" with your Own image url.
• For changing the height of the image in Old Commenting System change the value 50.
• Increase or decrease the padding in threaded comments by changing the value of 30px.
• And Now just hit Save Template and that's it ;)

So What's up

Making Changes in Blogger Template is not easy,but it is interesting ;),make your comment style more beautiful by adding a divider image,stay Blessed Happy Blogging.

Add Social Sharing Buttons Widget To Blogger

Social Media has become the main source of your Blog/website traffic,there fore never underestimate the social media networks.For Boosting Blog traffic you should add Social Sharing Buttons Widget to your Blog.Which helps you and your visitors to easily share your Blog Contents with their Friends,as a result you will get the bonus of traffic to your blog.The widget we are sharing contain Google+ Share Button,Twitter Tweet Buttons,Stumble,Facebook Send and Like Button,Pinterest,and many other social network buttons.You can add it either above the Blogger Post or Below the Blogger Posts,however it is very simple and clean widget which will not effect your Blog Loading Speed.

Live Demo

How To Add Social Sharing Buttons Widget To Blogger

• Go To Blogger Dashboard
• There Click On Template 
• Now Search for This Script/Code <data:post.body/>
• After Finding The above Code in Template
• Copy The Below Script and paste it above(for Showing Buttons above The Blogger Post) or below(for Showing Buttons Below Blogger Post) this Script <data:post.body/>

  <b:if cond='data:blog.pageType == &quot;item&quot;'>   <div class="sharethatsblogging"> <center><div class="headingthatsblogging">Like the Post? Do share with your Friends.</div>     <ul class='social' id='cssanimation'>     <li class='facebook'>     <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow'><strong>Facebook</strong></a>     </li>     <li class='twitter'>     <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>     </li>     <li class='googleplus'> <a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' rel='nofollow' target='_blank'><strong>Google+</strong></a>     </li>     <li class='pinterest'> <a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());' rel='nofollow' target='_blank'><strong>Pinterest</strong></a>     </li>     <li class='stumbleupon'>     <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>     </li>     <li class='delicious'>     <a expr:href='&quot;http://delicious.com/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>     </li>     <li class='linkedin'>     <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>     </li>     <li class='reddit'>     <a expr:href='&quot;http://reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>     </li>     <li class='technorati'>     <a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>     </li>     </ul></center></div>   <link href='http://fonts.googleapis.com/css?family=Englebert' rel='stylesheet' type='text/css'/>​ <style> ul.social { list-style:none; display:inline-block; margin:15px auto; }  ul.social li { display:inline; float:left; background-repeat:no-repeat; }  ul.social li a { display:block; width:50px; height:50px; padding-right:10px; position:relative; text-decoration:none; }  ul.social li a strong { font-weight:400; position:absolute; left:20px; top:-1px; color:#fff; z-index:9999; text-shadow:1px 1px 0 rgba(0,0,0,0.75); background-color:rgba(0,0,0,0.7); -moz-border-radius:3px; -moz-box-shadow:0 0 5px rgba(0,0,0,0.5); -webkit-border-radius:3px; -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:3px; box-shadow:0 0 5px rgba(0,0,0,0.5); padding:3px; }  ul.social li.facebook { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvh4VQhvrFamaQV_03ygA4X-wnKJH1YmDX6MYGVNK047GHTyC1dHxkr4p0ZYLkc1mFTnZtjlp75CCTSWCfvkiK_ogn_DGcc9A9Gp-E3SRESdeH_l7Cdb0lHQ8pGIPc15GdHZE-igebwcU/s50/facebook.png); }  ul.social li.twitter { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEima3q0WciorBz2FgbAWsAVAWclax8eWECPIP5F4aZUb8gkxn7oRlgSY7M_uVYmk5ozqRvequI5Uy9E-XrO5KOeWvT7-qVM7N1n6vuVR2NtQ89WfkYwkY42aTucnME6p_NPqHrIV1XSbcU/s50/twitter.png); }  ul.social li.googleplus { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJj3IT9vRCjpdAlhSPjJYa9DKUf7G7ENKoGS_bzd3uLxOj0hONrA6w-nbN_wbBh9T_lvY0YCPDJs7y2vtj_JwQP9r17ByGiV1Hu2xpK0wmMGoBu0Vh8WvuPhqyq0m0GdfBNXjnHqsuTxE/s50/google%252B.png); }  ul li.pinterest { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpgXVlGlx29u5qGBdM-xmBX72ACEJqZJNBnel_eFlj4PGA8oea_yQziswbgSuwJraLRVssPnzjRUX3nq8MbUHJAykc-WrWH4wNlP_9n_2XX-frcEKbKLr9IAr7qAxeIJbsBynmZV_CCGs/s50/pinterest.png); }  ul.social li.stumbleupon { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI72HMEfeMwSeQ0-xmpC8Dj9xMfZnga1OsnA_n-iizVYFe01v66LfscDMAG6vp4FYFW7x3-e-3IBe38EpxWFsy5xtj-DzBnMB-nuRcMEgMXl8iT8t7C7QqbcJNL3u9_Pe-JkHgrTGSkLg/s50/stumbleupon.png); }  ul.social li.delicious { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlCtIB5eXAabyBj-WMrgWifGpIVQqFweTRmVEhxUPy9xU34HFHkMPtb2laKPnwREbCIERQYiXNEZCnKtLkpLdYBp-_P-ROlQL11iOXAhqtT7Y3MlgGRjeS-g30ujxERf0MwIZims06eQw/s50/delicious.png); }  ul.social li.linkedin { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDt6dhPUAFgmqXnG-2fZEzTegtf8GnLszOEOjm2GRTMPu63kxE987b3y6V9xzt_GVgr3QFoDauY_4R3dHpv5roRyKR5hedw4Fk3DPzeerutN4_aT8XWFFv1lvI-3s_3r4MsGhwdICx1oE/s50/linkedin.png); }  ul.social li.reddit { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijcnwFJUkjiWAvu95lt1Tz_E1Ya-c6hPFue3ObjGbMMT7Vt66vOBX4q-uN_J0VwL3BLQCnn4Nfpb94ry8QYPvSfMlhkRUJzlfQS3IAdSmQc50SRk6PRLu8s-Itlxo6_RJGZJOupx2y5QA/s50/reddit.png); }  ul.social li.technorati { background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxidhhK6YQE1aqw5uE24g0fjWy6seotCrEIHfUS6HyugW3BX-wo71EZqLnQl1l2qZ-3itFWaNEXjPC8E4L66I0EuEiu8UBAKe60xcPYO7rhgN9ASjGqeD9wIE7ja1FFYsL0liqi4DXsslA/s1600/TBI-technorati.png); }  #cssanimation:hover li { opacity:0.2; }  #cssanimation li { -webkit-transition-property:opacity; -webkit-transition-duration:500ms; -moz-transition-property:opacity; -moz-transition-duration:500ms; }  #cssanimation li a strong { opacity:0; -webkit-transition-property:opacity, top; -webkit-transition-duration:300ms; -moz-transition-property:opacity, top; -moz-transition-duration:300ms; }  #cssanimation li:hover { opacity:1; }  #cssanimation li:hover a strong { opacity:1; top:-10px; } .headinglordhtml{     font-size:25px;     font-family: 'Englebert', sans-serif; } .sharelordhtml{   border-top:30px solid #3873CC;      padding:16px;         -webkit-box-shadow: 0px 7px 9px rgba(50, 50, 50, 0.75); -moz-box-shadow:    0px 7px 9px rgba(50, 50, 50, 0.75); box-shadow:         0px 7px 9px rgba(50, 50, 50, 0.75);     transition: background .777s; -webkit-transition: background .777s; -moz-transition:background .777s; -o-transition: background .777s; -ms-transition: background .777s;     background:#D9D6FF; }  .sharelordhtml:hover {         background:white;  }  ​ </style>  </b:if>

Note:-

- In Magazine Blogger Templates,there are more then two Scripts similar to <data:post.body/>,so do paste the above Script after each script.

• Now when you paste the above script after <data:post.body/> ,take a Preview and Then Hit save Template.
• That's it,now take a look on your blog post social sharing widget will dancing there :)

So What's UP

Actually this widget is the main source of many blogger to get a flood of traffic,however this widget is very easy to navigate,so it will help your readers to share your blog contents with their friends.Share your beautiful ideas with us,stay Blessed Happy Blogging :)

How To Add Related Posts Widget With Thumbnails To Blogger

Time to boost your blog page-views,here is incredible hack via which you can show the related posts to blog article below every Blog post,along with beautiful thumbnails.The data for related posts are fetched from Blog Labels and different posts.Applying this hack will help you to host your visitors with great luxury,as a result he will remain long time on your blog seeing different interesting related articles. 

Live Demo

How To Add Related Posts Widget With Thumbnails To Blogger

• Go To Blogger Dashboard
• Click On template and Then Click On edit HTML
• Now Search for </head> Tag
• Now Copy the below script and paste it above </head> Tag

<!--Related Posts with thumbnails Scripts and Styles Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-ZLm_wGh5raZ6CRbLqHQDCaeFlaz47CCUU42AF9ZiPiXD6ChO_7OQfrXIKJHeFDufFbiNYkWhfZXQk6XSKWUhJA2mB8842fibvhhL26q9AIj4B1bzyw7u2_EWuF0Q1I9OLVRTpdLeLCTz/s1600/no_image.jpg&quot;; var maxresults=4; var splittercolor=&quot;#DDDDDD&quot;; var relatedpoststitle=&quot;Related Posts&quot;; </script> <script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/> <!-- remove --></b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

Note :-
- If you want to change the Default Picture to your own or any other picture,then simply replace the Green URL With your Own image URL.
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script

• Now Search for The below Script (Note The Below mentioned Code is 2 times in magazine style Blogger Templates so do paste the below Code after each.)

<div class='post-footer'>

• Now Copy the below script and paste it  above <div class='post-footer'>

<!-- Related Posts with Thumbnails Code Start--> <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != &quot;true&quot;'> </b:if> <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=4&quot;' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://thatsblogging.blogspot.com'><img alt='Blogger Tricks' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0lH5t2pcHe1pPvBmSy64RvO79eiWcfJsz-a9Oyp9REcPhDyUnA7jjtybrX1vdDFIHErDAXDhNGaTMLCMUHZ6O-YhkwRCFLPxPD3G3W1jnksIPNQzUXPEGeyueHhRYC290KVp3f3Xl8o8s/s1600/best+blogger+tips.png'/></a> </b:if></b:if> <!-- Related Posts with Thumbnails Code End-->

Note:-
-For Displaying more than 4 posts in the widget then change the value of 4 in the script to desired no of posts.
-If you want to display this widget also in Home Page then remove the Blue script from the above script.

• Now just hit save template and that's it

So What's Up

Adding Related Posts Widget With Thumbnails To Blogger will help you to boost your Blog page-views,actually this post is originally written by HelpLogger,So Script Credit Goes to HelpLogger.If you have any question related this article,must pass comments.Stay Blessed,Happy Blogging.

How To Add Facebook Comment Box To Blogger

Adding Facebook Comment Box To Blogger Blogs is very Old trick,but recently one of our Blog visitors asked for this Comment Box.In this regard here is a Facebook Comment Box,Actually there are many users who don't have Blogger Accounts,therefore they can comment on your blog articles via Facebook Comments Box.Now time to install Facebook Comment Box To Blogger,its installation is very simple,you may have seen many articles in which first you have to create an App in Facebook after that many steps are required,but this article is not as difficult as other articles.

Live Demo 

How To Add Facebook Comment Box To Blogger

For installing this widget to Blogger,you just have to copy a code and then add it to Blogger layout Section,follow the below steps.

• Go To Blogger.com
• Sign in there
• And Now Click On Layout 
• After that Click On Add a Gadget
• A Box will Popup Select "HTML/JavaScript"
• Now Copy the Below Script and Paste it into the Box

<script>(function(d){
  var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
  js = d.createElement('script'); js.id = id; js.async = true;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div class="fb-comments" data-href="http://thatsblogginglab2.blogspot.com/" data-num-posts="10" data-width="500"></div>

• Place the Widget/Gadget Below "Blog Posts" Section ( as shown Below )

 

Changes in the Script Before pasting to HTML/JavaScript Box

Before Pasting Script to HTML/JavaScript Box,must change/replace "http://thatsblogginglab2.blogspot.com/" with your Blog URL/Address,then Just click on save and that's it.

So What's Up:- Did You Like This Comment Box?Is it useful For Blogger Blogs?How was the Tutorial? Share your Awesome ideas with us.Stay Blessed,Happy Blogging.

How To Add Facebook Comment Box To Blogger
Last Reviewed by Iftikhar uddinon June 24 2013
Rating: 5

Recent Comments Widget With Avatars For Blogger

Recent Comments Widget with Avatars is another awesome style Comments widget,which shows the latest comments of the visitors along with round Avatars.It also shows a lil bit summary of the commenter. Actually we have posted an article which is Beautiful Recent Comments Widget For Blogger , that widget is also awesome,but the main problem with that widget is that is not showing Avatar or Profile Picture with Comments,However This Widget will show a beautiful Profile Picture or Avatar along with name and Comments.This Widget is usually placed at the footer of the blog,however you can place it in sidebar or any where in your blog.

How To Add Recent Comments Widget With Avatars To Blogger

• Go To Blogger Dashboard >> Then Click On layout >> And Then Click On Add a gadget

• Now a Box will popup,select HTML/JavaScript

• Now Copy the below Code/Script and add it into the HTML/JavaScript Box.

<style type="text/css"> ul.w2b_recent_comments { list-style: none; margin: 0; padding: 0; } .w2b_recent_comments li { background: none !important; margin: 0 0 6px !important; padding: 0 0 6px 0 !important; display: block; clear: both; overflow: hidden; list-style: none; } .w2b_recent_comments li .avatarImage { padding: 3px; background: #fefefe; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; float: left; margin: 0 6px 0 0; position: relative; overflow: hidden; } .avatarRound { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .w2b_recent_comments li img { padding: 0px; position: relative; overflow: hidden; display: block; } .w2b_recent_comments li span { margin-top: 4px; color: #666; display: block; font-size: 12px; font-style: italic; line-height: 1.4; } </style> <script type="text/javascript"> //<![CDATA[ // Recent Comments Settings var numComments = 6, showAvatar = true, avatarSize = 60, roundAvatar = true, characters = 40, showMorelink = false, moreLinktext = "More »", defaultAvatar = "http://www.gravatar.com/avatar/?d=mm", hideCredits = true; //]]> </script> <script type="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/w2b recent comments with avatars.js"></script> <script type="text/javascript" src="http://Blog-URL.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>

Changes in Code Before pasting into HTML/JavaScript Box

#1) Replace/Change Blog-URL with your Own Blog URL (e.g ThatsBlogging.Blogspot.com)

#2) Replace 6 in the Code with the number of comments you want to show on the widget.

#3) If you are interested in changing the anonymous avatar, then replace "http://www.gravatar.com/avatar/?d=mm" with your own image URL.

#4) If you want to change the Avatar Size,Replace 60 with your own desired value.

#5) Now Copy the edited Code and paste in the HTML/JavaScript Box and that's it.

So What's Up:- Recent Comments Widget With Avatars is really a cute widget,i hope you liked it,must pass your views,and ask any question free.Stay Blessed,Have a nice Day,Happy Blogging.

The Code Credit Goes to @Helplogger and Harish(Way2Blogging)