Make widget to appear only on the homepage or post pages - blogger

To be more clear about what I mean look at this post: Show Related Article, Post, categories on blogger

Login to blogger dashboard - Layout/Design - Edit HTML - check-list Expand widget templates, and find the section code of your widget that would be set to be appear on the home page only, or post-page only.

1 - Look at the red code , the following code will make a widget appear only on the post pages, and not appear on the homepage of your blogger blog

Code:

<b:if cond='data:blog.pageType == "item"'>

</b:if>

Example :

<b:widget id='HTML15' locked='false' title='Related Articles' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2 - Look at the red code , the following code will make a widget appear only on the home-page, and not appear on the post-pages of your blogspot blog

code:

<b:if cond='data:blog.homepageUrl == data:blog.url'>

</b:if>

Example:

<b:widget id='HTML12' locked='false' title='Advertising' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Related:
How to show / display only Post Title when click label on blogger/blogspot

and learn more other blogging tips and tutorials here : Blog tips and tutorials

Ok,

How to make Pop Up Ads on Blogger (blogspot).

Maybe you've seen many tutorials like this, about make Pop Up Ads on Blogger, as far as I know there are more complicated to use a lot of codes, but here I try to give an easy and very simple tip, even for beginners in the blog world .

Example, look here : bissmillah-alhamdulillah.blogspot.com

The steps are:

1. Login to your dashboard on Blogger.com
2. Go to the Layout Tab (Design tab)
3. Choose a Page Element
4. Add Gadget, Choose HTML / JavaScript
5. And Copy the code below into it
6. Done
   

<style type="text/css">
#gb{
position:fixed;
top:10px;
z-index:+1000;
}
* html #gb{position:relative;}


.gbcontent{
float:right;
border:2px solid #A5BD51;
background:#ffffff;
padding:10px;
}
</style>

<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>

<div id="gb">

<div class="gbtab" onclick="showHideGB()"> </div>

<div class="gbcontent">

<div style="text-align:right">
<a href="javascript:showHideGB()">
.:[Click 2 times to close this ad]:.
</a>
</div>
<center>

Insert the ad code or image or anything you want here!

</center>

<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (30-gb.offsetWidth).toString() + "px";
</script></center></div></div>

Make Auto Hide Navbar Blogger (Blogspot)

AutoHide Navigation Bar (NavBar) is For example look at free7 blogger here , Follow these steps:

1. Login to your blogger dashboard -> Edit HTML
2. Place the code below before ]]></b:skin>
   #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
   #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

For example :

<b:skin><![CDATA[/*
=======================================
Blogger Template
Design: Iwan Rachmanto
url :http://free-7.blogspot.com - www.free-7.net

=======================================
*/
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

body {
background: #FFFFFF;
width: 990px;
color: #000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px auto 0px;
padding: 0px;
}

Related : How to Hide navbar blogger

Redirect page to page on blogger use css or javascript

To Blogger Users, Want to redirect a page to another page or URL to URL..?

Look at the example script below, on red color is source of URL/page that would be to redirect , and blue color is destination url of direction where it will be addressed

Place the code after <head> tag, before <b:skin><![CDATA[/* tag

EXAMPLE 1

<b:if cond='data:blog.url == &quot;http://free-7.blogspot.com/2010/04/SOURCE.html&quot;'>
<meta http-equiv="refresh" content="0; url=http://free-7.blogspot.com/2010/04/DESTINATION.html" />
</b:if>

EXAMPLE 2

<b:if cond='data:blog.url == &quot;http://free-7.blogspot.com/2010/04/SOURCE.html&quot;'>
<meta http-equiv="refresh" content="0; url=http://WWW.GOOGLE.COM" />
</b:if>

I think the best way is to add NOINDEX meta tag , to avoid considered as SPAM by search engine spiders

EXAMPLE 3 :

<b:if cond='data:blog.url == &quot;http://free-7.blogspot.com/2010/04/SOURCE.html&quot;'>
<meta http-equiv="refresh" content="0; url=http://www.seokick7.com/" />
<meta content='NoIndex' name='Robots'/>
</b:if>

Here, you can also change the value of content="0 , for example : content="12 (12 seconds), and make an alert message on your page/blog post :

Example text on your post/page : "You will be redirected to www.themes7.net in about 12 seconds, Okay.."

Another way, use JavaScript,
Place the code after <head> tag, before <b:skin><![CDATA[/* tag , on the source blog (a blog url where use the code below will be redirect to "YOUR-DESTINATION-LINK.com" )

Example-1:

<script language='javascript' type='text/javascript'>
window.location=&quot;http://YOUR-DESTINATION-LINK.com/&quot;;
</script>

Example-2

<b:if cond='data:blog.url == &quot;http://YOUR-SOURCE-LINK.HTML&quot;'>
<meta content='NoIndex' name='Robots'/>
<script language='javascript' type='text/javascript'>
window.location=&quot;http://YOUR-DESTINATION-LINK.com/&quot;;
</script>
</b:if>

Use the redirect methods according to your purpose.

Marquee Style - Make Related Posts with Thumbnails (blogger)

This is another way to Make Related Posts with Thumbnails on blogger posts, use marquee style. By using the marquee, we will be able to display the number of related-posts so much more, and of course will look more attractive. example like in this blog.

• To do this, first, Go to blogger dashboard - Edit HTML - Click "Expand Widget Templates" Place the code below before </head> , will look like the following :
  

<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;
background-color:#003399;

}

#related-posts a{
color:#FFFFCC;
}
#related-posts a:hover{
color:#000000;
}

#related-posts a:hover {
background-color:#C8E6E1;
}
</style>
<script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/>
</b:if>

</head>

• The next step, find the following code :

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

• then, place the code below after the code above:

<!-- Marquee Start-->
<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_thumbs&amp;max-results=15&quot;' type='text/javascript'/></b:if></b:loop>

<div style='text-align: left; font-weight: bold;'><span style='font-size:130%;'>Related Topics</span></div>

<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=7;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%62%6C%6F%67%67%65%72%3C%2F%61%3E%20%7C%20%3C%61%20%68%72%65%66%3D%27%68%74%74%70%3A%2F%2F%66%72%65%65%2D%37%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%2F%27%20%73%74%79%6C%65%3D%27%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%3B%27%3E%66%72%65%65%20%37%20%6E%65%74%77%6F%72%6B%3C%2F%61%3E'));
//-->
</Script>
</b:if>
</b:if>
<!-- Marquee End-->


Look at the red-color (7 and Related Topics), to display the number of related-posts and change the title , you may make changes to this..

Minima ready for SEO blogger template

Dear bloggers and blogspot users who avidly in creating new blogs and also like to modify the templates. The following is a basic layout of Simple minima layout and ready for SEO Friendly Blogger Template .

Check out here : Minima Ready Blogger Templates

Show Related Article, Post, categories on blogger

How to make related posts appear on each posting blogger/blogspot.. (related category/label widget)

First, Go to your blogger dashboard!

Step I:

Sign in to Template - > Edit HTML - > then input the following javascript code between <head> code and </ head> or more simply look for the </ head> code, and then place the code before the </ head> , Don't forget to save.

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Step II:

Sign in to Template -> Edit HTML -> Do not forget to check the Expand Widget Templates -> find the code below.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

If found, enter the red code below between the code above

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if><b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

On this step, editing the HTML code have done, don't forget to save

Step III:

Sign in to Template -> Add a Gadget -> HTML/JavaScript -> copy-paste the code below and be sure to provide a title for example, "Related Articles" -> then don't forget to save .

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Step IV:

So that "Related Articles" it does not appear on the main page and only appear on the single post pages, so we need to add some codes:

Sign in to Template -> Edit HTML -> Do not forget to check the Expand Widget Templates -> find the code below, look in accordance with a title that we've input before, for example, where I had been giving "Related Articles", If you have found place two red codes below.

Note: The following is HTML15 code don't you make it the guidelines, because each template must be different.

<b:widget id='HTML15' locked='false' title='Related Articles' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>


Okay, Happy Blogging.

Share Button the complete Bookmark for blogger

Share this button for blogger

Style - 1)

Following are an another way to share your articles to any socialbookmarking sites, like facebook, google readers...etc. for your readers.

If your 're using blogger template, then just copy-paste the code below , the best place is right after the <div class="'post-footer'"> tag, or after the <p><data:post.body/></p> tag.
Go to your blogger Dashboard-Edit HTML-check-list "Expand Widget Templates" ,and find the code above with push keyboard button "Vtrl + F" ,and place the tag code in the find box (left-bottom)

<!-- AddThis Button BEGIN --> <div><a expr:name='data:post.title' expr:id='data:post.url' onmouseover='return addthis_open(this, "", this.id, this.name);' onmouseout='addthis_close()' onclick='return addthis_sendto()'><img src="http://s7.addthis.com/static/btn/lg-share-en.gif" width="125" height="16" alt="Bookmark and Share" style="border:0"/></a> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js?pub=xa-4a2d675d11a52fb0"></script></div> <!-- AddThis Button END -->

Style - 2 )

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dbd04eb22c24b47"></script>
<!-- AddThis Button END -->

Style -3 )

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4dbd070f50236695"></script>
<!-- AddThis Button END -->

Of course, you can put the above share button codes that not necessarily at the bottom of your articles, like at the home page, sidebar, or wherever you want....through your blog widget (Page Elements - Add a Gadget - HTML/JavaScript Add)

And if you are using another platform web, like :website,wordpress,MySpace , then please visit http://www.addthis.com