Blog Information: links

Tampilkan postingan dengan label links. Tampilkan semua postingan

Rabu, 02 Oktober 2013

Fading Box With Newer Older Posts Links and Titles for Blogger

The navigation links are those that appear at the bottom of the page that says "Older Posts", "Newer Posts" and "Home" and help us to move through the blog posts. This tutorial will show you how to change the word "Older Posts" and "Newer Posts" for post titles and make these to appear in a box "fading" when you scroll down the page.

You can see it in action on this demo blog - when you scroll down, the navigation links will appear showing the post titles for the older/newer entries.

This way to display the navigation links will be seen only in individual entries, while those on the homepage and other parts of the blog will still be displayed as usual.

How to Add Navigation Box with Newer & Older Posts on Blogger

Step 1. From your Blogger Dashboard, go to Template > Edit HTML, click anywhere inside the code area and search - using CTRL + F - for this line:

<b:include name=nextprev/>

Screenshot:

Step 2. REPLACE the code above with this one:

<b:if cond=data:blog.pageType != "item">
<b:include name=nextprev/>
</b:if>
<b:if cond=data:blog.pageType == "item">
<div id=blog-pager-box>
<h4>Other posts published:</h4>
<b:include name=nextprev/>
</div>
</b:if>

Note: you can change the "Other posts published" title with your own

Step 3. Now add just above </head> the following code:

<b:if cond=data:blog.pageType == "item">
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js type=text/javascript/>
<script>
// <![CDATA[
$(function() {
$(#blog-pager-box).toggle()
.css({
width: 520px,
height: 150px,
position: fixed,
padding: 1em,
bottom: 0,
right: 0,
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIvE_yeDv-5ha1cjifbQhZYHeuoYyKe3_WEX8qdjqBkYdHADsn57bMv1sPjvSkJXL6V8mJDTf23Ra3CVwVCEhstDzngqM3qDlt-v-YfdU4yEp8eh0RwIlwbzJs9Uv1BD_S1QQYVVbeSGxv/s1600/paper.jpg)
});

$(window).scroll(function() {
if($(this).scrollTop() > 100) {
$(#blog-pager-box).fadeIn();
} else {
$(#blog-pager-box).fadeOut();
}
});
});
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$(".blog-pager-newer-link").html("<div>Newer Posts:</div>" + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$(".blog-pager-older-link").html("<div>Older Posts:</div>" + olderLinkTitle);
});
});
// ]]>
</script>

<style type=text/css>

</style>
</b:if>

Note that this gadget uses jQuery, so try to have only one version.

Customization:

- There are three URLs in blue, the first is the paper background image for the box, the other two are the icons that correspond to the arrows. You can replace these with your own.
- In green you can see where to change the text colors.
- The red number is the distance in pixels that activates the gadget, this means that the box will appear when you scroll down the 100px. You can use a higher value if your posts are usually long and therefore the "height" of the scroll is greater.

Step 4. Now, Save the Template and thats it!

You can also change the "Older Posts" and "Newer Posts" links with posts titles or images.

Selasa, 17 September 2013

Replace Older Newer And Home Blogger links with an image or text

Newer Post, Home and Older Post are links that appear on the bottom of the posts. When a visitor click on one of these links, they will take him to the page with the list of your previous posts.
The number of the posts on these pages will be the same as the number of the posts on your main page.

What we can do:

A. Change the text of Newer, Older, Home links
B. Place a picture beside them (a small icon, arrow, or whatever...)
C. Add an image instead of the links

So lets start customizing them...

1. Log in to your Blogger Dashboard, go to Template > Edit HTML

2. Click anywhere inside the code area and find - using CTRL + F keys - the following code:

    <b:if cond=data:newerPageUrl>
      <span id=blog-pager-newer-link>
      <a class=blog-pager-newer-link expr:href=data:newerPageUrl expr:id=data:widget.instanceId + "_blog-pager-newer-link" expr:title=data:newerPageTitle><data:newerPageTitle/></a>
      </span>
    </b:if>

    <b:if cond=data:olderPageUrl>
      <span id=blog-pager-older-link>
      <a class=blog-pager-older-link expr:href=data:olderPageUrl expr:id=data:widget.instanceId + "_blog-pager-older-link" expr:title=data:olderPageTitle><data:olderPageTitle/></a>
      </span>
    </b:if>

    <a class=home-link expr:href=data:blog.homepageUrl><data:homeMsg/></a>

Or find in this code the following fragments which corresponds to each page links

<data:newerPageTitle/> represents Newer Posts link
<data:olderPageTitle/> represents Older Posts link
<data:homeMsg/> represents Home link

Now change these fragments of codes as it follows:

A. Change the text of Newer Posts, Older Posts and Home Links

You need to REPLACE following parts in original code with ANY TEXT you like:

replace <data:newerPageTitle/> with, for example NEXT POST
replace <data:olderPageTitle/> with, for example PREVIOUS POST
replace <data:homeMsg/> (only the first one) with, for example HOMEPAGE

B. Place a picture beside Newer Posts, Older Posts and Home links

Add the below code just at the beginning of each of the colored fragments of codes from step 2.
<img src="URL Address"/>

So it should look like this:

<img src="URL Address"/><data:newerPageTitle/>

Note: Replace URL Address text with the url address of the image you want to appear

C. Replace Older Posts, Newer Posts and Home links with an image/picture

You can place any kind of picture you want All you have to do is use this code for the pic:

<img src="URL ADDRESS"/>

...just replace URL ADDRESS, with the URL of your hosted picture
...and in code, REPLACE the original link code for text with picture code

replace <data:newerPageTitle/> with the pic for newer (next) posts
replace <data:olderPageTitle/> with the pic for older (previous) posts
replace <data:homeMsg/> (only the first one) with the pic for homepage

Screenshot

3. Thats it! Preview and Save the Template.

Selasa, 10 September 2013

How to Replace Older Posts and Newer Posts Links with Blogger Post Titles

If you have ever visited a WordPress blog, you might have noticed that the blog pager on these blogs displays the actual post titles, not just links to the older and newer posts that you find at the bottom of your Blogger blog. This links are parts of the so-called blog pager which helps readers navigate between pages and posts.

If you want to increase your page impressions, one of the ways is to replace the older/newer posts links with the Blogger post titles.

How To Add Post Titles Instead of Older Post/Newer Post Link

Step 1. Log in to Blogger, go to Layout and click on "Add A Gadget" link

Step 2. From the pop-up window, choose "HTML/JavaScript"

Step 3. Paste the following code into the empty field of the HTML/JavaScript gadget:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" h3:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link:first").text();
$("a.blog-pager-older-link").text(olderLinkTitle);
});
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" h3:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link:first").text();
$("a.blog-pager-newer-link").text(newerLinkTitle);
});
</script>

Note: The line in red is for acquiring jQuery framework. If you have acquired jQuery in your template, then you can just delete this part.

Step 4. Now Save the Widget and drag it under the Blog Posts section.

Step 5. Click on Save arrangement.

Now view your blog and see the older/newer posts link, replaced with your post titles.

For any questions, leave a comment below.

Blog Information

Ads 468x60px

Pages