Posted by AlmansuQie™

Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Ok untuk yang ini, caranya begini..

Posted by AlmansuQie™

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget.

Posted by AlmansuQie™

Cara Membuat Favicon

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu).

Posted by AlmansuQie™

Membuat Label Flash (Blogumus)

Ha tutorial ni Ana ambil dari Blogger Buster. Cantik kalau dapat buat label macam ni..Ini untuk simpanan Ana, kalau Antum minat boleh ikut tutorial ni..

Posted by AlmansuQie™

The Cutest Blog On The Block

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja.

Posted by AlmansuQie™

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna.

Cara Membuat Menu Tab Horizontal

Nak buat link tab macam Ana?Ni caranya.Istimewa link tab ini, bila klik akan dibuka di window/tab yang baru.. Ni contoh tab yang ana guna.Tab ni ana dah tambahkan dengan kotak search. Ok ini caranya.



1.Macam biasa Loggin => Layout => Edit HTML. Tambahkan kode dibawah sebelum kode ]]></b:skin>

/* linktab

================== */

#linktab{
background:url(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif) ;
width: 864px;
height: 30px;
font-size: 11px;
font-family: georgia, Tahoma, Verdana;
color: #ffff66;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
#tabright {
width: 200px;
height: 30px;font-size: 11px;
float: right;
margin-right:10px;
margin-bottom:50px;
padding: 0px;
}
#tabright a img {
border: none;
margin: 5px;
padding: 0px;
}

#linktab ul {
margin:0;
padding:1px 10px 0px 0px;
list-style:none;
}
#linktab li {
display:inline;
margin:0;
padding:0;
}
#linktab a {
float:left;
background:transparent;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#linktab a span {
float:right;
height: 35px;
display:block;
background:transparent;
padding:7px 6px 4px 6px;
color:#ffff66;
border-right: 1px solid #000;
}
#linktab a span {
float:none;
}
#linktab a:hover span {
color:#fff;
}
#linktab a:hover {
background-position:0% -42px;
}
#linktab a:hover span {
background-position:100% -42px;
}


2. Warna kod oren untuk panjang tab,Tukar mengikut size main-wrapper Antum. Warna biru pula untuk text dan ungu untuk border,tukarla mengikut selera Antum. Kod Warna Disini.

3. Juga Gantikan kode gambar ni. Disini Ana ada sediakan beberapa warna. Cuma gantikan text tebal merah.

(http://i302.photobucket.com/albums/nn113/aburifaie/tabbiru.gif)




tabbiru.gif


tabhijau.gif


tabkuning.gif


tabmerah.gif



tabungu.gif


4. Kemudian tambah kode berikut dibawah kode ini <div id='content-wrapper'>

<div id='linktab'>
<ul>
<li><a href='URL Link Disini'><span>Home</span></a></li>
<li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
</ul>

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div></div>


p/s: Kalau xnak kotak carian, buang kod ini.

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>


Siap..

Tips² Terkait



31 Komentar:

PKG JOHOL February 19, 2009 at 3:43 AM  

Assalamualaikum, Admin ....
Saya nak tanya cam ner admin buat link antara bahan yang disedikan dan terus masuk dalam blog yang sama spt. di bawah :

BLOG INDUK
http://almansuqie-tips.blogspot.com/

BLOG SISIPAN
http://almansuqie-tips.blogspot.com/2009/01/cara-membuat-menu-tab-horizontal.html

AlmansuQie™ February 19, 2009 at 7:41 AM  

emm..kurang jelas ni..maksudnya nk buat link utk post kita ke? dan dibuka dalam window yg sama?

klu yg ni blogger ada sediakan widget, sila ke add a gadget. pilih archive atau link list.

IMAN - PKPMICB March 7, 2009 at 9:37 PM  

salam
kalau x nak letak kotak 'cari' tu camne?nak padam kod mna..?

AlmansuQie™ March 7, 2009 at 10:16 PM  

padam kod ni

<div id='tabright'>
<form action='http://NAMABLOG.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div>

ZURAINY MD ISA March 8, 2009 at 2:39 PM  

Assalamualaikum,
I heard of this blog from friends. Alhamdulillah, finally I find the blog which can guide me to complete my "New Born" blog. Tq.

ihsanz26 March 10, 2009 at 8:11 PM  

assalamualaikum..nak tanye, bleh tukar tab horizontal warna kelabu ade tak??... atau silver??...

rauna June 12, 2009 at 1:22 AM  

salam

nape sy xjumpa pn kode yg pertma tu dlm edit templete my blog??

AlmansuQie™ June 12, 2009 at 1:51 AM  

wasalam ir-rauna..

kalau guna firefox, tekan Ctrl+f tuk cari kod tu..mesti ada.

rauna June 13, 2009 at 1:11 AM  

tq2 anta,

dh jumpa dh..

Yusuf Abdul Qohhar August 18, 2009 at 5:11 AM  

koq waktu templte diSAVE ga bisa/nolak gimana?ada cr lain ga..

Cikgu Dahlia August 31, 2009 at 12:55 PM  

alhamdulillah..guna tips ni baru berjaya..
nnti edit...;;)
TQ bro

Cikgu Dahlia August 31, 2009 at 4:40 PM  

salam bos..

dekat IE cantik jer terletak menu tab tu...
tapi nape dlm Firefox ke lain jadinya..

Buntu dah nih.uwaaa

AlmansuQie™ September 1, 2009 at 4:55 AM  

wasalam...

klu blh masa pasang tu gunakan firefox..insyaallah elok kat IE..

tp IE mmg xbest pun..zaman ni org ramai gune FF..

Surau Al-Ghafur September 10, 2009 at 1:02 AM  

salam, syukron atas ilmu ni, tapi satu pertanyaan, macam mana lau nak buat hanya ada 3 tab view sahaja...?dalam blog ana, tabview dah dibuat menjadi 3 tab sahaja, tapi yang hujung jd panjang lah...help me...

Surau Al-Ghafur September 10, 2009 at 1:40 AM  

erm..dh boleh pendekkan, tp macam mana nk jdkan hanya ada 3 tab??

bella YOYO February 18, 2010 at 2:36 AM  

boleh x saye nak buat background lain?HEHE.

Anonymous,  March 25, 2010 at 9:44 AM  

SALAM tuan,
saya nk taya, mcmne nk create pages bagi tab tu untk paparkn info2nya? klu contoh tab= Organisasi, jadi pages nk letak organisasi tu mcne? "URL Link Disini'" nak copy kt mane?

mintk bimbingn tuan yeea..

bkk March 29, 2010 at 4:48 AM  

kenapa saya buat jd vertikal..sedangkan saya copy coding horizontol??

Anonymous,  August 11, 2010 at 6:29 PM  

tolong saya..saya dah silap buat untuk menu tab ni..camne nak padam

Adynda Nurfarina October 23, 2010 at 5:36 PM  

macam mana nak hapus blog post double yang ada di blog?

-: Fara_Lan :- October 27, 2010 at 6:07 AM  

Sangat best... nanti leh edit2 :D
Terima kasih bebanyak kerana berkongsi ilmu

Organisasi November 6, 2010 at 7:57 AM  

salam admin.
Saya tk jumpa kod yg no 4 tu. Ada cara lain tak?

noorayub December 1, 2010 at 10:46 PM  

salam....sy try buat tab mcm ni xboleh...kita buka gadget HTML java script ke....atau kalau buka ikut LABEL nk buat mcm mn ya.... boleh jelaskan dengan terperinci..maklum la baru...

bella February 3, 2011 at 9:34 AM  

saya nak tanya say ada buat da pastu camana nak taruk entry kiter dalam button tu?

ct April 21, 2011 at 8:45 AM  

menu ni da jadi tpi mcmane plak nk masukkan maklumat kat dlm die.. CONTOHNYE NK MASUKKAN MAKLUMAT KAT HOME..

Anonymous,  April 5, 2013 at 9:50 PM  

I'm really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you customize it yourself? Anyway keep up the nice quality writing, it's rare to see a great blog like this one today.


Feel free to visit my web site - graduate certificates Online

Anonymous,  October 11, 2013 at 3:51 AM  

nape sy xjumpa kode spt langkah 1 itu??

Emang Obat Tradisional April 22, 2015 at 6:13 AM  

Terimakasih buat artikelnya, mantab sob, menambah pengetahuan, bermanfaat..

Post a Comment

1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>

© Hak Cipta Terpelihara 2008 [:: AlmansuQie ::]
http://almansuqie-tips.blogspot.com
Template Designed By: AlmansuQie™

Paparan Lebih Kemas Dengan Firefox