Macam-macam Widget Menu Multi Tab Untuk Blog

Full Version

Pada postingan kali saya akan membahas bagaimana cara membuat menu multi tab pada blog. Mungkin pada postingan sebelumnya kita telah membuat menu multi tab akan tetapi mungkin gaya atau stylenya kurang menarik karena hanya ada satu style saja. Oleh karena itu pada kesempatan kali ini saya menyediakan beberapa style yang menarik agar dapat sobat gunakan di blog sobat.

Ada beberapa langkah dalam memasang widget menu multi tab ini diantara langkah tersebut adalah sebagai  berikut:

  • Menambahkan code script
  • Menambahkan code tema Css
  • Menambahkan code Html

A. Menambahkan code script

Caranya adalah sebagai berikut:

  1. Login ke blogger.com
  2. Pilih template >> Edit html >> Lanjutkan
  3. Jangan lupa centang Expand widget template
  4. Copy script di bawah ini dan letakkan di atas code </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
</ Script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js">
</ Script>
<script>
$ (Dokumen) siap (function (). {
$ ("Tab #") tab ().;
});
</ Script>

B. Menambahkan code tema Css

Caranya adalah sebagai berikut:

  1. Pilih salah satu tema yang sobat sukai di bawah ini
  2. Kemudian letakkan code tema Css yang sobat pilih di atas code </head>
  3. Kemudian simpan template

clip_image0018

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/base/jquery-ui.css" type="text/css" />

clip_image0024

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" type="text/css" />

clip_image0034

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/blitzer/jquery-ui.css" type="text/css" />

clip_image0044

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dark-hive/jquery-ui.css" type="text/css" />

clip_image0054

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/dot-luv/jquery-ui.css" type="text/css" />

clip_image0064

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/eggplant/jquery-ui.css" type="text/css" />

clip_image0074

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/excite-bike/jquery-ui.css" type="text/css" />

clip_image0084

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/flick/jquery-ui.css" type="text/css" />

clip_image0094

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/hot-sneaks/jquery-ui.css" type="text/css" />

clip_image0104

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/le-frog/jquery-ui.css" type="text/css" />

clip_image0114

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/mint-choc/jquery-ui.css" type="text/css" />

clip_image0124

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/pepper-grinder/jquery-ui.css" type="text/css" />

clip_image0134

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/redmond/jquery-ui.css" type="text/css" />

clip_image0144

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" type="text/css" />

clip_image0154

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/south-street/jquery-ui.css" type="text/css" />

clip_image0164

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/start/jquery-ui.css" type="text/css" />

clip_image0174

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/sunny/jquery-ui.css" type="text/css" />

clip_image0184

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/swanky-purse/jquery-ui.css" type="text/css" />

clip_image0194

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/trontastic/jquery-ui.css" type="text/css" />

clip_image0204

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-darkness/jquery-ui.css" type="text/css" />

clip_image0214

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css" type="text/css" />

clip_image0224

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/vader/jquery-ui.css" type="text/css" />

C. Menambahkan code Html

Caranya adalah sebagai berikut:

  1. Login ke blogger.com atau klik disini»
  2. Pilih tata letak » tambah gadget » Html/Javascript.
  3. Copy paste code html di bawah ini.

<a href="http://24work.blogspot.com" target="_blank" title="Blogger Widgets"><img src="http://safir85.ucoz.com/24work-blogspot/cursor-24work-10.png" border="0" alt="Blogger Widgets" style="position:absolute; top: 0px; right: 0px;" /></a><!-- Tabbed Navigation Widget For Blogger By http://24work.blogspot.com -->
<div id="tabs">
<ul><li><a href="#tabs-1">Tab1</a></li><li><a href="#tabs-2">Tab2</a></li><li><a href="#tabs-3">Tab3</a></li></ul>
<div id="tabs-1">Tab 1 content goes here</div>
<div id="tabs-2">Tab 2 content goes here</div>
<div id="tabs-3">Tab 3 content goes here</div>
<span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://24work.blogspot.com">+ Grab this</a></span>
<noscript><span style="font-size:10px;float:right;margin:5px;font-style:italic;"><a targer="_blank" href="http://24work.blogspot.com">+ Grab this</a></span></noscript>
</div>
<!-- Tabbed Navigation Widget For Blogger By http://24work.blogspot.com -->

Catatan:

  • Tulisan yang berwarna biru (Judul Tab) silahkan ganti dengan judul yang sobat inginkan (misal: Random post, Terbaru, dan Recent coment)
  • Tulisan yang berwarna orange dapat sobat ganti dengan code widget sobat seperti Chat box, recent post maupun widget lainnya.

Selamat mencoba, happy blogging :)

Full Version

Tidak ada komentar:

Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top