RSS Posts
RSS Comments
Space For Sell
Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

It is a very good way to raise fund from the blog and its a honour, if your readers wish to reward you for all hard works and effort you have done for your blog. PayPal Donation button will help readers to easily send you some bucks via PayPal.


  1. Sign into your Paypal account and if you don’t have one you can get a free paypal account here.
  2. Login to your Paypal Account with your email address and password.
  3. Click on "Merchant Services" tab at the top menu of page.
  4. Now scroll down. You will see a "Donations" link at the right sidebar in the "Paypal Website Payments Standard " header section.
  5. You will get some options to choose like Donation ID, Donation name/service etc ... Only first one Donation name/service is required all the remaining field is optional. So enter the first field. If you want to use your own image or other button style click on "Customize Appearance" .
  6. After filling up all information click on the "Create Button Now" link.
  7. Now you will get some HTML code. Copy it.

Continue
After many failed attempts, I was almost ready to admit defeat with this function until I discovered this excellent script by Mohamed of Blogger Accessories. This script replaces the default blog pager (links to newer, older and home pages) with numbered page navigation. Furthermore, it offers the ability to customize the number of page links and the number of posts displayed on each page. The ability to 'paginate' Blogger blogs has been a long requested feature. Pagination allows us to number blog pages like those of a book, offering readers the ability to navigate deeper into the archives with ease when compared to the 'newer' and 'older' post links.
You can also find the aurthor click here



  1. Log in to your blogger account and navigate to Layout section. Now go to the edit HTML subtab.
  2. Find the following code
    ]]></b:skin>

  3. Paste The code below before the above code
    .showpageArea {padding: 0 2px;margin-bottom:10px;margin-top: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;
    }

  4. Now search for this code or related in your template ( no need to expand widgets )
    <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/> </b:section>

  5. Place the below code after above code
    &lt;script type=&quot;text/javascript&quot;&gt;


    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==&quot;.blogspot.com/&quot;;
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= &#39;&#39;;
    var upPageHtml =&#39;&#39;;
    var downPageHtml =&#39;&#39;;

    var pageCount=5;
    var displayPageNum=3;
    var firstPageWord = &#39;First&#39;;
    var endPageWord = &#39;Last&#39;;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;

    var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;

    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!=&#39;&#39;){
    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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    }
    }//end if(post.category){

    itemCount++;
    }

    }else{
    if(title!=&#39;&#39;){
    if(itemCount==0 (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }

    if(title!=&#39;&#39;) postNum++;
    htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    itemCount++;
    }
    }

    for(var p =0;p&lt; htmlMap.length;p++){
    if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    if(fFlag ==0 &amp;&amp; p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }

    fFlag++;
    }

    if(p==(thisNum-1)){
    html += &#39;&amp;nbsp;&lt;span class=&quot;showpagePoint&quot;&gt;&lt;u&gt;&#39;+thisNum+&#39;&lt;/u&gt;&lt;/span&gt;&#39;;
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39; &lt;/a&gt;&lt;/span&gt;
    &#39;;
    }
    }

    if(eFlag ==0 &amp;&amp; p == thisNum){
    downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    eFlag++;
    }
    }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    }//end for(var p =0;p&lt; htmlMap.length;p++){

    if(thisNum&gt;1){
    if(!isLablePage){
    html = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }else{
    html = &#39;&#39;+labelHtml + firstPageWord +&#39; &lt;/a&gt;&lt;/span&gt;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }
    }

    html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;font-size:11px;padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;color: #000000;border: 1px solid #333; background-color: #FFFFFF;&quot; class=&quot;showpage&quot;&gt;Page &#39;+thisNum+&#39; of &#39;+(postNum-1)+&#39;: &lt;/span&gt;&#39;+html;

    if(thisNum&lt;(postNum-1)){
    html += downPageHtml;
    html += &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[htmlMap.length-1]+&#39;&quot;&gt; &#39;+endPageWord+&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }

    if(postNum==1) postNum++;
    html += &#39;&lt;/div&gt;&#39;;

    if(isPage isFirstPage isLablePage){
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);

    if(postNum &lt;= 2){
    html =&#39;&#39;;
    }

    for(var p =0;p&lt; pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }

    if(pageArea&amp;&amp;pageArea.length&gt;0){
    html =&#39;&#39;;
    }

    if(blogPager){
    blogPager.innerHTML = html;
    }
    }

    }
    &lt;/script&gt;

    &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

  6. Save it


Continue
When I was looking for a widget for my blog i found all most every site is using this sexy social hack. Today I am now adding this hack in my blog. Its realy nice and its very important for every blog. It will help to increase your trafic. You can easily post or share from your blogger blog to other social network like face book, digg etc. let see the following image i think you will love it.



  1. Sign in to Blogger
  2. Go to LAYOUT -- Edit HTML -- (checked expand widget templates)
  3. Find the following code
  4. </head>
  5. After the above code place the following code
  6. <!--HIDDEN-BOOKMARKS-STARTS--> <style type='text/css'> div.beauty-bookmarks { height:54px; background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat left bottom; position:relative; width:540px; } div.beauty-bookmarks span.beauty-rightside { width:17px; height:54px; background:url('http://i52.tinypic.com/sxd4e8.jpg') no-repeat right bottom; position:absolute; right:-17px; } div.beauty-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.beauty-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; } div.beauty-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-yahoo, .beauty-yahoo:hover, .beauty-blinklist, .beauty-blinklist:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-myspace, .beauty-myspace:hover, .beauty-mixx, .beauty-mixx:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover, .beauty-syndicate, .beauty-syndicate:hover, .beauty-email, .beauty-email:hover { background:url('http://i51.tinypic.com/2nw02f4.jpg') no-repeat !important; } .beauty-furl { background-position:-300px top !important; } .beauty-furl:hover { background-position:-300px bottom !important; } .beauty-digg { background-position:-500px top !important; } .beauty-digg:hover { background-position:-500px bottom !important; } .beauty-reddit { background-position:-100px top !important; } .beauty-reddit:hover { background-position:-100px bottom !important; } .beauty-stumble { background-position:-50px top !important; } .beauty-stumble:hover { background-position:-50px bottom !important; } .beauty-delicious { background-position:left top !important; } .beauty-delicious:hover { background-position:left bottom !important; } .beauty-yahoo { background-position:-650px top !important; } .beauty-yahoo:hover { background-position:-650px bottom !important; } .beauty-blinklist { background-position:-600px top !important; } .beauty-blinklist:hover { background-position:-600px bottom !important; } .beauty-technorati { background-position:-700px top !important; } .beauty-technorati:hover { background-position:-700px bottom !important; } .beauty-myspace { background-position:-200px top !important; } .beauty-myspace:hover { background-position:-200px bottom !important; } .beauty-twitter { background-position:-350px top !important; } .beauty-twitter:hover { background-position:-350px bottom !important; } .beauty-facebook { background-position:-450px top !important; } .beauty-facebook:hover { background-position:-450px bottom !important; } .beauty-mixx { background-position:-250px top !important; } .beauty-mixx:hover { background-position:-250px bottom !important; } .beauty-script-style { background-position:-400px top !important; } .beauty-script-style:hover { background-position:-400px bottom !important; } .beauty-designfloat { background-position:-550px top !important; } .beauty-designfloat:hover { background-position:-550px bottom !important; } .beauty-syndicate { background-position:-150px top !important; } .beauty-syndicate:hover { background-position:-150px bottom !important; } .beauty-email { background-position:-753px top !important; } .beauty-email:hover { background-position:-753px bottom !important; } </style> <!--HIDDEN-BOOKMARKS-STOPS-http://bloggerwalk.blogspot.com-->
  7. Find the following code again
  8. <data:post.body/>
  9. Place the below code right after the above one
  10. <b:if cond='data:blog.pageType == "item"'> <div class='beauty-bookmarks'> <ul class='socials'> <li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li> <li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> <li class='beauty-syndicate'><a href='http://feeds.feedburner.com/bloggerwalktitle='Subscribe to RSS'/></li> <li class='beauty-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li> </ul> <span class='beauty-rightside'/></div> </b:if>
  11. Please see the Green text. You may need to edit it with your own feedburner ID.
  12. After all complete.. Save Your Template. And it is done.

Continue

Before I placing the social network link with icon in my blog I will describe it in tutorial section. so I will find the following code first.

1. Log in blog account

2. go to edit html in the layout section and expand the command

3. Now search the following code
<data:post.body/>

4. Place the following code right after the above code
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><b:if cond='data:blog.pageType == "item"'>
<br/><center><hr/>Share This Article:<br/>
<!--DIGG-->
<script type='text/javascript'>digg_url=&quot;<data:post.url/>&quot;;</script><script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
<!--Stumble-->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://Your Direct Link/tribune-v10/Images/SU.png'/></a>
<!--Twitter-->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://Your Direct Link/tribune-v10/Images/twitter.png'/></a>
<!--Delicious-->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://Your Direct Link/tribune-v10/Images/del.png'/></a>
<!--Facebook-->
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://Your Direct Link/tribune-v10/Images/facebook.png'/></a>
<!--Technorati-->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://Your Direct Link/tribune-v10/Images/t.png'/></a></center></b:if></td>
</tr>
</table>
<!--SOCIAL-BOOKMARKING-ICONS-STARTS-->


Now Download Icons from the following links and change red colored text with your direct link
1. Download link 1
2. Download Link 2

Continue
Now i am placing related post widget in my blog and if youo want to do it then folow what i am doing i thing it will be easy but you have to folow me

1. Log in your blogger accoung
2. go to layout then click edit html
3.Place the following code right after ]]></b:skin> , thats between ]]></b:skin> and </head>


<!--RelatedPostsStarts-->
<style>
#related-posts {
float : left;
width : 540px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
color : #940f04;
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
color : #054474;
font-size : 11px;
text-decoration : none;
}
#related-posts a:hover {
color : #054474;
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(&quot;http://www.gigaimage.com/images/brrl1rtaziisu0yj6kj6.gif&quot;) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 16px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

</style>
<script src='http://photoskull.com/tribune-v10/JavaScript/RelatedPosts_ForBlogger.js' type='text/javascript'/><!--RelatedPostsStops-->

4. Now search for this code line:
<data:post.body/>

And after this, paste these code lines
<!--RELATED-POSTS-STARTS--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script></div></b:if><!--RELATED-POSTS-STOPS-->

Continue
codes HTML
Recent Post Widget for blog
The most easiest way to add this widget by using feedburner rss feeds. All you have to do just open an account on feedburner then you will find the rest of it.
Here You will find step by step instruction. to read the full article .........

Continue
Related Posts Plugin for WordPress, Blogger...