How To Add Facebook Profile Badges into Your Blog

Almost everyone has a Facebook account, including bloggers. If you want to know and be friends with your readers, put your Facebook profile badge is a right step. Do you want to add your Facebook profile badge into your blog? Follow these simple steps :

Steps :

1. Login into your facebook account.

2. On the profile page on the left side under your friends list, search for "Add a Badge to Your Site" or just click here.

3. It will take you to Facebook badges option.

4. Then, edit your badge by click 'Edit This Badge'.

5. Once you done editing, just click your blog platform icon to install it into your blog whether Blogger, Typepad or click Other to copy the code manually and paste it into HTML/JavaScript.

6. Just save it & DONE.

Now you can have more friends from your blog readers. Enjoy!

Add Speech Bubbles Tooltip in Blogger

What is Speech Bubbles Tooltip?

Description : Speech Bubbles Tooltip lets you add tooltips to links using either the value of the link's title attribute, or rich HTML defined all inside a single HTML file and fetched using Ajax instead.

Now, let's add it to your blog.

Steps :

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), </head>

3. Copy and paste this just CODE above </head> tag.

4. Save your template.

5. To Apply the Speech Bubbles Tooltip you need to add title="YOUR DESCRIPTION" class="addspeech" on each link you want the tooltip to show up. Example :

<a title="YOUR DESCRIPTION" class="addspeech" href=http://www.place2how-to.com>HOW-TO HOUSE</a>

Yeah! It's DONE! Like it? You gonna like it!

You also can add this style of tooltip.

source : dynamicdrive

Change Newer Posts and Older Posts with Post Titles like Worpress

Do you want to change your Newer Posts and Older Posts with your Post titles? We always see this trick only in wordpress blogs. But now, you can apply it into your blog. It also can attract more reader because they can stop to see your post title. Let's try it. Just in 3 steps.

Example : After apply the hack code

Steps :
1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code below in it.

3. Save & DONE!


Refresh your blog to see the result.

How To Change Blogger Comment Box Width and Height

Do you want to change the width and height of blogger comment box to make it look nice and fit your post page width. You only need to modify this code.

1. Go to your Dashboard >> Design >> Edit HTML >> Check Expand Widget Templates.

2. Search this code (Ctrl + F), or similar something :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>

3. Change the bold code :

height='?' >> to any number you want.

Change it from width='100%' to any value you want but not with % anymore. Change it to px. Example : width='500px'

Example :

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='500px'/>

4. Save your template & DONE!

This is a simple trick! Have a try guys. GOOD LUCK!

Add 'Bookmark This Site' Widget in Blogger

Bookmark page is serves to store page that you like in the browser's bookmarks. If visitors are interested with the content of your site, they will bookmark your blog/website. It will be easier to track website visitors easily. However, you can add a widget to make this bookmarking process more easier and with some style. Only use a Bookmark Site Script. See demo.

Do you wanna add it into your blog? Here we go..

Steps

1. Go to your Dashboard >> Design >> Page Element >> Add a Gadget.

 

2. Paste this code below in it :

<script type="text/javascript">

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Shared by Alfian J. @ HOW-TO HOUSE www.place2how-to.com
***********************************************/

function bookmarksite(title,url){
if (window.sidebar) // firefox
    window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
    var elem = document.createElement('a');
    elem.setAttribute('href',url);
    elem.setAttribute('title',title);
    elem.setAttribute('rel','sidebar');
    elem.click();
}
else if(document.all)// ie
    window.external.AddFavorite(url, title);
}
</script>
<a href="javascript:bookmarksite('YOUR BLOG/SITE NAME', 'YOUR BLOG URL')">BOOKMARK THIS SITE!</a>

or you can use image for this bookmark widget, use this code :

<script type="text/javascript">

/***********************************************
* Bookmark site script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
* Shared by Alfian J. @ HOW-TO HOUSE www.place2how-to.com
***********************************************/

function bookmarksite(title,url){
if (window.sidebar) // firefox
    window.sidebar.addPanel(title, url, "");
else if(window.opera && window.print){ // opera
    var elem = document.createElement('a');
    elem.setAttribute('href',url);
    elem.setAttribute('title',title);
    elem.setAttribute('rel','sidebar');
    elem.click();
}
else if(document.all)// ie
    window.external.AddFavorite(url, title);
}
</script>
<a href="javascript:bookmarksite('YOUR BLOG/SITE NAME', 'YOUR BLOG/SITE URL')"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHCOr4gn0BbrINxA-DQ1gvXND9k79FR-n3NIytZFnxsDIdHcDK6NHZfvT7fWJpwCy4Ex0q5u86RtOMg80W3usz3nO4H3Bt5VifQRkROxwj_19Cvi3d8m8K2ZfaocjkvnpMHOX-S1oGXU/" /></a>

Customization

Change details code in bold text.

YOUR BLOG/SITE NAME = replace with your blog name.

YOUR BLOG/SITE URL = replace with your blog URL.

BOOKMARK THIS SITE! = replace with your own word. (Optional)

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipHCOr4gn0BbrINxA-DQ1gvXND9k79FR-n3NIytZFnxsDIdHcDK6NHZfvT7fWJpwCy4Ex0q5u86RtOMg80W3usz3nO4H3Bt5VifQRkROxwj_19Cvi3d8m8K2ZfaocjkvnpMHOX-S1oGXU/ = replace with your own Bookmark image.(Optional)

3. Save and DONE!

Enjoy this Bookmark Site Widget. Hopefully this widget help to increase your blog reader.


source : dynamicdrive