Banner 468

Facebook
RSS
Showing posts with label widget. Show all posts
Showing posts with label widget. Show all posts

How To Create A Blogger Archive Page

0 comments
-
Tweaks4Blogger

This method is one of the easiest way to create a separate archive page in blogger. All you have to do is insert 2 lines of code in a Blogger Page and it will automatically generate a list of the entire collection of all your posts, with titles neatly linked and sorted or archived by dates.

It would display all your posts in a single page which would be easily accessible and navigable that provide better options not only to readers and search engines alike, but also as a reference to blog owners.

Step 1:

We will be creating a page first.

Go to Dashboard > Edit Posts > Select Edit Pages - click on the "New Page" button and type in the Page title, e.g Archives or Sitemap (Any name of your choice, keep it short).

Step 2:

Select the Edit HTML mode to prepare your post. Copy and paste the following code into the post box :

<script style="text/javascript" src="http://abu-farhan.com/script/daftarisibloggerarchive/tocbyarchivemin.js">
</script>
<script src="http://Boost4Blogger.blogspot.com/feeds/posts/default?max-results=500&alt=json-in-script&callback=loadtoc">
</script>

(Do not forget to replace Boost4Blogger.blogspot.com by your blog URL).



Now click "Publish Page", Done! Once it is published, "Archives" tab will appear under your blog's header.

> Note: You can increase/decrease the number of items to display by changing the value “max-results=500″ to a different count (optional).

> In Edit HTML mode, you can also add additional paragraph/contents above or below the script code (Optional).
[ Read More ]

Continue

How To Create Custom Blogger Recent Posts Widget For Blogspot Blog

0 comments
-
Tweaks4Blogger


With the use of “JSON” and your blogger blogspot blog feed, we will create a custom blogger recent post widget in just few easy steps. Accessing of blog feed is done by using a technology called JSON through a callback.

JSON stand for “JavaScript Object Notation” is a lightweight data-interchange format.

A feed is a data format used for providing users with frequently updated content. Content distributors syndicate a web feed, thereby allowing users to subscribe to it. It gives users a way to keep up with many sites on the web without having to visit each site individually to see if they have updated.

Now, we will process the JSON script and will display the Recent posts in the widget. Please follow the steps below.

1. Login to your Blogger account.
2. Click on Layout.
3. Click on Add a Gadget.
4. Select “HTML/JavaScript”
5. Add the following code in the gadget code section.


<style>
 .recentposts{ padding: 1px; border: 1px solid #000; border-width: 0px;width:380px; display: block; }
 .recentposts a  { border: 1px solid #fff;display: block; text-decoration: none; padding: 5px 2px 5px 5px; color: ##0000CC; font-size: 14px; background: #FFDECE;width:380px; }
 .recentposts ul {width:380px;list-style-type:square;float: left;}
 .recentposts li{list-style: square;margin: 0;font-size:12px;padding: 0px 1px 0px 3px;}

</style>
 <h3>Most Recent Posts</h3>
<div class ="recentposts" id="latestposts"></div>
<script>
  function listEvents(root) {
    var feed = root.feed;
    var entries = feed.entry || [];
    var html = ['<ul>'];
    for (var i = 0; i < entries.length; ++i) {
      var entry = entries[i];
            var posturl;
           for (var k = 0; k < entry.link.length; k++) {
                          if (entry.link[k].rel == 'alternate') {
                                   posturl = entry.link[k].href;
                                   break;
                           }
                 }
                 var title = entry.title.$t;
                 title = "<a href="+posturl+">"+title+"</a>"
        var start = (entry['gd$when']) ? entry['gd$when'][0].startTime : "";  
        html.push('<li>', start, ' ', title, '</li>');
    }
    html.push('</ul>');
    document.getElementById("latestposts").innerHTML = html.join("");
  }
</script>
<script src="http://example.blogspot.com/feeds/posts/default?max-results=10&alt=json-in-script&callback=listEvents">
</script>
<ul>



6. In the above code, don’t forget to change “example.blogspot.com” with your blogspot blog name.

> You can increase/decrease the number of items to display by changing the value “max-results=10″ to a different count (optional).

> You can change the CSS style to your own by changing the code at the beginning and between the tags (optional).

7. Save and View it.

(If you have any question, please refer "Help" tab).
[ Read More ]

Continue