Wednesday, January 25, 2012
Facebook Like/Fan Box For Blogger
Add Automatic Read More With Thumbnail
cut-off point and also, there was no support for thumbnail too initially.
hide the Blogger Navbar from blogger
1- Log in to blogger
2- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.
show Related Posts in blogger post
To implement the related posts widget you will have to follow 2 simple replacement steps.
Popular Posts Widgets For Blogger - New and Working
Log in to Blogger
Go to Layout -> Add a Gadget -> HTML/JavaScript
Now copy and paste this code in to the widget:
NOTE: REPLACE everything in RED color in the code above with your blog's address without typing http://
The above code displays 10 posts, you can change it by editing the number being displayed in blue !
The above widget code, displays the links/titles like this:
Post one (18)
Post two (14) etc.
If you want to display them like this:
Post one (18 comments)
Post two (14 comments),
then use this code :
And in case, you want to display the popular posts without the number of comments (as requested by Ben), use this code:
P.S. : Please do not remove the footer link...
Go to Layout -> Add a Gadget -> HTML/JavaScript
Now copy and paste this code in to the widget:
Widget Style #1
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ul style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=28a6afad7c6ba1288c1b738277e42385&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_HERE_WITHOUT_http://&num=10" type="text/javascript"></script>
<a href="http://bloggerstop.net" target="_blank"><span style="font-size: xx-small;">Popular Posts Widget</span></a>
NOTE: REPLACE everything in RED color in the code above with your blog's address without typing http://
The above code displays 10 posts, you can change it by editing the number being displayed in blue !
The above widget code, displays the links/titles like this:
Post one (18)
Post two (14) etc.
If you want to display them like this:
Post one (18 comments)
Post two (14 comments),
then use this code :
Widget Style #2
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=ML4p0UfW3RGgS7iN1JzWFw&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerstop.net">Blogger Widgets </a></span>
And in case, you want to display the popular posts without the number of comments (as requested by Ben), use this code:
Widget Style #3
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=097d1b822fc6f356d8376802a911036b&url=http%3A%2F%2FYOUR_BLOG_ADDRESS_WITHOUT_http://&num=10" type="text/javascript"></script>
<span style="font-size: 80%">Widget by <a href="http://www.bloggerstop.net">Blogger Widgets </a></span>
P.S. : Please do not remove the footer link...
Blogger Page Number
Login To Your Blogger And Then Click
On Settings And Navigate To Layout Section.
Then Click On Add Page Element.
A new Window Will Open in Which Select Add Html/Javascript.
It will ask For Javascript.
Now Copy The Whole Javascript Below And Paste in it.
__________________________________________________________________________
<style>
.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
}
.showpageArea a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageArea a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a {border: 1px solid #505050;
color: #000000;font-weight:normal;
padding: 3px 6px !important;
padding: 1px 4px ;margin:0px 4px;
text-decoration: none;
}
.showpageNum a:hover {
font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpagePoint {font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
font-weight: bold;
border: 1px solid #333;
color: #fff;
background-color: #000000;
}
.showpage a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
.showpageNum a:link,.showpage a:link {
font-size:11px;
padding: 2px 4px 2px 4px;
margin: 2px;
text-decoration: none;
border: 1px solid #0066cc;
color: #0066cc;
background-color: #FFFFFF;}
.showpageNum a:hover {font-size:11px;
border: 1px solid #333;
color: #000000;
background-color: #FFFFFF;
}
</style>
<script type="text/javascript">
function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==".com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-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 pageCount=7;
var displayPageNum=3;
var firstPageWord = 'First';
var endPageWord = 'Last';
var upPageWord ='Previous';
var downPageWord ='Next';
var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}
postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){
itemCount++;
}
}else{
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+'T00%3A00%3A00%2B08%3A00&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){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
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"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
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++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){
if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}
html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;
if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}
if(postNum==1) postNum++;
html += '</div>';
if(isPage || isFirstPage || isLablePage){
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;
}
}
}
</script>
<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;"> <a href="http://blogger-templates123.blogspot.com">Blogger Widget</a></div>
__________________________________________________________________________
After Adding this Javascript you need to drag and drop the widget below the Blog Posts main widget. See this screen shot
In the above code you can find the below written word and can change its value from 7 to the number of posts you show at your main page.
var pageCount = 7;
In my Blog, it is set to 7 as it is the default for blogger posts.
Auto Move Image Slider i.e carousel For Blogger
I had provided you earlier with an image slider with two left and right panels which on click take you to other images.But some of my readers at that time wanted it to have auto moves of images in slider.So in this post i will tell you how to auto move the images in slider.If you you don't know what exactly image slider is, then don't worry, just i would like you first to read my previous post on image slider for it and if you like it just follow that tutorial to have it in your blog.
Some other widgets you would like to implement for sure like peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote wereimage hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.
Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.
Just see it at top below the blog header.
Download this Zip file and get two javascript files from it for backup.
Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.
Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F
Now search for </head> and place the below javascript codes before this tag.
In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.
Now Search for this code ]]></b:skin> and add the below css above it.
Above in code is red line with url of background image of slider,you can also change it to adjust your blog.
Just Find for /head tag and place the below script above it.
The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider.
Now Save Your Template.All the coding part is finished,now just how to add images to slider.
Just go to Layout > Page Elements > Add A Gadget > Html/Javascript
And add the below links of images and posts in it,in the format i am writing below.
Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.Java web hosting is also rising in popularity now, so better try searching one that suits your needs now.
Some other widgets you would like to implement for sure like peel add for blogger for attracting your visitors to subscribe your blog or show of your advertiser or show of some other important stuff.Some hacks like these i previously wrote wereimage hover effect,images reflection in blogger posts and zoom your images in blogger posts,which might also help you a lot.
Now lets carry on with an important tutorial of how to add the auto move image slider to your blog.
Just see it at top below the blog header.
Download this Zip file and get two javascript files from it for backup.
Now after getting these two scripts you can upload them to your own server,if you want else dont know where to upload check my this post on where to upload .js files.
Now Just login to your blogger account Then Go To > Layout > Edit/Html > Press Ctrl+ F
Now search for </head> and place the below javascript codes before this tag.
In the above codes you will see red coloured lines just replace them with the link of your file which you downloaded and uploaded to your server, if dont want then also you can use my above links.
Now Search for this code ]]></b:skin> and add the below css above it.
Above in code is red line with url of background image of slider,you can also change it to adjust your blog.
Special Step
Just Find for /head tag and place the below script above it.
The green lines are the images of side arrows to make it scroll left and right you can make and add your also to make it look different.And in pink are number to control speed of slider.
Now Save Your Template.All the coding part is finished,now just how to add images to slider.
Just go to Layout > Page Elements > Add A Gadget > Html/Javascript
And add the below links of images and posts in it,in the format i am writing below.
Just change the links and images url with yours and also there titles.Just keep on adding links to in this format to any number you want as you can add hundreds of images and posts in this format no limit to it.Java web hosting is also rising in popularity now, so better try searching one that suits your needs now.
Random Posts Widget For Blogger
Random Posts Widget For Blogger i.e each time the page of your blog refreshes the posts on the blog showed by this widget changes, means this widgets always shows unique posts from your blog with unique combinations at random,i.e the widget selects the posts randomly from all your blog posts and never knows which post might it pick from your blog to show.Really this is the gem of the widget you really should show on your blog for sure.
As before this i had blogged about a one morerandom posts widget in which a link was made and clicking on it would show random post in blog.
Now how to add this widget in the blog.
1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.
Now how to add this widget in the blog.
1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.
Change the the text no in red above in codes to select how many random posts you want to display.
And Save the Widget.Now you will be shown up the the title of the posts in widget like you see inrecent posts, recent comments or popular posts widget and all the posts will be picked randomly.
Now How to show random posts title with post summary.
Just open this script or download this Random Post Script.
Either host it to your server or use this script only.
You can get Free File Host Here.
1. Log into Blogger >> Layout >> Html/Javascript .
2.Then paste this code in it.
Just change the green url with your script url which you uploaded to your server,if you want.
Alter the codes in red in above codes to adjust the count of posts and and how much word summary you want up to show up in the widget.Thats it so Simple.If you have any problems leave your comments below.
Beautiful Rank Widgets For Blogger
Rank Widgets are actually used to display your rank of blog of various types to be displayed on your blog in form of widget,like traffic rank on alexa,page rank on google,incoming links on yahoo,or technorati rank.And i have seen many blogs using these widgets,to display of there traffic rank or page rank.
Now how to get these widgets as for them you have to visit these respective sites and grab your widget like,
Alexa Traffic rank Widget
Google Page Rank Widget:-Just read on this post to get this widget.
Technorati Widgets:-Just visit this page and get a lot widgets from here.
Yahoo Links To Page:-Shows of your all incoming links from yahoo.
You will like all these widgets for sure.Now as you will visit these sites you will get limited styles widgets for your blog.SO i have an website for you providing all these widgets at one place and in new designs like below.:-Just go to this site and build any widget you like and get codes and paste in your blog html.
Now how to get these widgets as for them you have to visit these respective sites and grab your widget like,
Alexa Traffic rank Widget
Google Page Rank Widget:-Just read on this post to get this widget.
Technorati Widgets:-Just visit this page and get a lot widgets from here.
Yahoo Links To Page:-Shows of your all incoming links from yahoo.
You will like all these widgets for sure.Now as you will visit these sites you will get limited styles widgets for your blog.SO i have an website for you providing all these widgets at one place and in new designs like below.:-Just go to this site and build any widget you like and get codes and paste in your blog html.
So just visit rankwidget.com and click on the widget you want,then will ask for your blog and give you of the codes of all new style widgets.
I loved for sure watching these widgets and gonna use them for sure in my new blog design that soon i will be switching to.
Flash Animated Label Cloud Widget For Blogger
Flash Label Cloud Widget For Blogger i.e moving or rotating labels in blogger.This is very beautiful widget designed by amanda. As to install this blogumus what amanda named it was bit complicated but now she made it to install in one single step and fixed its all errors.I am sure all of you will like this
widget.
How to install it:-
Log in into blogger
Click Layout.
Click Edit HTML tab
Click Download Full Template and back up the template first.
Find the code similar with the code below without expanding the widgets
<b:section class='sidebar' id='sidebar' preferred='yes'>
Now Place the below codes immediately after the above line you found
Now you can Preview your template. If its Ok You can Save it.
You can change codes highlited in red above to change the color of text in blogumus and background color of it.You can also alter its size to adjust your sidebar just edit the red values in above codes.
widget.
How to install it:-
Log in into blogger
Click Layout.
Click Edit HTML tab
Click Download Full Template and back up the template first.
Find the code similar with the code below without expanding the widgets
<b:section class='sidebar' id='sidebar' preferred='yes'>
Now Place the below codes immediately after the above line you found
Now you can Preview your template. If its Ok You can Save it.
You can change codes highlited in red above to change the color of text in blogumus and background color of it.You can also alter its size to adjust your sidebar just edit the red values in above codes.
All Blogger Posts Slideshow As News Headlines
Blogger Posts Random Slideshow As News Headlines or you can say Rotating random posts blogger widget. In this widget all the blog posts of your blog are displayed randomly same way as you see the slideshow of pictures or you see in some news sites which show of there latest headlines as an slideshow of one coming after another.
Some Of Its Feautres:-
1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor
over the post title halts the rotation till mouse moves off the gadget
Visit Here For Its Demo - Blogger Widgets
How to insall the widget:-
Go To Layout > Page Element > Add A Gadget > Html/Javascript
Add the below codes and save it
Just Replace the codes written in Red above with your blog url,with Heading of your widget and your width of the widget.Please dont remove Credits If you use them.
Now after saving it , Drag this widget from sidebar to top of blog posts header , as the same way we dragged the page navigation widget below blog posts box.
If you wanna only Posts title to display in this widget Then use below codes...
And rest if you wanna change some colors,fonts and all,you have to do it yourself as its impossible to do it for everybody to match your template.
Some Of Its Feautres:-
1. Shows one post title at a time.
2. Links to the post.
3. Shows post excerpt also.
4. Every 5 seconds shows a new post.
5. Cycles through all the posts in the blog.
6. Starts a new cycle at the end of the list.
7. Once loaded continues cycling even when not connected to the Internet.
8. Uses official Google AJAX technology.
9. Can be used on other blogging platforms (not tested).
10. Hovering with mouse cursor
over the post title halts the rotation till mouse moves off the gadget
Visit Here For Its Demo - Blogger Widgets
How to insall the widget:-
Go To Layout > Page Element > Add A Gadget > Html/Javascript
Add the below codes and save it
Just Replace the codes written in Red above with your blog url,with Heading of your widget and your width of the widget.Please dont remove Credits If you use them.
Now after saving it , Drag this widget from sidebar to top of blog posts header , as the same way we dragged the page navigation widget below blog posts box.
If you wanna only Posts title to display in this widget Then use below codes...
And rest if you wanna change some colors,fonts and all,you have to do it yourself as its impossible to do it for everybody to match your template.
Subscribe to:
Comments (Atom)