Blogger Hacks – Page 5 – SmartBloggerz

Add Background Image to Post Titles

Dcloud Of Dcblog brought this fantastic thing to us.By this we can put a Image Just behing the Post Title like on his blog.It’s Very Simple,the only thing is that you need to have a superb image to put on their.

You will have to just check hard for the codes to implement as different blogger have different type of coding.

To locate the code which controls the post titles go to your Layout Tab (located in your Customize window) and click the Edit HTML sub tab. The code you are searching for is “.post h6” (it can be something else also,So try searching) which looks like this …

Now to get the background image in there you have to add the code “background: url()” like this:

.post h6
{
font-size:22px;
color:#000000;
font-weight:normal;
border-top:1px dotted #000000;
padding:4px 0 0 0;
width:599px;
no-repeat;
background: url(http://www.yourserver.com/yourimage.gif) no-repeat;
}

Now Check your blog the image might be partially visible only so add the height attribute(equivalent to the height of the image).

Now Checkout your blog,now you have to add/change the padding codes as you thinkl according to your blog to properly align the title within the image.

So What do you think Isn’t it great for your blog?

Again Thanks to Dcloud blog.

Top 10 Search Terms:

• post title background • background post title • post title background image • url background post title • blogger post title background image • background post title blog • background for post title • blogger post title background • post title background blogger

Blogger’s New "Reactions" Feature – How to add to customized blog templates

As You Must Have Read The Recent Updates n Fixes By Blogger In The Previous Post .Now I will tell you the hack to Add The Blogger’s New “Reaction” Feature as i said in earlier post for those people who are using A Customized Blogger Template.This Hack has been given to me by Bloggerbuster.com

If You are using a Classic template i.e provided from blogger then read this post.

For Customised Template It Goes Like This:

Depending on the type of template you are using, you will need to use one of two methods to add the required code to your template.

If you are using a default Blogger template with no modifications to widgets or the post layout…

Go to the Layout>Edit HTML page in your Blogger dashboard, and look for the “Revert Widget Templates to Default” link near the bottom of the page.

Clicking on this link will replace all of the widget templates with the updated code. All of your existing widgets will remain, so don’t worry about losing any data! Instead, this will simply replace outdated code with new code, and ensure you can add all of Blogger’s new features with ease.

If you use a customized/third party template…

You will need to add the required code to your template manually.

In this case, go to Layout>Edit HTML in your Blogger dashboard and check the “Expand widget templates” box.

Next, search for the following line of code (or similar):

Immediately after this line, add the following section of code:


       <b:if cond='data:top.showReactions'>
         <table border='0' cellpadding='0' width='100%'><tr>
           <td valign='center'><span class='reactions-label'>
             <data:top.reactionsLabel/></span>
              </td>
           <td><iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
          </tr></table>
       </b:if>

Preview your template to see the “Reactions” add-on appear beneath each of your blog posts, and finally, save this new addition to your template.

If you cannot find the “post-footer-line” in your blog template, search for <data:post.body/> instead, and paste the code immediately after this line.

As You can see i m using a customized blogger template n this feature is working properly.
What Do You Say About This?

Remove Dotted Link Borders in Firefox

Everyone would have noticed in their Blogs that whenever you click an Link a dotted border appear around the link. The dotted Border not only appears for links but for all images , Post Titles , etc. It’s some what Annoying .This Is Not a big deal, but it’s good without the dotted lines . I am not sure if you have noticed it or not but i did.We can just ignore this for most of the times but sometimes it affects the look and feel of the site.

The Cause

When a link is clicked, it gets the focus. Firefox adds dotted borders to links that have focus to remind the users.

If you want them out as well or want to stop the dotted outlines here’s the simple thing to do. We just need to add outline:none to the a tag.

The Solution

To avoid the border, add this CSS rule to your page:

Go to your Dashboard then click Layout then Edit HTML place the code below:

a {
outline: none;
}

then save.

If your not sure where to place them, just click Ctrl+F then type a img then place the above code under it…please refer the image below for clarification.

And It’s Done, Enjoy!

Top 10 Search Terms:

• firefox link border • firefox link border remove • remove link border firefox • firefox remove link border

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.

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://noteeboyz.13.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

😀 –> 😀

:$ –> :$

😉 –> 😉

:@ –> :@

:# –> :#

:k –> :k

😡 –> 😡

😮 –> 😮

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

Credits: Blogger Accessories

Top 10 Search Terms:

• smiley • yahoo smileys • yahoo smiley • smileys for blogger • YAHOO SMILE