Posts Blog Archive: September 2015

How to Add Border around Post Images on Blogger/Blogspot

How to Add Border around Post Images on Blogger/Blogspot

Everybody wants their websites and it's images a bit stylish and attractive. If yo…
How to Disable mouse Right Click and Hide Page Source

How to Disable mouse Right Click and Hide Page Source

Newbie bloggers just surf Internet to compare the contents of different blogs. They Co…
How to Add a Gadget Above the Header in Blogger

How to Add a Gadget Above the Header in Blogger

Blogger's Dashboard feature allows users to adjust the appearance of their blog wit…
How to List the Post Titles of all POSTS from your Blogger/Blogspot Blog [Tutorial]

How to List the Post Titles of all POSTS from your Blogger/Blogspot Blog [Tutorial]

In this Tutorial, we will show you how to list the Titles of your blog's more than …

Sunday, September 20

How to Add Border around Post Images on Blogger/Blogspot

Everybody wants their websites and it's images a bit stylish and attractive. If you wish the same there should be some style to your blog images like drop shadow or borders. In this simple tutorial we will teach you to add borders around your post images on blogger using few simple CSS Code. Let's start to add a nice look on your images having colourful borders in your web pages !

Monday, September 7

How to Disable mouse Right Click and Hide Page Source

Newbie bloggers just surf Internet to compare the contents of different blogs. They Copy the contents of the Blogs they like. Being the New in blogging platform, they do not think how much time it had taken to write or make contents. This happens because they are new bloggers and want to become a successful blogger in no time. They are unknown that Google Adsense do not Approve the application having copy pasted contents. And when they fail in application they then came to know how much worse task they have done. You can say their blogs are dead, i.e. the fact is no more earnings from Google.

Saturday, September 5

How to Add a Gadget Above the Header in Blogger

Blogger's Dashboard feature allows users to adjust the appearance of their blog with a few clicks of the mouse. Within the Dashboard, there is a " Layout " feature which lets bloggers add Gadgets such as RSS feeds, traffic counters, embedded media to their sites, adding beautiful widgets, showing notifications, pictures, etc.

Mainly by default in Blogger "Layout", you can see several places to add a Gadget. Such as:-

Right below the Title and above the posts, The Sidebars, The Footer, etc.

Friday, September 4

How to List the Post Titles of all POSTS from your Blogger/Blogspot Blog [Tutorial]

In this Tutorial, we will show you how to list the Titles of your blog's more than 500 recent posts. If you are looking for an alternative to Blogger's gadget, then this might be very useful to you.

As we experienced, to retrieve the posts of a blog, you can use the URL like this:

http://***.blogspot.com/feeds/posts/default?alt=json&callback=mycallbackfunc&start-index=1&max-results=100

However, it does not work if your blog has more than 500 posts and you want to list them all. Our experiment showed that even you supplied a big number like (e.g.-10000) for max results, only up to 500 posts would return. To retrieve the list of more than 500 posts, we need a loop to do that. The following is how we implemented it for our several blogs.
We can also label all posts in a single page in another way, i.e. SITEMAP/Table Of Contents shows post titles with separated labels and a New! text with recently published posts.
Go through this link How to create a Sitemap/Table of Contents in Blogger to create a page of All Posts Titles for your information/use.
Click here >> SITEMAP to see our Sitemap / Table Of Contents.
Now lets come to the point,

Code goes here :-
<div><ul id="postList12"></ul></div>
<script type="text/javascript">
var startIndex = 1;
var maxResults = 100;
function sendQuery12()
{
var scpt = document.createElement("script");
scpt.src = "/feeds/posts/summary?alt=json&callback=processPostList12&start-index=" + startIndex + "&max-results=" + maxResults;
document.body.appendChild(scpt);
}
function processPostList12(root)
{
var elmt = document.getElementById("postList12");
if (!elmt)
return;
var feed = root.feed;
if (feed.entry.length > 0)
{
for (var i = 0; i < feed.entry.length; i++)
{
var entry = feed.entry[i];
var title = entry.title.$t;
for (var j = 0; j < entry.link.length; j++)
{
if (entry.link[j].rel == "alternate")
{
var url = entry.link[j].href;
if (url && url.length > 0 && title && title.length > 0)
{
var liE = document.createElement("li");
var a1E = document.createElement("a");
a1E.href = url;
a1E.textContent = title;
liE.appendChild(a1E);
elmt.appendChild(liE);
}
break;
}
}
}
if (feed.entry.length >= maxResults)
{
startIndex += maxResults;
sendQuery12();
}
}
}
sendQuery12();
</script>
Now you can put above code in two different ways anywhere in your blogger/blogspot blog. We would recommend to put the code in sidebars - left/right, that's the first way and you can put code in a html page which we can used it as a Sitemap of a blog or Archive or List of All post in a Single page.
Lets see how we can insert above given code in blogger/blogspot blog.

First Method: Putting the List in a Gadget

Inserting code in sidebars - left right, of a Blog.
Step:1. Go to Dashboard>>Layout
Step:2. Select add a Gadget Link
Step:3. Select HTML/Javascript gadget
Step:4. Enter the Title of your Widget, e.g. All Posts List
Step:5. Copy above code and paste the code inside the content box
Step:6. Now save and view your blog.

Second Method: Putting the List in a Page

Inserting code in a Page.
Step:1. Go to Dashboard>>Layout
Step:2. Select Page
Step:3. To create page click on New Page button
Step:4. Click Edit HTML tab to switch to HTML mode
Step:5. Copy and paste the code into the Editor
Step:6. Now publish and view your post. The list should appear inside the page.

We hope this Tutorial helps you to align list of all posts in sidebars and in a page as a content of table/sitemap. If you think this helped, subscribe us.
Enjoy !

© Blogger. All Rights Reserved Theme by Jago Desain