Tampilkan postingan dengan label Template Hacks. Tampilkan semua postingan
Tampilkan postingan dengan label Template Hacks. Tampilkan semua postingan

Minggu, 08 Agustus 2010

Change Older Post And Newer Post Link With Images Blogger

Change Older Post And Newer Post Link With icons or images in Blogger is very nice trick to make your blog look very beautiful.As it make your blog look more beautiful than before if you are using good icons to be get replaced with older post or newer post or home link.Today i will tell you how easy it is to hide those links and place your any image you like.
These are the links below pointed by arrows to be get replaced in picture which i was talking about.



Now how to change these links with icons is very easy.
Got to LAYOUT > Edit HTML > Expand Widgets
Now follow these steps to replace codes :-


Find the code in red lines and replace them with lines in green following each red line-

1.<data:newerPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/Newer_post_icon.png'/>

2.<data:olderPageTitle/>
Replace with
<img src='http://bandofgirls.googlepages.com/older_post_icon.png'/>

3.<data:homeMsg/>
Replace with
<img src='http://bandofgirls.googlepages.com/home_icon.png'/>


Please Host these images to your hosting image service and change these urls with yours as they may exceed bandwidth.


Now preview it . If its Ok
You can save your template.
How the links will appear after changing these codes -

I hope you will like these trick and icons for sure and its an advice to please host these images to your server.

READ MORE - Change Older Post And Newer Post Link With Images Blogger

Kamis, 13 Mei 2010

Post Summaries on Blogger With Read More

Blogger is fulfilling some of our expectations. Now blogger officially supports Post Summaries With Read more.This means that you wont need any JavaScript and CSS based tricks to display post summaries on Non-Post Pages.The static pages would be out soon. A screenshot on the official blogger buzz blog has made it more clear.

How Does This Work

Blogger has introduced something called jump breaks. This will help you in creating the summary.


What is a jump break? - Jump break is a special tag which can be inserted anywhere in a post using the post editor.When you have inserted a jump break into a post, the portion of the post above(or before) the jump break will serve as the summary of the post. This means that only this smaller portion will be displayed on Non-post pages.

How to insert a jump break?

If you are using the New Advanced Post Editor, then you can insert the jump break easily from the post editor.

If you are not using the New Post editor,then you will have to manually type the jump break tag . To do that just place <!-- more --> [Note that there is a space before and after more.] at the position where you want the break to occur. Now try going to your home page,and only the summary would be displayed on the home page.You might get problems if you are using a modified and highly customized template. In that case try the following adjustments. Go to your Blogger Layout > Edit HTML and expand the Widget templates. Now check if the following code is already present in your template
<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>  

</div>

</b:if>
If this code is not present in your template,then add this code before
<div class='post-footer'>
Now it should work properly.. If it doesn't,then leave a comment here and i will try to help you out..

Changing the Read More Text

By default the read more link text is Read more »  . You can change this to whatever you like. To do that, Go to Blogger Layout and click on the Edit link on the Blog Posts Widget.
image
Change the Post Page Link Text and Save the Settings..

Drawbacks of the New Feature

For the post summaries to work effectively, you have to edit each of your posts and add the jump link in each of them. Blogger wont generate summaries automatically.:(

A mistake that you might make that can cause the sidebars to move down.

When you insert a jump break in the post,the part of the post after the jump break gets truncated. In your posts,if there are some opening div tags before the jump break and some of these are closed after the jump break then problem arises. When blogger truncates the part of the post after the jump break,the closing div gets missing. That's why the sidebar shifts to the bottom.
So in order to solve this you should take some care in inserting the jump break.The jump break shouldn't be inserted into open tags..
For example something like this shouldn't happen.(You can see these things if you switch to Edit HTML instead of Compose)
<div> 

This is the short summary 

<!-- more --> 

This is the rest of the post 

</div> 
As it is clear from this code, the jump break is inserted into an open div tag and the div is closed after the jump break.This should not happen.You should insert jump breaks after closing the div tag..
So this should look like
<div> 

This is the short summary 

</div> 

<!-- more --> 

This is the rest of the post 
I hope that the blogger post editor will soon show warnings when the jump break is inserted into open tags.

Permalink:Post Summaries on Blogger With Read More
READ MORE - Post Summaries on Blogger With Read More

Numbered Page Navigation For Blogger

Page Navigation hack is now also available in bloggers. As you may be viewing the numbered menu widget below the posts to visit the latest or previous posts. as these widgets are only provided in wordpress blogs or hosted blogs.But now his hack has been made available in bloggers also with the help of Mohammad Rias who always come out with these hacks.

Let us see how to add this Page Navigation Menu Widget :

Login To Your Blogger And Then Click On Settings And Navigate To Layout Section.

Then Click On Edit/Html.

Now Find for ]]></b:skin> tag and place below codes before it..


.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#ccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #ccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

Now search for </body> and place the below codes before it.


<script style='text/javascript'>
var pageCount=5;
var displayPageNum=2;
var upPageWord=&quot;Previous&quot;;
var downPageWord=&quot;Next&quot;;
</script>
<script type='text/javascript'>
//<![CDATA[
var home_page_url=location.href;function showpageCount(json){var thisUrl=home_page_url;var htmlMap=new Array();var thisNum=1;var postNum=1;var itemCount=0;var fFlag=0;var eFlag=0;var html='';var upPageHtml='';var downPageHtml='';for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;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+'&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){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">'+thisNum+'</span>'}else{if(p==0){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++}}}if(thisNum>1){html=''+upPageHtml+' '+html+' '}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}function showpageCount2(json){var thisUrl=home_page_url;var htmlMap=new Array();var isLablePage=thisUrl.indexOf("/search/label/")!=-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 labelHtml='<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl=home_page_url;for(var i=0,post;post=json.feed.entry[i];i++){var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);timestamp=encodeURIComponent(timestamp1);var title=post.title.$t;if(title!=''){if(itemCount==0||(itemCount%pageCount==(pageCount-1))){if(thisUrl.indexOf(timestamp)!=-1){thisNum=postNum}if(title!='')postNum++;htmlMap[htmlMap.length]='/search/label/'+thisLable+'?updated-max='+timestamp+'&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){upPageHtml=labelHtml+upPageWord+'</a></span>'}else{upPageHtml='<span class="showpage"><a href="'+htmlMap[p]+'">'+upPageWord+'</a></span>'}fFlag++}if(p==(thisNum-1)){html+='<span class="showpagePoint">'+thisNum+'</span>'}else{if(p==0){html=labelHtml+'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++}}}if(thisNum>1){if(!isLablePage){html=''+upPageHtml+' '+html+' '}else{html=''+upPageHtml+' '+html+' '}}html='<div class="showpageArea"><span style="COLOR: #000;" class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;if(thisNum<(postNum-1)){html+=downPageHtml}if(postNum==1)postNum++;html+='</div>';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}}var thisUrl=home_page_url;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{var lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}var home_page="/";if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}
//]]>
</script>



In the above code you can find the below written word and can change its value from 5 to any you want.

1 : var pageCount=5;
*where 5 is the the number of post that apppear in another page you will visit.

2: var displayPageNum=2;
*This code determines the number of additional page navigation numbers that will be displayed on the page.

READ MORE - Numbered Page Navigation For Blogger

Remove Blogger Nav bar Completely



Blogger has got a default Navigation Bar. This navigation bar is hidden in most of the third party templates. Instead of hiding the nav bar using CSS, we can completely remove it.
To do that
1. Login to your Blogger account and navigate to Layout > Edit HTML
2. In the Template Code find <body> and just above that add the following Code.

<script type='text/javascript'> 
<![CDATA[ 
<!-- 
/*<body>*/ 
--> 
]]> 
</script>
3. Now Save the Template and you will see a confirmation about deleting the Navbar Widget. Confirm the Deletion by Clicking on the Delete Widgets Button
image

4.Now your Nav bar is completely removed from your Blog.

Advantages of this Method

You will be completely removing the nav bar and not hiding it. The nav bar iframe codes wont be present in your blog’s HTML source and so the blog  would be more Search Engine Friendly.

Disadvantages of this Method

You will no longer see the Quick Edit pencil image  or wrench links quick-edit-wrench-blogger  on your blog even if you are logged in. This is not a a big deal. You can Edit the Widgets from the Layout > Page Elements Page. It would also be a good idea to completely remove the Quick Edit and Wrench Links from Blogger

How to Get back the Nav Bar?

If you followed this method to remove the nav bar and now want to get it back, then  delete the extra code that you added. i.e remove the code from step 2, that you added into your template and Save the Template.
READ MORE - Remove Blogger Nav bar Completely

How to remove quick edit and wrench icons on Blogger

You might have seen the Pencil , Screwdriver and Spanner links on blogger. It seems like these icons appear only when you are logged in to your blog. But if you take a look at your Blog's Source From your Browser's View source option, then you will find that there are plenty of quick edit links on your blog even if you are not logged in(Do a Find for blogger.com ). These are the quick edit  links and these will  be hidden using CSS if you are not logged into your blogger account(but still be present in your blog as hidden links).

What is the use in Removing these Links?

You will be able to reduce the number of external links on your Blog and make it more Search Engine Friendly

Do i loose anything if i  remove these Links ?

You will no longer see the Quick Edit pencil image  or wrench links quick-edit-wrench-blogger  on your blog   . If you want to Edit a Gadget, you will have to go to the Layout > Page Elements Page .

How Do i remove the Wrench and Quick Edit?

1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Uncheck the Show Quick Editing Option and Save the Settings
show-quick-editing
2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates
Replace all Occurrences of
<b:include name='quickedit'/>
with
<!--b:include name='quickedit'/-->
3. Save The Template and look at your Page Source Once again. You will find that those links are no longer there.
4 The Wrench Link of the Followers Gadget Cannot be removed. If you really want to remove that, then remove the Followers Gadget and Add it as a HTML/ JavaScript Gadget with the Code from Google Friend Connect.

How do i get the Quick Edit and Wrenches back  on my blog?

If you ever feel the need to get back these buttons, then just follow the reverse process.
1. Go to Layout > Page Elements and Click on the Edit Button on the Blog Posts Gadget. Check the Show Quick Editing Option and Save the Settings
show quick editing
2. Go to Layout > Edit HTML and Click the Check box to Expand your Widget Templates
Replace all Occurrences of
<!--b:include name='quickedit'/-->
with
<b:include name='quickedit'/>
and Save the Template and it will be back to normal.
Blogger Actually provides an Option in Settings > Basic to Hide the Quick Edit Links. But this doesn't actually remove the Quick Edit links. They are just made invisible
I hope that the Blogger Team will remove these Quick Edit Links completely(when author is  not logged in) rather than hiding them.
READ MORE - How to remove quick edit and wrench icons on Blogger

Related Posts Widget for Blogger with Thumbnails

Related Posts with Thumbnails for Blogger



Displaying the links to related posts along with a thumbnail of the corresponding post will help you increase the page views/user .Users will be tempted to go for the related posts when they are presented attractively with thumbnails.



This is another first release from me.This one also uses the media thumbnails generated by blogger for each post.

For displaying the thumbnails,this widget will use the images uploaded for the post using the blogger image uploader(from the post editor) [Update - Now supports external images also.]

Related Posts Widget with Thumbnails for Blogger

Here are the detailed steps to install the related posts widget for blogger with thumbnails

1.First of all Login to your blogger dashboard and navigate to Layout > Edit HTML and check the "Expand Widget Templates" check box

2.Now look for

&lt;/head>

and replace it with

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

#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:black;
}
#related-posts a:hover{
color:black;
}

#related-posts  a:hover {
background-color:#d4eaf2;
}
&lt;/style>
&lt;script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQIQ0fKRURcAwa8LLjNjw7DfiGnXCg1BQOYCZd_QkT0efJP3Gn4w5lPb7uHCDVz0E67sWzWpyktNiu-8zvV1xhcd4_faWNsnmY4Xgp6P6NZZzodV-JO8WNgeDt51TFmCs1uurhuWa_iM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
&lt;/script>
&lt;script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
&lt;!-- remove -->&lt;/b:if>
&lt;!--Related Posts with thumbnails Scripts and Styles End-->
&lt;/head>


3.Now Find

&lt;div class='post-footer-line post-footer-line-1'>

If you cant find it then try finding this one

&lt;p class='post-footer-line post-footer-line-1'>

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

&lt;!-- Related Posts with Thumbnails Code Start-->
&lt;!-- remove -->&lt;b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div id='related-posts'>
&lt;b:loop values='data:post.labels' var='label'>
&lt;b:if cond='data:label.isLast != &quot;true&quot;'>
&lt;/b:if>
&lt;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=6&quot;' type='text/javascript'/>&lt;/b:loop>
&lt;script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;&lt;data:post.url/>&quot;);
&lt;/script>
&lt;/div>&lt;div style='clear:both'/>
&lt;!-- remove -->&lt;/b:if> 
&lt;b:if cond='data:blog.url == data:blog.homepageUrl'>&lt;b:if cond='data:post.isFirstPost'>
&lt;a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'>&lt;img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" />&lt;/a>&lt;a href='http://www.bloggerplugins.org/' >&lt;img style="border: 0" alt="Blogger Widgets" src="http://image.bloggerplugins.org/blogger-widgets.png" />&lt;/a>
&lt;/b:if>&lt;/b:if>
&lt;!-- Related Posts with Thumbnails Code End-->

4.You can adjust the maximum number of related posts being displayed by editing this line in the code.

var maxresults=5;

5.To edit the title of the widget you can change this line of code

var relatedpoststitle="Related Posts";

6.To change the default thumbnail, you can edit this line of code

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbQIQ0fKRURcAwa8LLjNjw7DfiGnXCg1BQOYCZd_QkT0efJP3Gn4w5lPb7uHCDVz0E67sWzWpyktNiu-8zvV1xhcd4_faWNsnmY4Xgp6P6NZZzodV-JO8WNgeDt51TFmCs1uurhuWa_iM/s400/noimage.png";

7.To Change the Colour of the Splitter Line , edit

var splittercolor="#d4eaf2";


To change the other colours and all you will have to modify the CSS

If you fall into troubles implementing this,don't panic.. :) .just leave me a comment here and i will help you out. If you like to give me any suggestions on how to improve this widget,then it would be really great.

How to display the related posts on every page and not only on the post pages?


Just remove the two lines starting with <-- remove --> from both step 3 and step 2.

that is lines

   1: &lt;!-- remove -->&lt;b:if cond='data:blog.pageType == &quot;item&quot;'> 

and

&lt;!-- remove -->&lt;/b:if>

Permalink: Related Posts with Thumbnails for Blogger
READ MORE - Related Posts Widget for Blogger with Thumbnails