Monday, 22 December 2008

CSS Tutorial Free Tool CSS Tab Designer

CSS Tutorial Free Tool CSS Tab Designer

In my previous posting, I shared about a tool called CSS Menu Generator, now I would like to share about a tool again, called CSS Tab Designer. This tool still relates with CSS Menu Generator. The main function of this tool is almost similar to CSS Menu Generator. However, if Kang Rohman can differentiate between these tolls, I think CSS Tab Designer is better that CSS Menu Generator because it can result elegant and professional CSS Menu.

cssTabDesigner vertical-tabs

th_csstab2-1 th_csstab2-2

With this tool, you can make Horizontal Tab Menu or Vertical Tab Menu easily.

To get and use this tool, you don’t have to spend money, just download it below;

http://www.highdots.com/css-tab-designer

Happy downloading readers!!!

Blogspot Tutorial Design Your Logo at logoyes.com

Design Your Logo at logoyes.com

logoyes.com For a company, having a logo or an icon is a must because logo can represent what the company looks like. By having a logo or an icon, people will know the brand image and keep it in their memory. Logo usually has a mission to deliver the message of the company to the people, visitors or readers. A log is made and designed to be the representative of the company, the company products and should be able to attract a lot of attention. A logo can also tell about a website. Web site logo can describe what the site is like? From the explanation above we can know that a logo or an icon is very important or crucial.


Making a Logo Design or designing a logo could be easy because we can use many free software but free logo maker usually doesn’t satisfy our will. Free Logo Maker doesn’t give the best service for us. It means that we have to find a professional logo design to make a professional logo for our company or site. One site that can be you reference to be a place to have Free Logo Design is logoyes.com. LogoYes is the main provider of do-it-yourself logos and other premium design products to small businesses around the world. LogoYes is a pioneer of do-it-yourself logo creation. They also have a patent pending on their unique processes. As a free online service, they will help a company or website to design or build the company brand through their excellent, beautiful and unique logo. They provide almost 500 logo that we can select.

Due to their excellent service, there have been many small business, big business and company which use their service and proven that their Logo Design really help increasing the brand image make their business or company more popular. Now, it is time for us, our company or anyone who need logo to use this Free Logos Help.

Add Image Always On top In Blogger Tutorial

Add Image Always On top In Blogspot Tutorial

If you like to display an image in your blog, Kang Rohman has an interesting info. This info is about adding image that will always appear in the front side of your blog, the image will always appear even though the visitors do scrolling down in your blog. See below to see the screenshot.

doraemon

Are you interested in knowing the tricks? Below are the steps:

#1 step

  1. Make a picture you want to display. I suggest you to make 125 X 125 pixels, so it doesn’t really disturb your visitors, the picture format is up to you and you may make animation image. Example:

    Doraemon-1

  2. Upload the image into a place where you usually save the picture. If you still don’t know how to upload the picture? Just read this posting
  3. take note the image address tat you have uploaded. Example :

    https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800

#2 step

  1. Log in into blogger with your ID.
  2. Click Layout
  3. Click Edit HTML Tab
  4. Click Download Full Template and please back up your template first.
  5. Copy and paste the following code right above ]>></b:skin>

    #top_image {
    position:fixed;
    _position:absolute;
    bottom:5px;
    left:5px;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+
    document.documentElement.clientHeight-this.clientHeight);
    _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

  6. Find this code </body> in your template (end of your template code)
  7. Copy and paste the following code right above </body> (sample only)

    <div id='top_image'>
    <img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800'/>
    </div>

  8. Click Save Template
  9. Done and please see the result.

The code above is used to display the image on the left bottom of the screen. You can change that position as you want, example on the right bottom of the screen, top right of the screen and top left of the screen. The code that you can edit is as below;

#top_image {
position:fixed;
_position:absolute;
bottom:5px;
left:5px;

clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight);
_left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }

The red code is the code tat you can change as you like

The code for right bottom of the screen

bottom:5px;
right:5px;

The code for top right of the screen

top:5px;
right:5px;

The code for top left of the screen

top:5px;
left:5px;

That example image cannot clicked with your visitor, if you want your image can clicked, you only add a link code, example :

<div id='top_image'>

<a href=”http://nachomasti.blogspot.com”><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVyG8Xbg4wNkfdQZGJTptpXJo4oWoHPucAsX3V-kbHSn2MzIi11W9baeH90mwRHYJ9CeKlXloaK9VdVisIZDAkTu8gyumAHTQVREYQD4jq20QdyrQyId8z6oI4gg1wsRO2Xntnz6OB-o/?imgmax=800'/> </a>
</div>

Happy blogging with

Add Stript ad in Blogspot Tutorial

Add Stript ad in Blogger Tutorial

If you like blogging with wordpress engine, I believe that you are familiar with a plugin called Stript ad which is created by MaxBlogPress. With this Stript ad plugin, you can deliver the important message for your blog visitors. Now, can we use stript ad plugin in blogger? Don’t’ worry, because we do it because stript ad plugin use JavaScript which means that we can add it in blogger or blogspot.

One of implementation that I have applied is the message to subscribe the feed as you can see at the bottom of this blog:

strip ad plugin

If you are interested in adding this plugin in your blog, just read the guidance below;

  1. Login into blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Click Download Full Template and please back up your template first.
  5. Copy and Paste the following code right above ]]><b:skin>
    #mta_bar {
    background:#003366;
    border-top: 3px solid #6699ff;
    margin: 0;
    padding: 7px 0;
    z-index: 100;
    bottom:0px;
    right:0px;
    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 {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiq0P44R1zI5ruYab7Y6Uhr3o5yDum5HUFjmmHzNnqo8HCwQ0fS7gnDDtk84pcRx4vV9_97IeGWRQO6fMfPzHswBjt1jB-DEiev5dduVx7hM0NkuHR3gU2J2MJ1CQHHZrb5pJaJHEY7pzY/?imgmax=800') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;}
    #left_bar a:hover { text-decoration: underline; color: #fff; }





  6. Find this code </head> in your template


  7. Copy and paste the following code right above </head>

    <script type='text/javascript'>
    //<![CDATA[
    var mta_arr = new Array();
    var mta_clear = new Array();
    function mtaFloat(mta) {
    mta_arr[mta_arr.length] = this;
    var mtapointer = eval(mta_arr.length-1);
    this.pagetop = 0;
    this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body;
    this.mtasrc = document.all? document.all[mta] : document.getElementById(mta);
    this.mtasrc.height = this.mtasrc.offsetHeight;
    this.mtaheight = this.cmode.clientHeight;
    this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]);
    var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);';
    mtabar = mtabar;
    eval(mtabar);
    }
    function mtaGetOffsetY(mta) {
    var mtaTotOffset = parseInt(mta.mtasrc.offsetTop);
    var parentOffset = mta.mtasrc.offsetParent;
    while ( parentOffset != null ) {
    mtaTotOffset += parentOffset.offsetTop;
    parentOffset = parentOffset.offsetParent;
    }
    return mtaTotOffset;
    }
    function mtaFloatInit(mta) {
    mta.pagetop = mta.cmode.scrollTop;
    mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px";
    }
    function closeTopAds() {
    document.getElementById("mta_bar").style.visibility = "hidden";
    }
    //]]>


    </script>



  8. find this code </body> in your template ( end of template code)


  9. Copy and paste the following code right above </body> (sample only : change the red mark with your’s)

    <div id='mta_bar'>

    <div id='left_bar'><span class='left'><a href='http://feeds.feedburner.com/BlogspotTutorial' target='_blank'>More than 300 have subcribed in readers, have you?</a></span></div>


    <span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;blogspottutorial.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbrLnEx0fYb2YVqAm7GZxx-rTop2qxrWBCYi9oVgA7B3Qt4-vTjLXSf9r7-IxdVXf3W5CEKsDezHkaWM-7uL2LPR48gqPOWQqfOqQ8mhVPGNbXrl04tkPWv5y86rshs8Ux809m6t-2j2c/?imgmax=800' style='cursor:hand;cursor:pointer;'/></span></div>





  10. Click Save template


  11. Finish and see the result.



For wordpress self hosting user, you can download strips ad plugin directly in MaxBlogPress.



Thanks to my friend OOm for this trick



Have a nice trying!!

Blogger Tutorial / Sign Up In Feedburner

Blogger Tutorial / Sign Up In Feedburner

feedburner.com Someone has asked me the tutorial about adding the banners of Add to Google, My Yahoo and others. Well, it is very simple to answer. If you want to add those banners, you will have to join http://www.feedburner.com. By the way, what is http://www.feedburner.com?

www.feedburner.com is a website that gives syndication or feed services. Based on the data I have read from the page news of this site, now feedburner has been taken over by Google, so we can transfer our blog feed into feed in feedburner.com.

If you want to make your blog famous, I suggest you to join feedburner. Their service is also free. And if you want to sign up but still don’t know to do it, just read the steps below;

  1. Please visit http://www.feedburner.com
  2. Click Register at the top of the page
  3. Fill in the whole available form
    • Username --> type your desired username, example: japra
    • password --> type your desired password example: japratea
    • Password (again) --> retype your password
    • Email address --> type your email here
    • Secret Question --> type the secret question here and the answer is only known by you. Example: who is your girl friend?
    • Secret Answer --> type the answer of the question above. Example: juleha
    • Click Sign in button
  4. If it is successful, you will read welcome from feedburner
  5. Type your blog address in Burn a feed right this example : http://template-unik.blogspot.com
  6. Mark at the radio button available and choose any button you like, and then click next.
  7. Change Feed Title with Feed Address if you want to change it. After that click Active feed button.
  8. You will read Congrats. Just click Next button directly.
  9. Give a mark at Clickthroughs and I want more! have FeedBurner stats PRO also track (PRO service is also free now)
  10. click Next button
  11. click Optimize tab
  12. Please do the setting as your interest. The most important thing is that you have to activate Smart feed feature because this feature functions to make our feed function compatible or match with any of your feed reader.
  13. Click SmartFeed and then click Active button
  14. Click Publicize tab, please choose the features you want but the most famous and often used are feedCount. Ok, click FeedCount
  15. Choose the style from feedcount; ordinary one or animation one. Give a mark at ratio button next to it.
  16. Click Active button
  17. Copy the HTML given in text area and paste into notepad.
  18. Click ChickletChooser to choose any kinds of banner or chicklets as asked by Setyo.
  19. Give a mark at ration button next to each chicklet, then copy the HTML code and paste it into notepad. Note: every time you give a mark at the ration button for each chicklet, automatically HTML code of each chicklet will change
  20. Click Pingshot, give a mark next to Ping-O-matic and Newsgator, click available dropdown menu, then choose one, click Add button, Click dropdown menu again if you want to add again, click Add.
  21. Click Active button.
  22. Click Headline Animator to get animation banner.
  23. Click dropdown menu under theme, choose one that you like (classic type is the most favorite of many people)
  24. Click Active button.
  25. Click dropdown menu next to Add to, choose blogger blog.
  26. Click Next button.
  27. After new window appear, click Add to Blogger
  28. Please Sign in into blogger.
  29. Choose the blog that you want to add the animation banner. Then click Add Widget button. The animation banner will automatically be added in your blog. Note: this way is for new template user.
  30. Sign out from the site
  31. done

For other features, please try them by yourself ok. If I explain all, it will be too many and take a long time but the main reason is that I am tired to type again…ok bro clip_image001

To add HTML code into blog is easy and I believe that you can do it, too. I have explained a lot about this one. If you use classic template, just paste into the template code but if you use new template, just Add a Gadget, then choose HTML/JavaScript, paste the code and done.
Last but not least. As I have explained above that feedburner has been taken over by google. It means that blogger feed can be transferred into feed burner.

Read below to do it

  1. Sign in into blogger
  2. Click Setting menu
  3. Click Site Feed
  4. Next to Allow Feed Blog, choose Full.
  5. Save the feed from feedburner at the box next to Post Feed Redirect URL. Example, the feed address from feedburner is

http://feeds.feedburner.com/freedownload

  1. If you have google adsense account, you can save it at Feed Item Footer
  2. click save settings
  3. Done

Ok bloggers, welcome to feedburner and now your blog is more famous.

Cellar Heat Premium Blogger Magazine Template

Cellar Heat Premium Blogspot Template


Hello readers, I have an interesting info for you who are searching blogger template that adopts magazine template system. This template is called Cellar Heat Premium Blogger Template, for me, this is a very pretty template. Below is the screenshot:

Cellar Heat Premium Blogger Magazine Template

To see live demo please click here !

For you who love The Cellar Heat Premium Blogger Template,

please download here!

Enjoy your new appearance blog!

Make Breadcrumb Navigation in Blogger Tutorial

How To Make Breadcrumb Navigation In Blogspot Tutorial

If you are an observer of revolution theme created by Brian Gardner, you might have seen a simple row of navigation above the title of an article that you’re reading, like the following screenshot:

breadcrumb

The navigation like above is known better by the name of “breadcrumb-navigation”. With the “breadcrumb-navigation” the readers can easily know the position of an article that’s being read and also can search the articles in the same category.

Can “breadcrumb-navigation” be installed in blogger? The answer is of course, it can. With a few modifications of your template code, then the “breadcrumb-navigation” will be yours soon. Below are the ways:

  1. Please log in to blogger with your ID
  2. Click Layout
  3. Click Edit HTML tab
  4. Click Download Full Template and please back up your template first
  5. Please check the small box beside Expand Widget Template

    expand

  6. Find the code ]]>
  7. Copy and paste the code below exactly above the code ]]>

    .breadcrumbs {
    padding:5px 5px 5px 0px;
    margin: 0px 0px 15px 0px;
    font-size:95%;
    line-height: 1.4em;
    border-bottom:3px double #e6e4e3;
    }

  8. Find the following code in your template :

  9. Copy and paste the code below exactly below the code




    Browse » Home



    »


    »







    Browse » Home » Archives for








  10. Click Save Template button
  11. Wait for a while until your template saved
  12. Open your blog, click the title of an article, see the result
  13. Finished.

If your steps are correct, the “breadcrumb-navigation” will be like this:

breadcrumbsample

Happy trying!

Hide Disable Remove Blogger Navbar From Your Blog

Hide Disable Remove Blogger Navbar From Your Blog

Learn how to hide,disable or remove the blogger navbar(navigation bar) from your blog.

First,let us see what blogger navbar is:



blogger navbar



Blogger navbar allows users to easily navigate to other random blogs and it also has a feauture to search the blogs ,and mark any blog as spam.
So,now you have a clear idea of what really a blogger navbar is.So, why so many people prefer to just remove the navbar inspite of the feautures it has like search,etc.Many people think that, it spoils the look of the blog,especially if your blog has differnet subtitle layout which looks too obvious to see for a visitor.Well, let me come to the actual point on how to disable or hide your blogger navbar.

Below is the step-by-step procedure on how to do it with photos to make it easy to understand.

1.Sign in to your blogger account and click the layout button next to your blog name

click the layout button


2.Next,click the edit html tab as shown in the below picture.


edit html


3.Add the below html code as specified in the below picture.

#navbar {
height: 0px;
visibility: hidden;
display: none;
}


add the code like this

4. Save the changes.

Now, you can see your blog without that navbar(this tip can only hides the navbar,it doesn't completely delete it).If you want the navbar to appear again,just remove that code and save the changes.
If you have any doubts,regarding this post,don't hesitate to ask.You can ask your doubts via comments to this post.

2 Column Flora Scent Blogger Template

2 Column Flora Scent Blogger Template

2 Column  Flora Scent Blogger Template

FloraScent is originally a wordpress theme designed by Lorelie of Toptut.com. I saw this excellent wp theme yesterday and decided to convert it to our Blogger beta(xml) template.
I also impressed with few other wp themes also and will convert them to blogger very soon.

You can view the Live Demo here or look at the screenshot above and Download here.

2 Column XML Blogger Template Nice Day

2 Column XML Blogspot Template Nice Day



Here is my latest Blogger template.The template is in xml format and is suitable for new Blogger(blogger beta).

Template Feautures:
Xml blogger template
2 Columns
Nice Cool Design
Professional look
Adsense Ready
Navigation bar at the top

How to install this template??

First download the template and extract the template to your hard disc.

1.First Sign in to blogger dashboard »» Click on the 'Layout' link »» Select the 'Edit html' tab at the top »»
and Upload the downloaded template using the browse button.

upload the template using the browse button2.Save the Changes.


How to edit the links in the Navigation bar??


How to edit the links
1
.After installing the template, scroll down the template code and you will see this code nearly at the bottom of the template code.
Just edit the links there...


how to edit the links

2 Column Japanese Fleu Blogger Template

2 Column Japanese Fleu Blogspot Template


Blogger Template Screenshot
Here is my another excellent blogger beta template.The template was originally a wordpress theme designed by Lorelie for wordpress.org users.Now, I converted it to the XML Blogger beta template.
You can view the Live Demo here or look at the above screenshot and download this beautiful template here.

2 Column Charcoal Blogger Template

2 Column Charcoal Blogspot Template


Blogger Template Screenshot

Download 'Charcoal' Xml Blogger Template:

Hello guys! Here I am back with another wonderful Blogger Template. I released a few Blogger Templates few days ago and found lots of people are using them! Thanks for all who downloaded my templates!
This theme was originally a Wordpress theme designed by Jinsona of web2feel.com.
Here is the screenshot of the 'Charcoal' Blogger Template


Please Follow the below Instructions below carefully:
»» First Backup your current template before installing any template.
Go to Template » Edit html » and upload the downloaded xml template file (first extract the file) using the upload button.

and after installing the template, you have to do a few things.

1. Changing the top navigation links to your desired links.

top navbar Go through the template code till you see this piece of code

and Change the Anchor text and the respective links (#)

2.Change the Blogger Date Format.(so it suits the design)



Go to Settings » Formatting

and choose the type as shown in the below screenshot and Save the Changes.

and the last thing

3.Chage the feed and Technorati links


Go through the template code and Find this code

and Change the # links with the corresponding links.. For example,change the first # to your blog feedburner url... like http://feeds.feedburner.com/celebritymasti.blogspot.com,etc

Like the template or Have any questions to ask..?? Please leave a comment. thanks!

2 Column Blogger Template Connexion

2 Column Blogspot Template Connexion


Connexion Blogger Template Screenshot

Download Wonderful Blogger Template 'Connexion'
Ok... as I promised before to design more and more Blogger templates for you guys.. here is my latest entry 'Connexion'.This was originally a wordpress theme designed by Jinsona of web2feel.com for wordpress.org users.I converted it to our friendly blogger :)

Take a look at the below screenshot or look at this Live Demo of the template and download here.
Live Demo DownloadDownload


Please read the below instructions carefully:
After uploading the template using the upload button in "Template »» Edit html", you have to do a couple of things.
1.Change the top navigation links to your desired ones..

this is how to do:-

Scroll down the template untill you find this piece of code...


and Replace the anchor text (Home,pictures,etc) and add the corresponding link replacing the # symbol

2. Change the RSS Feed link. Find this code below

and Replace the feedburner link (http........./yourfeed) to your's and SAVE THE CHANGES.

Hope you like it! More template are on the way... don't forget to come back and check for updates!


2 Column Furniture Blogger Template

2 Column Furniture Blogspot Template


Communist Blogger Template Screenshot

Furniture niche Related Blogger Template 'Communist'-Download

Here is my today's Blogger Template 'Communist'.The Template well suits for any furniture or shopping related niche sites.It was well designed,two column with 3d rss button and beautiful navigation bar at the top.This was originally a wordpress theme by Jinsona of web2feel.com.I converted it to Blogger.

Have a look at the below screenshot or look at the Live Demo and download this beautiful template here.
Live Demo DownloadDownload

Please read the below instructions carefully


After downloading the template, unzip it and go to Templates »» Edit html and upload the xml file using the upload button and Save the Changes.

1.After that, you can change the top navigation links to yours.

change the navigation links to yours Go through the template and find this code

and change the Anchor Text and the corresponding links.

2.Next, change the Rss feedburner url to yours by simply finding this code below and replacing the feedburner url (http....feed.feedburner.. /yourfeed) to yours.

change the rss feedburner url 3.And the final important thing is change the date header format by going to Settings»» Formatting tab

Change the Date Header Format

Hope you like the template! Please leave a comment if you like the template or have any question to ask.

More template are on the way..... DON'T forget to comeback and download more beautiful templates.

-----

Reply to Kaushik's Comment:

Hi Kaushik,If you post more than one post on a given day,.. the latest post will show the date.If you don't like this,.. here is the solution


go though the template code and find this: (it's around the 672 line)



and Replace it with this one

and Save the template and go to settings>>formatting and change the timestamp format which you like.

this works! :)

2 Column Xml Blogger Template Creation

2 Column Xml Blogspot Template Creation


Creation template Screenshot

Wonderful Xml Blogger Template 'Creation'
Here is my today's Blogger Template.This template was very wonderfully designed,2 column Blogger(blogspot) template.This was originally a wordpress theme by Ophelia Nicholson of ophelianicholson.com. I converted that format to Blogger beta.
Look at the screenshot below and Live Demo and download this beautiful template here.


Please,read the following instructions carefully...

After downloading and uploading the xml file using the 'upload button' in the Templates »Edit html, you have to do a couple of things..
1.First change the top Navigation links to yours.
Change the navlinkshere is how to do that:
Scroll down the template and and you will find this below code..


and change the above links to yours..

2.Next, Change the date format by going to Settings »» Formatting

date header formatand change them like the below screenshot and Save the Change.

change the date header format like this
Hope you like the template! :) As I said earlier, this is just the start.. more lovely templates are on the way!
Thanks for your support!