Rilwan's

HTML code for email buttons in Blogger

2009-12-01T17:30:00.000-08:00

Today i am sharing a simple code that you can add to the page element . You can add such images in your blog/website and link them to mail you when they are clicked .

Go to dashboard of your blogger > Layout > Add a Gadget > HTML/JAVASCRIPT
Add the below codes to it-


<a href="mailto:rilwan@rilwansaeed.com">

<img src="http://gickr.com/results2/anim_1389bd1c-fbc4-2b74-99ea-61b893307efb.gif"/></a>

.Add your email in red colored place.
Change the blue color if u want change the image link

Email Me,Twitter Follow Me and Feed Subscribe Widget

2009-11-20T04:25:00.000-08:00

Hi guys many of my friends, followers and readers have asked me how to add these three as in my blog to their one.

So i have made this one as a widget so you can add in page elements.
Now How to add this widget to you Blog. Follow the instructions.
Go to dashboard of your blogger > Layout > Add a Gadget > HTML/JAVASCRIPT
Add the below codes to it-


<a href="mailto:youremail@gmail.com" rel="alternate" title="Email me" type="application/rss+xml"><img alt="" style="border:0" src="http://gickr.com/results2/anim_1389bd1c-fbc4-2b74-99ea-61b893307efb.gif"/></a><a href="http://feeds.feedburner.com/yourfeedname" rel="alternate" title="Subscribe to my feed" type="application/rss+xml"></a><a href="http://twitter.com/yourtwittername" rel="alternate" title="Follow me on twitter" type="application/rss+xml"><img alt="" style="border:0" src="http://gickr.com/results2/anim_a0fd4380-2982-f8f4-296a-7f1a507e7a04.gif"/></a><a href="http://feeds.feedburner.com/Rilwans" rel="alternate" title="Subscribe to my feed" type="application/rss+xml"><img alt="" style="border:0" src="http://gickr.com/results2/anim_7a458ea5-b134-7f04-519e-3c079c525eb3.gif"/></a><a href="http://feeds.feedburner.com/gvmaldives" rel="alternate" title="Subscribe to my feed" type="application/rss+xml"></a><a href="http://rilwanblog.blogspot.com" target="_blank">Get This</a>

.now change the red colored one to yours and save it.That is it if you like it leave a comment.

Display posts as headlines - blogger widget

2009-10-25T23:41:00.000-07:00

Do you like the way news channels display moving headlines? If yes, then you should check out this blogger widget called WH Headlines. This blogger hack displays recent posts as headlines. You can see live demo above this post.
How to Add WH Headlines blogger widget to your blog

Copy the following code to a new HTML/javascript gadget in layout section.


<script style="" src="http://ads.googlecode.com/files/Headlines%20widget%20js.js"> </script><script style=""> var nMaxPosts = 15; var sBgColor; var nWidth; var nScrollDelay = 175; var sDirection="left"; var sOpenLinkLocation="N"; var sBulletChar="»»"; </script> <script style="" src="http://Yourblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"> </script>

How to Customize this widget/Gadget

var nMaxPosts = 15; - This code sets the no of posts in this widget.

var sBgColor; - If you want to set background color then change this code to var sBgColor= grey;

var nWidth; - Modify this code to change the width to var nWidth= 100px;

var nScrollDelay = 175; - This code is used to set the speed of scrolling. Lesser the no, higher the speed of scrolling.

var sDirection="left"; - This code sets the direction of scroll. left = Right to left; Right = Left to right; Up = Down to up; Down = Up to down

var sBulletChar="»»"; - This bullet appears before each post link in this widget. You can replace this to any other bullet.

http://Yourblog.blogspot.com - Replace this code by your Blog address.

Numbered Page Navigation For Blogger

2009-10-12T22:14:00.003-07:00

Page numbered widget makes visitors easy to navigate the pages in your blog it look nice as shown in below image.

Lets see how to add this widget....

Follow below steps how to install it :-

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 a {



text-decoration:underline;



}



.showpageNum a {



font-weight: bold;



text-decoration:none;



border: 1px solid #000;



background-color:#fff;



margin:0 3px;



padding:3px;



}



.showpageNum a:hover {



border: 1px solid #000;



background-color:#057BD3;



}



.showpagePoint {



color:#fff;



font-weight: bold;



text-decoration:blink;



border: 1px solid #000;



background: #057BD3;



margin:0 3px;



padding:3px;



}



.showpageOf {



text-decoration:none;



padding:3px;



margin: 0 3px 0 0;



}



.showpage a {



text-decoration:none;



border: 1px solid #000;



padding:3px;



}



.showpage a:hover {



text-decoration:none;



}



.showpageNum a:link,.showpage a:link {



text-decoration:none;



color:#333;



}





</style>











<script type="text/javascript">





function showpageCount(json) {



var thisUrl = location.href;



var htmlMap = new Array();



var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.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=10;



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="http://YourBlogName.blogspot.com/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

<spam><a href="http://rilwanblog.blogspot.com/2009/10/numbered-page-navigation-for-blogger.html" target="_blanck">Grab This</a></sapm>

Page Navigation Menu Widget

In the above code you can edit the below lines into your wish .

1 : var pageCount = 10;

The digit in red represents number of posts to be shown in single page. Change the digit to show as many pages you want.

2 : var displayPageNum = 3;

here the digit in red represents number of pages to be listed.

3.YourBlogName.blogsopt.com is replace with blog url.

Now save your template .

Show your recent posts by adding a simple widget

2009-10-12T21:20:00.001-07:00

Show your recent posts by adding a simple widget as in my blog it shows your latest 10 posts as a list in your main page so the readers can easily read that posts.This makes increasing number of visitors to your blog.Now i will tell you how to add this widget.
Login to your Blogger account and navigate to Layout section
Add Page Element HTML/Java script.
Copy the below codes And paste it.
After that you have to change the red colour to your blog name and save it.Thats it hope you like it


<script>

function rp(json) {

document.write('<ul>');



for (var i = 0; i < numposts; i++) {

document.write('<li>');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;



if (i == json.feed.entry.length) break;



for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}



posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";



if ("content" in entry) {

var postcontent = entry.content.$t;

} else if ("summary" in entry) {

var postcontent = entry.summary.$t;

} else

var postcontent = "";

var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

document.write(posttitle);



if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);



if (showpostsummary == true) {

if (postcontent.length < numchars) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</li>');

}

document.write('</ul>');



}

</script>



<script>

var numposts = 10;

var showpostdate = false;

var showpostsummary = false;

var numchars = 100;

</script>



<script src="http://YOURBLOG.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>



<div class="clear"></div><p style="text-align:right;"><a href="http://rilwanblog.blogspot.com/2009/10/show-your-recent-posts-by-adding-simple_7783.html" title="Grab this wiget">Grab this Widget</a></p>

Now change the red colour to your blog name thats it. Hope you like it leave a comment.

Statistics widget for blogger

2009-10-08T00:14:00.000-07:00

Statistics widget that shows all the statistics counting total no of posts and comments in your blog.The bloggers who have thousands of comments on there blog will sure love to use this widget in there blog as it will dispaly the all counts of there comments and post counts too.

Now How to add this widget to you Blog. Follow the instructions.

Go to dashboard of your blogger > Layout > Add a Gadget > HTML/JAVASCRIPT

Add the below codes to it-


<script style="text/javascript">

function numberOfPosts(json) {

document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

}

function numberOfComments(json) {

document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');

}
</script>

<ul><li><script src="http://rilwanblog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numberOfPosts"></script></li>

<li><script src="http://rilwanblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></li></ul>

<noscript><a href="http://rilwanblog.blogspot.com" target="_blank">Blogger Hacks</a></noscript><a href="http://rilwanblog.blogspot.com/2009/10/statistics-widget-for-blogger.html" target="_blank">Get This

</a>

now change the red to your blog name .

Scroll Bar Widget For Blogger

2009-10-07T23:58:00.000-07:00

Add a scrolling bar to sidebar of blogger text or labels if list is too long.This scroll bar helpful if you have so many categories or want many posts to be seen in short space.

Lets Make a Scrolling Bar menu for your Blog

First of all sign in your blog and go to Layout section. Now you have to click on Add a Page Element Where you want to add the scrolling bar widget.
Select HTML JAVASCRIPT to add the page element .

Now You have to add some html codes to his page element to show of the scroll bar menu widget to the sidebar of your blogger.


<div class="widget-content">

<ul style="height:150px;width:150px; overflow:auto; ">



<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li>

<li><a href="http://www.blogaddress.com">Your Text</a></li><span style="font-weight:bold;"></span>



</ul></div>

<a href="http://rilwanblog.blogspot.com/2009/10/scroll-bar-widget-for-blogger.html" target="_blank">Get This

</a>

Copy this codes and paste it to page element and save it.

Now preview your blog.

You can change your links and text in the codes to show of yours links and posts.