2 Add Yahoo Smileys to Blogger Posts - Firefox Users

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 .

0 Add Yahoo Smileys to Blogger

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.

0 change Blogger Template without deleting widgets

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.

0 Hide / Remove Navigation Bar in Blogger

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.

0 Backup Blogger Widgets

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.

1 Add Icon Before Post Titles

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.

0 Show Date before each Post in Blogger

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(&#39;<data:post.timestamp/>&#39;);</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 != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
</span> |
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

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

1 Embed Comment Form below post in Blogger

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 .