How To Add Comment Reply/Threaded Comment On Customized Template?

Some of my old templates were created when Blogger has no comment reply or threaded comment feature. It won't show reply comment button automatically because it have been customized or tweaked. So, you need a few tweak to show this reply comment link or Blogger's threaded comment feature.

I assume that you've applied new Blogger Dashboard. Follow this step "How to add comment reply button on Blogger/Blogspot":

- Go to Template menu

- Click on Edit HTML button, then HTML frame will appear

- Tick mark on Expand Widget Template to show complete HTML code

- Find this code below

      <b:if cond='data:blog.pageType == &quot;item&quot;'>

        <b:include data='post' name='comments'/>

      </b:if>

- Replace the red code with these code below

   

      <b:if cond='data:post.showThreadedComments'>

        <b:include data='post' name='threaded_comments'/>

        <b:else/>

        <b:include data='post' name='comments'/>

      </b:if>

- Click Save Template button

How to Add Floating Facebook Share,Tweet, +1 Button in Blogger?

I have ever posted about how to put social bookmark sharer button, that's sharing is sexy button. I also have posted about how to put our social media icon to help your reader close and know more about you. A hour ago, I was looking for simple sharer button, I only need Facebook sharer, Tweet button, and the new one +1 button from Google. Fortunately, I find a easy tutorial about how to add floating social bookmark button next to post in Blogger from MyBloggerTricks. Really thanks to you, the author.

You can see this sticky widget to left of my blog, both on homepage and postpage. The installation process is so easy. Here I share how to add floating Facebook Share,Tweet, +1 Button in Blogger.

1. Go To Blogger > Design
2. Choose a HTML/JavaScript widget
3. Paste the following code inside it

<style>
/*-------MBT Floating Sharing Widget------------*/

#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-70px;
z-index:10;
float:left;
padding-bottom:2px;

}

#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}

.fb_share_count_top {width:52px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

 


<div id="floatdiv">
<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">


    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="mybloggertricks">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>

    <tr>
    <td style="padding:5px 0 2px 0;">
    <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>


<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.mybloggertricks.com">Widgets</a></p>
    </td>
    </tr>
    </table>
</div>
</div>

 

4. Save your widget and drag it just below the post body as shown below

5. Finally click the save button at the top right corner and done

Any question or complete customization, you can go to author website.

How To Use Custom Google Font on Customized Blogger Template?

On my previous post about More Fonts for Blogger Template, we can use this various fonts directly ONLY IF we use default template from Blogger Template Designer feature.

But most of Blogger user, use customized template so can not use this font directly. I'm sure you don't want to mess up your current blog design, but really want to change my fonts. This is step how to change fonts with Google fonts.

1. Go to Google Font Directory, choose the font you may interested in. For this example, I choose Crafty Girls Font Family.
2. Click on Use this font menu. To embed font into your web page copy the following code under every font. IMPORTANT NOTE : On Google font directory, the original code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'> , remember to add "/" character before closed tag, so the result code is <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'/>
3. Open Dashboard > Design > Edit HTML, then paste copied modified code put before <b:skin><![CDATA[/* on EDIT HTML template menu.
4. Simply use the font in your CSS font stack like any other font, for example, if you want to use it on Post Title, find h3 css code then insert the font family. For example : .post h3 { 'Crafty Girls', Arial, Verdana;} . Remember you can use this wherever you want, on sidebar title (find .h2) , on post body (find .post-body) etc
5. Click Save template button
   

How to Show Popular Post Using Blogspot Popular Post Widget/Gadget?

As a blogger or writer, of course we want visitors read our writing or posting. To facilitate the visitors looking the most popular posts, we can install popular post widget.

Long ago, Blogspot does not yet provide blogspot widget popular posts so that the user uses javascript. In this way a bit inconvenient because it requires javascript hosting.

Fortunately now been providing widgets popular bloggers post. Blogspot users simply add this widget in the sidebar and most popular postings will automatically appear.

How to install popular post widget/gadget on blog? Simply, go to Page Element, click add Gadget whenever you want. Choose Popular Gadegt and automatically displays a list of popular posts on your blog.



There's some options for this gadget :

• Choose time range All time, last 30 days, last 7 days
• Show post title and image thumbnail and also snippet or post summary

How to Fix Double Post Problem on My Blog?

I have received so many question about double post issue/problem. Why I get double post on my blog homepage? Why I get double post after changing template? How to fix this double post problem?

Note to all, this problem not because of template. Do you remember, when you change the template, there's an option feature from Blogger, Do you want to delete these widget? If you choose keep widget, all your blog widget keep there. This feature is usefull for keeping widget so you don't need to add it one by one.

But the problem is, when your new template has Blog1 widget, and your current blog has Blog2 widget, it will make a double post. Note that Blog1 or Blog2 is post widget, so it will appear double.

So how to fix this double post problem?

Open Edit HTML, then find this code

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

or

<b:widget id='Blog2' locked='true' title='Blog Posts' type='Blog'/>

Just delete one of them.

New Blogger/Blogspot Mobile Template Feature

Last Friday, Blogger has announced a new Blogger feature, Mobile View Feature. Many of us use mobile phone to access blog. It difficult to view desktop version on mobile phone screen size. Some of us ask about how to set mobile view for our blog? Now, we can set mobile view on our blog because Blogger has created mobile template feature.

Initially available as opt-in functionality on Blogger in Draft, mobile templates will re-format your blogs for smartphones to enhance your readers’ viewing experience. In order to activate mobile templates, simply go to Dashboard > Settings > Email & Mobile tab, enable the mobile template option and then save settings. For now, this is beta feature so you can access it through http://draft.blogger.com

Feature highlights

• Preview: Get a glimpse of what your blog will look like by clicking on the Mobile Preview button. You can also see it on your smartphone by scanning the QR-code to the right of the options.
• Automatic redirection: All opted-in blogs will automatically be redirected to the mobile view when accessed from a smartphone*.
• Template support: We are initially supporting 6 variants of the Simple template and 6 variants of the Awesome template. If you have used one of these 12 templates through our Template Designer, your mobile view will be rendered in the same style as your desktop view (other template variants will be rendered as Simple). Some gadgets are also supported**.

• Mobile ads: Mobile AdSense ads will be displayed at the top of the post pages and at the bottom of the index page if the blog has an AdSense gadget or inline blog ads.

I have tried it but, the mobile view doesn't redirected yet. You can try it and pick the mobile address http://www.ipietoon.com/?m=1 or http://yourblog.blogspot.com/?m=1

How to Use Google Font API on Blog CSS?

What is Google Font API? The Google Font API helps you add web fonts to any web page. It means you dont need to install font family on your desktop computer to see custom font on any web.
Benefits of the Google Font API include:

• A choice of high quality open source fonts.
• Works in most browsers.
• Extremely easy to use.

For example, the following text uses a web font called Tangerine:


We can apply this font on web without install it on our PC, even our visitor can see it because we use font and script from Google Directory.

Yes, Google have created Google Font Directory. There we can browse this catalog of available fonts, learn about the font designers who created them, and copy the code required to use them on our web page. The fonts in the directory are all released under open source licenses; you can use them on any non-commercial or commercial project.



Now, we can use this unique font on our website or blog. How to use Google Font API ? For reference, you can read this Quick Start example or follow this example.

Step 1
Open Layout>Edit HTML. Add a stylesheet link to request the desired web font(s). Copy these code and paste after <head> code

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"/>

Note : Change Font name as your desire or you can pick this code from Google Font Directory. For exampale if you want to use Yanone Kaffeesatz font, go to Google font directory, click on font type, then click on Get Code.

<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css"/>

Step 2
Insert CSS code
font-family: 'Yanone Kaffeesatz', arial, serif;

You can insert it wherever you want. For example you want use that font for Post title, so insert it after
.post h3 {

or you want to use it as global font so insert it after
body{

etc.

I try to use custom font for my post title as you can see it. I think this is a great idea especially for everyone who concern on blog design and appearance. Thanks Google.

How to Create Floating Twitter Follow Image?

I have ever posted about how to put twitter follow icon on blog. This is simple way because we don't need to host image and edit any CSS code. Wanna try another way to put Twitter icon on your blog?

We can put Twitter icon as floating image with fixed position, so it will attract your visitor to click it. You can check demo on Emocutez , and see on right bottom position, there's floating Twitter icon.

How to? Follow this step below
1. Go to Layout > Edit HTML
2. Copy these code

#floatingimage {
bottom:10px;
right:0px;
position:fixed;
_position:absolute;
clip:inherit;
_top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight-this.clientHeight);
_right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
}
#floatingimage a img {border:0}

3. Paste before

]]></b:skin>

4. Copy these code

<div id='floatingimage'>
<a href='http://twitter.com/emocutez'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJGD9OBFJfRzFL9tbZWrb4_4vIkd-igEuM6DwTOaVNhfTbAqqZmDuSKcImUDgWyoaCFZpGDSaWpv0Y9jVnLngu87qMXNgjFKkisBxu1OO_TfcDYxmcnEUcjCAfvSuNh5_jR0Q5YpemFnHA/s1600/follow+us.png'/></a></div>

5. Paste before

</body>

6. Save

Note : change the red text to your Twitter username

Blogger Template Designer, An Online Template Designer on Your Blogger Dashboard

Finally, Blogger has launched new feature called "Blogger Template Designer" . This online blogger template designer allow you to customize the look and layout of your blog by just clicking and dragging. There are many awesome blogger template design but maybe you want to create your own style. Blogger has facilitated your need.

How to use this blogger template designer? This is beta testing so you can't find on your ordinary blogger account. First, log on your blogger account through http://draft.blogger.com . Click on Layout then Template Designer menu. Yes, you can customize it by one click.



Changing color, dragging widget, picking new arrangement, changing background and many more. There's online preview that allow you to view your current project before apply it on your blog.

Do you want try 1,2,3, or even 4 columns layout? Just pick it because this designer support a flexible layout arrangement.

Check this video to see how to

Blogger Templates is best suited to work with best web hosting company

New Transparent Blogger Navbar Style

What's Blogger Navbar? Blogger Navbar is default navigation menu bar on top page. Older Blogger Navbar color only have four traditional color scheme choices — Blue, Black, Tan, and Silver — are somewhat limited, especially if our blog's background color. That's why I hide navbar because doesn't match with my blog color.

But now, Blogger have improved this area. Blogger have added two new color schemes — "Transparent Light" and "Transparent Dark." These new color schemes take advantage of the ability of modern browsers to render transparency (a technique known to web designers as "alpha blending"). This allows the navbar background to blend together with your blog's background color and pattern. That's mean you can get this transparent navbar if you use modern browser, except Internet Explorer 6. This browser doesn't support transparent image.Why dont think to upgrade it? :D





To enable the Transparent Light or the Transparent Dark navbar, go to Layout | Page Elements, then click Edit next to the navbar widget


But, blogger navbar is hidden on my template. How to show that? Read this article How to Show Blogger Navbar.

7 Usefull Widget for Blogger

As I posted several days ago, Blogger has launched new functional gadget that is recent comment, recent post, etc. But there's a little lack, because this new gadget by default only has black color, not suitable for dark template. We're still waiting for customizing tutorial.
Fortunately, blogger user have developed functional widget using javascript. Here's the list functional widget for Blogger that really you need.

1. Random Post Widget

This widget is developed by Bloggodown. Random posts widget displays random links of your blog post. This help show content that is neither recent nor popular. The widget displays links in form of link lists. So you can change the layout by changing the css of your blogger template. There are two options, random post list and random post with summary. This widget really easy to install. Just go to author site.

2. Recent Post with Thumbnail

This recent post with thumbnail widget is developed by Bloggertricks . Actually there are several way to show recent post, using RSS feeds, simply javascript, but this is really eye catching widget. Visitor can see thumbnail picture. Need some editing to make this widget display properly.

3. Total Count Post and Total Comment on Post Widget

This simple widget will show your total post and total comment. Maybe you want to showoff blog popularity through show how many post and how many comment. You can get this widget from Bloggodown

4. Related Post Widget

Related post widget really usefull to extend pageview of your blog. Placed under post and will show another post in same category. You can get this widget from Blogspottutorial.

5. Popular Post Widget

Popular post widget show link of most commented post. This widget is usefull as visitor reference which is most interesting post. Get this widget and installation setting on Bloggerstop

6. Recent Comments Widget

Recent Comment widget is helpfull to track newest comment, so you can response it quickly. Imagine if there's no recent comment widget, infact your visitor drop comment on your old post. Get this recent comments widget from bloggerstop

7. Top Commentator Widget

This widget show the most loyale visitor that always drop comment on your post. Show your gratefull by showing their link. Get this widget from bloggerstop

Any another suggestion for blogger widget list? Just drop your comment here

How to Add Social Bookmarks Icon to Blogger Post?

Social bookmarks become a common media for sharing information, especially in blogging. We can add this featured on post that make it easy to share. Check my social bookmarks icon below this post. Usually we use static icon. But this one has a unique effect like an animation, infact that's using CSS only. So How to add social bookmarks to blogger post? Follow these steps below

1. Sign in to Blogger dashboard, go to Layout>Edit HTML , tick mark on expand widget template

2. Copy these code below

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
padding-top:20px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>

3. Paste below this code

]]></b:skin>

4. Find these code

<data:post.body/>

5. Copy these code and paste below <data:post.body/>

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>

You can adjust its width to your main post width size.

6. Save

Note :

- Actually you can put it anywhere as long as still on post section. You also can paste it under

<div class='post-footer-line post-footer-line-1'>

- If your template using automatic readmore, paste that code after <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

- You can change background "Sharing is Sexy" using your own image
replace this URL to your own

background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;

Important update:

hi all.. please hosted button image to your own hosting...
open this link

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqNQjzBavsVoAxOuPpWmwPOYb34ugRgG8ZF4WEDRZCRBw-dDUT6r_KFoC8-kFGwa9SXdofgFuX844Fr0iy75wpAXkD075gbwJ91e5ITHqb9WfhAYD9ym8Is6rOTmKmNL2i6YY_bOGdm5w/s1600/sprite.png

save the image
upload to your own imagehosting
replace
http://img509.imageshack.us/img509/3131/sexysprite.png
to your own image URL

Imageshack only provide a little free imagehosting, so please host it self

Credit to Naeem Noor

How to Create Favicon in Blogger?

What is Favicon?
Favicon is a small icon that appear in browser address. In another words, an icon associated with a particular web/site/blog and typically displayed in the address bar of a browser viewing the site.

Example of Favicon
When we entering blogger URL, we'll see "B" letter icon in address bar. That's favicon

Can I Create it for My blog?
Yes you can

How to Create Favicon in Blogger?
Here's the step how to create favicon in blogger

• Create your own icon image using image editor such as photoshop, gimp, or any other editor. I can't use photoshop? Simply, you can search an icon in internet. Choose maximum 32x32 pixel for best view
• Upload to your imagehosting, such as imageshack, photobucket. You'll need its direct link url
  
• Open your blogger dashboard. Go to Layout>Edit HTML
• Copy this code
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgROmIyfMUtsSC-OquIGgHZlskNq9mwwNJlzX36TzkphycJuzye0s10Rm3BNRLnp2Up3VB7M5C-2i9vt9jRGUgTv4L1htJUSlv_-NWB0jDqJkRjF1v7oPcCEcdmHRdg-5sIP1FrRA2cz9o/s1600/rainbow.png' rel='shortcut icon'/>
• Change red text to your uploaded image URL
• Put that code before <b:skin><![CDATA[/*
• Save
• Preview your blog
  

How to Create Multicolumn Labels/Categories ?

Usually we use default labels/categories blogger widget. But if there's too many labels, it become too long. There's three tricky option to simplify labels widget.

1. Create multicolumn labels. You can see the example at my sidebar. Divide labels become two column
2. Use scrolling option
3. Use dropdown option

Now we try to make multicolumn labels only using CSS. No need heavy loaded- javascript as tag cloud widget. Suggested to make new section. Create section for labels and then put before footer. Why we should create new section? If we set multicolumn on sidebar, it will impact to another list widget.

The point is, create 4 column labels in lower section. You can preview the example here

Here's how to

Open Edit HTML and Create CSS code

1. Copy these CSS code below and paste before ]]></b:skin>

#category-wrapper {
width:960px;
clear:both;
margin:0 auto 10px;
padding-top:15px;
line-height: 1.6em;
text-align:left;
border-bottom:1px solid #efefef;
}

.cat {
color: #000000;
line-height: 1.5em;
}

.cat ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.cat ul li {
float:left;
width:22%;
list-style-type: none;
margin: 0 0 5px;
padding-left: 15px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbC8YvYowf9tDLGUd8172ieBOF5GO0-swkMHc-8Ni9COFTmwYxzam3gxWxgfjm5N9Niqkwfv6127uvv_689nWYMCKhdbesi506Enqw4IUQCJzUbJFnkzyC68O6_ncd-IPnmlFf252EWSI/s320/li.gif) no-repeat left center;
}

.cat .widget {
border-bottom:1px dotted #F7F7F7;
margin:0 .5em 1.5em .5em;
padding:0 0 1.5em;
}

Note :
#category-wrapper {
width:960px; adjust this value to your current template size

.cat ul li {
float:left;
width:22%; adjust this value, If you want to make two column set to about 45% , make three column set to about 33% .

2. Copy these code below

<div id='category-wrapper'>
<b:section class='cat' id='cat'>
<b:widget id='Label1' locked='false' title='Categories' type='Label'/>
</b:section>
</div>

Paste before

<div id='footer-wrapper'>

Save Template


Now you've created special wrapper for Labels widget

Thanks to Herro

Another Way to Change Blogger Template Without Deleting Widget

Fyuh, such a long post title. On my last post, I give trick how to change blogger template without deleting widget. There's same main point, that is copy all widget from current blog to new template. Maybe, some of you not familiar with Notepad ++, a lil bit complicated. Here's another way to edit XML file.

1. Download new xml template
   
2. Save to your desktop. Remember, SAVE no need to open. Some mistake is they open xml file in browser of course there will be an error warning, because browser not compatible to open xml file
3. Create new blog. This is trial blog to edit new xml template
   
4. Upload your new template to trial blog. How to ? Open Edit HTML, and then upload downloaded xml file
5. Open your current blog layout
6. Go to Edit HTML, copy all widget code between <div id='sidebar'>
7. Open trial blog layout
8. Go to Edit HTML, paste to trial blog, all copied widget code. Put it between <div id='sidebar'> too
9. Save
10. Download and save full template of trial blog
11. Upload to your current blog layout, and you get new layout without deleting widget
    

How to Add Javascript on Blogspot Template?

Sometimes we use javascript on HTML template to create some special effect such as slide, glider, parallax, automatic readmore and another blogger hack. As we know, javascript contain such a long code, usually we're using third party hosting. The purpose is to make it simple and lighter. Before put javascript on HTML, it should be uploaded to your web host.

Read this how to.

Here's how to place hosted javascript on HTML template.

Open Edit HTML. Copy these code below

<script src='http://YOUR-JAVASCRIPT-URL.js' type='text/javascript'></script>

put before </head> section

But many people have no own hosting, and sometimes free hosting have limited bandwidth and complicated registration. So how? Javascript can be placed through HTML without hosting. Here's how to place it.

Open Edit HTML. Copy these code below

<script type='text/javascript'>
//<![CDATA[

your fulljavascript code here

//]]>
</script>

put before </head> section

Blogger Post using Email

When you login to your dashboard you'll see there's two new icon, mobile phone and email icon next to new post button. Now blogger make post easier. You can post everywhere through email or mobile phone.

How to post using email? Simply, just click email icon, and you have to create your blogger mail. This email address will be your blogger mail account. Just write post like write email as usual and put your blogger mail account that you've created to mail address. Your email subject will be your post title. You also can upload image using attachment and will be embedded on your post. Enjoy it

How To Change Blogger Template?

How to change blogger / blogspot template without deleting widget? Previously I had felt the inconvenience because when I was uploading the new template xml, there is always a warning to delete the widget. If only one or two widgets in the sidebar or you just build your blog, it would not be a problem, but if you have so many widgets in the sidebar of course it will be more complicated. So what's solution?

The first way is backup (copy paste) all the HTML code in the sidebar, including blogroll links to the notepad and then install one by one again. It is still distressing, imagine how many blogroll links or banner code that must be re-installed?

Many friend ask, why I always lost sidebar widget if we upload a new template? For information, why the widgets can be deleted? Because the widget in the old xml template is doesn't exist on the new xml template.

For example, your old template have widget Linklist1, Blogroll1, HTML1, HTML2, HTML3, Label1, Blogarchive1. And your new xml code only have widget Label1, Blogarchive1. So, Linklist1, Blogroll1, HTML1, HTML2, HTML3 will be deleted automatically when uploading new xml template.

Based on this, to change blogger template safely is copying the template xml widget code from old template to new template in the xml which will be uploaded.

Follow this step below :

• First download and save your old template, open Edit HTML and click on Download Full Template
• Download notepad + + freeware to re-edit, download here
• Open old xml template (that you've downloaded first) and new xml template using notepad + +
• Copy widget code from old template , for example in the sidebar widget, copy the code between

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

COPY ALL CODE HERE

</b:section>
</div>

• Open the new xml template that will be uploaded
• Paste all the code that is copied from old template to a new template. Just paste to sidebar element, it can be edited(arranged) later through page element
• Continue till all widget code is copied to new xml template
  
• Save your new xml template
• Upload your new xml to your blog
• Save it and you won't face delete widget

See also : Indonesian Version
Be respectful to copy paste article, always put author link

How to Back Up Image and Javascript?

One day, when we open our blog and we see a terrible looks, all image is disappear and all script is not function why?For your information, if you were using free template, image and script is hosted on author's hosting. There's any probability for bandwidth exceeded, most common problem in free template. What is this? Hosting have certain bandwidth limit. If there are so many people use its link, it could be limit exceeded.

So how? Become a smart user, you have to backup image and script to your own hosting. How to? Here's how to for image back up.

1. Open Edit HTML
2. Search all background image url, usually have .jpg, .gif, .png extension
3. Copy URL, go to address, and save image
4. Upload image on your own hosting such as photobucket.com , imageshack.us
5. Copy URL image, replace all image URL on your template through Edit HTML, to your own URL image

Here's how to for script back up.

1. Open Edit HTML
2. Search all script url, usually have .js , .txt , .css extension
3. Copy URL, go to address, and save script
4. Upload image on your own hosting such as googlepages.com (for old gmail), javascripthost.com , fileave.com and another (just ask Google, he know everything)
   
5. Copy script URL , replace all script URL on your template through Edit HTML, to your own script URL

I have to remind this a hundred times. Because of most people still face this problem. Designer spent many time makes template free, so help them by maintaining your own template.

Sign Up Javascripthost.com for free now, and save your file. Fileave.com

PR: wait... I: wait... L: wait... LD: wait... I: wait... wait... Rank: wait... Traffic: wait... Price: wait... C: wait...

Automatic Thumbnail and Readmore Function

Readmore function is used to cut our post on homepage, post will appear fully when we click readmore link. You can see my post on homepage. It's cut automatically and if we insert image, it appears thumbnail. This is automatic readmore function with thumbnail. We just need to set up our HTML code. How to?

1. Go to "Layout" click "Edit HTML"
2. Tick on "Expand Widget Templates"
3. Find </head> code
4. Insert this javascript under </head> code

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script src='http://cebong.ipit.googlepages.com/read-moreotomatis.js' type='text/javascript'/>

Note :

You can cutomize this size

summary_noimg = 430; is post cut height without image
summary_img = 340; is post cut height with image
img_thumb_height = 100; is thumbnail image height
img_thumb_width = 120; is thumbnail image width

5. Find this code

<data:post.body/>

6. Replace with this code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more &#8220;<data:post.title/>&#8221;</a></span>

</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Save


Now you can try to post and it cut automatically.

Note :

Please save javascript , here's the URL, http://cebong.ipit.googlepages.com/read-moreotomatis.js, upload to your own filehosting. I can't guarantee if my bandwidth exceeded :D

or download readmore-otomatis-script here

After upload script to your own hosting, replace http://cebong.ipit.googlepages.com/read-moreotomatis.js to your own URL javascript
Source : Kang Jaloee Punya