Kamis, 31 Januari 2008
Internet is fault tolerant .... Not !
Diposting oleh
Unknown
di
18.59
0
komentar
Label: internet, news, opinionated articles
Selasa, 29 Januari 2008
How to Create Horizontal Tabs Menu
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 ]]></b:skin>, 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
<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://trick-blog.blogspot.com"><span>Home</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Trik-Tips</span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Free Template </span></a></li>
<li><a href="http://trick-blog.blogspot.com"><span>Blog Dictionary</span></a></li>
<li><a href="http:/trick-blog.blogspot.com"><span>Profile</span></a></li>
</ul>
</div >
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 :<div id="content-wrapper">. if you found it, paste the above code (code number five) above it. Preview your template, if it looks good save your editting, but if it's not good try to put above this code </div>, you will find many codes like that, try to put the code above it and preview your your blog, do it more often until it's suitable for your template.
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 :<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>
change the green text so that to become like this:<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>
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.
Diposting oleh
Unknown
di
11.04
0
komentar
Label: Menu
Senin, 28 Januari 2008
Nokia cell phone giant acquires Trolltech
Diposting oleh
Unknown
di
08.27
0
komentar
Minggu, 27 Januari 2008
Install KDE 4 on Windows
Diposting oleh
Unknown
di
15.44
0
komentar
Sabtu, 26 Januari 2008
Protect Your Blog From Plagiarize (Copy Paste)
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 <body> then replace with this code
<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">
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 <head> 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.
Diposting oleh
Unknown
di
12.00
0
komentar
Label: Blogger Hack
Jumat, 25 Januari 2008
Change Post Date Become Calender Icon
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 <TITLE><data:blog.pageTitle/></TITLE> in your HTML. If you found it, put the code below under it.
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trick-blog.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>
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 <data:post.dateHeader/>. The easy way to find it is by copying the code the press Ctrl-f then paste to the shown box, you will found the code immediately. If you didn't anything you can find it manually. OK, If you found it change the code with the below script.
<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>
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 ............
Diposting oleh
Unknown
di
08.46
0
komentar
Label: Blogger Hack
Kamis, 24 Januari 2008
Make Blog More Expressive With Auto Smile Icon
In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy an image and put to your blog, but with only little code and then it will be smile icon image automatically. For example, if you type this code :) it will atomatically change to this image :) , this code :p will be like this :p and etc. Do you interest? if no, go from my blog :D
here's the trick:
1. Login to blogger then chose "layout --> Edit HTML"
2. Find this code ]]></b:skin>, if you found it then put the code below under it.
<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>
3. Save your editing.
* Before you type the code you have to press "space" first"
here is the code to show smile icon
:) --> :)
:( --> :(
:p --> :p
:D --> :D
:$ --> :$
;) --> ;)
:@ --> :@
:# --> :#
:k --> :k
:x --> :x
:o --> :o
:O --> :O
:L --> :L
:r --> :r
:s --> :s
:y --> :y
:~ --> :~
:v --> :v
:f --> :f
:d --> :d
:c --> :c
:z --> :z
Diposting oleh
Unknown
di
09.30
0
komentar
Label: Blogger Hack
Rabu, 23 Januari 2008
Change The Address bar Icon (Favicon)
If you open a web/blog you will see an icon on addressbar. If you make blog in blogger your default icon will be like this:
But you can change the icon (favicon) with your own picture. it's very simple to do that. The first thing you have to do is prepare an image with low dimension, it's about 22x22 pixel to 32x32 pixel, actualy bigger is no problem but it will reduce speed to open your web/blog. And they can be formatted as gif, jpg, bmp, ico, png. Then you store your image to webhosting. But if don't know how to make it or don't want to occupied you can use the icon listed below. Ok lets begin the trick.
1. Login to blogger, chose "Layouts --> Edit HTML
2. Put the code below into your <head> tag or before <head> code.
<link href='http://www.geocities.com/uddin_81/icon/image1.gif' rel='SHORTCUT ICON'/>
3. The bold text is an address for your icon, you can change it with your own or just copy the below listed address icon.
4. Save your editing.
here is the icon and it's addres : http://www.geocities.com/uddin_81/icon/image1.gif
: http://www.geocities.com/uddin_81/icon/image2.gif
: http://www.geocities.com/uddin_81/icon/image3.gif
: http://www.geocities.com/uddin_81/icon/image4.gif
: http://www.geocities.com/uddin_81/icon/image5.gif
: http://www.geocities.com/uddin_81/icon/image6.gif
: http://www.geocities.com/uddin_81/icon/image7.gif
: http://www.geocities.com/uddin_81/icon/image8.gif
: http://www.geocities.com/uddin_81/icon/image9.gif
: http://www.geocities.com/uddin_81/icon/image10.gif
: http://www.geocities.com/uddin_81/icon/image11.gif
: http://www.geocities.com/uddin_81/icon/image12.gif
: http://www.geocities.com/uddin_81/icon/image13.gif
: http://www.geocities.com/uddin_81/icon/image14.gif
: http://www.geocities.com/uddin_81/icon/image15.gif
: http://www.geocities.com/uddin_81/icon/image16.gif
Diposting oleh
Unknown
di
09.19
0
komentar
Label: Blogger Hack










