Change Post Background Color In Blogger

This topic will explain how to change the background color of the posts on blogger.To make posts background different from the rest of the elements in the blog page.

You can also make the background is image instead of color only .

Adsense Ads Wrapped With Post Text In Blogger

Adsense is the main source of revenue for  bloggers. So you should blend your ads with your posts to get more attention on ads from your visitors, resulting in more clicks and more revenue.

wrap your adsense unit in text so it fits nicely and blends with your posts.

How to Backup Blogger Posts Very Easy

very important that you have a backup of all your blogger posts ,May play a major effort in writing posts and important topics on your blog .It may happen that you find a message that has been deleted your blog by management Blogger!

There is no solution other than taking a backup of your blog posts and save them on your PC ..Then you will be able to import your threads again and easily

External links open in a new window automatically in blogger

"External links open in a new window automatically in blogger "When you visit some Blog or Website, you must have noticed that when you click on a link, it opens in a new window. This is a great idea used by many people as it keeps the users on your page

At times alienate users on external links and back again to the content of your blog; and in some cases, links to be useful to them and thus lose visitors from your blog

How to add a widget inside a scroll box blogger

It is not necessarily a good thing to have a homepage that scrolls for miles. Not only can this slow down loading time, it can make you blog look unprofessional as well. Fortunately,

there is an easy solution to this problem: adding a scroll effect to the sidebar widgets/gadgets. This allows the widget/gadgets to scroll instead of your whole page.

Display Selective Tools In Blogger

Learn How To Show Hide Widgets In Blogger Blog. You Can Easily Show And Hide Widgets By Simply Adding Code. You Can Hide Widgets On Particular Page.

Before getting into the details of selective display,let us discuss about the different types of pages on blogger.

Add Floating Sharing Buttons To Blogger

Add Floating LikeUs Sharing Buttons To Blogger Blog. Using This Sharing Buttons Your Reader Will Not Disturb While Reading Your Articles.

Sharing Buttons Will Show User's Mouse Cursor Over Like Us. Follow These Steps To Add These Buttons To Your Blog.

Create A Three Column Footer In Blogger

This Footer widget contains three columns where each column can accommodate as many widgets as you can add!
In order to add such a widget to the bottom section of your blogs and also customize the look and feel of it then lets start learning today’s tutorial.

Easy Remove Navbar In Blogger

New option to Turn off Navbar of your Blogger Blog,
when I first started Blogging it was somewhat of an issue.The issue wasn't is there a way to remove it, there were lots of tutorials showing how to remove the Blogger navbar.No the issue was "Are we allowed to remove the Blogger Navbar?".Many at the time feared removal could be against Blogger TOS and therefore end up in blogs being removed or accounts being closed.Blogger were always quiet on the issue but as there was never a story of a blog being effected because of removing the navbar we presumed it was OK

I guess Blogger have now spoke as loud as possible on the issue as they have actually added the option to remove it or turn it off.So if your not a fan of the Blogger nav bar here is the new way to turn it off.Also check out the links at the end of the post to have a cool hover effect Navbar and move the Navbar to the bottom of pages.

Replace Newer, Older and Home post Links With Post Titles to blogger

How to Add or replace Newer, Older and Home post Links With Post Titles in blogger.
The Newer Post, Home and Older Post links are located at the bottom of your blog.The Newer Post, Home and Older Post makes your visitors and readers to easily navigate between pages and posts within your blog.

But now you can show these links as your blog Post Titles which makes visitors more easily understand the next and previous articles

Two Way To Remove Subscribe To Posts Atom Feed Links On Blogger

Two Way To Remove Subscribe To Posts Atom Feed Links On Blogger,
Remove the feed links below the posts on Blogger with the "Subscribe To Posts Atom" message.
You can apply one of the following methods

Style label,Tags in Blogger Using CSS

wonderful Style Tags is a Widget which shows your labels of your blog in Bricks Style.

 This tutorial will show you How To Add Brick/box Style label/Tags Cloud in Blogger Using CSS

Disable Right Click,Selection In blogger Using CSS Trick

If you don't want someone copy your blog contents/articles you can do it now using this trick.To Disable Right Click,Selecting to Prevent Copy Paste in blogger Using CSS Trick

In this way your blog visitors will only able to read but cannot copy

Add Popular Post Slideshow Gallery In Blogger

You might have seen so many sliders or crousels that works on the recent posts or you have to add images in it manually. In this tutorial i will give you the slider/image gallery that works on the popular posts.

 This widget shows your 10 popular posts images in form of slider.

How To Install

1. Next, click on the 'template' tab
2. Backup your Template before making any changes to your blog
3. Now Expand Widget Templates
4.  click on the "Edit HTML".
5. Now find this code

 </head>

<style type="text/css">
#gallery{position:relative;margin:0 35px 20px;width:500px;height:126px;background:#ffffff}
#gallery .belt{position:absolute;top:0;left:0;list-style-type:none}
#gallery .panel{float:left;margin:20px;width:84px;height:86px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigE6chBEZPc6cS_ntM-DSP6RSGxIXYC6RrFWzGb1t3z5XyXhvoRUsIlX7gugVq5Cn0QUScGmfYjIrxI1fnQQhe9rtKYMq1dutZhQR6EbfxGVo_NoYkOHGUbuoJNizTTtGN-kNkjIbBr4k/s1600/bg-slider.png) bottom center no-repeat;overflow:hidden}
#gallery .panel img{float:left;border:1px solid #DDD;margin:5px;width:72px;height:72px;background:#FFF;padding:0px}
#gallery .panel img:hover{filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity:0.5;opacity:0.5}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/gehadhussien/popular-posts.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
stepcarousel.setup({
galleryid: "gallery",
beltclass: "belt",
panelclass: "panel",
autostep: {enable:true, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:true, persist:true},
defaultbuttons: {enable: true, moveby: 2, leftnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGmVVdtbmoQp7iVCSRa76fOwMQtOmRVr-iFpzlmlhh-rcUGFjygWlXWblc1zpNP6PEOjNnVkObE6Y2B0w2mbSemnunRbg2bL1WWe-biIfpWwYW-iMzyoKOk0elHkBiZSt0X9WfPy5-KAY/s1600/prev.png", -40, 36], rightnav: ["https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxZUqXg4_w4psmz20g7mnasLW8J9e8qZe-Qy_-iN6FNHvgOLTL42jwEsTkaFZkek2A-qXDTpQ-dwDPqSiYVcpPHG1PnhRhiLSRxHokr_sFNB8U4WQ0UrmbHz-WUbGlVFq99fQ5uWtWbNw/s1600/next.png", 2, 36]},
contenttype: ["external"]
})
//]]>
</script> 

Now Find the code shown below using [ctrl+F]

 <b:section class='main' id='main' showaddelement='no'>

• Now Paste the Code Shown Below just below/after it

 <b:widget id='PopularPosts7' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div style='margin-top:20px;margin-bottom:70px;margin-left:-20px;'>
  <div id='gallery'>
   <ul class='belt'>
    <b:loop values='data:posts' var='post'>
     <li class='panel'>
      <b:if cond='data:showThumbnails == &quot;false&quot;'>
       <b:if cond='data:showSnippets == &quot;false&quot;'>
        <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
       <b:else/>
        <div class='item-title'>
         <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
        </div>
        <div class='item-snippet'>
         <data:post.snippet/>
        </div>
       </b:if>
      <b:else/>
       <a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'>
        <b:if cond='data:post.thumbnail'>
         <img expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
        <b:else/>
         <img alt='no image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt4s-i2gWfjl6lZSM54tT3Q1E81cUeOzYXMS_w8fjE72v8ApNnAsvCXQcWbZ92xhyphenhyphenF2khIy2_3ZK-wtuEulzGm17Ynpji6Q_NIho80bZ0lgun5OuwMOKtJJv4OhqX31mvtU38nnASTrjw/s1600/defaultimage.jpg'/>
        </b:if>
       </a>
      </b:if>
     </li>
    </b:loop>
   </ul>
  </div></div></b:if>
 </b:includable>
</b:widget>

• Now save your template

Enjoy

Add Colored Popular Post Widget In blogger

You will see how to add the Multi-Colored Popular Posts widget in the Blogger. Remember to follow the procedure step by step carefully so that you will not face any problem and backup Your template before proceeding.

How to add multicoloured popular post widget to your blog

How to Disable or Enable Blogger Lightbox

Official Method to Override the Lightbox, and it is enabled on all of the Blogger Blogs. If you don’t like the Light Box, and want to remove it from your Blog, then read on:

Blogger has now added an option to disable the Light Box. The feature is enabled by default.

Custom 404 Error Pages for Blogger

"The 404 or Not Found error message is a HTTP standard response code indicating that the client was able to communicate with the server, but the server could not find what was requested."

In simple words the page that will be displayed when the actual page is not found is called a 404 Error Page.

New And Easy Numbered Page Navigation for Blogger

Page Navigation for Blogger,add a nice page number navigation hack blogger. The default navigation links (i.e Older Posts) is not the friendly visitor. Now here is a completely new script and work for numbered page navigation for Blogger.This new script allows you to add numbered page navigation to blogger/ blogspot blog with page numbers starting(1, 2, 3, 4 ….) like those of a book.











Step 1 : Apply Style

1. Login to Blogger Dashboard and navigate to Template> Edit Html
2. Don't click the checkbox which says “Expand Widget Templates” Find this
3. Find this

]]></b:skin>

 and replace it with

/*------- pages-numbers-www.bloggertofree.blogspot.com/-----------*/
.showpageArea{font-family:verdana,arial,helvetica; color:#000; font-size:18px; margin:10px}
.showpageArea a{color:#000; padding-top:40px; text-shadow:0 1px 2px #fff; font-weight:400}
.showpageNum a{padding:0px 8px 0px; margin:1px 4px; text-decoration:none; border:2px solid #0090D5; -webkit-border-radius:3px}
.showpageNum a:hover{background-color:#000; color:#fff; padding:0px 8px 0px; border:1px solid #6F6F6F}
.showpageOf{margin:0 8px 0 0}
.showpagePoint{color:#fff; text-shadow:0 1px 2px #333; padding:0px 8px 0px; margin:2px; font-weight:400; -webkit-border-radius:3px; border:1px solid #2A2A2A; background-color:#ff0000; text-decoration:none}
/*------- pages-numbers -----------*/

Step 2 : Aplly Javascript
Find This :

</body>

Replace with :

 <script style='text/javascript'>
var pageCount=3;
var displayPageNum=5;
var upPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ue4ENsFqPvQgr1cGqOflHQWolvmKslGNucqBaUIZ11GsRh0Jke6BQ6j_4N9uZrhrdLLmqpHgOSOU2vN_mHMSQAxdxjex4L7Ozxa9BTn3redHNjSGR-4G4M-k8Xuk8Ae9XImRlLGEYmE/s1600/leftarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
var downPageWord=&quot;<img onmouseout='this.style.opacity=0.80;this.filters.alpha.opacity=80' onmouseover='this.style.opacity=1;this.filters.alpha.opacity=100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQcvfv3YCcDHfgybStuoTCpgUaY_rKhaC3L6husTpXMjOe7jxFJiXufYe9MGOXuPxojFmqY1vMx2A_Coac1q6IIy-OOwWO93M3Jz5js4JL1JPTK8n7mM9f2HXAgk55Wk6Vx39L_4ZRuiY/s1600/rightarrow.png' style='opacity:0.80;filter:alpha(opacity=80)'/>&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml='<span class="showpage"><a href="/">'+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html+='<span class="showpageNum"><a href="/">1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-1;var thisLable=isLablePage?thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length):"";thisLable=thisLable.indexOf("?")!=-1?thisLable.substr(0,thisLable.indexOf("?")):thisLable;var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';var labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount}}itemCount++}for(var p=0;p<htmlMap.length;p++){if(p>=(thisNum-displayPageNum-1)&&p<(thisNum+displayPageNum)){if(fFlag==0&&p==thisNum-2){if(thisNum==2){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'1</a></span>'}else{html+='<span class="showpageNum"><a href="'+htmlMap[p]+'">'+(p+1)+'</a></span>'}}if(eFlag==0&&p==thisNum){downPageHtml='<span class="showpage"> <a href="'+htmlMap[p]+'">'+downPageWord+'</a></span>';eFlag++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf">('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");if(postNum<=2){html=''}for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script></body>

Change based on your blog setting :
var postperpage=5;
var numshowpage=3;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

I hope to gain your admiration , develop by me

Fix problem Image on sharing posts to Facebook

When you share a post on Facebook, it will display a thumbnail picked from the post page along with a short description of the post. But in many cases Facebook fails to  identify the correct image and description

Fixing the Wrong Image Problem.