You might have noticed in my template that there is a date widget before each post. Only a very few templates will have this. I hope to have a best and beautiful template we must concentrate in all minute things. So I decided to help my visitors to implement this hack in their template too. In this post I will give you the code what i have in my template , you guys can customize it to suit your template. If you have any doubts ask me in comment section .
Let' s start :
Go to settings then Formatting and change the date header format and other things similar to this you find in the image below
After doing this save your settings . Now navigate to edit HTML section and check exchange widgets , Then add the following CSS code in the CSS section of your template
#fecha {
display:block;
text-align: center;
float:left;height:70px;
font-family: Arial, Helvetica, sans-serif;
width:70px;
margin:0px 5px 0 0;
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/post-top_bg.png);
}
.fecha_dia {
display:block;
font-size:1.2em;
margin:0;
color:#336699;
font-weight: bold;
padding:0.7em 0 1.1em 0;
text-align: center;
}
.fecha_mes {
display:block;
font-size: 0.9em;
margin:0;
padding-top:5px;
color:#A10000;
font-weight: bold;
text-align:center;
}
.fecha_ano { display:none; visibility:hidden; height:0; }
.post-title, .post-title a {
margin-bottom:20px; padding:2px 0 0 0;
color:#00335B;text-decoration:none;
}
.post-title a hover {color:#00335B;text-decoration:none}
.post h2 {
font-family: Arial, Georgia, Sans-serif;
font-size: 18px;
margin-bottom:20px;
text-align:left;color:#00335B;
text-transform:uppercase;
}
.post-body {
font-family: Verdana, Arial, Georgia, Sans-serif;
font-size: 13px;margin-bottom:20px;margin-left:170px;
line-height: 1.3em;
margin: 3px 0 5px 0;
}
.post_header {
margin:0; padding:0;
height:90px;
}
.post_headerr {
margin-bottom:20px; padding:0;
}
.post-labels {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/category-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}
.details .post-comment-link {
background:url(http://i263.photobucket.com/albums/ii150/mohamedrias/comments-1.gif) no-repeat;
margin:0; padding:0 0 0 20px;
}
and now search for this following code <div class='post uncustomized-post-template'> or similar and then select the code below that line upto <div class='post-body'>
and replace that code with the following code
<div class='post_header'>
<div id='fecha'>
<script>remplaza_fecha('<data:post.timestamp/>');</script>
</div>
<div class='post_headerr'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<div class='details'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
</div>
</div>
</div> <div class='post-header-line-1'/>
Now you can see date before each post.
Screenshot :
Anything else you can do with this ?
yes, In the CSS code you can see some codes are in red . You can change the codes in red to suit your template .
Write comments about this post and give me your suggestions .
Today I am going to tell how to add Icons to post titles. You would have noticed in some wordpress blogs like Dezzain and other famous blogs using Icons before the Post titles. Never Wonder how to do or Whether only Wordpress has this feature. It's really an easy hack and I will help you to implement this.
Let us start :
Step 1 :
First you need to create an image / Icon which you would like to show before each post title. You can create the image either in Photoshop or in Online Image creators. After creating the image upload it to blogger or any other image hosting sites like imageasck.us , photobucket , etc . Now copy and paste the image url in a text file.
Step 2 :
You need to create simple HTML code for your image like below ,
<img src=" your Image Url " />
change the text in red with your image url. Now we have successfully created the code for our image.
Step 3 :
Now let us see how to implement the image code in blogger Template. Login to your Blogger Account , then go to Layout subtab and then to EDIT HTML tab. Before we start first take a backup of your template . Put a check in expand widgets box and search for the code in red .
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
If you want to show the image before post title , you need to add the image code after the red line.
If you want the image to appear after post title then paste the image code after the green text.
After doing this preview your template , Then save it.
I hope you would have liked this hack. If you have any problems in implementing this hack ask in comment form I will help you.
Tomorrow I will come with another nice Blogger Hack , If you don't want to miss it then subscribe to our RSS feed.
One of the problem blogger have is that Blogger don't have a embedded comment form like wordpress. After a longtime , now blogger draft has found a trick to include comment form. It's really an easy hack for those who use templates provided by blogger. For those who use customized template need to include a HTML code to make the comment form appear below each post.
Let see how to do this :
Step 1 : First login to draft.blogger.com with your google account . Then in blogger dashboard click settings then comments. There you will find three options like this
As shown above check comment form placement : Embedded below post.
Step 1 is enough for users who use uncustomized blogger template. For them after doing this the comment form will be included below the post. Other users need to do the second step to make the comment form appear below post.
Step 2 :
Now go to Edit HTML section and first take a backup copy of your template. Then check expand widgets and search the folowing code
<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>
Now replace the above code with this following code
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>
that's it save your template. Now you can see a beautiful comment form embedded below each post.
Screenshot :
Troubleshooting :
Do this step only if the comment form don't appear after step 2. In some templates even after adding this code the comment form will not appear. Thanks to Blogger Buster for this hack . Now search for <b:include data='post' name='comments' /> and add the following code immediately below it <b:include data='post' name='comment-form'/> .
After adding this code all templates will have comment form embedded below post . It's really one of the best hack which draft blogger has now made it available for all blogger users. Before this most visitors might have felt uneasy to comment , because to write comments we need to navigate from the page or a pop-up window will open . But now writing comments is made very easy.
Anything else we can do with the comment form ?
Yes , we can change the width and height of comment form .
to change the width and height of comment form just change the following code in green .
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>
Why are you waiting for , write a comment on this post and let me know how much you liked this post .
As I told before i converted Box-tube wordpress theme to blogger. Yes , People who use Blogger can also use Box tube 2 column blogger template. I have converted this wordpress theme to blogger on my friends request. Other visitors can also ask me to convert their famous wordpress theme to blogger. I will do it for free.
Main Features of Box tube blogger template :
* 468 x 60 banner ad on header
* navigation bar
* Feeds widget on sidebar
* Feedjit Widget
* Social Bookmarking Widget on post footer
* 3 column footer
* favicon included , just change the img url to yours
* Swap title Hack for better seo results
* related posts hack
* Meta Tags included , just change it to suit your site
This Box-tube Wordpress template was first created by Dezzain . You can download box-tube wordpress theme on dezzain studio .
screenshot :
This template is done on Creative Commons License 3.0 . As per the Creative commons License you should not remove the footer credits from template , but you can edit to match your idea. Blogger version is created by Blogger Plaza and Blogger Accessories
demo for Blogger version of Box tube template is here at BOX TUBE BLOGGER TEMPLATE
Download Blogger Version : Box-tube blogger template
Please leave your comments so that i can know how much you like this template.
thanks for reading , see you soon with a new template.
One of the disadvantages for authors who use blogger is that there is no rating/voting widget . Because of that authors don't know how much the visitors liked their posts. After a longtime , now draft.blogger has found a trick . They recently posted that bloggers can now add Ratings widget on their blog through draft blogger .Let us see how to add ratings widget for Blogger,
In layout section , under body layout click edit . A new pop-up window will open like this , here you need to check the Show Star Ratings
If you are using template provided by blogger then you can see the widget after doing step 1. If you are using some other custom template then you need to add the following code below <div class='post-footer-line post-footer-line-1'> or similar .
by adding this code there , the star ratings widget will appear below each post. If you want to add it below the post title , then add the above code immediately below <div class='post-header-line-1'/>let's see how it looks ,
you can also add that code anywhere you want. if you want to add style CSS like padding , color , etc add <div style='padding-left:50px; and other CSS part '>
</div>Thats it , hope you guys will like this new star ratings widget. See you soon with a new widget .For future updates , subscribe to my blog
One of the Major Problem Blogger users have is whenever they try to change their templates , They will loss their widgets even if they take backup of their template. After Changing their template , they need to add widgets again manually. It's really annoying and time consuming process.
Is there any way to Backup our Widgets ?
yes . We can backup our widgets before changing our template.
How to backup Blogger Widgets ?
It's really simple guys , before changing template search your widgets code without putting check in expand widgets box.
Select the widget code as shown in the image below.
Now save the widget codes shown in between yellow box to notepad. Copy and Paste all your widget codes.
After doing this Upload your New Template . After uploading you will get a message like this
At This stage don't click Confirm & save tab. Rather search for the following code <b:widget id=' , Now paste the widget codes you have saved immediately above or below the code in yellowAfter adding the widget codes save your template.
That's it ! Now you will have all widgets that you used in your previous blogger template.
How This works ?
Blogger will keep the widget content on their database with unique widget id.
I hope this hack will be very useful to you guys. Tell me your suggestions in our comment form , If you have any doubts ask there I will help you.
As I told before i converted Box-tube wordpress theme to blogger. Yes , People who use Blogger can also use Box tube 2 column blogger template. I have converted this wordpress theme to blogger on my friends request. Other visitors can also ask me to convert their famous wordpress theme to blogger. I will do it for free.
Main Features of Box tube blogger template :
* 468 x 60 banner ad on header
* navigation bar
* Feeds widget on sidebar
* Feedjit Widget
* Social Bookmarking Widget on post footer
* 3 column footer
* favicon included , just change the img url to yours
* Swap title Hack for better seo results
* related posts hack
* Meta Tags included , just change it to suit your site
This Box-tube Wordpress template was first created by Dezzain . You can download box-tube wordpress theme on dezzain studio .
screenshot :
This template is done on Creative Commons License 3.0 . As per the Creative commons License you should not remove the footer credits from template , but you can edit to match your idea. Blogger version is created by Blogger Plaza and Blogger Accessories
demo for Blogger version of Box tube template is here at BOX TUBE BLOGGER TEMPLATE
Download Blogger Version : Box-tube blogger template
Please leave your comments so that i can know how much you like this template.
thanks for reading , see you soon with a new template.
On all Blogger's mind there will be just one question , How to drive traffic to our blog ? We need to have quality content and backlinks to drive traffic to our blog and occupy first place on google search engines. First one Quality content is in hands of the admin who writes the post. he need to put the main keywords for the article in the post . But for the second one , the author can't just submit each and every post to bookmarking sites . Its very time consuming. But It's a very effective way of driving traffic to our blog. We need a widget for blogger so that visitors/readers can submit our article to bookmarking sites like digg , technorati , del.ico.us , stumble upon , etc
Here is the code for social bookmarking widget for blogger :
First we need to add the following css code to our blogger template in css section ,
.social_network {
float: left;
width: 540px;
}
.social_icon {
float: left;
width: 540px;
}
.delicious {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
.digg {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
.stumble {
margin: 0px;
padding: 0px;
float: left;
text-align: center;
}
.technorati {
margin: 0px;
padding-left: 20px;
float: left;
text-align: center;
}
.delicious a:link, .delicious a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight:bold;
}
.delicious a:hover, .delicious a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/yummy.gif);
background-repeat: no-repeat;
background-position: center top;
color: #0099FF;
font-weight: bold;
}
.digg a:link, .digg a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}
.digg a:hover, .digg a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/digg.gif);
background-repeat: no-repeat;
background-position: center top;
color: #CCCC99;
font-weight: bold;
}
.stumble a:link, .stumble a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}
.stumble a:hover, .stumble a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/found.gif);
background-repeat: no-repeat;
background-position: center top;
color: #3366FF;
font-weight: bold;
}
.technorati a:link, .technorati a:visited {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
width: 80px;font-weight: bold;
}
.technorati a:hover, .technorati a:active {
margin: 0px;
padding-top: 60px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
float: left;
display: block;
background-image: url(http://wiigames2dl.googlepages.com/techit.gif);
background-repeat: no-repeat;
background-position: center top;
color: #99CC33;
font-weight: bold;
}
add this code before ]]></b:skin>
Now check expand widgets , and find the following code <p class='post-footer-line post-footer-line-3'/> or related code. And add the following code immediately below
<div class='social_network'>
<div class='social_icon'>
<p class='delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>del.icio.us</a></p>
<p class='digg'><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a></p>
<p class='stumble'><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumbleupon</a></p>
<p class='technorati'><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Technorati</a></p>
</div>
</div>
hope you will like this new type of social bookmarking widget .
thanks for reading , see you soon with a new widget.
Jumong theme is based on a popular Korean historical drama series. Initially I saw this template on TECH-PLAZAA. It was a wordpress theme. I surfed search engines for a blogger version . But i came to know that jumong template is available only for wordpress,not for blogger . But I am really inspired by this template . So i decided to convert this wordpress jumong 3 column template to blogger beta template. This is my first template . It initially took lot of time , but finally i have converted this jumong wordpress template to blogger. And now I am testing this template on my own blog. I got no errors so far. And also it is tweaked for seo and also this template contains blogger hacks like ,
1. Related Articles
2. Swap Title for SEO
3. Label or Tag cloud
4. faster Loading
5. Meta Tag included , just replace the description and keywords with your own.
6. Bookmarking links for technorati , digg , del.icio.us , blink , etc
How to Add Adsense Ads below post title on blogger :
First check expand widgets template , The search for <div class='post-header-line-1'/> then add google adsense ad code immediately below that line .
How to show Google Adsense Ads only in post pages :
it's very simple , just add this code
<b:if cond='data:blog.pageType == "item"'>
put adsense ad code here
</b:if>
Do you want to show the related Posts widget in blogger :
Javascript needed for related posts widget is already added in the template itself , you just need to paste the following code in place you need the widget to appear ,
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
If you want to add related posts widget below the post content in blogger , then in layout section check expand widgets . Search for <p><data:post.body/></p> , add the code below this line.
blogger demo : Blogger Plaza
This template is licensed under the Creative Commons Atribution License, so please do not remove the footer credits. I have worked hard to convert this wordpress theme to blogger.
Download Jumong Blogger template
This is one template that has got me on a Wild Goose chase trying to find the original creator of the template who designed it for wordpress, it was converted to blogger by Jacky Supit.
Download the Rainbow Garden Blogger Template
Cat Crazy
Perhaps it's the cat lover in me... A cute and stylish template by Fresh Blogger Templates. Demo | Download 
Sweet Dreams
This is quite an old theme now, but it's still one of my favorite designs. Demo | Download 
Zen
NeonNeon
Daring and inspirational, this template really hits the mark. by Blog and Web Demo | Download 
Paper Border
Features a paper effect around the whole blog. Designed by Template Panic. Demo | Download Home Sweet Home
Monochrome template with a quirky, homely feel. By Template Panic. Read more and download 
Buy iPod
Great navigation in this tech-style template! Created by Jackbook. Read more and download Red Glow
Moody and dark, this template somehow reminds me of The Ghosts of Mars... Great template nonetheless! And very stylized. Designed by Jackbook. Demo | Download Fluid Solution
As the title suggests, this is a fluid template which will stretch to fit the browser window. Clean and simple, you can change the logo to suit your own tastes. Ported to Blogger by Jackbook. Demo | Download 
Gemstone
A lightweight blue and black design with many links in the header. Great for gadget/technology blogs. Originally designed by GemStone CSS, of Arcsin, and now ported by Erica Akira of Templates for You. Demo | Download 
Wordpress Admin
Would you like to confuse your visitors into thinking they have stumbled across your Wordpress admin page? If so, take a look at this "Wordpress Admin" themed template. Jackbook even did a great job of confusing me... Demo | Download 
Simplicity
A fresh and feminine theme by Fresh Blogger Templates Demo | Download Terra Firma
A beautifully designed two column template. Converted from Wordpress by Fresh Blogger Templates Demo | Download The Missing Piece
Originally designed by CSS Templates, this theme has been converted for Blogger by Fresh Blogger Templates Demo | Download 
She's got style
This would be a great theme for a fashion blog or budding fashionista. Originally a Wordpress theme by Grab a Theme and Sweet Melancholy, ported to Blogger XML by Templates for You. Demo | Download 
