Web Blog Tricks And Tips: April 2011

Thursday, April 28, 2011

Add Facebook Comment Style for Blogger

Previously, I've posted about Add Facebook Fan Page In Blog. Now, I will post about Add Facebook Comment Style for Blogger. I think this trick also important, because maybe some of our visitors don't have a blogger account. Or maybe, they can't navigate blogger comment style. If you want to know how to add facebook comment style for blogger, just follow the steps below. See the DEMO first!

=> Hide Blogger Comment Box

1. Log in to your blogger account

2. Go to Settings --> Comments
3. Find "Comments", and choose "Hide"

4. Click SAVE SETTINGS

=> Add Facebook Comment
1. Go to Design --> Edit HTML
2. Check in the "Expand Widge Templates" box
3. Copy the code below, and paste under <data:post.body/> (If you're using "Read More", there are 2 <data:post.body/>, so choose the second)

<b:if cond='data:blog.pageType == "item"'>
<p align='left'><a href='http://full-tricks.blogspot.com/2011/04/add-facebook-comment-style-for-blogger.html' target='new'><img alt='' class='icon-action' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXaK5lCivxQplBy3Awdp0k0acUbLRFtVmzr9uMcuj-6fjvw7z4SokHiccSxxUxH33b8IlD_QWOYCF-wQr3vht2byuKD80NH5NEwGXpfkXnOonTTDvwhoge2DBTl597LFJsRUvk1S8ybhM/'/></a></p>
<div id='fb-root'/>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '149973631711831', status: true, cookie: true,
xfbml: true});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>
<fb:comments/>
</b:if>

4. Now you can click SAVE TEMPLATE

Wednesday, April 27, 2011

How to Add 4 in 1 Follow Widget

Hello, bloggers! Previously, I've posted about Add Flapper Social Bookmarking Widget. Now, I will post about How to Add 4 in 1 Follow Widget. Maybe it sounds like Add Mini 5 in1 Share Widget. Hoax...forget it. OK, back to this widget, this widget has some features such as 4 social icons (Facebook, Twitter, mail letter, and RSS feed), jQuery tooltip, and fresh design. Shortly, if you want to try 4 in 1 Follow Widget, just follow the steps below. Need a DEMO?

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </body>

4. Click SAVE TEMPLATE
5. Go to Design --> Page Elements --> Add Gadget
6. Choose "HTML/Java Script"
7. Add the code below, and customize first

8. Now click SAVE

Tuesday, April 26, 2011

Change Blog Background Become Fire

Hi, friends! Now, I wil post about Change Blog Background Become Fire. This trick is proper for blog which has topic about automotive. But if your blog has black background, that's also proper for fire background. OK shortly, if you want to know how to Change Blog Background Become Fire, just follow the steps below.

1. Log in to your blogger account
2. Go to Design Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

5. Now, you can click SAVE

Monday, April 25, 2011

How to Change Hand Cursor on the Link

Now, Full Blog Tricks will discuss about How to Change Hand Cursor on the Link. Maybe this trick is the "evolution" of How To Change Cursor In Blog. As we know, on the original blogger template, if we put our cursor on a link, the cursor will be hand. So, based on that case, we will learn how to change the hand cursor. Shortly, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

=> You can change the cursor URL
5. And click SAVE

Sunday, April 24, 2011

How to Spy Another Blog

Did you ever think, How many visitors are my friend's blog a day? Whereas, your friend's blog isn't using visitor counter such as hitstats, geocounter, etc. But, now you can spy your friend's blog by using CheckSiteTraffic.com. This website give you chance to spy your friend's blogs as many you want. Still in this website, you can spy some informations about a blog such as:

Website Title
Website Description
Categories
Traffic Data
Alexa Rank Trend
Google Trend
Server Information
Server Physical Location
Contact Information
Whois Domain Information

So many right? Now, if you want to know How to Spy Another Blog, just follow the steps below

1. Go to CheckSiteTraffic.com
2. Enter a blog address, and click Spy!

3. Then you can see the blog informations

OK, that's all friends... Hopefully useful....

Saturday, April 23, 2011

How to Add jQuery for Blogger Navbar

Hi, bloggers! Previously, I've posted about How to Remove Blogger Navbar. Now, I will posted about How to Add jQuery for Blogger Navbar. By adding some jQuery for your Blogger Navbar, your Blogger Navbar will look attractive. The navbar will be transparent, but if you put your cursor on it, the navbar will be return. For the details, you can see the DEMO. Now, if you want to try How to Add jQuery for Blogger Navbar, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above </head>

4. And click SAVE TEMPLATE

So easy right?

Add Border at the Bottom of Widgets

Previously, I've posted about How to Add Icon Beside Labels. And now I will post about Add Border at the Bottom of Widgets. Actually, the function of this trick just add a border at the bottom of your widgets. So, your blog will look attractive. Shortly, if you want to Add Border at the Bottom of Widgets, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Find code like this (in some templates maybe not same)

.sidebar ul li {

5. Copy the code below, and add under the code above

border-bottom:1px dotted #000000;

6. Then click SAVE TEMPLATE

Thursday, April 21, 2011

How to Show Widget Only in Post

Previously, I've posted about How To Show Widget Only In Next Page (Not in "Home"). But in this trick, you will learn How to Show Widget Only in Post. It's mean, you can add some widgets around blog post, but this widget can't see in home page. For example, you can see my "Alexa Review Widget" (I hope you write a review for this blog... ^_^), this widget can't be seen by us on homepage, but if you clicked one of the post, you can see the widget. What's the advantages? The advantages is so blog homepage isn't too heavy. Because homepage plays an important role, if a visitor feel this blog is too heavy, maybe he will not return again. Shortly, if you want to try How to Show Widget Only in Post, just follow the steps below. (We will use "Alexa Review Widget" as an example")

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Add Alexa Review Code under <data:post.body/> (If you're using read more, there are two <data:post.body/>, choose the second)
5. But, before you click SAVE TEMPLATE, you have to add some code, so the alexa code will be like this

<b:if cond='data:blog.pageType == "item"'>
<a href='http://www.alexa.com/siteinfo/http://full-tricks.blogspot.com/?p=rwidget#reviews'><img alt='Review http://full-tricks.blogspot.com/ on alexa.com' src='http://www.alexa.com/images/widgets/red/dark/v2-234x60.png'/></a>
</b:if>

=> The red code are the special code
6. And now you can click SAVE TEMPLATE

How to Add Cool Navbar for Blogger

Hello, friends! Previously, I've posted about How to Remove Blogger Navbar. Now, I will post about How to Add Cool Navbar for Blogger. This navbar is different with Blogger Navbar. In this trick, you can fill the navbar with your own text or link. This link can be contain "RSS Feed Subscription" link, or notice about blog maintenance, etc. Shortly, if you want to try How to Add Cool Navbar for Blogger, just follow the steps below. Before you try this trick, you can see the demo first.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expang Widget Templates" box
4. Copy the code below, and paste above ]]></b:skin>

#mta_bar { background: #FFFFE1; border-bottom: 1px solid #808080; margin: 0 0 3px 0; padding: 4px 0; z-index: 100; top: 0; left: 0; width: 100%; overflow: auto; position: fixed; }
* html #mta_bar{ /*IE6 hack*/
position: absolute; width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); }
#mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;}
#mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;}
#mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;}
#mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;}
#left_bar a { text-decoration: none; color: #0000FF; }
#left_bar a:hover { text-decoration: underline; color: #0000FF; }

5. Copy the code below, and paste above </head>

6. Still in this page, copy the code below, and paste under <body>

=> The blue text is the navbar content, you can change it
7. Just click SAVE TEMPLATE

Monday, April 18, 2011

Add Simple Back to Top Button

Previously, I've posted about Double Click to Back to Top, now I will post about Add Simple Back to Top Button. Actually, the function is same. But, in this trick, we can add a button or the picture. So, if we want to back to the top, we just click the button at the bottom right. Shortly, if you want to try Add Simple Back to Top Button, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script"
4. Add the code below

Replace http://1.bp.blogspot.com/_u4gySN2ZgqE/SukYqBahTkI/AAAAAAAABCc/QVxl3cG5_90
/s400/back-to-top.gif with your button or picture URL

5. Just click SAVE

Saturday, April 16, 2011

How to Add Scroll in Widget

Hi, bloggers! Now, I will share a new trick for you. That's How to Add Scroll in Widget. This trick is request from my friend.

"Anyone know, how to create a scroll box in link exchange widget. Please help...."

So, based on this request, I want to help him. Maybe, it will useful for you someday. In this post, I will take my Blogroll widget as an example. You can look it. OK, now if you want to try this trick, just follow the steps below.

*Firstly, you have to create a blogroll widget. How?
1. Go to Design --> Page Elements --> Add Gadget
2. Choose "Blog List"
3. Add some blog url in "Add to List"
4. Click SAVE [don't give the widget title first]

*Then, we will add the scroll
1. Go to Design --> Edit HTML
2. Check in the "Expand Widget Templates" box
3. Then, search with Ctrl + F

BlogList1

4. Then, look around at the bottom, there is

5. Add this code, exact under the code above

6. Then, scroll down untill you found

<b:include name='quickedit'/>
   </div>
   </div>
  </b:includable>

7. Add </div> under <b:include name='quickedit'/>, so the code will be like this

<b:include name='quickedit'/>
   </div>
   </div>
</div>
  </b:includable>

8. Then, click SAVE TEMPLATE

Add Flapper Social Bookmarking Widget

Hi, friends...! Previously, I've posted some Social Bookmarking button widgets, that are

So now I will post about add flapper social bookmarking widget. Actually the function is same. But, the difference is in the picture (button). If we put our cursor on one of the social bookmarking button, the button will flap. This Social Bookmarking widget contains Delicious, Digg, Stumbleupon, Technorati, Twitter, Facebook, Reddit, Yahoo!, and RSS. Now, if you want to add this social bookmarking widget, just follow the steps below. You can see the preview first.

Share

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check "Expand Widget Templates" box
4. Copy the code below, and paste above ]]></b:skin>

.mbt-bookmarking a {
display:block;
height:42px;
width:48px;
padding:0 9px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG2nIw846cQZ5GoIFB6zSXuZMGdLJ_hR0QNFHKjooKO51a8SqySB37NQqWRLzw9pQx_nKWqo7sClyC_l53GFaH5PP4J69Y_5nL9GzSzkWADJR65DATzO5nkM09r7wroyVE-L22nZg5sRL2/s1600/flapper.jpg) no-repeat;
}
.mbt-bookmarking a.delicious {
background-position:0px 0px;
}
.mbt-bookmarking a.delicious:hover {
background-position:0px -43px;
}
.mbt-bookmarking a.digg {
background-position:0px -86px;
}
.mbt-bookmarking a.digg:hover {
background-position:0px -129px;
}
.mbt-bookmarking a.stumbleupon {
background-position:0px -344px;
}
.mbt-bookmarking a.stumbleupon:hover {
background-position:0px -387px;
}
.mbt-bookmarking a.technorati {
background-position:0px -430px;
}
.mbt-bookmarking a.technorati:hover {
background-position:0px -473px;
}
.mbt-bookmarking a.twitter {
background-position:0px -516px;
}
.mbt-bookmarking a.twitter:hover {
background-position:0px -559px;
}
.mbt-bookmarking a.facebook {
background-position:0px -172px;
}
.mbt-bookmarking a.facebook:hover {
background-position:0px -215px;
}
.mbt-bookmarking a.reddit {
background-position:0px -258px;
}
.mbt-bookmarking a.reddit:hover {
background-position:0px -301px;
}
.mbt-bookmarking a.yahoo {
background-position:0px -602px;
}
.mbt-bookmarking a.yahoo:hover {
background-position:0px -645px;
}
.mbt-bookmarking a.rss {
background-position:0px -774px;
}
.mbt-bookmarking a.rss:hover {
background-position:0px -817px;
}

5. Then, copy the code below, and paste under <p><data:post.body/></p>

<div class='mbt-bookmarking'>
<b:if cond='data:blog.pageType == "item"'>
<br/><font color='#289728' face='ms sans serif' size='3'><b>Share</b></font>
<br/><br/>

<a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Add this to Delicious :>'/>


<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='external nofollow' target='_blank' title='Digg this :>'/>


<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Stumble this :>'/>


<a class='technorati' expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank' title='Fave this :>'/>


<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Tweet this :>'/>


<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank' title='Share this on Facebook :>'/>


<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark and tag this :>'/>


<a class='yahoo' expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank' title='Bookmark this :>'/>

<a class='rss' expr:href='data:blog.homepageUrl + "feeds/posts/default"'/>
</b:if></div>

6. Just click SAVE TEMPLATE

How to Add Games In Blog

Have you play a game? Sure, you have play games. But, have you play a game in blog? Maybe rarely even never. But in this trick, you can add some games in your blog. The function of this trick is to relaxing our blog visitors. But, maybe this game can decrease your blog speed. Why? Because this game is using flash. Now, if you want to know how to add games in blog, just follow the steps below.

1. Go to Khemer
2. Choose your game that will add to your blog, click on it
3. Then look on the left, there are "Interactions" widget
4. Choose "Embed Code:", then copy it
5. Log in to your blogger account
6. Go to Design --> Page Elements --> Add Gadget
7. Choose "HTML/Java Script"
8. Paste the code
9. Just click SAVE

You can put the game in other place, such as in a post

Friday, April 15, 2011

How to Make Post with Newspaper Style

Previously I've posted about How To Make Headline News In Blog. So now I will post about How to Make Post with Newspaper Style. Have you read a newspaper? I think, you have. So in this trick, you can make your blog become newspaper style. This trick is appropriate for a blog that has magazine style. So, the "magazine" felt more. Let me see the preview!

Previously I've posted about How To Make Headline News In Blog. So now I will post about How to Make Post with Newspaper Style. Have you read a newspaper?

I think, you have. So in this trick, you can make your blog become newspaper style. This trick is appropriate for a blog that has magazine style. So, the "magazine" felt more. Let me see the preview!

Now, if you want to know the steps, just follow the steps below.

1. Log in to your blogger account
2. Go to Posting --> New post
3. Click on the "Edit HTML"
4. Add the code below

<table cellpadding="10" cellspacing="10"><tbody>
<tr><td align="justify" valign="top" width="320">Previously I've posted about How To Make Headline News In Blog. So now I will post about How to Make Post with Newspaper Style. Have you read a newspaper?</td><td align="justify" valign="top" width="300">I think, you have. So in this trick, you can make your blog become newspaper style. This trick is appropriate for a blog that has magazine style. So, the "magazine" felt more. Let me see the preview!</td></tr>
</tbody></table>

Customize
You can chage the width of this newspaper in width="320"
The red text is the left side
The blue text is the right side

5. If you've finished the post, just click PUBLISH POST

Add Facebook Recommendations Box

Do you know what's facebook recommendations box? Facebook recommendations box is a widget to show your blog posts randomly. So, this widget can be raise your blog pageviews, because this widget can "stimulate" visitors to click and read the posts. Now, if you want to add facebook recommendations box into your blog, just follow the steps below. See the preview first!

1. Go to Facebook Developers
2. Settings the Recommendations box, click "Get Code"
3. Choose "iframe"
4. Add the code into Design --> Page Elements or other place in your blog
5. Just click SAVE

Thursday, April 14, 2011

Add Facebook Fan Page In Blog

Hi, blogers! Do you have a facebook account? If you have, you can add facebook fan page in blog. One of the function of facebook fan page is to promote your blog in Facebook. As we know, Facebook is the greatest Social Bookmarking website in this world. So, if you promote your blog in facebook, I'm sure you can get many visitors per day. Shortly, if you want to add facebook fan page in your blog, just follow the steps below. See, the example first!

1. Sure, create your facebook fan page
2. Then, go to Facebook Developers
3. Settings the facebook like box, click "Get Code"
4. Choose "iframe"
5. Add the code in your blog
6. Click SAVE

Oh ya, just remind, previously I've posted about How to Add Facebook Like Button

Hopefully useful...

Generate Sitemap for Blogger

Sitemap is a way for bloggers and webmasters to inform Search Engine about some specific pages that can be crawl by Search Engine. Usually, sitemap is ended with .xml. Actually, Blogger has provided a special sitemap. Blogger sitemap is atom.xml. But, many bloggers don't know if their blog has a sitemap file. So, I will share you about generate sitemap for blogger. But in this trick, I'm not only sharing about generate sitemap for blogger, but I will share to you how to submit blogger sitemap to Search Engine (Google, Bing, Yahoo!) Just follow the steps below.

1. Go to Blogger Sitemap Generator
2. Enter your blog URL, and click "Create Blogger Sitemap"

3. Then submit your blog sitemap by clicking each search engine link
4. Finish

Easy right?

Tuesday, April 12, 2011

Top 3 Paid to Affiliate Websites

As we know, now blog not only for online diary. But, blog can be place to make money online. There are many kinds of online bussiness, for example Pay per Click (PPC), Paid to Review (PTR), Paid to Affiliate (PTA), and so on. As the name, in PTA you can earn much money by become an affiliate (member of an affiliate program) and "sell" a product or other services to your blog visitors. Then if your blog visitors make a purchase, you will get a certain amount of commission. The commission is 4% to 15% from the purchase. So, if your visitor buy a MP3 for $500, you can earn up to $75 from one purchase! So, it's easy right? If you want know the websites that provide affliate program, I wil give you the list of Top 3 Paid to Affiliate Websites.

Amazon Associates
Amazon give you chance for you to be an affiliate and promote some products and services in Amazon.com in your blog. The products of Amazone are books, e-books, games, MP3, etc.

ClickBank
ClickBank is the biggest "market" of online digital products and you can promote thousands of popular digital products everyday. If you become an affiliate in ClicBank, you can connect your blog topics with ClickBank products, and you will get many advantages.

Commission Junction
Commission Junction give you chance to maximize your blog to be an affiliate and "sell" Commission Junction products on your blog. With diverse product choices, you can choose your own products that you want to promote on your blog.

In affiliate program, you should have a skill to convince your visitors to buy the product from you. So, you should talk smartly with your blog visitors.

Monday, April 11, 2011

Setting Homepage to Blogger Dynamic Views

Hello, friends! Now, I will post about Setting Homepage to Blogger Dynamic Views. Maybe, you still don't know what is the purpose of blogger dynamic views. Ya, blogger dynamic views is an excess of Blogger. With dynamic views, you can set your blog into 5 styles, that's

Sure, you want to set your blog homepage display to be like that right? Unfortunately, the style cannot set at our blog homepage. But, now I will teach you the HACKS! If your blog has not been enabled dynamic views, just follow the steps below

1. Log in to your blogger account
2. Go to Settings --> Formatting
3. Find "Enable Dynamic Views", and check the box
4. Just click SAVE SETTINGS

Then, how to settig the dynamic views to homepage? Just follow the steps below again!

1. Go to Design --> Edit HTML
2. Copy the code below, and paste above </head>

Customize:
The red text can be replace with your blog address
The blue text can be replace with one of the 5 styles above
3. Just click SAVE TEMPLATE

Saturday, April 9, 2011

Boost Blog Speed with CSS Compressor

Maybe, blog speed is one of important thing on blog performance. Because if our blog speed too slow, our visitors will be bored. So, we have to use little CSS. But, if our blog requires us to use many CSS caused by the visitors want to our blog looks cool? So, we must use many CSS that will effect to our blog to be heavy. The solution is you must use CSS Compressor. The function of CSS Compressor is to compress our blog CSS, so the CSS will ease. Then, how to boost blog speed with CSS compressor?

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Highlight all css code start from <b:skin><![CDATA[/* between ]]></b:skin>
4. Then, add it into CSS Compressor

You can setting the Compression Mode and Compression Options

5. Click Compress
6. Select all the new CSS (compressed), and replace with old CSS (before compressed)
7. Just click SAVE TEMPLATE

What is Google URL Shortener?

Maybe many of you don't know, what is Google URL Shortener? As its name, Google URL Shortener is a website to shorter our URL. Actually, there are many websites that provide URL shortener, for example:

adf.ly
tinyurl.com
bit.ly
ls.gd
j.mp

The websites above are popular websites (URL Shortener), but if you know more, that's better. Then how to use Google URL Shortener?

1. Go to goo.gl
2. Enter your blog or post url, and click "Shorten" like this

3. Then, you ca take the new URL, and you can start to share with this URL

Hopefully useful....

Friday, April 8, 2011

Add Google Page Navigation for Blogger

Previously, I've posted about How to Add Numbered Page Navigation in Blog. Now, I will post the modification. This trick inspired from Google. So, the name of this page navaigation is Google Page Navigation for Blogger. Now, if you want to add this page navigation, just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Copy the code below, and paste above ]]></b:skin>

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

4. Then, copy the code below, and paste above </body>

5. Just click SAVE TEMPLATE

Thursday, April 7, 2011

How to Remove Locked Widgets

Hello, friends! Now I will posted about how to remove locked widgets. Usually, in some templates, we found a widget that cannot delete. The widgets can be "Attribution", or others. See the example below

What's the weird? There are no REMOVE button to delete the widget. So, how to remove locked widgets? Just follow the steps below.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Search the widget title, for example the title is "Attribution". So, you have to search with keyword "Attribution"
4. Then, you will found this code

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

5. Just replace locked='true' with locked='false'
6. Click Save Template
7. Return to Design --> Page Elements, now you can delete the widget. Easy right?

Saturday, April 2, 2011

Add Multi Level Dropdown Menu

Previously, I've posted about How to add horizontal menu for blogger. Now, I will posted about add multi level dropdown menu. Maybe, you never hear this trick. Actually, this trick just the extension of normal horizontal menu. So, in this menu you can add more links. OK, if you want to add into your blog, just follow the steps below.

View the Demo

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Then, copy the code below, and paste above </head>

4. After that copy the code below, and paste above ]]></b:skin>

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

5. And copy the code below, and paste above <div id='header-wrapper'>

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://full-tricks.blogspot.com/">Home</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
<li><a href="#">Sub Item 3.1.1.3</a></li>
<li><a href="#">Sub Item 3.1.1.4</a></li>
<li><a href="#">Sub Item 3.1.1.5</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://full-tricks.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

Customize first!

6. Just click Save Template

Friday, April 1, 2011

Show Only Post Title in Label Page

Now, I will post about How to Show Only Post Title In Labels. The function of this hack is to save many space in the label page (a page after you clicked one of the label) and to boost the blog speed. Why? Because, usually if we want to find an article, and we didn't find it in home page, we will search in label. But, if we click one of the label, we will be shown all of the article in that label. So, we have to wait untill the loading is complete. Long, right? So, the solution is, you have to try this hack, just follow the steps below.

View the Demo

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Then find <b:include data='post' name='post'/>

5. Replace the code above, with the code below.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1.5px solid #000;border-bottom:1.5px solid #000;margin-bottom:2px;background:#E6E4E4;color:#000000;'>
<img alt='>>>' border='0' src='https://lh5.googleusercontent.com/-HP5XyclRQic/TXMMAKmlg5I/AAAAAAAAAQk/wrCGFu9jzmg/s1600/sidebar-icon.png'/>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Customize:
The blue code are the background color, you can edit or remove it
The red code is the icon address

6. Just click Save Template

Change the Background Color with Favourite of Visitor!

Hi, friends! After a long time I didn't write a blogger tricks, now I will share to you about change the background color with favourite visitor! Maybe, when you were surfing in a blog or website, you annoyed by the background color of the blog. Maybe, caused by the color is too bright or too dark. So, the solution is, you should add background color changer. How? Just follow the steps below!

View the Demo

1. Log in to your blogger account
2. Go to Design --> Page Elements --> Add Gadget
3. Choose "HTML/Java Script
4. Add the code below

<div class="widget-content">
<center><b>Choose your favourite color</b></center>
<br/>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" width="100%" height="20">
<tbody><tr>
<td onclick="bgChange('#8B008B')" bgcolor="#8B008B">
</td>
<td onclick="bgChange('#9400D3')" bgcolor="#9400D3">
</td>
<td onclick="bgChange('#008080')" bgcolor="#008080">
</td>
<td onclick="bgChange('#808080')" bgcolor="#808080">
</td>
<td onclick="bgChange('#CD853F')" bgcolor="#CD853F">
</td>
<td onclick="bgChange('#2F4F4F')" bgcolor="#2F4F4F">
</td>
<td onclick="bgChange('#DC143C')" bgcolor="#DC143C">
</td>
<td onclick="bgChange('#4B0082')" bgcolor="#4B0082">
</td>
<td onclick="bgChange('#A52A2A')" bgcolor="#A52A2A">
</td>
</tr></tbody></table>
</div>

Customize:
Choose your favourite color is the sentence that will appear
The color codes are the colors that will appear

5. Then? Just click Save