Web Blog Tricks And Tips: Hacks

Showing posts with label Hacks. Show all posts

Saturday, June 11, 2011

Easier and Faster to Edit Blogger Favicon

Hi, friends! Did you know? Blogger just release a new feature. What is that? Favicon Editor! Yups.. the function is for Easier and Faster to Edit Blogger Favicon. I think it's very nice feature. We just need little steps to edit our blog favicon. But, where is Favicon Editor place? You can find on Design --> Page Elements.

Then, how to add the favicon? You just click "Edit" on Favicon menu. The, you can upload you favicon file (a file with .ico). Just share some tips, you can get a file with .ico in http://www.favicongenerator.com/. Firstly, upload you picture, and FaviconGenerator will be generate into .ico. So, we just waiting what is Blogger next update...

Thursday, May 5, 2011

Add Photo for "Anonymous" Comments in Blogger

Hi guys! How are you? Now, we will share about How to Add Photo for "Anonymous" Comments in Blogger. Usually, someone commented your blog, but he choose "Anonymous" in comment box. The comment is shown, but the Anonymous picture just a simple photo. No problem. You can change the photo of Anonymous profile. How? Just follow the steps below.

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

.avatar-image-container { background: url
("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisXGSuSnuo_kobcRuJ1L0DxtrQc7e7S1EQGROePDwlxMOPtzGv0hu_29KVZ38Tk0Z6KdYYsTDijrgbaqfkwUR6IX52_Yj-M4TMiN3qi2hh0fVf-9J_0uwHeUV53gTgVVszcu2qi24W74E/s1600/avatar.png")
no-repeat scroll center center;}

=> the red URL is the photo, you can change it
4. Then? Just click SAVE TEMPLATE

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

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

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

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

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

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?

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

Thursday, March 24, 2011

How to Add "Reply" in Blogger Comment Box

Add "Reply" in blogger comment box function to facilitate the reply for every comment on our blog. So, between the visitors and the author can discuss each other. Based on the title, this trick only can do in blogger comment box. So, if you've modified blogger comment box, you, can't do this trick. Well, to shorten the time, just follow how to add "Reply" in blogger comment box.

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check in the "Expand Widget Templates" box
4. Find this code

But, if you didn't find that code, try to find this code

<b:include data='comment' name='commentDeleteIcon'/>

5. Then, copy the code below, and paste under one of the code above.

Customize:
Your Blog ID can replace with your blog ID, the location of your ID is in the address bar
http://4.bp.blogspot.com/_mWrR0gomZ0/TIIfWolwWgI/AAAAAAAAARE/nwiHJLeqSVw/
s1600/reply.gif is the "Reply" button, you can change with your own.
6. Finish! Just click Save Template

Sunday, March 20, 2011

How to Remove Quick Edit Icon

Quick Edit in Blogger is symbolized by plier and screwdriver. Maybe for some bloggers, Quick Edit are common. But, some also consider this a disturbing thing. Actually, Quick Edit will not appear, if we are not currently logged on blogger account. By the way, Can we remove Quick Edit Icon? Sure, It's easy. 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>

.quickedit{
display:none;
}

4. Just click Save Template , Easy right?

How to Change Blog Title with Post Title

Hello, friends! Do you ever think about how to change blog title with post title? If you have, you're lucky today. Because we will discuss about How to Change Blog Title with Post Title. Many bloggers said, it can raise our blog SEO. For the details, you can read the explanation below.

Now you can check this, for example here is a blog with Blog Title as "Comutricks" and a blog Post Title "How to Boost Download Speed"
By Default, the Post title appears like this:

Comutricks : How to Boost Download Speed

But, after you followed this trick, the title will look like this

How to Boost Download Speed | Comutricks

The second title looks better as the subject matter of the blog post. This is also good for search engine optimization. So, if you want to know how to change blog title with post title, just follow the steps below.

1. Log in to your blogger acccount
2. Go to Design --> Edit HTML
3. Find this code

What? If you didn't find that code, try to find this code

4. Then, replace one of the code above, with code below.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

5. Finish! Just click Save Template

Saturday, March 19, 2011

How to Add Labels with Thumbnail

Finally, I've found a great trick for share to you. That's How to Add Labels with Thumbnail. With this trick, you can display some your blog posts based by the label on the homepage. So, your visitors will see many posts that neatly aranged in one page. Let's see the example of labels with thumbnail.

Now, if you want to know how to add labels with thumbnail, just follow the steps below.

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

/*** Featured Categories ***/
   img.label_thumb{
   float:left;
padding:5px;
border:1px solid #8f8f8f;
background:#D2D0D0;
margin-right:10px;
height:55px;
width:55px;
}
   img.label_thumb:hover{
background:#f7f6f6;
}
   .label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
adding: 0;
}
   ul.label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:10px;
}
   .label_with_thumbs a {}
   .label_with_thumbs strong {}

5. After that, copy the code below and paste above </head>

6. OK, just click Save Template

Friday, March 11, 2011

How to Make Three Column Footer In Blog

Maybe, you ever see three colum footer in blog. With this style, you can add more widgets. Usually this column filled with followers widget (Google Friend Connect), recent posts, recent comments, or Ads. But you can fill with other widgets. Before you make three column footer in blog, I recommend you to backup your template first, because we will make some changes. Now, if you want to know how to make three column footer in blog, 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>

/* ----- LOWER SECTION ----- */
#lower {
   margin:auto;
   padding: 0px 0px 10px 0px;
   width: 100%;
   background:#333434;
}
#lower-wrapper {
   margin:auto;
   padding: 20px 0px 20px 0px;
   width: 960px;
}
#lowerbar-wrapper {
   border:1px solid #DEDEDE;
   background:#fff;
   float: left;
   margin: 0px 5px auto;
   padding-bottom: 20px;
   width: 32%;
   text-align: justify;
   font-size:100%;
   line-height: 1.6em;
   word-wrap: break-word;
   overflow: hidden;
}
   .lowerbar {margin: 0; padding: 0;}
   .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
   margin: 0px 0px 10px 0px;
   padding: 3px 0px 3px 0px;
   text-align: left;
   color:#0084ce;
   text-transform:uppercase;
   font: bold 14px Arial, Tahoma, Verdana;
   border-bottom:3px solid #0084ce;
}
.lowerbar ul {
   margin: 0px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   list-style-type: none;
}
.lowerbar li {
   margin: 0px 0px 2px 0px;
   padding: 0px 0px 1px 0px;
   border-bottom: 1px dotted #ccc;
}

=> Change the background color of this widget
=> Adjust this width value in accordance with the width of your blog.
=> That are the background colour and width of the three columns where the widgets are added.
=> Change the color of the title
=> Change the font size and family
=> Change the thickness, style and colour of the border that appears at the bottom of the title
=> Change the size, style and colour of the border that appears below links.
4. Then copy the code below, and paste above </body>

5. Save your template now. Then check in the Design --> Page Elements

Thursday, March 10, 2011

How to Add Preloader Status in Blog

Previously, I've posted about How To Add Page Loading Status Image In Blog. But, many people said "It doesn't work." or "The image cannot stop". So, I will post the almost the same trick, that's How to Add Preloader Status in Blog. It's very attractive I think. Why? Because, when you open the blog, you can find a loading status with the animation. Still curious? View the demo HERE. And, if you want to know How to Add Preloader Status in Blog, you can 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. Still on the same page, find </body> and add the code below above </body>

5. And the last, find ]]></b:skin>, and copy the code below, then paste above ]]></b:skin>

.QOverlay {
    background-color: #000000;
    z-index: 9999;
}

.QLoader {
    background-color: #CCCCCC;
    height: 1px;
}

.QAmt {
    color:#FF530D;
    font-size:50px;
    font-weight:bold;
    line-height:50px;
    height:50px;
    width:100px;
    margin:-60px 0 0 -50px;
}

Customize :
=> #000000 is the background color, you can change the code in here
=> #CCCCCC is the loading bar color
=> #FF530D is the loading percentage (number) font color
6. Now, you can click Save Template