What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:
To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.
The first thing you have to di is create an image like this:
and 
If you can't to create it, you can use my below images:blackleft.gif blackright.gif 
greenleft.gif greenright.gif 
redleft.gif redright.gif 
unguleft.gif unguright.gif 
yellowleft.gif yellowright.gif 
blueleft.gif blueright.gif 
whiteleft.gif whiteright.gif
Ok, let's begin
1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]>, if you found it then put the code below above it
/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5; /*Under Line, you can change or delete it */
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px; /* Menu position*/
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://blogoholic.info/files/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://blogoholic.info/files/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E; /*Text menu color*/
}
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:
background:url("http://blogoholic.info/files/menu/redleft.gif") no-repeat left top;
background:url("http://blogoholic.info/files/menu/redright.gif") no-repeat right top;
5. Then copy the code below
change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.
6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.
- methode A:
Find this code :
If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :
change the green text so that to become like this:
Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.
What is horizontal tabs menu? horizontal tabs menu is bla..bla..bla... I can't explain anymore, he..he., it's look like this:
To create it is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.
The first thing you have to di is create an image like this:
and 
If you can't to create it, you can use my below images:blackleft.gif blackright.gif 
greenleft.gif greenright.gif 
redleft.gif redright.gif 
unguleft.gif unguright.gif 
yellowleft.gif yellowright.gif 
blueleft.gif blueright.gif 
whiteleft.gif whiteright.gif
Ok, let's begin
1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code ]]>, if you found it then put the code below above it
/*credits : http://trick-blog.blogspot.com */
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("http://kendhin.890m.com/menu/blackleft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("http://kendhin.890m.com/menu/blackright.gif") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}
you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:
background:url("http://kendhin.890m.com/menu/redleft.gif") no-repeat left top;
background:url("http://kendhin.890m.com/menu/redright.gif") no-repeat right top;
5. Then copy the code below
change http://trik-tips.blogspot.com with your own link, and change the bold text with your own text.
6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods, you can chose and try for any methods.
- methode A:
Find this code :
If you have nice with your menu position, is unnecessary to do methode B, but if you feel difficult to apply methode A you can try methode B
- methode B:
Find the below code :
change the green text so that to become like this:
Save your setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog.
May be you will be angry if your articel shown in other blog unexpectedly, moreover it without inserting the resource. I'll show you how to protect your blog from theif. But this trcik is pointed for small thief because it unusefull for expert thief. With this trick, the thief will unable to select your articel and unable to right click in your blog. But if you don't care about plagiarize, you will don't need this trick. Ok lets begin.
Go to your blog setting then chose "Template --> Edit HTML". Find this code then replace with this code
Now your blog will be disable selecting and righ click, but the thief can still steal your articel by select "views --> page source" menu from their browser or by pressing "Ctrl + u", they can see your source code and can copy the articel from it. To deceive this, put your mouce cursor before this code then press "enter" button many times, may be about 100 times :D the save your editting . Now if they press "Ctrl + u" they will only see a litle codes, he..he.. :D
But remember this trick is only work for a fool thieves, for an expert thieves is unusable.
I don't use it into my blog because there are many script that have to be copied by readers.
Protect Your Blog From Plagiarize (Copy Paste)
Posted by Funniest Pictures at 12:00 Labels: Blogger HackMay be you will be angry if your articel shown in other blog unexpectedly, moreover it without inserting the resource. I'll show you how to protect your blog from theif. But this trcik is pointed for small thief because it unusefull for expert thief. With this trick, the thief will unable to select your articel and unable to right click in your blog. But if you don't care about plagiarize, you will don't need this trick. Ok lets begin.
Go to your blog setting then chose "Template --> Edit HTML". Find this code then replace with this code
Now your blog will be disable selecting and righ click, but the thief can still steal your articel by select "views --> page source" menu from their browser or by pressing "Ctrl + u", they can see your source code and can copy the articel from it. To deceive this, put your mouce cursor before this code then press "enter" button many times, may be about 100 times :D the save your editting . Now if they press "Ctrl + u" they will only see a litle codes, he..he.. :D
But remember this trick is only work for a fool thieves, for an expert thieves is unusable.
I don't use it into my blog because there are many script that have to be copied by readers.
If you bored with your blog face, may be you can use this trick to make your blog more beautiful. This trick will explain "how to change posting date to become a calender icon" like as you see in my blog. If you interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to become mm.dd.yyyy (1.24.2008). How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header format" to become what I said before (mm.dd.yyyy) then save your setting.
Next step is go to tabs "Template --> Edit HTML". Don't forget to backup your template first. Click on a "Expand Widget Templates" check box. OK lets go to the deep trick.
1. Find this code
2. Then Find this code:
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
if you can't found it try to find this:
h2.date-header {
margin:1.5em 0 .5em;
}
3. OK, you have found it? next step is put the below code under it.
.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}
.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}
.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
Code http://blogoholic.info/files/kalender/bluecalend.gif is the place for calender icon, you can change it with your own image or use my image below. what to do is change the bold text with the pictures code below, for example, if you want to change it with red icon calender, just change bluecalend.gif with redcalend.gif.
here is the icon images:
blackcalend.gif blue2calend.gif bluecalend.gif 
greencalend.gif orangecalend.gif pinkcalend.gif 
redcalend.gif ungucalend.gif yellowcalend.gif
4. Next step is find this code
5. Save your editting, and see the result, is it working? :t
if the month and date upper, you can add this code padding: 4px 0px 0px 0px; under this code .month { and this .day {
Good Luck ............
If you bored with your blog face, may be you can use this trick to make your blog more beautiful. This trick will explain "how to change posting date to become a calender icon" like as you see in my blog. If you interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to become mm.dd.yyyy (1.24.2008). How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header format" to become what I said before (mm.dd.yyyy) then save your setting.
Next step is go to tabs "Template --> Edit HTML". Don't forget to backup your template first. Click on a "Expand Widget Templates" check box. OK lets go to the deep trick.
1. Find this code
2. Then Find this code:
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
if you can't found it try to find this:
h2.date-header {
margin:1.5em 0 .5em;
}
3. OK, you have found it? next step is put the below code under it.
.dateblock {
background: url("http://kendhin.890m.com/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}
.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}
.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
Code http://kendhin.890m.com/kalender/bluecalend.gif is the place for calender icon, you can change it with your own image or use my image below. what to do is change the bold text with the pictures code below, for example, if you want to change it with red icon calender, just change bluecalend.gif with redcalend.gif.
here is the icon images:
blackcalend.gif blue2calend.gif bluecalend.gif 
greencalend.gif orangecalend.gif pinkcalend.gif 
redcalend.gif ungucalend.gif yellowcalend.gif
4. Next step is find this code
5. Save your editting, and see the result, is it working? :t
if the month and date upper, you can add this code padding: 4px 0px 0px 0px; under this code .month { and this .day {
Good Luck ............