Link Dibuka Dengan New Tab

Sebarang link yang ditambah dalam blog kita samada dibahagian sidebar, posting, atau dimana saja adalah boleh dibuka dengan tab yang baru.. Dengan cara yang sangat mudah. Semudah mengupas kekacang.. Ok untuk yang belum tahu boleh rujuk cara ni yer..

Boleh gunakan salah satu kod dibawah.

1. target="_blank"
2. target="_new"

Caranya, tambah kod diatas tu pada akhir setiap alamat. Contoh dibawah.

1. <a href="http://almansuqie-tips.blogspot.com" target="_blank">
2. <a href="http://almansuqie-tips.blogspot.com" target="_new">

Tambah la kod tu kat mana2 je link yang kita nak bukakan di tab yang baru.. Kat tab vertikal pun boleh yer abang man.

Cara Membuat Menu Tab Vertical

Sebelum ini Ana ada posting cara membuat Menu Horizontal. Hari ini Ana kongsikan cara membuat Menu Vertikal (memanjang kebawah) pula. Seperti gambarajah diatas.

1. Loggin ke blogger. Pada halaman Layout pilih Edit HTML. Masukkan kod dibawah sebelum ]]></b:skin>

/*Vertikal Menu
---------------------------------*/
.vertikalmenu{
list-style-type: none;
margin: 0;
padding: 0;
width: 180px; /* Lebar Menu vertikal*/
}
.vertikalmenu li{
border-bottom: 1px solid white;
}
.vertikalmenu li a{
background: #000000 ; /*Warna background Menu Vertikal*/
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
display: block;
color: white;
width: auto;
padding: 5px 0;
text-indent: 8px;
text-decoration: none;
border-bottom: 1px solid black;
}
.vertikalmenu li a:visited, .vertikalmenu li a:active{
color: white;
}
.vertikalmenu li a:hover{
background-color: #737373; /*Warna Background bila Mouse diarahkan*/
color: white;
border-bottom: 1px solid black;
}

2. Perhatikan kod2 berwarna merah. Tukarkannya bersesuaian dengan blog Antum. Kod warna Disini. Setelah selesai klik butang save.

3. Seterusnya beralih ke bahagian Page Elements. Di bahagian sidebar, klik Add a Gadget => HTML/Javascript. Masukkan kod berikut.

<ul class="vertikalmenu">
<li><a href="/">» HOME</a></li>
<li><a href="http://almansuqie-tips.blogspot.com">» AlmansuQie Tips</a></li>
<li><a href="link kedua">» Al Quran & Sunnah</a></li>
<li><a href="link ketiga">» Peribadi</a></li>
<li><a href="link keempat">» Hadis 40 AnNawawi</a></li>
<li><a href="link kelima">» Himpunan Doa</a></li>
</ul>

4. Gantikan text2 berwarna merah dan biru. Selesai..

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..

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