Blogger and Google drive both are offered by Google. One is for blogging and other for cloud storage. Both are used by millions of people. Blogger gives way to share anything you have and Google drive gives the power of securely save any file and share them with others. So if we take the combination of these two we can create any type of download site.Today you learn, how to build download sites by using these two services of Google. Before Start-: Before creating a download site, first you need to choose one purpose of your site. In other words,which users will come to your site.You need to Choose the content type and collect the required data. e.g.if you want to offer free music you need to collect the music files you want to share via your blog. Let start by creating your blogger blog.As we all know you need a Google account to use all products of google. First, create a google account if you not have one.If you already have a Google account, follow this guide to create a b...
Blogger as we all know a very famous and useful blogging platform. It gives a chance to all to create reputation in internet world. Unlike other platform blogger is more reliable and easy to handle. We can create custom widget/gadgets for blogger by using simple html,css and javascript. Also its api requests is easy to learn. Today i discuss how to add list of posts to a blogger page by using simple javascript.
Add CodingTo do this simply follow these steps:
- Go to Blogger Dashboard
- In the pages tab,Click on new page button.
- Give a name to the page. Add the following code to it.
- Now publish the page and see the magic.
<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>
You can make it beautiful by simply implementing css. As you can see in the above code we are using unordered list to format the results in listview. To customize list just apply css to unordered list. Add the css style tag in the starting of code. You can apply different kind of style.
Last Tips-:Above script is working perfect as we tested. If you get any error feel free to tell us via comments. We are here to help you. Please don't forget to share this post.
Source
Comments
Post a Comment