Related Posts or link within Widget For Blogger

Wednesday, 11 January 2012

Related Posts in very easy method to show you post randomly to your visitor this will display you posts to you reader  with current posts
1.Login to your blogger account and

2. Design = > Edit HTML and expand your widget templates
3.Now find this line of code

</head>

and replace it with(don't worry </head is added in below code nothing will change in you blog by replacing this code)

<!--Related Posts Scripts and Styles Start-->
<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts .widget{
padding-left:6px;
margin-bottom:10px;

}
#related-posts .widget h2, #related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:blue;
}
#related-posts a:hover{
color:blue;
}
#related-posts ul{
list-style-type:none;
margin:0 0 0px 0;
padding:0px;
text-decoration:bold;
font-size:15px;
text-color:#000000
}
#related-posts ul li{
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLx7jzO1hiFx99RxkWnRJdGypSZ2ruxnuMkFj2zOK_SDc3x3c3Pj-17aG-0OmJC2zmFgFDaEKrAX5R5jIMSK1YD7Pbyne9dvijv484L6AiBy-gWKW3dH6FG0GtNGONo4ghiSw4NZwO_E/s200/greentickbullet.png) no-repeat ;
display:block;
list-style-type:none;
margin-bottom: 13px;
padding-left: 30px;
padding-top:0px;}
</style>

<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-for-blogger.js' type='text/javascript'/>

<!--Remove--></b:if>
<!--Related Posts Scripts and Styles End-->
</head>

If you want to change the title of your widget you can edit this line of the above code

var relatedpoststitle="Related Posts";

If you want you can edit the blue and black colors present in this code
4.Now find this line of code

<div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

<p class='post-footer-line post-footer-line-1'>

Now immediately after any of these lines(whichever you could find) place this Below code

<!-- Related Posts Code Start-->

<!--Remove--><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>

<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-for-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget for Blogger" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a>

<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;);
</script>
</div>

<!--Remove--></b:if>
<!-- Related Posts Code End-->

var maxresults=5;

this line determines the number of related posts that are displayed..and by default 6 posts are fetched from each label.

Now you should have a working related posts widget on your blog.If you want to customize the look and feel,then you can alter the CSS rules. .The codes are well commented .So this can be easily removed whenever you want..
Note: If you want to display the Related Posts on every page, then remove the 4 lines of code starting with <!--Remove-->




If You like this widget then please leave your comment for us 

Continue Reading | comments

How change label button in blogspot/blog

hey friend label is good way to search your contain in blog blogger launch this with option here we see how we can change label cloud How to Customize?

Here is a sample Style which will give a bluish look for the cloud..Here i have applied styles for all 5 label classes and their hover styles (so 10 style definitions in total).
Add Below Code before ]]></b:skin>



.label-size-5 a {color: #2789ce; /*color of a label of class 5*/

font-size: 3em;
text-decoration: none;
   }
.label-size-5 a:hover {color: #2789ce; /*color of a label of class 5 on hover*/
text-decoration: underline;
   }
.label-size-4 a {color: #2789ce;/*color of a label of class 4*/
font-size: 2.5em;
text-decoration: none;
   }
.label-size-4 a:hover {color: #2789ce;/*color of a label of class 4 on hover*/
text-decoration: underline;
   }
.label-size-3 a {color: #2789ce;/*color of a label of class 3*/
font-size: 2em;
text-decoration: none;
   }
.label-size-3 a:hover {color: #2789ce; /*color of a label of class 3 on hover*/
text-decoration: underline;
   }
.label-size-2 a {color: #2789ce;/*color of a label of class 2*/
font-size: 1.5em;
text-decoration: none;
   }
.label-size-2 a:hover {color: #2789ce; /*color of a label of class 2 on hover*/
text-decoration: underline;
   }
.label-size-1 a {color: #2789ce;/*color of a label of class 1*/
font-size: 1em;
text-decoration: none;
   }
.label-size-1 a:hover {color: #2789ce; /*color of a label of class 1 on hover*/
text-decoration: underline;
   }

Here all of these CSS styles are customizable.You can change the colours and font sizes of each of the 5 classes.
color: #2789ce; is responsible for the colouring of each of the classes.You can change it appropriately with some other hex colour code or something like color:red;
You can adjust the font size of these 5 classes by adjusting the corresponding font-size: attribute of that label size class.. (em is a unit of font size just like px)

Continue Reading | comments

Display Selective Blogger Widgets on homepage, archive,post page, or particular pages

Before getting into the details of selective display,let us discuss about the different types of pages on blogger.
1) home page- yea its your blogs home page as the name suggests(actually this is not a type. but i will still include it here..)
2) Archive Page- Refers to archive pages..
3) Item Page - Refers to Post Pages
4) Index Page - Includes home page + label page + search results page
5) Static Page – The newly introduced Blogger Pages
Selective Display..

There are different conditions to check the page type. You can use these conditions for the selective display.

You might like to display a welcome message on the home page only..

<b:if cond='data:blog.url == data:blog.homepageUrl'>
Welcome to my Blog
</b:if>

Displaying on all pages other than the homepage

<b:if cond='data:blog.url != data:blog.homepageUrl'>
this is not the homepage
</b:if>

Displaying something on the Archive Pages..

<b:if cond='data:blog.pageType == &quot;archive&quot;'>
Hii this is an archive page
</b:if>

Displaying something on non Archive Pages..

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
Hii this is an non archive page
</b:if>

Displaying something on post page only

<b:if cond='data:blog.pageType == &quot;item&quot;'>
Hii this is a post page
</b:if>

Displaying something on non post page only

<b:if cond='data:blog.pageType != &quot;item&quot;'>
Hii this is a non post page
</b:if>

Displaying something on static  pages only

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
Hii this is a static page
</b:if>

Displaying something on  all other than static pages

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
Hii this is not a static page
</b:if>

You can use the conditional thing for the index type pages. But i don't find much use in that.

Now displaying something on a particular url only (may be a particular post page only or something like that)

<b:if cond='data:blog.url == &quot;The_Particular_Page_Url&quot;'>
this will be displayed on The_Particular_Page_Url only
</b:if>

(you will have to replace The_Particular_Page_Url with the url where you need the widget to be displayed..)

Now displaying something on all pages other than a particular url

<b:if cond='data:blog.url != &quot;The_Particular_Page_Url&quot;'>
this will not be displayed on The_Particular_Page_Url
</b:if>

Now how to use two conditions (or more).. the logical AND thing.. :)

<b:if cond='data:blog.url != &quot;The_Particular_Page_Url1&quot;'>
<b:if cond='data:blog.url != &quot;The_Particular_Page_Url2&quot;'>
this is not Particular_Page_Url1 and this is not Particular_Page_Url2
</b:if>
</b:if>

the else thing..
What if you need to display something on the homepage and something else on all other pages.. here comes the use of if else

<b:if cond='data:blog.url == data:blog.homepageUrl'>
This is the homepage
line1
line2
<b:else/>
This is not the homepage
line 3
line4
</b:if>

Different combinations are possible..

Limitations
1) I don't see a way to use OR conditions
2) There isn't any direct easy way to include AND in conditional statements
3) The main drawback is that we cant enclose an entire widget within the b:if tag.. you will get some message telling that a b:section cant have b:if s ie you can wrap an unexpanded widget within a b:if condition


Wrapping a widget with the conditional tags
Every widget other than the BlogPost Widget has this general structure

<b:widget id='something' locked='' title='' type=''>
<b:includable id='main'>
somethings here
</b:includable>
</b:widget>

Wrapping conditional tags can be done as

<b:widget id='something' locked='' title='' type=''>
<b:includable id='main'>
<b:if cond='data:blog.url == &quot;The_Particular_Page_Url&quot;'>
some things here
</b:if>
</b:includable>
</b:widget>

this code will display the widget on The_Particular_Page_Url only (you have to provide this url)

Another Limitation..
wrapping the blogpost widget is little complicated as it has many b:includables.. yea you can do that too.. :)

Another Important B:if condition..

Some of you might want to display adsense ads below the first post only..OK there is a condition for checking if the post is the first post or not..

<

b:if cond='data:post.isFirstPost'>
OH yea this is the first post on this page
</b:if>

This condition will work within the blogger post loop. 

Continue Reading | comments

1. Login to your Blogger Dashboard and go to the Edit HTML page under the Design Tab , Check the “Expand Widget Templates”  Option and locate

<p class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<div class='post-footer-line post-footer-line-3'>

Or if that is not there then find

<data:post.body/>

and place the  following code  just below any of these lines[whichever is present in your template].

<script language='text/javascript'> 
 var OutbrainPermaLink="<data:post.url/>"; 
 var OB_demoMode = false; 
 var OB_Script = true; 
 </script> 
 <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
and Save your template. 

2. Now you would be able to See the new Star Ratings Below each of your Blogger Posts





Optional Tweak
If you want to display the Star Ratings on the Post Page only, then Wrap the Ratings code within Conditional Tags like

<b:if cond='data:blog.pageType == &quot;item&quot;'> 
    <script language='text/javascript'> 
    var OutbrainPermaLink="<data:post.url/>"; 
    var OB_demoMode = false; 
    var OB_Script = true; 
    </script> 
    <script src='http://widgets.outbrain.com/OutbrainRater.js' type='text/javascript'/>
</b:if>

Second one easily  instantiation
Click here Outbrain Website
 

Continue Reading | comments

Display Blog Title for Search engine Results and increase visitors

i visited so many blog some blog write add meta tag for you blog this method is also right but what we do when we have large number of post like 120 or 200 then adding meta tag for each blog posts is increasing html codes in our blog html so that i found new trick to add each post that Google and other search engine can easily find your blog posts title in their search result

Login to your blogger account

From your Dashboard opt for Layout/ Design/Template

Now choose Edit Html. You will see your template code there. In that template code find

<title><data:blog.pageTitle/></title>

and replace it with

 

<!-- Start myblogtricks.blogspot.com: Changing the Blogger Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/><b:if cond='data:blog.pageName'> - </b:if><data:blog.title/></title>
</b:if>
<!-- End myblogtricks.blogspot.com: Changing the Blogger Title Tag –>

Now  Save the  Template.
 
If You like this posts then please leave a comment 

Continue Reading | comments