Blogger Help - How to add related posts below every post

http://bloggerstop.net/2008/10/blogger-help-how-to-add-related-posts.html
To add Related posts/Similar posts widget below every post on your blog, follow these simple steps:

First of all download this file:
relatedPosts_ForBlogger2.js

Zipped File

And upload the file (relatedPosts_ForBlogger2.js) to MDN.fm or SigMirror.com to get a DIRECT LINK to that file.

1. Go to Blogger.com
2. Now go to "Layout", then to "Edit HTML" section
3. Back up your present template, by "Downloading it"
4. Now click on "Expand widget templates"
5. Find this code:

Now, just before this code paste this

Add Page Number (with First and Last Page) Navigation Link for Blogger (Blogspot) with Gadget Element and Manual Hack

Blogger free blog publishing platform uses a pretty limited navigation features that only display “Older Posts” or “Newer Posts” link to let readers navigate and browse to other pages on homepage (index), archive, category and label pages. Unlike WordPress blog that supports plugin to customize the page navigation link to numbered pages listing to make it more user friendly, Blogger, whether hosted on blogspot.com or custom domain does not have such flexibility.

However, it’s still possible to change and replace the typical classic “Older Posts” and “Newer Posts” navigation link on Blogger blog to numbered pages navigation, as illustrated in figure below by using a CSS and JavaScript hack wrote by Mohamed Rias.

As shown in image above, a navigation link consists of page numbers, first page, last page, next page and previous page (when applicable) is display on Blogger blog instead of the usual “Older Items” and “Newer Items” text links.

To add the “new” navigation link with page number to Blogger blog, simply add in a new Page Element Gadget in the Blogger. To do so, follow the guide below:

1. Login to Blogger account Dashboard.
2. Click on the Layout link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on Customize on the Next Blog toolbar.
3. Go to Page Element tab (by default).
4. Click on Add a Gadget anywhere in the layout.
5. In the Add a Gadget window, select HTML/JavaScript.
6. Add the following code into the Content text field. Title field can be left blank, or just type in any description such as “Page Navigation” to differentiate it from the rest of widgets.
   

7. Click Save button.
8. Drag and drop the newly added HTML/JavaScript gadget to directly right below the Blog Posts element.
9. Click on Save button to make the change effective.

For user who don’t want to use the Page Element widget or gadget, it’s possible to manually editing the HTML file, although it’s more difficult to do and should only be tried by blogger with technical expertise.

1. Login to Blogger account Dashboard.
2. Click on the Layout link for the blog that you want to modify (if you’re viewing the blog and logged in to Blogger or Google Account, just click on Customize on the Next Blog toolbar.
3. Go to Edit HTML tab (there is no need to expand widget templates).
4. Search for the following line:]]>
5. Copy the following CSS code
   
   and paste or append the code above the line:

   .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;
}

6. Next, search for the following line of code in the template’s HTML code:

   



   Note: The ‘no’ after “showaddelement” can be ‘yes’ for some bloggers.

7. Add and append the following JavaScript code
   
   right after the line:
   

   <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=5;
   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 += '&nbsp;<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;color: #000000;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="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

8. Click on Preview button to ensure that no code error been found. No effect on the navigation hack can be seen though.
9. Click on Save Template to save the change.

Customization and Modification

1. For user who is not using blogspot.com domain (using self-hosted domain name), modify the .blogspot.com and 14 (13 characters of domain name + 1) in the line of var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/"; accordingly.
2. The value in the line of var pageCount =5; determines the number of posts to be shown on each page.
3. The value in the line of var displayPageNum = 3; defines the number of page links in the navigation bar to be displayed (e.g. 1 – 2 – 3).
4. User who knows CSS and Java Script can customize the code to their likings.

Source 1 and Source 2

Đọc tiếp...

Customize Blogger “Read More” / “Jump Breaks” Links With image Buttons, Text And Alignment.

Hi dear friend,

I promised you in a previous tutorial, here ” Blogger Now officially Supports “Read more” links. ” that i’ll add a tutorial about customizing your read more links in blogspot.

So you have to check out the previous tutorial if you are not familiar with the new blogger jump breaks addition.

Now is the time for this tutorial,

after reading this tutorial you’ll be able to Customize you read more links in those ways:

• Change the text ” read more ” to another words.
• Add An Image / Button To Your “Read More / Jump Breaks ” In Blogger Links Instead Of Plain Text
• choose your read more link / button to be displayed on left side, right side or center it.

so lets start,

 Please download a copy of your template before applying any changes.  

First Step, You Must Do This Step

this code should be included in your blogger template,

class='jump-link'>

Read More 

i’ll tell you where to add it, but before you add it, make sure that it’s not already included in your template.
Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for the code,

if you found the code in your template, ok you have to skip this step
but before you skip it,
make sure that the third line in the code looks like this

Read More 

And not

if you found it like the second one, please replace it with the first one

if it’s not in your template you’ll have to add it, and i’ll tell you where you should add it.

Go to you blogger dashboard >> Layout >> Edit HTML and Check on Expand Widget Templates use your internet browser to search for this code,

and just after it, add the next code,

Read More 

Now we finished adding the require code for customizing this trick.

Lets start customizing

1.Change the text ” read more ” to another words.

this is the easiest on ever,
after applying the first step to your template, you should have this code added to your template :

Read More

This code will display your read more link in this format : Read More

and to change it to another word, simply, change the word Read More in the code in your template to what ever you want, Example? Keep reading, continue reading, read the rest, and more.

After changing it, click Save template and check out your blog.

2.Add An Image / Button Instead Of Plain Text

Ok, now again, after applying the first step to your template,
you must have this code added to your template

Read More

This code will display your read more link in this format : Read More

and to change the text to image / button , we should replace the word Read More in the code with the following

Paste here the button Image URL"/>

so you should have some thing like this

http://www.allblogtools.com/image-url.jpg"/>

After changing it, click Save template and check out your blog.

And here is some good samples for read more buttons :

And you can find more buttons by searching in google for “read more button”.

3. Control the read more link or button alignment, left, right Or center.

lets back again for the first step, after applying the first step to your template,
you must have this code added to your template after applying first step.

Read More

this code will display read more link in default format, and your template may display it at left or right, but if you want to control where it’ll be displayed, you should add small tag for the code, and the new added tag in blue color.

xxxx">Read More

and you can replace the xxxx with Left, right, or center.

any in this way you can control the position for your link or button.

and here is some examples to help you

Example 1

Left">Read More

This will display read more in pain text aligned to left

Example 2

right">http://www.allblogtools.com/image-url.jpg"/>

This will display read more in image button aligned to right

i wish this can help you, you comments are welcome, and please share it if you found it useful

Đọc tiếp...

Add a Post Divider (Separator) Between Blogger (Blogspot) Posts

One of the most important factors to give your visitors a good impression about your blog, is to make it easy to read,
And since i see many blogs, i noticed that one of the most annoying things is that there is no separator or divider between blogger posts, so today we’ll lean how to add a Separator between blogspot posts easily. And here is a demo.

Step 1

Log into your blogger account, navigate to , Dashboard >> Layout >> Edit html, and find the following code

.post

this is the cs part that controls your post layout and style, it must contains few css properties like the following.

.post {
margin: 0 0 40px 0;
width: 90%
}

Now we want to add the separator css properties between the opening and closing tags, { and }

Here is the separator css properties :

background: url(Separator-Image-Url);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;

And here is what you need to change in above code to customize it to your blog.
Separator-Image-Url
Change it to the separator image url,

2.5
If you found that the separator displayed behind part of your post latest line, increase this number, for example to 3.5 Or 4.5.

Now your final code should looks Like The following one.

.post{
margin: 0 0 40px 0;
width: 90%;
background: url(http://www.imagehost.com/separator.jpg);
background-repeat: no-repeat;
background-position: bottom center;
margin:.5em 0 1.5em;
padding-bottom:2.5em;
}

Free Separator Images

Now Here are some free Posts separators to use in your blog, just copy the image url and paste it in to it’s place in above code.

Đọc tiếp...

Video - Diệt Thù Trên Hoàng-Trường Sa

Nhat Ky Yeu Nuoc - Diệt Thù Trên Hoàng-Trường Sa
Tác Giả: Tâm Thơ, Ngô Nguyễn Trần
Hòa Âm: Nhạc sỹ Lê Huỳnh
Trình Bày: Đình Nguyên
Huỳnh Lợi
Thể Loại: Nhạc (Movie)
Mục: Hùng Ca
Sự Kiện
http://www.vietsuca.org/Movie.aspx?pa... Đọc tiếp...

As a blogger for very long time, I’m sure that every blogger wants to know how many times his new post viewed.
A lot of visitors contacted me about this widget and asked me if it’s possible to do it in blogger.
So today i’ll show you how to do it in blogger,
It’s very easy to do and there are 2 styles for this widget.

How To Add this widget For blogger.

This is very easy to do it two steps, step 1, choose your widget style,
and step 2, pate it’s code in your blogger template code.

Step 1. Choose the style And get your code.

• Style 1. ( With Icon ) code,

 





Three Columns Minima Template



 |
													

0
comments

Three Columns Minima Template

Three Columns Minima Template

The typical new Blogger Minima Template has only one sidebar. We can add a third column to the left, to have two sidebars. This maximizes the space, and allows greater flexibility in adding page elements to the sidebar.

Note that this guide is for those who want to convert their Minima template into a three column template by adding another sidebar. In our Rounders Template article, we have explained why the Rounders, Scribe, No. 897 or other templates are different and how the background images should be changed in order to cater to the new layout. We shall try to create new test blogs under different templates and post the tutorials once we have converted them into three column templates.

In the meantime, if you are using other templates, please refer to our articles and guides on:-
1. Three Columns Denim Template;
2. Three Columns Dots Template;
3. Three Columns Rounders Template;
4. Three Columns Rounders 2 Template;
5. Three Columns Rounders 3 Template;
6. Three Columns Rounders 4 Template;
7. Three Columns Sand Dollar Template;
8. Three Columns Scribe Template;
9. Three Columns Thisaway Template (I);
10. Three Columns Thisaway Template (II).

Note: Some sites offer free three-column templates for download. If you are starting a new blog, you may look up these sites and use their templates. However, if you have an existing blog and merely want to expand the template to include another column, our guides would be helpful. What we do is to take the standard Blogger templates and show you how to add a new sidebar. This approach gives you total control over the changes, and if you have bookmarked this page, you can revisit it in future should you want to reverse the changes. It is also a safer method, since there could be a few out there who may introduce malicious scripts or blog virus into their customized templates without you knowing.

Before you begin to do anything, remember to backup your template. Go to Template -> Edit HTML. Click the “Download Full Template” link to save a copy of your template.



Scroll to the part where you see this:-

#outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 410px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 220px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

The template defines 3 wrappers, namely:-

#outer-wrapper – referring to the entire blog
#main-wrapper – referring to the main Blog Posts
#sidebar-wrapper – referring to the right sidebar.

To add another sidebar, copy the part highlighted in red and paste it immediately after that, but rename the “#sidebar-wrapper” to “#newsidebar-wrapper”.

Next, adjust the width settings of all the wrappers. For this example, I used what is commonly used by many people i.e., 750px for outer-wrapper, 400px for main-wrapper, and 150px for sidebar-wrapper. You can of course change these values, so long as the total widths of both sidebar-wrappers and the main-wrapper do not exceed the width of the outer-wrapper.

Also, fix the left margin of the main wrapper but allow the newsidebar to float to the left, leaving the original sidebar on the right.

Your template should now read something like this:-

#outer-wrapper { width: 750px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; } #main-wrapper { width: 400px; margin-left: 25px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 150px; float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #newsidebar-wrapper { width: 150px; float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

Update:

We shall also change the layout editor to cater to the new width. Scroll to where you see this and add the lines (shown in red):-

/** Page structure tweaks for layout editor wireframe */ body#layout #header { margin-left: 0px; margin-right: 0px; } body#layout #outer-wrapper, body#layout #header-wrapper, body#layout #footer { width: 750px; padding: 0px; } body#layout #main-wrapper { width: 400px; margin-left: 20px; } body#layout #sidebar-wrapper, body#layout #newsidebar-wrapper { width: 150px; }

Blog Posts in the Center

This sets the style sheet for the template. We will now need to add a section in the body of the template. Scroll to somewhere near the bottom of the script where you see this.



Add the portion in red above the div id='main wrapper'. The segment should look something like this:-



The code will give you a newsidebar on the left, main post in the middle, and leave the current sidebar on the right, just like what you see in this Blog.

Blog Posts on the Left

If, for example, you want the main post on the left, and both sidebars on the right, you will put the portion in red below the div id='main wrapper'. It will look like this:-



Change Width of Header and Footer

One more thing. If you have a wider layout, you may also want to lengthen the width of your Header and Footer. Go to the part of your template that says this:-

#header-wrapper { width:660px;

and

#footer { width:660px;

You can change the number in red. In this example, I may want to widen it to the same width as that of the outer-wrapper. I will therefore change the above codes to this:-

#header-wrapper { width:750px;

and

#footer { width:750px;

You may click “Preview” to see the new layout, and if you are happy with what you see, click “Save Template”. If you don't want the profile on the left, you can remove that page element after that. You have now three columns in your layout!

Align Header Title and Description

Update: We have a more detailed guide on alignment of the Header Title, Description and background image. In the article, you would learn how to move these to the center, or towards the left or right of the Header. Check out the guidelines at Header Image and Title Alignment (I).

Note:

If you are using the old Blogger templates, or any other template, the style names may be different. For example, #header-wrapper may be called #head-wrap. If you are unsure, you may source the net for a guide specifically for your type of template. Otherwise, you may want to understand the way we change this template and adapt it to yours. As long as you backup your current template, and Preview the changes made, it should be alright for you to try some changes. Đọc tiếp...