Banner 468

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

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

How to Remove/hide the Blogger Navbar

0 comments
-
Tweaks4Blogger


To hide the Blogger Navbar :

1. Log in to blogger

2. On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

3. Paste the CSS definition in the top of the template code:

...
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Rounders
Designer: Douglas Bowman
URL:      www.stopdesign.com
Date:     27 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */


#navbar-iframe {
   display: none !important;
}


/* Variable definitions
  ====================
   <Variable name="mainBgColor" description="Main Background Color"
             type="color" default="#fff" value="#ffffff">
   <Variable name="mainTextColor" description="Text Color" type="color"
             default="#333" value="#333333">
   ...

Remove the code to show it again.

Step by step in video:
[ Read More ]

Continue

How to Remove Attribution Gadget (Powered By Blogger)

0 comments
-
Tweaks4Blogger


The Attribution gadget is the gadget in the footer that says "Powered By Blogger". If you have tried to remove this then you may of noticed this gadget is locked into you blog.

A lot of people ask are they allowed to remove this from their template. In short yes you are allowed! Although it was meant to give credit to the designers of the template, you can remove it and not get in trouble. 

They do go out of their way to make sure you don't remove it,  but their is no agreement or message stating your can not remove it. If you have every used a template or background from a 3rd party site, then you would understand what I am talking about. Their is always some message stating user agreements and part of the message is not to modify the code provided.

With Blogger or the Attribution gadget their is not any user agreement on modifying of removing something from your template coding. So by law without it being clearly stated, they can not prosecute you in anyway for removing this.

Another way to look at this is that this is your blog and sometimes your custom domain bought to provide the content on your site. You have the right to choose what sites you want to give backlinks to. Which with the Attribution gadget you are giving a backlink to the designer of the templates blog or site.

1. Go to Design--> Edit HTML.
2. Expand your Widget Template.
3. Click Ctrl+F for the browser Find bar to pop up.
4. In the Find bar enter  Attribution1

(This will Locate the gadget ID in your template.)

You should see something like this below with the Attribution1 highlighted.


<!-- outside of the include in order to lock Attribution widget -->
      <b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
    <div class='widget-content' style='text-align: center;'>
      <b:if cond='data:attribution != &quot;&quot;'>
        <data:attribution/>
      </b:if>
    </div>

    <b:include name='quickedit'/>
  </b:includable>
</b:widget>




5. Remove everything you see in red, this includes the blue Attribution1. Do not remove the line that is black!

6. Provided you did it correctly when you save your template you will not get any errors.
[ Read More ]

Continue

How to Back Up Your Blogger Blog

0 comments
-
Tweaks4Blogger


Do you know how to back up your Blogger blog? There can be nothing worse than to login to Blogger one day and find you blogger blog gone, corrupted or deleted forever due to any unforseen error. Back up is very important. Here are a few simple ways to keep your Blogger blog safe and backed up.


Back up Blogger Posts:
  • Backup Your Posts – Bloggers Blogsend allows each of my blog posts to be automatically sent to my email address. So I have a back up of all my posts as individual emails. You can further create folders in your email account (as in Yahoo Mail) or apply labels (in Gmail), and create filters such that such emails can be collected in one place.
  • Back up your entire blogger blog – Bloggers provides detailed instructions to create a single file with all your posts which you may publish and then copy to your own computer for use as desired. Remember to save a copy of your existing template in a file on your computer as you will need to have it at hand after this process is completed. This is good for a one time backup, but is cumbersome to do if you back up very frequently. Also you might mess up some setting and disbale your blog is not done right.
  • Try third party back up tools – like the HTTrack Web site copier for Windows users and Webgrabber for Mac users. Each of these applications will create a fully working, interlinked local copy of your blog for browsing offline and easily allow you to back up. Remember it will take considerable time and internet bandwidth if you have a huge blog.
Back up Blog Template:
  • Back up the template whenever you change it. Just copy and paste the entire template code into any simple text editor like Notepad or Wordpad and save file with name like ‘myblog-date.txt’. After a while you will have a series of such files organized by date. If for some reason your blog goes away, just copy and paste the teplate back into Blogger and republish.

Back Up Blog Comments:
  • Blogger has an option to send you an email when someone leaves a comment on your blog. This is located in Setting > Comments option in Blogger. This enables you to collect all your comments as individual emails, much like the blogsend posts emails mentioned above. Then you can file them all together as labels or in a email folder.
  • If you moderate comments, you can get all your comments as emails pending your approval. This email address can again be entered in Setting > Comments. If you do not want to save rejected comments as emails and recieve only published comments – then you can keep the comment moderation email address blank, while filling up the Comment Notification Address.
  • If you use Haloscan Comments instead, then anyway your Blogger comments are off and Haloscan is keeping track of backing up your comments. I am using Blogger comments featured now with comment moderation, word verification captchas to combat comment spam.
Make blog back ups a habit and you will remember this post when it saves your blog on a bad day!
[ Read More ]

Continue