Blogger Dummies

Premium Quality Blogger Templates

2008-07-28T22:06:00.000-07:00

We are really proud to present you premium quality blogger templates for free here at Blogger Accessories . This is only the beginning We will upload more blogger templates soon. We will post atleast one blogger template per week .

License : All this templates comes under creative commons 3.0 License . According to creative commons 3.0 you should keep the footer credits.

Box Tube Template :

image #1

it's a two Column Blogger Template. This Template includes navigation bar , feedjit Widget , Social bookmarking sites widget , 3 column footer , related Posts hack , etc

Download here

Jumong Blogger Template :

Jumong is an exclusive Wordpress theme which I converted to Blogger recently . It's a three column widgerized Blogger Template.

Download here

more templates coming soon........

Add Yahoo Smileys to Blogger Posts - Firefox Users

2008-07-28T20:48:00.001-07:00

This Blogger Hack is focused Firefox Users who want to add Yahoo Smileys to Blogger Posts. This hack don't work for other browsers like Internet Explorer , Opera , etc . I kindly request other browser users to see this post " Add Yahoo Smileys to Blogger Posts " , if they want to implement this hack in blogger.

Firefox users follow this simple steps to add Yahoo smileys to Blogger Posts :

Step 1 :

open Firefox browser and install " Grease monkey " by visiting Grease monkey Addon ! and restart browser .

step 2 :

After installing Grease Monkey , install this Javascript file ( just open th file , Grease monkey will install automatically ) .

step 3 : Go to Layout section of your blog and click Edit HTML subtab . Now add this CSS code above ]]></b:skin>

img.emoticon {
padding: 0;
margin: 0;
border: 0;
}

that's it we have successfully added yahoo Smileys to blogger.

See you soon with a new hack .

Add Yahoo Smileys to Blogger

2008-07-28T07:32:00.000-07:00

In this Post I will help you to add Yahoo Smileys ( images ) to blogger posts . you might have noticed in many wordpress blogs there will atleast one Yahoo smileys . As we know expressions speaks more than words , with a single yahoo smiley we can express our mood. In wordpress this feature is build in. But unfortunately blogger doesn't have this feature :( .But here is an easy trick to add yahoo smileys to your blogger posts . if you just type the codes given below you will get yahoo smileys for that simple letters.

for example : if you type
:z you will get :z .

Just Follow this steps to add Yahoo Smileys feature to your blog.

Go to layout section of your blog , then go to Edit HTML section . Search for this following code </head> and add this Javascript before </head> .


<script src='http://wiigames2dl.googlepages.com/yahoosmileys.js' type='text/javascript'/>

that's it , here after whenever you write blog posts just add this yahoo smiley codes . For this simple letter codes you can see beautiful yahoo smileys .

:) --> :)

:( --> :(

:p --> :p

:D --> :D

:$ --> :$

;) --> ;)

:@ --> :@

:# --> :#

:k --> :k

:x --> :x

:o --> :o

:O --> :O

:L --> :L

:r --> :r

:s --> :s

:y --> :y

:~ --> :~

:v --> :v

:f --> :f

:d --> :d

:c --> :c

:z --> :z

troubleshooting : You Must give space before writing yahoo smileys code .

That's it we have added yahoo smileys code to our blogger blog :~ .

See you soon with a new blogger hack.

Add navigation or drop down menu in blogger

2008-07-28T02:26:00.000-07:00

Here is an easy tutorial to add Navigation Menu or Drop Down Menu in Blogger. With this navigation Menu widget you can display most important links or categories in drop Down Menu format. This navigation Menu is very tiny and you can display as many links you want.

Let us see how to add this Navigation menu widget in Blogger :

Here is the Default code of Navigation menu :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option value=0 selected> Type your Navigation Menu Title Here! </option>
<option value=" Url of your Link here "> Title of your link </option> </select></form>

in this above code , you need to edit the text in red to add links .

The text in green color is meant to open links in new window. If you want the links to be opened in same window then replace the text in green to this blank . ( that is delete _ )

if you want to add more links then add the last three lines in violet repeatedly as many times you want.

Look At My code below so that you can get an idea :

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- Blogger Accessories- </option>



<option value="http://bloggeracs.blogspot.com/2008/07/jumong-three-column-blogger-template.html">Jumong Blogger Template</option>

<option value="http://bloggeracs.blogspot.com/2008/07/show-date-before-each-post-in-blogger.html">Show Date before each post</option>

<option value="http://bloggeracs.blogspot.com/2008/07/related-posts-widget-for-blogger.html">Related Posts Widget</option>

<option value="http://bloggeracs.blogspot.com/2008/07/hide-navigation-bar-in-blogger.html">Hide Navigation menu bar in blogger</option>

</select></form>

the result is :

How to Add this Navigation menu / Drop down Menu To my blog ?

It's very simple . First edit the code according to your wish and copy the code .

* Go to Layout section of your template .

* Click Add PageElement tab in sidebar

* Select HTML/JAVASCRIPT subtab

* Paste the Navigation Menu code you copied before there and save .

that's it now you can see a beautiful Navigation Menu in your blog.

See you soon with a new hack .

change Blogger Template without deleting widgets

2008-07-28T02:24:00.000-07:00

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 yellow

After 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.

Hide / Remove Navigation Bar in Blogger

2008-07-26T21:51:00.000-07:00

As we all know in blogger, above header there is navbar or navigation bar . Most of want to hide the navigation bar in blogger , but we don't know how to do that. Never wonder here is a simple trick to hide the navigation bar in blogger .

Follow these easy steps to paste the below CSS code :

CSS code to remove Navigation Bar in Blogger :
/* CSS to hid navigation bar */
#navbar
{
height:0px;
visibility:hidden;
display:none
}

Log in to your blogger account and select the Layout of the blog which you want to modify.

Select the tab page Template and then click on Edit HTML

Search for the text : body {

now paste the CSS code above the line in red.

This is how your template HTML code should look after pasting the hack code snippet

That's all. From now onwards your blog will not display navigation bar.

Backup Blogger Widgets

2008-07-16T04:46:00.000-07:00

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 yellow

Add Icon Before Post Titles

2008-07-15T04:45:00.000-07:00

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.

Show Date before each Post in Blogger

2008-07-14T04:44:00.000-07:00

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 .

Embed Comment Form below post in Blogger

2008-07-13T04:43:00.000-07:00

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

Now replace the above code with this following code

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 .

Box Tube

2008-07-12T04:42:00.000-07:00

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.

Star Ratings or Voting Widget for Blogger

2008-07-11T04:40:00.000-07:00

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:

Step 1 :

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 '>

star- ratings code

</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

Social Bookmarking widget for blogger

2008-07-10T04:38:00.000-07:00

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.

This Social bookmarking widget contains Post Link submission to major bookmarking sites like Digg , technorati , Blinklist , Del.icio.us , Furl , Stumble Upon , Reddit , yahoo , Simpy and Spurl .
I hope those are the most famous social bookmarking sites with higher pagerank and traffic .

Just Follow this simple steps to add social bookmarking sites widget to blogger :

Step 1 :

Log in to your Blogger Account and navigate to Layout Section. Then go to Edit HTML Page and check the Expand Widgets box.

Step 2 :

Now search this code : <p><data:post.body/></p>

Step 3 :

Copy and paste the below code immediately below red text.

<p><data:post.body/></p>

<span class='post-author' style='font-size: 95%;'><br/>
Add Post To: |
<a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Digg</a>|
<a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'>Technorati</a>|
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>del.icio.us</a>|
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Stumbleupon</a>|
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Reddit</a>|
<a expr:href='"http://www.blinklist.com/index.php?Action=Blink/addblink.php&Url=" + data:post.url + "&Title=" + data:post.title' target='_blank'>BlinkList</a>|
<a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Furl</a>|
<a expr:href='"http://www.spurl.net/spurl.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'>Spurl</a>|
<a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.title + "&u=" + data:post.url' target='_blank'>Yahoo</a>|
<a expr:href='"http://www.simpy.com/simpy/LinkAdd.do?href=" + data:post.url + "&title=" + data:post.title' target='_blank'>Simpy</a>|
<br/></span>

that's it Now you can see social Bookmarking sites widget to your blog.

I hope you like this widget , see you soon with a new hack . please tell us your suggestion about this widget.

Jumong Three Column Blogger Template

2008-07-10T04:37:00.000-07:00

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