Thursday, February 17, 2011

Hide or Remove Blog NavBar From Blogspot Blogger: How to Hide or Remove Blogger NavBar?

NavBar means Navigation Bar or Banner which is appeared on top of the blog. logger NavBar contains Search Blog textbox, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create a blog or sign in to Blogger. Most of the cases, most bloggers think it's useless and they think to hide that. You can hide and remove the NavBar with a little CSS hack which will not either interfering or messing up with the custom layouts. This hack is very easy to implement.

Steps to hide or remove blogspot NavBar:

Follow the following steps to hide or remove your blogspot's NavBar. This is very easy and you don't need much technical knowledge to do this. Just follow the following steps:

Step 1: Login and accessing blogspot template code

First, log in your blogspot account by using your user name and password. After this you will be redirected to your blogspot Dashboard page. Select the blog which template you want to modify or customize. You will find a link named as Layout. Click on that link.
 
 
You soon redirected to your desired blog's main Layout panel. Now, click on the Edit HTML tab link and you will find the original template code page. This is the desired page from where you have to do all customization. At last click on the check box Expand Widget Templates which will enable all of your blog's html and CSS code.


Step 2: Removing or Hiding NavBar

In your template code, search for the following line of code
 
1   ]]></b:skin>

Just add the following lines of code just before that code:
 
#navbar {
    display: none;
}

That's enough for hiding or disabling NavBar.

Step 3: Saving your template

After finishing the above modification or customization of your blog's template, it's time to save your template code.
It's good to ensure your code's correctness by using PREVIEW button. Just click on "PREVIEW"  button and see whether there is any mistake. If there is any mistake it will warn you. Otherwise you will see the effect of your customization of your blog template. If everything is ok, simply, click on the SAVE TEMPLATE button.  That's all. Your template customization is finished.

Wednesday, February 16, 2011

How to add or Change Favicon in Blogger Blog?

Favicon is a small icon shown next to site URL in the address bar. In Blogger, by default orange colored blogger icon is shown as favicon. You can make your blog stand out by using your own customized icon. Before you implement the code, you can grab or make your own favicons: Make FaviconsBrowse Favicons



 To get started, first you need to backup your Blogger template: Click on‘Layout’ > ‘Edit HTML’ and then click on ‘download full template’ to save it on your computer. Now perform following steps to a change favicon in your Blogger blog: 

1. Click on ‘Layout’ > ‘Edit HTML’
2. Then add following code after<head>

   <link href=’http://www.URL.com/favicon.ico’ rel=’shortcut icon’/>

    <link href=’http://www.URL.com/favicon.ico’ rel=’icon’/>

Above http://www.URL.com is the web address or location where your favicon is stored (hosted). You can upload favicon to Googlepages (now Closed) or on any free image hosting websites that support favicons upload.

‘favicon.ico’ is the name of your favicon file. You can use any name like myfavicon.ico and so on. After adding above code, update the http://www.URL.com and favicon.ico in the code.
Then click on save template button. Open your blog and your new favicon should be visible in the address bar!



Tuesday, February 15, 2011

Make a D'tree Menu at Blog

Did you ever seen Window Explorer? At Window Explorer have a beauty menu likely my left banner. Did you know, you can make that menu at your blog. For example, please checkout my example blog here!, this menu named D'tree menu.

Feel interest to make this menu at your blog? here is the steps to make a d'tree menu : 


#Step 1
  1. Login to blogger with yuor ID.
  2. Click layout.
  3. Click Edit HTML tab.
  4. Click the Download full template link. Save your template (very important)
  5. Go to your template code, and find the code .
  6. Copy and then paste following code above of :
  <link rel="StyleSheet" href="http://ahom24.googlepages.com/dtree.css" type="text/css" />  <script type="text/javascript" src="http://ahom24.googlepages.com/dtree.js"></script>


     7. Click Save Template button.

     8. Step 31 is done.




#Step 2

  1. Click Page Elements.
  2. Click Add a Page Element to make a element.
  3. Choose for HTML/Javascript.
  4. Copy and paste the following code at the element :


  <div class="dtree">  <p><a href="javascript: d.openAll();"><img src="http://amen24.googlepages.com/plus.gif"><b>Open all</b></a> | <a href="javascript: d.closeAll();"><img src="http://amen24.googlepages.com/minus.gif"><b>Close all</b></a></p>  <script type="text/javascript">
<!--

d = new dTree('d');

d.add(0,-1,'Home','http://kolom-tutorial.blogspot.com');


d.add(1,0,'Free template & navigation')

d.add(3,1,'free template','');
d.add(10,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-xml.html');
d.add(20,3,'Minima 3 ckolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column-xml.html');
d.add(30,3,'1st template unik','http://template-unik.blogspot.com/2007/07/1st-template-unik.html');
d.add(40,3,'Denim 3 kolom','http://template-unik.blogspot.com/2007/07/denim-3-column-xml.html');
d.add(50,3,'Blue lover 3 kolom','http://template-unik.blogspot.com/2007/08/blue-lover-template-xml.html');
d.add(60,3,'Gray lover 3 kolom','http://template-unik.blogspot.com/2007/08/gray-lover-template.html');
d.add(70,3,'UniQue template R 1.1','http://template-unik.blogspot.com/2007/09/unique-template-r-11.html');
d.add(80,3,'UniQue template R 1.2','http://template-unik.blogspot.com/2007/09/unique-template-r-12_16.html');
d.add(90,3,'UniQue template R 1.3','http://template-unik.blogspot.com/2007/09/unique-template-r-13.html');
d.add(100,3,'template klasik');
d.add(110,3,'Minima 3 kolom','http://template-unik.blogspot.com/2007/07/white-minima-3-column.html');
d.add(120,3,'Scribe 3 kolom','http://template-unik.blogspot.com/2007/07/scribe-3-column-classic.html');

d.add(5,1,'Free css menu navigation');
d.add(10,5,'Horizontal blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(20,5,'Horizontal blue menu (2)','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu-2.html');
d.add(30,5,'Horizontal double line menu','http://css-lybrary.blogspot.com/2007/09/horizontal-double-line-menu.html');
d.add(40,5,'Horizontal flip menu','http://css-lybrary.blogspot.com/2007/09/horizontal-flip-menu.html');
d.add(50,5,'Vertical green menu','http://css-lybrary.blogspot.com/2007/09/vertical-green-menu.html');
d.add(60,5,'Vertical transparent','http://css-lybrary.blogspot.com/2007/09/vertical-transparent-menu.html');
d.add(70,5,'Vertical blue menu','http://css-lybrary.blogspot.com/2007/09/horizontal-blue-menu.html');
d.add(80,5,'Vertical Yellow menu','http://css-lybrary.blogspot.com/2007/09/yellow-vertical-menu.html');
d.add(90,5,'Vertical red menu','http://css-lybrary.blogspot.com/2007/09/red-vertical-menu.html');

d.add(2,0,'Blogroll','','','','http://amen24.googlepages.com/globe.gif','http://amen24.googlepages.com/globe.gif');
d.add(10,2,'UniQue template','http://template-unik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Css Library','http://css-library.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(20,2,'Terune sasaQ','http://terune-sasaq.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(30,2,'Bang dhika','http://bangdhika.blogspot.com/','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(40,2,'Rubrik Elektronik','http://rubrik-elektronik.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(50,2,'Tukeran link','http://tukeran-link.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');
d.add(60,2,'Pasar Info','http://pasar-info.blogspot.com','','','http://24rohman.googlepages.com/icon_user.gif');

d.add(4,0,'Software super murah disini!','http://www.obralplus.com/?id=rohman','menjual berbagai software serta ebook dengan harga super murah, klik di sini!','','http://amen24.googlepages.com/action_save.gif');
d.add(6,0,'Belajar website di sini!','http://www.resepbisnis.com/?id=rohman','belajar membuat website itu sangatlah mudah, temukan caranya.klik di sini!','','http://amen24.googlepages.com/cd.gif');
d.add(7,0,'My friendster!','http://amn_tea.blogs.friendster.com/my_blog/','my friendster','','http://amen24.googlepages.com/friendsterku.gif');
d.add(8,0,'Recycle Bin','http://kolom-tutorial.blogspot.com/index.html','Recycle bin','','http://amen24.googlepages.com/trash.gif');


document.write(d);

//-->
</script>  </div>


  • Click SAVE CHANGES button.





  • Done. Now you have a d'tree menu at your blog.






  • How to center post title

    If you want to center (or align left or align right) the post title, sign into Dashboard > DESIGN > EDIT HTML to open the template editor and search for .post h3 (use ctrl+F) or code that may look something like those below (code below for Minima template, yours may be slightly different):

    Reminder: Always backup template and backup gadgets before editing the template.

    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }

    The just add this line text-align:center;
    .post h3 {
    text-align:center;
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;


    preview and if OK, save template.

    Update: Different template may define post title differently. For example, a commentator found that for her, it was 
    h3.post-title {

    If you want to align the post title to the left or to the right, just substitute text-align:center; with eithertext-align:left; or text-align:right;



    Monday, February 14, 2011

    How to Place AdSense Ads in the Middle of Blogger Posts


    In normal cases all blogger users can put the adsense block at the top of the post or at the bottom Only.
    but the problem here is that alot of bloggers don’t get high CTR ( clicks ) by this placement,
    so they should play with the ads placement,
    the best solution here is to put you google ads blocks in the middle of the post in your blogspot blog.
    and you have to check out Google AdSense heat map
    blogger don’t offer this option by default settings, so you have to be tricky to do it,
    here is easy and fast way to do it.

    How to place Adsense in the middle of Blogger posts:

    The solution to this problem is quite simple: you only need to move the post body around the advertising code, just with a bunch of JavaScript and a couple of DIVs (divisions). All it takes are 2 easy steps:

    1. In your Blogger template: Dashboard –> Layout –> Edit HTML –> Expand Widget Templates

    Find the tag <data:post.body/> and replace it with the following code:

    <div expr:id='"aim1" + data:post.id'></div>
    <div style="clear:both; margin:10px 0">

    <!-- Your AdSense code here -->

    </div>
    <div expr:id='"aim2" + data:post.id'>

    <data:post.body/>

    </div>
    <script type="text/javascript">
    var obj0=document.getElementById("aim1<data:post.id/>");
    var obj1=document.getElementById("aim2<data:post.id/>");
    var s=obj1.innerHTML;
    var r=s.search(/\x3C!-- adsense --\x3E/igm);
    if(r>0) {obj0.innerHTML=s.substr(0,r);obj1.innerHTML=s.substr(r+16);}
    </script>

    IMPORTANT NOTICE: Do not forget to replace <!-- Your AdSense code --> with the ad code provided by Google Adsense. Also, the ad code needs to be converted
    before you can insert it.

    2. In every blog post:

    Place the special comment
    <!—adsense -->
     
    in the exact spot you want the Adsense ads to appear.