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 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. Dapat jimatkan ruang sekaligus memudahkan pembaca mencari maklumat.


Ini paparan makhluk yang akan terhasil melalui tutorial ini. Nape xsama macam Ana punya?? Ha yang Ana tu dah banyak ditokok tambah. Asalnya macam ini jugak. Kalau Antum nak cantikkanya kita boleh cerita lain masa. Ok ini stepnya.

1. Loggin ke Blogger => Layout => Edit HTML dan cari kode ni ]]></b:skin> kalau nak cepat jumpa klik je Ctrl+F dan cari.

2. Masukkan kode dibawah sebelumnya.

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Kotak Tajuk */ text-align: center;
height: 24px; /* Tinggi Kotak Tajuk */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna Border Kotak Tajuk */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Tulisan Kotak Tajuk */
font-weight: 900;
color: #000; /* Warna Tulisan Kotak Tajuk */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FFFF66; /* Warna Background Kotak Tajuk */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna Border Kotak Isi */
overflow: hidden;
background-color: #FFFF66; /* Warna Background Kotak Isi */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}



3. Lihat keterangan pada tulisan berwarna merah. Just tukar tulisan yang berwarna biru. Untuk kode warna boleh dapatkan DiSINI

4. Seterusnya tambahkan kode berikut sebelum kode </head>

<script src='http://www.geocities.com/almansuqie08/tabview.js' type='text/javascript'/>



5. Cukup untuk bahagian ini. Klik Save Template.

6. Seterusnya pergi ke Page Elements => Add Gadget => HTML/Javascript dan tambahkan script dibawah.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tajuk 1</a>
<a>Tajuk 2</a>
<a>Tajuk 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 1.1">Tajuk Isi 1.1</a></li>
<li><a href="Url Isi 1.2">Tajuk Isi 1.2</a></li>
<li><a href="Url Isi 1.3">Tajuk Isi 1.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 2.1">Tajuk Isi 2.1</a></li>
<li><a href="Url Isi 2.2">Tajuk Isi 2.2</a></li>
<li><a href="Url Isi 2.3">Tajuk Isi 2.3</a></li>
</div>
</div>

<div class="Page">
<div class="Pad">
<li><a href="Url Isi 3.1">Tajuk Isi 3.1</a></li>
<li><a href="Url Isi 3.2">Tajuk Isi 3.2</a></li>
<li><a href="Url Isi 3.3">Tajuk Isi 3.3</a></li>
</div>
</div>


</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>



7. Lihat kode2 diatas.
#Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
#Text yang berwarna Merah Adalah text bagi kotak tajuk.
#Text yang berwarna Ungu adalah isi menu ini. Antum boleh isikannya dengan link, gambar, banner, script dll.
# Untuk menambahkan jumlah menu just copy text yang kelip2 tu dan tambahkan dibawahnya.

Ok. Selamat Mencuba

Tips² Terkait



24 Komentar:

PKG JOHOL February 13, 2009 at 4:59 AM  

Assalamualaikum ...

Terima kasih Admin kerana cepat memberikan respon terhadap persoalan yang diber. Tahniah.

Soalan : Bagaimanakah hendak membuatkan font kita blinking sept. di atas.

PKG JOHOL

AlmansuQie™ February 13, 2009 at 5:25 AM  

waalaikumussalam...senang aja..tambah kode ini <blink>Text Disini</blink>

PKG JOHOL February 13, 2009 at 10:14 AM  

Ana nak tanya sikit ... apa masalahnya ... apabila ana buat perubahan pada blog ana ... menggunakan tips yang diberi tetiba saja ... semua grafik yang ada di blog habis hilang.

AlmansuQie™ February 13, 2009 at 1:31 PM  

hilang? ana pun kurang pasti.. tp tips² dlm ni ana test dl sebelum dipublish.. alhamdulillah ok.

yang penting sebelum Edit HTML pastikan Download Full Template dl. klu ada masalah blh upload blk. satu lagi jgn terus save, preview dl.

bintu,  May 15, 2009 at 8:43 AM  

kenapa xbergerak dari satu tab ke satu tab~x(..dapat tengok satu tab aje..arghh..x(

cikgu dee July 23, 2009 at 8:34 PM  

Salam..apa khabar? Ana nak minta tolong sikit boleh tak? Ana try bt menu tab view. Tapi xmenjadiklah..berterabur.Ana nk buat 3 tab. setiap satunya ana nak masukkn widget spt shoutbox,kotak info dan poll. Bila klik pd tab2 tu ia akan kuar widget yg kt masukkn tadi. Anta leh tgk cth kat http://eriyza.via.my/search/label/Tutorials. Tp ana xfhm tutorialnya.Yg anta leh fhm ckt..tp ms modified tuh berterabur. Tlg ek. Syukran.

AlmansuQie™ July 25, 2009 at 4:41 AM  

cikgu masukkan aje kod widget tu.. gantikan dengan text yang warna purple..insyaallah jadi..

Aniekandria August 28, 2009 at 7:35 PM  

assalamualaikum,,
lam kenal ya....
sukses selalu yup...

ALAM October 8, 2009 at 9:33 PM  

INILAH TUTORIAL YANG DICARI SELAMA INI TQ YA TUAN ADMIN..

sahabat team November 4, 2009 at 10:00 AM  

Asslamualaikum....alhamdulillah dah jumpa...siok betul ana.
nak tanya...apasal bila saya download template yang lain dari yang asal(di atas dia ada menu), tapi bila ana click tak leh pegi kat menu yang kita tekan..apasal yek...nampak cantik tapi...alah tak leh nak guna sangat...saya tak tahu lah macamana nak guna tu. ada cara ka?

Hadi April 2, 2010 at 5:36 AM  

Salam,
mau tanya tab menu ni boleh letak chatbox tak?

RAMDHAN April 22, 2010 at 4:34 PM  

Asssalamu'alaikum... belum berhasil mas. knp yah?

QaiM3r May 3, 2010 at 9:55 AM  

sulittttttttttttttttttttttt

Anonymous,  December 13, 2010 at 12:42 AM  

Salam Admin,

macam mana nak buat Menu Tab View pada blog wordpress?

dah puas tanya pak google, tp tak jumpa
harap admin boleh bantu.

Make forex December 15, 2010 at 5:55 PM  

saya dah buat tab view tp x blh nak bukak menu tajuk kedua. boleh tolong x?

Anonymous,  December 15, 2010 at 9:51 PM  

Salam Admin

saya dah dapat pasang tabview pda bawah setiap posting blog wordpress,
(saya guna tab view untuk kandungan produk spt Description, senarai harga dan review.

cuma saya mahu hilangkan scroll pada bahagian tepi, (supaya show semua conten/kandungan pada setiap tab) ( kotak border membesar dan mengecil mengikut jumlah conten/kandungan pada setiap tab)

@ skrip/arahan html untuk show semua conten(boleh aku try dan error)

Aku harap admin boleh tolong aku :-L

ellang February 7, 2011 at 1:28 AM  

Salam tuan Admin.. saya buat x jadi la.. blh tengok 1 tab jew.. bila klik tab lain x ada respont pun.. apa masalah dia tu ya?? blh tengok di blog saya http://ellangdesign.blogspot.com
sagat2 perlukan bantuan tuan.

Unit Biologi, Kolej Matrikulasi Johor, KPM December 5, 2011 at 9:12 AM  

SALAM... TERIMA KASIH BYK KRNA TELAH MEMBANTU SY UPGRADE BLOG NI.... TERIMA KASIH SEKALI LAGI...

Unit Biologi, Kolej Matrikulasi Johor, KPM December 8, 2011 at 4:23 AM  

salam admin seperti kawan2 lain, ana dah buat tp just satu tap jerk yg leh bukak yg lain takleh... camno erk?????

Download Soal dan Pembahasan SNMPTN dan SIMAK UI March 7, 2013 at 7:44 PM  

Terima kasih gan untuk tips nambahan tab menu view. Ane lagi nyari2 tips blog untuk nambahin wawasan ngeblog

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