Monday 4 March 2013

Add Email Subscription Widget Below Blogger Posts

This widget will surely increase number of your social subscribers.If you are writing good posts and expecting more number of subscribers then this widget will surely help you.It contains an email subscription form,facebook like button,twitter follow button and some beautiful social icons at the right of the widget.This widget can be installed in one step,you just have to copy and paste code in your template.Now lets see how to add it into blogger blog?




How To Add Email Subscription Form To Blogger?



First go to Blogger Dashboard > Template
Download a copy of your template
Click on Edit HTML
Hit Proceed
Check the Expand Widget Templates checkbox
Find below code in your template


<data:post.body/>



Add below piece of code just after/below of above code,


<b:if cond='data:blog.pageType == "item"'> <style type="text/css"> form.feedburner { margin: 20px 0 0; display: block; clear: both; } .TechnoFusionstyle { background: url(http://4.bp.blogspot.com/-WK7bh1SB3NE/Uii6qe6mFpI/AAAAAAAAAbI/7ZXa8nbpyJE/s1600/TechnoFusion.info-email-icon.png) no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #666; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .technofusionsubmit { color: #666; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -moz-border-radius: 4px; -webkit-border-radius: 4px; -goog-ms-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39; #FBFBFB&#39;, endColorstr=&#39;#F4F4F4&#39;,GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); } #TechnoFusion-widget { -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; -goog-ms-border-radius: 10px 10px 10px 10px; border-radius: 10px; background: none repeat scroll 0 0 transparent; border: 1px solid #D3D3D3; padding: 8px; -moz-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; transition: all 0.3s ease-out; width: 480px; -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -moz-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75); -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D; } #TechnoFusion-widget:hover { background: none repeat scroll 0 0 #FFF; -moz-box-shadow: 1px 1px 2px #CCC inset; -webkit-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } #TechnoFusion-widget td { padding: 3px 0; } </style> <center><br/><div id='TechnoFusion-widget'> <div id='emailwidget'> <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'> <tbody> <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '> Get free daily email updates! </p> <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=ablod&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='margin: 0pt;' target='popupwindow'> <input name='uri' type='hidden' value='
technofusionblogger'/> <input name='loc' type='hidden' value='en_US'/> <input class='TechnoFusionstyle' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email…&quot;;}' onfocus='if (this.value == &quot;Enter your email…&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email…'/> <input alt='' class='technofusionsubmit' title='' type='submit' value='Submit'/> </form> </td> <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'> <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '> Follow us! </p> <a href='http://feeds.feedburner.com/technofusionblogger' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='http://2.bp.blogspot.com/-mpON5pgz_QE/Uii6qTnXQDI/AAAAAAAAAbM/YIPrWzzvVC0/s1600/TechnoFusion.info-rss.png'/></a> <a href='http://twitter.com/Technofusion1' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='http://1.bp.blogspot.com/-24-rJjjWur8/Uii6rPemaJI/AAAAAAAAAbc/OYl7hcPQ-rU/s1600/TechnoFusion.info-twitter.png'/></a> <a href='http://www.facebook.com/Technofusion1' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='http://1.bp.blogspot.com/-WcZ4H3TVECQ/Uii6rZIm3zI/AAAAAAAAAbo/e4RCWSCaqYg/s1600/TechnoFusion.infoTechnoFusion.info-fb.png'/></a> <a href='https://plus.google.com/116453328301201221048/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='http://2.bp.blogspot.com/-Dd11XkOJ6qg/Uii6qZCZuoI/AAAAAAAAAbY/04fvSlYz50M/s1600/TechnoFusion.info-gplus.png'/></a> </td> </tr> </tbody> </table> <div align='right'> <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.TechnoFusion.info/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span> </div> <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTechnofusion1&amp;send=false&amp;layout=standard&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font=verdana&amp;height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true"> </iframe> <a class='twitter-follow-button' href='http://twitter.com/Technofusion1' rel='nofollow'></a> <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script> </div> </div> </center> </b:if>





Replace all(three) technofusionblogger with your Feedburner Username
Replace all(two) Technofusion1 with your Facebook Username
Replace all(two) Technofusion1 with your Twitter Username
Replace 106527290580119996124 with your Google + ID




Finally save your template and visit your any post you will watch this widget after posts ends.I have kept the installation one step installation,if still you are getting any single problem then feel free to mention it via comments,I will reply as soon as possible.



CREATE A GRAB OUR BUTTON/BADGE WIDGET AND ADD IT TO BLOGGER/BLOGSPOT

Grab our button/badge is a most amazing way to promote your blog via other blogs,Your blog fans or users
can easily add this on their blog.

How To Create A Badge For Your Blog?



Go to Cooltext (Follow the image instructions below )

2. Select PIXEL BADGE. And follow the image instructions below.



After Selecting Pixel Badge The Shown Below Is Appear



3. After you customize all windows hit Create LOGO button at bottom left and  download the image.

4. Upload it and get URL of the downloaded image like .png or .jpg

Code No. 1

<center><div dir="ltr" style="text-align: center;" trbidi="on"> <a href="Blog URL"><img alt="" src="IMAGE URL" title="Title On Mouse Hovering" /></a></div></center>





Replace Blog URL with your blog address.
Replace IMAGE URL with your uploaded badge url.
Replace Title On Mouse Hovering with Title which you want on mouse hovering.

How To Add It On Your Blog - Carefully Add It.....


Copy above code after customizing and paste it in Notepad (important)
Encode copied code using HTML Code Encoder.
Now Careful.....

Code No.2

<center> <input type="text" onclick="this.focusundefined);this.selectundefined)" readonly value="Paste Encoded Code Here" /> </center>


Replace Paste Encoded Code Here with encoded code.

Now go to Blogger Dashboard > Design
Then select Add a Gadget > HTML/JavaScript.
Copy and paste code no.1 just below that paste code no.2 and give title like Grab Our Button

Now save your changes and refresh your blog to see changes.


Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you....



HOW TO REMOVE "POWERED BY BLOGGER" ATTRIBUTION GADGET ?

We all know that Blogger is a Great Platform where we can Show Our Influence of designing.
The attribution gadget at footer of blog and says "Powered by Blogger".

The gadget is locked,when you click on the edit link of attribution gadget you will notice that there is no Remove link,Because the gadget is locked officially by the blogger.If You Want To unlock the gadget follow my below easy steps carefully.





How To Remove Blogger Attribution Gadget


Go to Blogger Dashboard > Design > Edit HTML.(In new User Interference it is Dashboard > Template)
As always download a copy of your template


Now search for below code in your template


<b:widget id='Attribution1' locked='true' title='' type='Attribution'>






Replace
locked='true'


with
locked='false'


as shown below


Now save your template and go to Layout page. Click on the edit link of attribution widget.



Hit Remove button and you are done.

Thanks for reading......

Please write comments about this tutorial or tell me any faults which you found while creating and publishing. I will always there to help you...



NUMBERED PAGE NAGIVATION HACK FOR BLOGGER


This post explains how to add numbered page navigation widget to blogger (blogspot) blogs:

What is Numbered Page Navigation ?


In blogger, by default, you see Older posts, Newer Posts links near the bottom of the page which is useful to your blog visitors to navigate to other posts of your blog. But, the problem is.. people hardly notice those newer and older posts links.. which means.. less pageviews to your blog.

So, to increase your blog pageviews you can use this cool looking, advanced numbered page navigation to your blog.


So, how to add this to your Blogger blog ?
(first backup your blog template before editing anything)

1. Sign into your Blogger account » Settings » Formatting
Choose the number of posts you want to display on homepage

set the amount of posts to be displayed on the homepage
2. Go to Design » Edit html » tick the expand widget templates

Scroll down to the bottom of the template code and find this


</body>


PASTE this code above that line


<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>

<script type='text/javascript'>

//<![CDATA[

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" style="padding:10px 10px 10px 10px;"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(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"> Pages ('+(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 home_page_url=location.href;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){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>
</b:if>
</b:if>



In that above code, Edit the part that I highlighted in red color according to Step 1. It determines the number of posts that to be displayed per page. (Make sure, the number you set is same like the one in Step 1)


3. Control + F and search for all the occurrences of this code

'data:label.url'


and replace it with this


'data:label.url + &quot;?&amp;max-results=5&quot;'


Again, the number in the above line depends on the number you set in the STEP 1.

4. Now, the styling part.. I've made x styles.. you can choose the one you wish..


(i) Default



Code


.showpageArea a {
text-decoration:underline;
background: #ffffff;
padding: 10px 10px 10px 10px;

}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
border-top: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}


Copy the above code. Find this line and paste that code ABOVE IT.


]]></b:skin>



Save the changes.

I've made a few more navigation styles.. I'll post them in a few min.. look for it.



ADD ANIMATED SCROLL RECENT POSTS WITH THUMBNAILS FOR BLOGGER


Animated Scroll Recent Posts With Thumbnails For Blogger
When people visit your blog it is important to keep them there for as long as possible, the longer someone is on your blog the more likely they will be to return and subscribe or follower.Displaying a list of your most recent posts in your sidebar is a great way to keep those visitors busy.

There are lots of recent posts widgets and archive widgets you can use but the one we will cover in this post will defiantly grab the attention of people on your blog. This widget displays your most recent posts and includes a small thumbnail, but has the added bonus of using an animated effect that moves smoothly through the posts.



How To Add Animated Scroll Recent Posts With Thumbnails To Blogger?

1. Login to your Blogger account.
2. Go to Layout > Add A Gadget.
3. In Add A Gadget window, select HTML/Javascript.
4. Copy the code below and Paste it inside the content box.

<!-- Please do not remove this credit and the “Get this widget” link at the bottom of the widget. -->
<!-- Animated Scroll Recent Posts With Thumbnails Script Start -->
<p style="display:none;">Animated Scroll Recent Posts With Thumbnails For Blogger by <a href="http://allblogertoolsinfo.blogspot.in/">abt</a></p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script><style type="text/css" media="screen">
<!--

#spylist {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:350px;

}

#spylist ul{

width:220px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#spylist li {

width:208px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:70px;

overflow: hidden;

background:#fff url(http://1.bp.blogspot.com/_AstD3fky-O0/TPqUOD822nI/AAAAAAAAALU/IqHlrBo0W6Y/s1600/bdlab-blogspot-com.jpg) repeat-x;

border:1px solid #ddd;

}

#spylist li a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#spylist li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

.spydate{

overflow:hidden;

font-size:10px;

color:#0284C2;

padding:2px 0px;

margin:1px 0px 0px 0px;

height:15px;

font-family:Tahoma,Arial,verdana, sans-serif;

}

.spycomment{

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

-->

</style>

<script language='JavaScript'> 

imgr = new Array();

imgr[0] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

imgr[1] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

imgr[2] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

imgr[3] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

imgr[4] = "http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";

showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://allblogertoolsinfo.blogspot.in/";

limitspy=4

intervalspy=4000

</script>

<div id="spylist">

<script src='http://beautifulbloggerwidgets.googlecode.com/files/animated_recent_posts.js' type='text/javascript'></script>

</div>

<!-- Animated Scroll Recent Posts With Thumbnails Script End -->

5. Save
Important : If you look in the code you will find http://allblogertoolsinfo.blogspot.in/ replace this with your blogs URL.

Optional Changes : There are lost of changes that can be made to the code if your comfortable making changes, the main edit you may want to make is the number of posts displayed.To change the number of posts that are scrolled through change the following :

numposts =10;

You can change from 10 to the number of posts you wish to have displayed.

Note: Find home_page = ""; and put your blog url like this home_page = "http://allblogertoolsinfo.blogspot.in/";

Now you should have a working Animated Scroll Recent Posts With Thumbnails on your blog.

Happy Blogging =) - Leave your Comments and Please Share this widget.

Note: This widget or any other feed based widget will work only on blogs having public feeds.



  • Home
  • About Us
  • Contact Us
  • Write For Us
  • Sitemap
  • Privacy Policy
  • Back To Top