Showing posts with label Optimize Your Blog. Show all posts
Showing posts with label Optimize Your Blog. Show all posts

Add Navigation Button In Your Blog-2

Posted On Sunday, January 4, 2009 at at 1:00 AM by Rashed
 

I have already Post an article on this topic. That was the simple process and a Link widget for navigation. But if you want a colorful navigation Button then follow this Article. It is a little difficult than 1st article but it is very easy. You can do it.

Follow this process:

  • Go to your Dashboard > > Layout > > Edit HTML

  • Find Out this word <b:skin> <![CDATA[/* and ]]> </b:skin> . Paste the codes within these. If it doesn't work then paste the codes just before body {

  • Here is These code.



    <!--menu attributes-->
    /* Menu */

    #foxmenucontainer{
    height:35px;
    background:url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/menu.jpg) ;
    display:block;
    padding:0px 0 0px 14px;
    }
    #foxmenu{
    position:relative;
    display:block;
    height:25px;
    font-size:11px;
    font-weight:bold;
    font-family:Arial,Verdana,Helvitica,sans-serif;
    }
    #foxmenu ul{
    margin:0px;
    padding:10px 20px 0 0;
    list-style-type:none;
    width:auto;
    float:left;
    }
    #foxmenu ul li{
    display:block;
    float:left;
    margin:0 1px 0 0;
    width:105px;
    }
    #foxmenu ul li a{
    display:block;
    float:left;
    color:#dfdcd6;
    text-align: center;
    text-decoration:none;
    padding:6px 0px 0 0px;
    width: 105px;
    height: 19px;
    background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
    }
    #foxmenu ul li a:hover{
    color:#ffc35a;
    background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top left;
    width: 105px; height: 19px;
    text-align: center;
    }
    #foxmenu ul li a.current,#foxmenu ul li a.current:hover{
    color:#ff9600;
    width: 105px; height: 19px;
    background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
    }

    .post a:link,
    .post a:visited {
    color: #ad4100;
    background-color: transparent;
    }

    .post a:hover {
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    }


    <!--ends menu attributes-->

  • You have added the attributes for menu in your template. You can change these attributes if you want to make a unique one. You van change the image, hover color etc.

  • Then you need the Button Code. Copy and paste these code within your <body>......</body>.

    (NB: Please remember: You will see a lot of codes within body. You should paste the codes where you want to see your menu. You may want it in Head portion, Sidebar or Footer Portion. So paste your codes and preview it to make sure it is in right position)


  • Button code. Copy and paste these.

    <!--button code-->
    <div id="foxmenucontainer">
    <div id="foxmenu">
    <ul>
    <li class="current"> <a href="http://your site url">HOME</a> </li>
    <li class="current"> <a href="http://your site url">FREE SOFTWARE</a> </li>
    <li class="current"> <a href="http://your site url">TUTORIAL</a> </li>
    <li class="current"> <a href="http://your site url">BLOGGING</a> </li>

    </ul>
    </div>
    </div>
    <!--end of button code-->

  • Change your site url with your url

  • And change HOME, FREE SOFTWARE, TUTORIAL, BLOGGING with your desired name. You can also add more button. To add more button copy <li class="current"> <a href="http://your site url">BLOGGING</a> </li> and paste before </ul>

Posted in Labels: , | 0 comments

Add Signature to your Blogger Post

Posted On Monday, December 29, 2008 at at 12:48 AM by Rashed
 

If you want to see your signature after each posts of your blog then follow the process:

  • Create a signature, signature should be an image. You can make an image signature with GIMP

  • upload it in a server. Here you can upload it ripway or photobucket
  • Go to Dashboard > > Settings > > Formatting > > Post Template
  • Write this code in Post Template box: <p> <image class="centered"alt="post signature" src="SIGNATURE URL" /> </p>
  • Change "SIGNATURE URL" with your signature URL

Posted in Labels: | 12 comments

Add All Posts Widget or Table Of Content Widget

Posted On Friday, December 26, 2008 at at 4:06 PM by Rashed
 

If you are a blogger and you are blogging for a long time then you will find that your site is carrying a lot of pages with a lot of title. The lebel gadget or recent posts are not displaying all the articles name. It will be better for your user if they can see your all posts. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full TOC. I think it is good for SEO and it will increase your traffic because it will make your site user friendly.

Here is how to install it to your Blog.

  • Back Up your Template.


  • Add a HTML Page Element

    • Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.


    Change that line as follows:


    <b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>



    Save the template and switch to the Page Elements Tab.


  • Go to Layout < < Add a gadget and then Add a HTML page element above your Blog Posts element.
    Leave the title blank. Add the following html:





    • <div id="toc"></div>



  • Save your template.


  • Add a Sidebar HTML-element

    • Now add a HTML-element to the sidebar. Set the title to "TOC".
    For the contents, enter:

    <div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>


    Replace YOURBLOG with the name of Your Site's URL...... exactly.
    Oh yes, and save.

  • Add custom styles to the skin of your template.

    • New id's and classes are:
    #toc : the div-wrapper that contains the TOC
    .toc-header-col1 : header of column 1
    .toc-header-col2 : header of column 2
    .toc-header-col3 : header of column 3
    .toc-entry-col1 : cell in column 1
    .toc-entry-col2 : cell in column 2
    .toc-entry-col3 : cell in column 3

  • For your convenience: Beautiful Beta uses the following styling:


    • <style type="text/css">#toc { border: 0px solid #000000; background: #ffffff; padding: 5px; width:500px; margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:250px;}.toc-header-col2 { width:75px;}.toc-header-col3 { width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:80%; text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%;}</style>


You can add this code to the <b:skin>-part of the template, or insert it in the sidebar widget.

Posted in Labels: , | 8 comments

Add Navigation Button in Your Blog

Posted On Sunday, December 21, 2008 at at 5:46 PM by Rashed
 

Why You Need Button?


Button Code


Process Of Adding Button



Why You Need Button?


You should create button if you have a site that contains a lot of data on various topics.
It will help your user to navigate your site easily. But most of the bloggers face problems while they use template
from other source. Some templates contain navigation button but most good looking templates do not contain it.
So I was trying to make it possible for bloggers and atlast I found it. It is so easy. You can change the codes and
make it as you like. Here no background image is used. If you want button with background image then wait a few days and
I will deliver you the process.


Button Code


Style code used for Button:




a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #5d5d54;
text-decoration: none;
}


Button link codes:



<a class="navigation" href="http://your-link-url.blogspot.com">HOME</a>
<a class="navigation" href="http://your-link-url.blogspot.com">PICTURE</a>
<a class="navigation" href="http://your-link-url.blogspot.com">ABOUT ME</a>



Process Of Adding Button


Here is the detail process:

    Process of Adding Style code used for Button

    • Go to your Dashboard
      Go to Layout and then Edit HTML



    • Find <b:skin> and </b:skin> tags in your template. You will find it in your Templates Style section or just use Ctrl+F to find out it.


      • <b:skin>



      </b:skin>



    • Then copy and paste these codes within these <b:skin> and </b:skin> (1) tags and save template (2):




      a.navigation {
      background: #000000;
      color: #ffffff;
      margin: 1px;
      padding: 5px 35px 5px 5px;
      border-width: 0;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: bold;
      }
      a.navigation:hover {
      background: #5d5d54;
      text-decoration: none;
      }






You will see that there are two statements in this styling: the first statement defines (a.navigation) what the buttons will look
like as they appear in your blog and the second (a.navigation:hover) statement defines the background color of
the button when you place your cursor over the button (the "mouseover" effect).
If you you want to change button style then you can change the color code of the backgrounds to colors which you
prefer for your blog. You can easily find and see 350+ color codes from here.

    Process of Adding Button link codes:

    Create your links in an HTML/Javascript widget

    • After saving your template Go to Page Elements >Add a Gadget





    • Select HTML/JavaScript



    • Copy and paste these code (1) and then click save (2):



      <a class="navigation" href="http://your-link-url.blogspot.com">HOME</a>
      <a class="navigation" href="http://your-link-url.blogspot.com">PICTURE</a>
      <a class="navigation" href="http://your-link-url.blogspot.com">ABOUT ME</a>



Make sure to replace "http://your-link-url.blogspot.com"
with the URL of the post page (or link) and replace the link text (eg: HOME) with the text you would like to display.

It will look like:

Posted in Labels: , | 1 comments

Change Blogger's Header Picture

Posted On Monday, December 15, 2008 at at 12:37 AM by Rashed
 

Make your blogsite's header picture as you like. To change your header picture:

  • Go to Dashboard or Sign in your site
  • Click Layout from your Dashboard




  • Select Page Elements (it is remain as default).
  • Click "Edit" of your site's Header element



  • Browse a picture from your computer or paste your picture's URL
  • Select Radio button of Placement. (default is Behind title and description)
  • Then click Save

Posted in Labels: | 0 comments

Add Icon Before Your Post Title

Posted On Saturday, December 13, 2008 at at 1:54 AM by Rashed
 

You can Add Icon before or After your posts. If you want then follow the instruction.

Step 1:

  • Create your Icon or Download it from Internet

  • Upload it in any server. You can find a lot of free server like Photobucket
  • copy the icon URL


Copy your icon url:




Step 2:

  • Go to your Dashboard or Sign in your blog


  • Click Layout and then Edit HTML



  • Tick Expand Widget Templates



    • Find out this code: <b:if cond='data:post.url'> or Find out: <a expr:href='data:post.url'> <data:post.title/</a>



    • Write: <img src=" your Image Url " /> after <b:if cond='data:post.url'> (if you want to add icon before your post)
    • Or Write: <img src=" your Image Url " /> after <a expr:href='data:post.url'> <data:post.title/</a> (if you want to add icon after your post)


    • Then SAVE TEMPLATE

    • It will look like this:


    Posted in Labels: | 0 comments
    Subscribe to: Posts (Atom)
    My Google Pagerank

    Followers

    Recent Activities

      © 2009; webmaster: MAKE MONEY ONLINE

    Back to TOP