rizal fauzan

Membuat Tabber Tab Menu Dengan JQuery #1

2010-10-31T04:52:00.000-07:00

Saat ini tabber tab mulai banyak terkenal dalam dunia desain web. Banyak situs yang menggunakan tabber tab dan mengisinya dengan berbagai konten untuk menghemat ruang halaman web site. Diantara yang banyak saya lihat menggunakan tabber tab untuk kategori recent post, comments dan random posts adalah template atau theme wordpress.

InsyaAllah kali ini saya ingin mengetengahkan cara membuat tabber tab dengan JQuery untuk template blogger. Diantara ragam tabber tab satu diantara yang akan kita pelajari cara pembuatannya sekarang, adalah tabber tab dengan struktur menu menggunakan icons seperti screenshot diatas. Atau lihat demonya disini

Oke langsung pada tutorial pembuatan tabber tab menu atau tab view dengan JQuery:

Langkah Pertama:
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah kedua abaikan saja,
3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi:

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

#tabMenu {margin:0;    padding:0 0 0 15px;list-style:none;}
#tabMenu li {float:left;height:32px;width:39px;cursor:pointer;cursor:hand}
/* this is the button images http://amatullah83.blogspot.com*/
li.comments {background:url(http://sites.google.com/site/amatullah83/bg/tabComment.png) no-repeat 0 -32px;}
li.posts {background:url(http://sites.google.com/site/amatullah83/bg/tabstar.png) no-repeat 0 -32px;}
li.category {background:url(http://sites.google.com/site/amatullah83/bg/tabFolder.png) no-repeat 0 -32px;}
li.famous {background:url(http://sites.google.com/site/amatullah83/bg/tabHeart.png) no-repeat 0 -32px;}
li.random {background:url(http://sites.google.com/site/amatullah83/bg/tabRandom.png) no-repeat 0 -32px;}
li.mouseover {background-position:0 0;}
li.mouseout {background-position:0 -32px;}
li.selected {background-position:0 0;}
.box {width:227px}
.boxTop {background:url(http://sites.google.com/site/amatullah83/bg/boxTop.png)no-repeat;height:11px;clear:both}
.boxBody {background-color:#282828;}
.boxBottom {background:url(http://sites.google.com/site/amatullah83/bg/boxBottom.png) no-repeat;
    height:11px;}
.boxBody div {display:none;}
.boxBody div.show {display:block;}
.boxBody #category a {display:block}
/* styling for the content*/
.boxBody div ul {    margin:0 10px 0 25px;padding:0;width:190px;list-style-image:url(http://sites.google.com/site/amatullah83/bg/arrow.gif)}
.boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;cursor:hand;cursor:pointer;font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div ul li.last {border-bottom:none}
.boxBody div li a{font-size:10px; color:#DDDDDD;text-decoration: none;}
.boxBody div li span {    font-size:8px;color:#9F9F9F;}
/* IE Hacks */
*html .boxTop {margin-bottom:-2px;}
*html .boxBody div ul {margin-left:10px;padding-left:15px;}

Catatan kode CSS diatas masih bisa lagi sobat modifikasi untuk menyesuaikan dengan template sobat untuk membantu mengenali property CSS diatas lihat screenshot berikut:

Icons image lain yang bisa sobat gunakan:
Untuk background bodynya, cari aja sendiri ya!
5. Simpan Template
Langkah kedua:

Masih pada menu tata letak>>> klik elemen laman>>> tambah gadget>>> Pilih HTML/JavaScript

Pada kolom konten isi dengan kode HTML berikut:

<div class="box">
<ul id="tabMenu">
    <li class="posts selected"></li> 
    <li class="comments"></li>
    <li class="category"></li>
    <li class="famous"></li>
    <li class="random"></li>
</ul>
<div class="boxTop"></div>
<div class="boxBody">
      
    <div id="posts" class="show">
      <ul>
        <li>Post 1</li>
        <li>Post 2</li>
        <li class="last">Post 3</li>
      </ul>
    </div>
    <div id="comments">
      <ul>
        <li>Comment 1</li>
        <li>Comment 2</li>
        <li class="last">Comment 3</li>
      </ul>
    </div>
     <div id="category">
         <ul>
           <li>Category 1</li>
           <li>Category 2</li>
        <li class="last">Category 3</li>
         </ul>
       </div>
      <div id="famous">
      <ul>
        <li>Famous post 1</li>
        <li>Famous post 2</li>
        <li class="last">Famous post 3</li>
      </ul>
    </div>
    <div id="random">
      <ul>
        <li>Random post 1</li>
        <li>Random post 2</li>
        <li class="last">Random post 3</li>
         </ul>
    </div>
</div>
<div class="boxBottom"></div>
</div>

Silahkan isi tabber tab menu dengan konten yang sobat inginkan kemudian simpan dan simpan lagi. Lihat hasilnya diblog sobat.

Semoga berhasil dan bermanfaat.

Cara Termudah Membuat Tab Animasi Otomatis

2010-10-31T04:40:00.000-07:00

Tutorial berikut merupakan perkembangan dari JQuery yang sekarang ini sudah banyak dibahas diberbagai blog tutorial. Oleh karena itu, saya ingin sekali share informasi ini sama Anda mungkin saja Anda lagi mencari info ini atau dengan berkunjungnya Anda pada Blog ini Akhirnya jadi tahu tentang informasi ini.

Artikel berikut diambil dari bloggertuts dan saya mencoba men-share kan trik ini dalam bahasa indonesia. Dan semoga sangat bermanfaat untuk Anda yang selalu haus akan tips dan trik baru dalam modifikasi blog.

Langkah2nya sebagai berikut:

Login ke Blogger.com
Kemudian Tata Letak
Pilih Edit HTML
Centang Expand Widget
Copas kode berikut diatas kode ]]></b:skin>

/* Tabbed Sidebar Widgets
--------------------------------- */
.widget-wrapper2{
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;
}
.widget-tab {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topright:5px;
-webkit-border-radius-bottomleft:5px;
-webkit-border-radius-bottomright:5px;
-webkit-border-radius-topright:5px;
background:#FFFFFF urlundefinedhttp://sites.google.com/site/rasiqzonetwork/image/tabvieworange.png) repeat-x scroll left bottom !important;
border:1px solid #CFCFCF;
font-family:Arial,Helvetica,sans-serif;
padding:15px !important;
}
.widget-tab ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.widget-tab ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:10px;
    padding-bottom:10px;
    font-size:13px;
}
.widget-tab ul li:last-child {
    border-bottom:none;
}
.widget-tab ul li a {
    text-decoration:none;
    color:#3e4346;
}
.widget-tab ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.tab-content ul li a:hover {
    color:#a59c83;
}
.tab-content ul li a:hover small {
    color:#baae8e;
}
.active-tab{
background:#FFFFFF urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabtopbg.gif) repeat-x scroll left top !important;
border-color:#CFCFCF #CFCFCF #FFFFFF #CFCFCF !important;
border-style:solid !important;
border-width:1px 1px 2px !important;
color:#282E32 !important;
}
ul.tab-wrapper {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tab-wrapper li {
-webkit-border-radius-topleft:5px;
-webkit-border-radius-topright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background:#191919 urlundefinedhttp://sites.google.com/site/amatullah83/bg/tabinactivebg.gif) repeat-x scroll left top;
border:1px solid #464C54;
color:#FFFFFF;
cursor:pointer;
display:inline;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:9px;
font-weight:bold;
line-height:2em;
list-style-image:none !important;
list-style-position:outside !important;
list-style-type:none !important;
margin-right:1px;
padding:8px 14px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}

Berikutnya, Anda harus menginstall JQuery JavaScript pada blog Anda, Jika Anda sudah menginstallnya Anda bisa melewati step ini. Untuk yang belum, copas kode berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

Kemudian copas kode berikut diatas kode </head>

<script type="text/javascript">
var starttab=0;
var endtab=2;
var sidebarname="sidebar1";
</script>
<script type="text/javascript" src="http://tab-for-blogger.googlecode.com/files/bloggertabv1.0-min.js"></script>

Selanjutnya Save Template

Note:

Ganti kode warna merah sesuai keinginan Anda, Berikut penjelasan detailnya:

var starttab=0;
var endtab=2;
var sidebarname="sidebar";

var starttab=0; adalah pemulaan nomer widget yang akan dipilih untuk dimasukkan pada tab, ini dimulai dari 0. var endtab=2; adalah nomer widget yang terakhir yang akan Anda masukkan pada Tab. var sidebarname="sidebar"; adalah nama ID sidebar Anda, umumnya semua blog sama. Tapi mungkin template Anda ID sidebarnya beda jadi disesuaikan.

Untuk mengetahui ID sidebar tamplate Anda, pada layout > Edit HTML > Anda cari kode berikut sidebar-wrapper maka Anda akan mendapatkan kode diabawah ini:

<div id='sidebar-wrapper'>

<b:section class='sidebar' id='sidebar' preferred='yes'>

Kode berwarna merah adalah ID sidebar Anda.

Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon

2010-10-30T20:29:00.000-07:00

Pada kesempatan kali ini saya ingin share kepada teman-teman semua tentang bagaimana Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon di Blog..

Ok, sebenarnya ini bukanlah suatu keharusan untuk di ganti, tetapi kadang-kadang sebagian blogger lebih menyukai icon ketimbang sebuah teks karena tentu saja blog akan terlihat lebih menarik karena ada navigasi berupa icon, khususnya pada Posting Baru, Posting Lama dan Home.

Langkah-langkah menggantinya seperti di bawah ini:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> klik Expand Templates Widget,
3. Ganti beberapa kode seperti di bawah ini:

* Untuk mengganti tulisan Posting Baru (Newer Post) cari kode berikut: <data:newerPageTitle/>

lalu ganti kode tersebut dengan kode ini:

* Untuk mengganti tulisan Posting Lama (Older Post) cari kode berikut: <data:olderPageTitle/>

lalu ganti kode tersebut dengan kode ini:

* Untuk mengganti tulisan Home (Home Page) cari kode berikut: <data:homeMsg/>

lalu ganti kode tersebut dengan kode ini:

4. Untuk icon silahkan di ganti dengan selera masing-masing dan bisa dicari di sini.

5. Jika sudah tinggal klik Save Templates.

Seperti itulah Cara Ganti Tulisan Posting Baru, Posting Lama dan Home Dengan Icon, semoga bisa bermanfaat untuk membuat lebih menarik blognya dan selamat mencoba, salam.

Cara Menambah Footer 3 Kolom di Blogspot

2010-10-30T20:21:00.000-07:00

Kebetulan sekali malam ini sebenarnya saya mau posting tentang bagaimana Cara Menambah Footer 3 Kolom di Blogspot, nah pas cek komentar di salah satu artikel saya ada sahabat blogger (Ndolem: http://www.ndolem.com/) request tentang Footer tadi.

Menambah footer entah itu 2 kolom, 3 kolom atau 4 kolom di bawah postingan sudah menjadi hal yang umum, jika berbicara tutorial sudah banyak juga yang buat, tetapi terkadang beberapa kode yang disebutkan tidak dapat ditemukan (karena templates tidak support) atau bisa jadi ada perbedaan kode, sehingga mengurungkan niat untuk membuat footernya.

Nah, anggap saja ini adalah Alternatifnya (apabila teman-teman ingin membuat footer tapi harus mengganti kode tapi kode yang dimaksud tidak ada) karena kita tidak perlu menghapus tetapi hanya menambahkan saja.

Fungsi:

Footer (3 kolom) digunakan untuk membuat space di dalam blog agak luas di bagian bawah sehingga tidak membuat sisi sidebar penuh (karena tambahan widget ini dan itu).

Kebetulan templates blog saya yang sekarang ini sebelumnya tidak memiliki footer sehingga saya harus menambahnya secara manual, dan caranya seperti di bawah ini.

Ok, buat teman-teman yang ingin Menambah Footer 3 Kolom di Blog nya, silahkan ikuti langkah-langkah di bawah ini:

1. Login akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Klik Expand Templates Widget,
3. Lalu cari kode berikut: ]]></b:skin>

4. Tambahkan kode di bawah ini persis berada di atas kode tadi:

/* bottom
---------------------------- */ #bottom {
width: 900px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background: transparan;
padding: 15px 0 15px 0;
}
#bottom h2 {
text-align:center;
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#AEB404;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #AEB404;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: transparan;
}

#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

5. Teruskan dengan mencari kode berikut:

<div id='footer-wrapper'>

atau

<div id='footer'>

(biasanya ada di atas kode </body>)

6. Dan tambahkan kode di bawah ini persis berada di atas kode tadi:

<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

7. Jika sudah klik Save Templates (lihat perubahan sementara pada bagian Page Element).

Note:

Harap diperhatikan kode-kode yang saya beri warna di atas:

a. Untuk kode width: 900px; harap disesuaikan dengan lebar header blog masing-masing (kode: #header {), jika lebar header 660px, maka diganti width nya 660 px,

b. Untuk merubah warna judul Footer harap ganti pada kode #bottom h2 { ..... color:#AEB404; [kode warna bisa dilihat di menu tab di atas]

c. Lalu perhatikan kode di bawah ini:

#left-bottom { /* kode kolom footer kiri */
width: 32%;
float: left;
padding-left:10px;
}
#center-bottom { /* kode kolom footer tengah */
width: 32%;
float: left;
padding-left:10px;
}
#right-bottom { /* kode kolom footer kanan */
width: 32%;
float: left;
padding: 0 5px 0 10px;
}

Harap disesuaikan width nya untuk memberi jarak pada masing-masing element, misal total width-nya 100%, maka kita beri jarak masing-masing dengan total 4%, maka sisanya adalah 96%, lalu kita bagi sehingga masing-masing element mendapat luas 32%.

Nah, seperti itulah teman-teman bagaiman Cara Menambah Footer 3 Kolom di Blogspot, semoga cara ini bisa bermanfaat dan diterapkan di blog masing-masing, selamat mencoba. Salam...

Demo

Cara Membuat Tag Cloud Comulus [Label Berputar]

2010-10-30T19:09:00.000-07:00

Penjelasan umum seputar Tag Cloud Comulus:

Tag Cloud Comulus ini sebenarnya terinspirasi dari flatform blog Wordpress, nah oleh salah dua blogger handal luar negeri yaitu Roy Tanck dan Amanda Fazani akhirnya dibuat juga untuk flatform Blogspotnya.

Jika berbicara fungsi, sebenarnya sama saja ketika kita menggunakan Labels bawaan dari blogspot itu sendiri, tetapi Tag Cloud Comulus ini jelas lebih menarik, tanya kenapa? Dari segi penampilan saja sudah tampil cantik, bisa berputar ketika mouse diarahkan dan memang lebih atraktif.

Ok, langsung saja ke Cara Membuat Tag Cloud Comulus Labels:

1. Login ke akun blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Cari kode berikut: <b:section class='sidebar' id='sidebar' preferred='yes'> (harap disesuaikan saja kodenya karena tidak semua templates sama)
4. Lalu copy pastekan kode di bawah ini persis berada di bawah kode tadi,

<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess", "always");
so.write("flashcontent");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Sebelum di save harap dipreview terlebih dahulu, jika sudah terlihat tag cloud comulusnya baru di save templates.
6. Untuk merubah tinggi dan lebar ubah tulisan yang berwarna merah, untuk merubah warna background ubah tulisan yang berwarna hijau, untuk merubah besar kecilny tulisan tag label ubah tulisan yang berwarna biru.

Note: Keberhasilan dari membuat Tag Cloud Comulus bergantung pada templates yang teman-teman gunakan. Untuk demonya saya menggunakan templates default bawaan blogspot (molotovcoketail by Tina Chen).

NB. Jika kode swf yang saya tandai berwarna pink tidak bisa bekerja secara baik, coba ganti dengan kode swf berikut ini: http://www.swfcabin.com/swf-files/1275932799.swf

Ok, seperti itulah Cara Membuat Tag Cloud Comulus [Label Berputar] di Blogspot, semoga bisa bermanfaat dan selamat mencoba. Salam.

Thanks To: Roy Tanck dan Amanda Fazani

Site Maintenance

2010-10-30T06:36:00.000-07:00

Eitss.. tenang saja, ini bukan pemberitahuan bahwa blog ini mengalami “Site Down for Maintenance”, melainkan hanya sharing bagaimana membuat blog dengan tampilan seakan-akan mengalami “Site Down”.

Ini hanya permainan CSS dengan penambahan gambar saja. Untuk melihat tampilan lebih jelas, silahkan lihat demo dibawah.

Live Demo

Berikut tutorial cara membuat tampilan site maintenance

1. Masuk ke "Rancangan - Edit HTML"
2. Tambahkan code berikut diatas kode ]]></b:skin>:

html {
  height: 100%;
  background: url(http://1.bp.blogspot.com/_sRfVKkqWX-M/TIEAKOIlsiI/AAAAAAAAAK4/vy6PxVzzGdg/s320/under+construction.jpg) no-repeat center 50%;
  margin: 0;
}
body {
  display: none;
}

¶ Catatan: Anda dapat mengganti gambar tersebut sesuai selera.
3. Simpan template.

Kesimpulan

Ini adalah cara yang cepat untuk membuat tampilan pesan site down. Kelemahan dari teknik ini adalah bahwa untuk orang yang mendisable gambar dan css, ini tidak akan bekerja dengan baik.

Sumber gambar: iStockphoto.com

Membuat Menu Atraktif dengan Thumbnail

2010-10-30T06:30:00.000-07:00

Selain dengan teks, menu bisa pula berupa gambar. Dalam tutorial ini kita akan membuat menu yang menampilkan thumbnail sebagai permalink. Dengan sedikit menggunakan javascript kita dapat membikin efek animasi ataktif yaitu ketika mouse dilewatkan diatas thumbnail secara otomatis thumbnail akan membesar.

Membuat HTML

Langkah pertama adalah membuat framework HTML untuk setiap item, dan berikut ini contohnya.

<div id="menuwrapper">
 <div id="menu">
  <a href="#" class="menuitem"><img src="image.jpg"></a><!--Template untuk setiap item-->
 </div>
</div>

CSS untuk Mengatur Tampilan

CSS disini untuk mengatur posisi dari thumbnail masing-masing item agar posisi bagian bawahnya tetap meski ukuran thumbnail membesar.

#menuwrapper {
     position : relative;
     height : 210px;
}

#menu {
     position : absolute;
     bottom : 0;
}

.menuitem {
     position : fixed relative;
     bottom : 0px;
     display : inline-block;
}

jQuery untuk Memberi Efek Animasi

Seperti berikut jQuery yang kita butuhkan.

$(document).ready(function(){
 $('.menuitem img').animate({width: 100}, 0); //membuat thumbnail menjadi lebih kecil

 $('.menuitem').mouseover(function(){

  gridimage = $(this).find('img');
  gridimage.stop().animate({width: 200}, 150); //gambar thumbnail mengembang menjadi sesuai sebenarnya

 }).mouseout(function(){

  gridimage.stop().animate({width: 100}, 150); //gambar thumbnail kembali mengecil

 });
});

jQuery pada contoh diatas mempunyai dua fungsi:

Membuat ukuran thumbnail menjadi lebih kecil dari ukuran aslinya ketika halaman pertama kali dimuat.
Memberi efek animasi dengan mengembalikan gambar kembali ke ukuran sebenarnya ketika mouse kita lewatkan diatasnya.

Mengatasi Masalah Skala Gambar di Internet Explorer

IE memang sering bermasalah dengan CSS,termasuk untuk skala gambar yang kita buat. Cara mengatasinya mudah, tinggal kopi kode css berikut dan paste pada style.

img { -ms-interpolation-mode: bicubic; }

Demo dari trik ini bisa kamu lihat dengan link dibawah.

Membuat animasi saat tersentuh mouse dengan jQuery

2010-10-30T06:10:00.000-07:00

Membuat box drop bisa digunakan sebagai konten tambahan pada blog atau web yang biasanya pada tampilan awal tidak mempunyai banyak space untuk ditampilkan maupun hanya untuk mempercantik web/blog. Untuk membuatnya bisa didapatkan dengan memanfaatkan tag html seperti div, ul, li, dsb. Pada contoh ini akan digunakan div sebagai tagnya hanya tinggal memodifikasinya dengan memberikan pengaturan style pada css.

Langkah pertama adalah menambahkan jQuery code untuk diload kehalaman, pakai dari google saja karena seperti yang kita tahu server mereka sangat baik, jadi biar cepat loadnya. Taruh line code berikut diantara <head>disini</head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Langkah selanjutnya saya akan buat div sebagai container, div ini mewakili container atau wrapper, jadi anggap saja sebagai dummy blog target, hasilnya seperti dibawah ini.

div container

HTML div container:

<div id="demo_container">
<hr />div container
</div>

CSS div container:

#demo_container {
width:500px;
height:150px;
background:#a6b0b2;
border:2px solid #000;
text-align:center;
overflow: hidden;
}

Oke, dari sini selanjutnya tinggal mengkonsep bagaimana arah jatuhnya div box tersebut dan berapa tingginya. Jika melihat dari code HTML dan CSS diatas, ada tag <hr /> itu berfungsi hanya untuk peraba saja, agar tahu bagaimana nanti respon dari konten yang ada pada demo_container, sedangkan ukuran container mempunyai tinggi 150 pixel dan lebar 500 pixel, jadi konsep drop box akan dibuat lebar 400 pixel pada posisi tengah dengan tinggi 15 pixel saat normal dan 80 pixel saat tersentuh mouse.

HTML div container & drop

<div id="demo_container">
<div id="drop_box">
Halo, ini adalah content drop box!<br/>
Rencana mau digunakan untuk apa?<br/>
Apapun itu, yang penting saya membuatnya dulu deh : )
<div id="demo_sentuh_aja">sentuh aja</div>
</div>
<hr />div container</div>

CSS div container & drop

#demo_container {
width:500px;
height:150px;
background:#a6b0b2;
border:2px solid #000;
text-align:center;
overflow:hidden;
}
#drop_box {
width:400px;
height:80px;
margin:-65px auto 0px auto;
background:#eee;
border:1px solid #000;
padding:5px 5px 0px 5px;
}
#demo_sentuh_aja {
height: 10px;
text-align:right;
}

Jika dilihat dari CSS untuk style #drop_box, saya hanya bermain-main dengan ukuran minus dan plus saja yang nanti di konekkan dengan javascript jQuery untuk animasinya.
Selanjutnya mari kita tambahkan javascript jQuery untuk mengaktifkan fungsinya.

jQuery animasi div

<script language="javascript">
$(document).ready(function() {

$('div#drop_box').hover(function() {
$(this).stop().animate({ marginTop: 0 }, 'slow');
}, function() {
$(this).stop().animate({ marginTop: -65 }, 'slow');
});

});
</script>

Moga Bermanfaaf

Membuat ToolTip dengan JQuery

2010-10-30T05:25:00.000-07:00

Apa itu tooltip? Mengapa tooltip diperlukan? Bagaimana membuat tooltip? Di mana rumahnya tooltip? Penulis akan jelaskan semuanya tapi tidak termasuk pertanyaan yang terakhir, karena ini merupakan pertanyaan yang tidak akan penulis jelaskan jawabannya. Tooltip sendiri dibuat biasanya menggunakan javascript, dan sekarang penulis akan menjelaskannya dengan menggunakan jquery.

Okeh… … (Maaf, terkadang memang penulis sedikit telat dalam ketawa) Sebelum masuk ke dalam penjelasan, silahkan terlebih dahulu lihat demonya di sini. Bagaimana ?? Begitulah tooltip.

Mari kita siapkan terlebih dahulu sebuah file html, penulis berikan namanya tooltip.html, di bagian bodynya di isi seperti ini …

<div id=”container”>
<a href=”#”><strong>3</strong>
<div><p>Ada apa dibalik tahun 3 Maret 1924? Kehancuran  Persatuan, yang menimbulkan bencana dahsyat sepanjang sejarah  manusia.</p>
</div></a>
<a href=”#”><strong>Maret</strong>
<div><p>Sebuah institusi yang mempersatukan manusia dari  berbagai ras, institusi yang mempersatukan manusia dari berbagai agama,  dipecah-pecah oleh para perusak yang rakus harta</p>
</div></a>
<a href=”#”><strong>1924</strong>
<div><p>Namun akan kembali lagi dalam waktu dekat, institusi  yang berisi orang-orang yang ikhlas, yang menghormati agama yang lain,  yang menjaga hak rakyatnya, yang memakmurkan rakyatnya dan tidak  membedakan agama , yang mempersatukan semua ras di dunia, sebuah sistem,  <strong>Al-Khilafah Al Islamiyah</strong></p>
</div></a>
</div>

kemudian di bagian headnya tambahkan style seperti ini :

<style type=”text/css”>
body{
margin-top:50px;
}
.tooltip{
border:1px solid #dfdfdf;
background-color: #111;
width:300px;
height:auto;
padding:10px 10px 20px 10px;
display:none;
position:absolute;
-moz-border-radius:9px;
font-size:12px;
color: #fff;
}
a.link{
font-weight:normal;
width:autopx;
height:autopx;
padding:25px 20px 20px 20px;
border:3px solid #111;
text-decoration:none;
color: #fff;
background-color: #ff8000;
font-family: arial;
margin-left:20px;
-moz-border-radius:9px;
}
a.link strong{
font-size:30px;
}
a.link div.tooltip strong{
font-size:11px;
}
</style>

kemudian yang terakhir letakan dibagian headnya yaitu jquery library, dan script untuk membuat tooltip …

<script type=”text/javascript”  src=”jquery-1.4.js”></script>
<script type=”text/javascript”>
$(function(){
$(“#container a” ).hover(function(){
$(this).children(“#container a.link div.tooltip” ).fadeIn();
}, function(e){
$(this).children(“#container a.link div.tooltip” ).hide();
});
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’,  e.pageY+15).css(‘left’, e.pageX+15);
});
});
</script>

Inti yang terjadi adalah, ketika linknya di sorot
$(“#container a” ).hover(function(){
tampilkan anak dari linknya
$(this).children(“#container a.link div.tooltip” ).fadeIn();
dan jika mousenya pindah-pindah, maka gerakan anak dari linknya
$(“#container a” ).mousemove(function(e){
$(this).children(“#container a.link div.tooltip” ).css(‘top’, e.pageY+15).css(‘left’, e.pageX+15);

Selesai sudah. Silahkan scriptnya di download disini http://www.ilmuwebsite.com/file_tutorial/jquery2/jquery-tooltip-ilmuwebsite.com.zip

Daftar isi dan Accordion untuk Blogger

2010-10-30T02:57:00.000-07:00

Biasanya kita memiliki begitu banyak posting di blog kita dan jika kita menggunakan TOC itu akan sangat panjang. Jika kita memiliki TOC sangat panjang, itu membuat pengunjung sulit untuk membaca posting kita. Untuk membuatnya mudah dibaca saya membuat modifikasi dari script sebelumnya Tabel Isi untuk gaya Blogger baru dan saya menggunakan Accordion.Fitur dari script ini:

   1. Efek Accordion
   2. Menampilkan dan menyembunyikan efek
   3. CSS 3
   4. Otomatis tambahkan jquery
   5. Warna yang berbeda untuk konten
   6. Gaya yang berbeda untuk membuka dan menutup
   7. Auto Urutkan judul
   8. Tambahkan Baru! selama 10 entry terbaru
Cara menggunakan sangat mudah. Buat Static Page.Masukkan script dalam mode Html :

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js"></script>
<script src="http://www.oblo.web.id/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript"></script>

ganti www.oblo.web.id with your blog name

Demo

gambar Berikut adalah cara membuat halaman di blogger.

Menu Horizontal Multi Level Menggunakan jQuery & PHP

2010-10-28T05:24:00.000-07:00

Di dalam sebuah website, seringkali kita menemukan penggunaan menu bertingkat seperti pada gambar di atas. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas.

Berikut ini adalah contoh struktur html menu yang terdiri dari 3 level (menggunakan tag html <ul> dan <li>):

<ul>
    <li><a href="menu1.html">Menu 1</a></li>
    <li><a href="menu2.html">Menu 2</a></li>
    <li><a href="menu3.html">Menu 3</a>
        <ul>
            <li><a href="menu31.html">Sub Menu 3.1</a></li>
            <li><a href="menu32.html">Sub Menu 3.2</a>
                <ul>
                    <li><a href="menu321.html">Sub Menu 3.2.1</a></li>
                    <li><a href="menu322.html">Sub Menu 3.2.2</a></li>
                    <li><a href="menu323.html">Sub Menu 3.2.3</a></li>
                </ul>
            </li>
            <li><a href="menu33.html">Sub Menu 3.3</a></li>
        </ul>
    </li>
    <li><a href="menu4.html">Menu 4</a></li>
</ul>

Kode html tersebut akan menghasilkan tampilan seperti ini:

Dengan menggunakan jquery dan plugin jquerycssmenu, menu tersebut bisa kita ubah menjadi sebuah menu dropdown yang lebih menghemat tempat. Tinggal tambahkan script berikut ini di dalam head:

<link rel="stylesheet" type="text/css" href="jquerycssmenu.css" />
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquerycssmenu.js"></script>

Membuat menu dinamis dari database

Untuk membuat menu secara dinamis, kita bisa menggunakan database untuk menyimpan data menunya. Di bawah ini adalah struktur tabel untuk menyimpan menu:

CREATE TABLE `menu` (
  `id` tinyint(3) UNSIGNED NOT NULL AUTO_INCREMENT,
  `parent_id` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
  `title` varchar(100) NOT NULL DEFAULT '',
  `url` varchar(100) NOT NULL DEFAULT '',
  `menu_order` tinyint(3) UNSIGNED NOT NULL DEFAULT '0',
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

Kemudian gunakan script php ini untuk membuat list secara dinamis dari database tersebut. Script ini menggunakan sebuah fungsi rekursif untuk mengambil menu sampai ke level tak terbatas.

<?php
function get_menu($data, $parent = 0) {
 static $i = 1;
 $tab = str_repeat("\t\t", $i);
 if (isset($data[$parent])) {
  $html = "\n$tab<ul>";
  $i++;
  foreach ($data[$parent] as $v) {
   $child = get_menu($data, $v->id);
   $html .= "\n\t$tab<li>";
   $html .= '<a href="'.$v->url.'">'.$v->title.'</a>';
   if ($child) {
    $i--;
    $html .= $child;
    $html .= "\n\t$tab";
   }
   $html .= '</li>';
  }
  $html .= "\n$tab</ul>";
  return $html;
 } else {
  return false;
 }
}
 
mysql_connect('localhost', 'root', '');
mysql_select_db('tes');
 
$result = mysql_query("SELECT * FROM menu ORDER BY menu_order");
while ($row = mysql_fetch_object($result)) {
 $data[$row->parent_id][] = $row;
}
 
$menu = get_menu($data);
?>

Lihat demonya di sini

Download script ini:

Horizontal Scrolling Menu dibuat dengan CSS dan jQuery

2010-10-28T04:47:00.000-07:00

Ada banyak menu bergulir flash keren di luar sana, tapi aku memutuskan untuk membuat menu sama mencari hanya dengan CSS dan jQuery. Aku tidak dapat mencapai kelancaran sama dalam animasi, tapi tetap aku benar-benar puas dengan hasilnya. menu saya bekerja baik di semua browser utama dan degradasi anggun ketika Javascript dimatikan.

Jika anda membutuhkan versi vertikal menu bergulir, silakan kunjungi tutorial baru saya.

Lihat Hasil

Membuat markup

Mari kita mulai dengan membuat struktur HTML yang diperlukan. Kita akan menggunakan daftar unordered dengan masing-masing item daftar berisi gambar dan keterangan. Kami juga akan menambahkan elemen wrapper tambahan.

<div class="sc_menu">
  <ul class="sc_menu">
    <li><a href="#">
      <img src="img/1.jpg" alt="Menu"/><span>Menu</span>
    </a></li>
    <li><a href="#">
      <img src="img/2.jpg" alt="Navigation"/><span>Navigation</span>
    </a></li>
    <li><a href="#">
      <img src="img/3.jpg" alt="Scrolling"/><span>Scrolling</span>
    </a></li>
    <li><a href="#">
      <img src="img/4.jpg" alt="jQuery"/><span>jQuery</span>
    </a></li>
  </ul>
</div>

Menambahkan styling dasar

Sekarang kita perlu menambahkan beberapa beberapa aturan CSS.

div.sc_menu {
  /* Set it so we could calculate the offsetLeft */
  position: relative;
  height: 145px;
  width: 500px;
  /* Add scroll-bars */
  overflow: auto;
}
ul.sc_menu {
  display: block;
  height: 110px;
  /* Max width here, for users without Javascript */
  width: 1500px;
  padding: 15px 0 0 15px;
  /* Remove default margin */
  margin: 0;
  background: url('navigation.png');
  list-style: none;
}
.sc_menu li {
  display: block;
  float: left;
  padding: 0 4px;
}
.sc_menu a {
  display: block;
  text-decoration: none;
}
.sc_menu span {
  /* We want a caption to display on the next line */
  display: block;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

"lebar" dan "overflow" properti yang digunakan untuk menambah sebuah bar-gulir ke wrapper div. Kami mengatur "posisi" properti untuk perhitungan offset lebih mudah dengan Javascipt. Jangan lupa bahwa offset selalu dihitung relatif terhadap posisi orangtua. Anda dapat melihat apa yang telah kami lakukan sejauh ini di sini

Menambahkan efek hover dan perbatasan

"display: none" menyembunyikan properti keterangan, dan kami akan menambahkan "display: block" untuk ": hover" aturan untuk menunjukkan mereka ketika mouse di atas gambar.
The "-webkit-border-radius" dan "-moz-border-radius" properti menambahkan sudut dibulatkan untuk Firefox, Safari dan Chrome. Sayangnya, Internet Explorer tidak mendukung dan akan menampilkan sudut biasa sebagai gantinya.
Begitulah menu akan terlihat jika Javascript dinonaktifkan.

.sc_menu span {
  display: none;
  margin-top: 3px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}
.sc_menu a:hover span {
  display: block;
}
.sc_menu img {
  border: 3px #fff solid;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
}
.sc_menu a:hover img {
  filter:alpha(opacity=50);
  opacity: 0.5;
}

jQuery

Kami akan perlu menambahkan jQuery untuk dokumen pertama kami. Saya menggunakan versi-host di Google API, karena sering sudah tersimpan dalam cache browser yang terasa mengurangi waktu load halaman.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

Berikut adalah apa yang harus Anda tahu untuk memahami kode:

$ () Adalah singkatan untuk $ (dokumen) yang siap (.), Fungsi jQuery yang paling umum digunakan. Hal ini memungkinkan Anda untuk mengikat fungsi yang akan dijalankan ketika dokumen DOM telah selesai loading.

$(function(){
  // Your code here
});

Kami akan menggunakan "mousemove" Acara untuk mengikat fungsi yang akan ditembakkan saat mouse digerakkan di atas menu.
The "ul.width ()" tidak mengembalikan lebar sesungguhnya dari semua gambar, karena kita telah menetapkan daftar unordered lebar dengan CSS untuk membuat semua gambar yang ditampilkan dalam 1 baris. Kita bisa mendapatkan lebar lebar sebenarnya menambahkan daftar item terakhir untuk itu kiri offset.
Kami akan menggunakan "lastLi [0]" untuk mendapatkan elemen DOM dari koleksi jQuery dan "offsetLeft" untuk mendapatkan posisi tepi kiri atas item daftar relatif untuk wrapper div.
Acara's "pageX" atribut mengembalikan horizontal koordinat mouse relatif terhadap dokumen, tetapi kita perlu posisi relatif terhadap div wrapper, jadi kita akan mengurangi "div.offset (). Kiri" dari itu.
Daftar harus gulir lebih cepat daripada mouse digerakkan untuk membuat yang kita gunakan "(ulWidth-divWidth) / divWidth" proporsi.
Berikut adalah Javascript yang:

$(function(){
    //Get our elements for faster access and set overlay width
    var div = $('div.sc_menu'),
                 ul = $('ul.sc_menu'),
                 // unordered list's left margin
                 ulPadding = 15;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

      //As images are loaded ul width increases,
      //so we recalculate it each time
      var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;

      var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });
});

Kita sudah selesai! Anda sekarang dapat melihat hasil akhir.

Cara Membuat Menu Horizontal Ala CNN.com Di Blog

2010-10-28T04:32:00.000-07:00

Ketika CNN.com baru-baru ini didesain ulang situs web mereka, mereka membuat bagian header yang tepatnya menu horizontal yang sangat indah, dan itu dilakukan dengan murni menggunakan CSS. Saya rasa ini sangat bagus apabila menu horizontal ini di terapkan pada blog/blogger, apalagi blog yang mencangkup blog berita dengan menggunakan template magazine. Silahkan lihat demo dibawah.

Live Demo

Untuk membuatnya kita tidak pelu menggunakan javaScript, ini 100% menggunakan CSS.
1. Login ke blogger » layout / tata letak » edit HTML
2. Masukan CSS dibawah sebelum kode ]]></b:skin>:

#navigation {  
     list-style: none;  
     background: #b60002;  
     overflow: hidden;  
     width: 922px;  
 } 
#navigation li {
 float: left;
 border-right: solid 1px #ca0002;
 height: 35px;
}
#navigation li a:link, #navigation li a:visited {
 text-decoration: none;
 display: block;
 height: 35px;
 color: #fff;
 line-height: 35px;
 padding: 0 9px 0 9px;
 border-right: solid 1px #990000;
 font-family: Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
}
#navigation li a:hover {
 background: #990000;
 color: #fff;
 list-style: none;
}
#navigation li.first {
 border-left: solid 1px #ca0002;
}

3. Dan ini adalah code HTML-nya.

<ul id="navigation">
 <li class="first"><a href="#">Home</a></li>
 <li><a href="#">Video</a></li>
 <li><a href="#">NewsPulse</a></li>
 <li><a href="#">U.S.</a></li>
 <li><a href="#">World</a></li>
 <li><a href="#">Politics</a></li>
 <li><a href="#">Justice</a></li>
 <li><a href="#">Entertainment</a></li>
 <li><a href="#">Tech</a></li>
 <li><a href="#">Health</a></li>
 <li><a href="#">Living</a></li>
 <li><a href="#">Travel</a></li>
 <li><a href="#">Opinion</a></li>
 <li><a href="#">iReport</a></li>
 <li><a href="#">Money</a></li>
 <li><a href="#">Sports</a></li>
</ul>

4. Simpan template.
§ catatan:
- Untuk code CSS bisa anda rubah warnanya sesuai keinginan.
- Untuk code HTML simpan dan sesuaikan dengan template anda masing-masing.

Sumber artikel:

¶ Recreating CNN’s Beveled Navigation Buttons with Pure CSS - Impressive Webs

Membuat Menu Horizontal

2010-10-28T03:42:00.001-07:00

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kita akan mengulas trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog kamu.

Singkat kata, berikut langkah membuat menu horizontal dalam blog kamu :

Login ke account blogger kamu.
Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

Cari Kode kode ]]></b:skin> dan Copy-Paste (copas) kode berikut di atasnya.

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

/* navbar
================== */

#bg_nav {
background: #ffffff;
width: 850px;
height: 29px;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
color: #000000;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-top: 1px solid #000000;
border-bottom: 1px solid #ffffff;
overflow: hidden;
}
#bg_nav a, #bg_nav a:visited {
color: #000000;
font-size: 11px;
text-decoration: none;
text-transform: uppercase;
padding: 0px 0px 0px 3px;
}

#bg_nav a:hover {
color: #000000;
text-decoration: underline;
padding: 0px 0px 0px 3px;
}

#navleft {
width: 500px;
float: left;
margin: 0px;
padding: 0px;
}
#navright {
width: 220px;
font-size: 11px;
float: right;
margin: 0px;
padding: 3px 5px 0px 0px;
}
#navright a img {
border: none;
margin: 0px;
padding: 3px 5px 0px 0px;
}

#nav {
margin: 0px;
padding: 0px;
list-style: none;
}
#nav ul {
margin: 0px;
padding: 0px;
list-style: none;
}

#nav a, #nav a:visited {
background: #ffffff;
color: #000000;
display: block;
font-weight: bold;
margin: 0px;
padding: 8px 15px 8px 15px;
border-left: 1px solid #ffffff;
}
#nav a:hover {
background: #c06000;
color: #000000;
margin: 0px;
padding: 8px 15px 8px 15px;
text-decoration: none;
}

#nav li {
float: left;
margin: 0px;
padding: 0px;
}
#nav li li {
float: left;
margin: 0px;
padding: 0px;
width: 150px;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #ffffff;
width: 160px;
float: none;
margin: 0px;
padding: 7px 30px 7px 10px;
border-bottom: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #ffffff;
}
#nav li li a:hover, #nav li li a:active {
background: #c06000;
padding: 7px 30px 7px 10px;
}

#nav li ul {
position: absolute;
width: 10em;
left: -999em;
}

#nav li:hover ul {
left: auto;
display: block;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}

Catatan :

Agar menu horizontal sesuai dengan template blog, kamu perlu mengganti kode-kode yang berwarna hijau dan merah.
Khusus untuk kode yang berwarna hijau, sangat penting disesuaikan dengan lebar blog kamu.

Kemudian cari kembali kode seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>

Copas kode berikut tepat di bawah kode yang berwarna hijau atau berwarna merah (sesuaikan dengan template blog kamu).

<div id='bg_nav'>

<div id='navleft'>
<div id='nav'>
<ul>
<li><a href='http://Alamat_Blog_Kamu.blogspot.com/'>home</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
<li><a href='http://Link_yang_dituju'>Add Link</a></li>
</ul>
</div>
</div>

<div id='navright'>

<form action='http://Alamat_Blog_Kamu.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>

Jangan lupa disimpan

Cara Membuat Menu Horizontal Dropdown di Blogspot

2010-10-28T03:30:00.000-07:00

Menu horizontal dropdown di blogspot harus kita buat secara manual. Meskipun pada "perancang tempate" yang disediakan oleh blogspot juga sudah memungkinkan membuat menu horizontal, yaitu menggunakan fitur laman, tapi tetap saja harus di edit secara manual agar dapat menjadi menu horizontal dropdown. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal. (bertele-telenya kepanjangan ya? hihihi)

Berikut cara membuat menu horizontal dropdown di blogspot :

1. Silahkan masuk dengan akun blogger sobat

2. Setelah itu menuju ke halaman "edit HTML" ("Expand Template Widget" tidak usah dicentang). Jangan lupa untuk mem-backup templatenya.

3. Cari Kode ]]></b:skin> (gunakan CTRL + F atau F3 pada Keyboard sobat) Kemudian Pastekan kode CSS berikut ini tepat di atasnya.

#subnavbar {
            background: #666;
            width: 960px;
            height: 26px;
            color: #FFF;
            margin: 0;
            padding: 0;
}
#subnav {
            margin: 0;
            padding: 0;
}
#subnav ul {
            float: left;
            list-style: none;
            margin: 0;
            padding: 0;
}
#subnav li {
            list-style: none;
            margin: 0;
            padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
            color: #FFF;
            display: block;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            margin: 0 5px 0 0;
            padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
            background: #888;
            color: #FFF;
            display: block;
            text-decoration: none;
            margin: 0 5px 0 0;
            padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
            background: #666;
            width: 140px;
            float: none;
            margin: 0;
            padding: 6px 10px;
            border-bottom: 1px solid #FFF;
            border-left: 1px solid #FFF;
            border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
            background: #888;
            margin: 0;
            padding: 6px 10px;
}
#subnav li {
            float: left;
            padding: 0;
}
#subnav li ul {
            z-index: 9999;
            position: absolute;
            left: -999em;
            height: auto;
            width: 160px;
            margin: 0;
            padding: 0;
}
#subnav li ul a {
            width: 140px;
}
#subnav li ul ul {
            margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
            left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
            left: auto;
}
#subnav li:hover, #subnav li.sfhover {
            position: static;
}

4. Setelah itu, cari kode di bawah ini

<b:widget id='Header1' locked='true' title='Blog Demo (Header)' type='Header'/>
</b:section>

Keterangan:
Yang penting dicari adalah kode warna hijau. Sementara yang berwarna merah adalah nama blog tempatku menguji coba (semacam laboratorium, heuuuuu hohoho).
Pastekan Kode berikut tepat di bawah kode yang berwarna kuning (yaitu kode</b:section>).

<div id='subnavbar'>
      <ul id='subnav'>
<li>
<a href='#'>Home</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/07/perpustakaan-online-poenjakoe-soe86.html'>about</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/05/contact.html'>Kontak</a>
</li>
</ul>
</li>
<li>
<a href='#'>DAFTAR ISI</a>
</li>
<li>
<a href='#'>Antropologis</a>
<ul>
<li>
<a href='#'>Mengenal Antropologi</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/Konsep-Konsep%20dalam%20Antropologi'>Konsep-Konsep</a>
</li>
</ul>
</li>
<li>
<a href='#'>Teori Antropologi</a>
<ul>
<li>
<a href='#'>Teori Klasik</a>
</li>
<li>
<a href='#'>Teori Modernis</a>
</li>
<li>
<a href='#'>Teori Posmodernis</a>
</li>
</ul>
</li>
<li>
<a href='#'>Metodologi Penelitian</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/Metode%20Penelitian%20Kualitatif'>Metode Penelitian Kualitatif</a>
</li>
<li>
<a href='#'>Metode Penelitian Kuantitatif</a>
</li>
</ul>
</li>
<li>
<a href='#'>Etnografi</a>
<ul>
<li>
<a href='#'>Mengenal Etnografi</a>
</li>
<li>
<a href='#'>Etnografi (Hasil Penelitian)</a>
</li>
</ul>
</li>
<li>
<a href='#'>My Reading List</a>
<ul>
<li>
<a href='http://en.wikipedia.org/wiki/Gender' target='_blank'>Gender</a>
</li>
<li>
<a href='http://en.wikipedia.org/wiki/Feminism' target='_blank'>Feminism</a>
</li>
<li>
<a href='http://www.lifepositive.com/body/nature/environmental.asp' target='_blank'>Nature - Earth crusader</a>
</li>
<li>
<a href='http://en.wikipedia.org/wiki/Ecofeminism' target='_blank'>Ecofeminism</a>
</li>
</ul>
</li>
<li>
<a href='#'>Figure</a>
<ul>
<li>
<a href='http://www.unep.org/women_env/w_details.asp?w_id=107' target='_blank'>Vandana Shiva</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/Parsudi%20Suparlan'>Parsudi Suparlan</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Tips-Tips</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/07/belajar-otodidak.html'>belajar otodidak</a>
</li>
<li>
<a href='#'>tips blogger</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog' target='_blank'>Tahap Awal Membuat Blog</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging' target='_blank'>Tahap Lanjutan dalam Bloging</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging' target='_blank'>Tahap Profesional dalam Bloging</a>
</li>
</ul>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/F.%20Tips%20Internet%20Murah'>internet murah</a>
</li>
</ul>
</li>
<li>
<a href='#'>Download Gratis</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-literatur-antropologi-1.html'>Literatur Antropologi</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/pusat-download-gratis-di-sini.html'>Software / Aplikasi</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-novel-1.html'>Novel</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-masalah-kebidanan.html'>Kebidanan</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/Trik%20Mendownload'>Trik Mendownload</a>
</li>
</ul>
</li>
<li>
<a href='#'>BLOG SAHABAT</a>
<ul>
<li>
<a href='http://t4belajarblogger.blogspot.com/' target='_blank'>T4 Belajar Blog</a>
</li>
<li>
<a href='http://wawanwae.blogspot.com/' target='_blank'>Blogtainment</a>
</li>
<li>
<a href='http://azgi.blogspot.com/2010/05/koreksi-error-pada-kotak-komentar.html' target='_blank'>Sunda Priangan</a>
</li>
<li>
<a href='http://jurnalkita-indonesiana.blogspot.com/' target='_blank'>Komunitas Penulis Muda</a>
</li>
<li>
<a href='http://human-fisip-unhas.blogspot.com/' target='_blank'>HUMAN FISIP UH</a>
</li>
</ul>
</li>
</ul>
</div>

Nah, langkah terakhir adalah menyimpan templatenya. Silahkan lihat contoh hasilnya di sini
Menu yang sobat copy tersebut masih seperti menu pada blogku ini, makanya lakukan pengeditan sesuai blog dan keinginan sobat. Semoga bermanfaat....

Horizontal Menu Navigasi

2010-10-28T03:27:00.000-07:00

Nah tutor kali ini kita mencoba membuat menu navigasi yang sebenarnya meminjam salah satu widget dari bawaan standar blogger. Dengan sedikit sentuhan pada CSS, widget Linklist yang semula banyak digunakan sebagai blogroll secara vertikal akan kita modifikasi menjadi menu navigasi secara horizontal. Ya sudah, dari pada saya cuap2 gak jelas langsung ke cara pembuatan aja ya :)

Pertama masuk halaman Edit HTML, kemudian copi-paste semua kode CSS dibawah ini lalu letakan diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#222; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:600px}
#nav-right{float:right; display:inline; width:100px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Arial,Helvetica,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

/*-- (Search) --*/
#search{background:#f9f9f9 url(http://oom.blog.googlepages.com/search.gif) 6px 2px no-repeat; -moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px; border:1px solid #b3b3b3; float:right; height:25px; margin:0 0px 0 0; width:180px}
* html #search{margin-right:8px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 27px; width:140px}

Masih pada halaman Edit HTML kemudian cari kode <div id='outer-wrapper'><div id='wrap2'> biasanya kode ini terletak di bawah html tag <body> kemudian copi-paste semua kode dibawah ini, dan letakan kodenya dibawah kode warna hijau diatas.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML3' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form expr:action='data:blog.homepageUrl + "search"' id='searchform' method='get' name='searchform'>
<b:if cond='data:title'/>
<div id='search'>
<input class='s' id='s' name='q' onblur='if (this.value == '') {this.value = 'Cari artikel disini';}' onfocus='if (this.value == 'Cari artikel disini') {this.value = '';}' type='text' value='Cari artikel disini'/>
<input id='searchsubmit' type='hidden' value='Search'/>
<data:content/>
</div>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Silahkan disimpan dan lihat hasilnya. oh hampir lupa..rekan bisa menyesuaikan warna latar dan textnya sendiri ya :)

Untuk menambah menu, silahkan buka kembali "Elemen Halaman" kemudian perhatikan widget paling atas, disitu sudah terlihat witget baru dengan title "Top Tabs" silahkan klik edit dan tambahkan menu yang ingin ditampilkan. Selamat Mencoba :)

Auto Read More

2010-10-27T20:34:00.000-07:00

Lama-kelamaan males juga kalau tiap posting harus memotong postingan untuk read more. Apalagi kalau terjadi kesalahan html, tambah bingung memperbaikinya, ngomongin apaan sih? itu lho cara membuat Read More yang pernah kun posting dulu. Ternyata cara itu sama sekali gak praktis. Lalu iseng-iseng aku googling dengan keyword "membuat auto read more" dan nyasar ke blognya o-om Di situ ada cara untuk membuat auto read more atau read more otomatis. Buat yang udah terlanjur pake read more lama kembaliin dulu templatemu seperti semula ,caranyapada menu dashdoard pilih tata letak -> edit html
hapus dulu kode berwarna merah di templatemu.

bagi yang belum pasang langsung ke tahap kedua!!!

<div class='post-header-line-1'/>
<div class='post-body'>

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'>Readmore</a>
</b:if>
<div style='clear: both;'/>

ingat semua template berbeda pokoknya tinggal sesuaikan aja!
kalau udah paste kode di bawah ini

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

TAHAP KEDUA
Paste kode di bawah ini diatas kode </head> supaya gampang tekan F3 atau Ctrl+F

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Ganti kode <data:post.body/> dengan kode di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

kalau sudah tinggal simpan templatenya.
Apa aja yang bisa dirubah?:

var thumbnail_mode = "float"; (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Semoga Berhasil

Free Blogger Template Generator

2010-10-27T19:47:00.000-07:00

Banyak Orang bilang kalau membuat template itu susah,Kita “diwajibkan” untuk memahami bahasa pemograman seperti HTML,XML,CSS,PHP atau yang lainnya.tapi sebenarnya tidak begitu,jika kita lebih teliti lagi kita dapat ngedesain template kita sendiri tanpa bisa memahami seluk beluk bahasa pemograman,yaitu cukup dengan memakai Blogger Template Generator.

Anda dapat menggunakan layanan Template Generator pada salah satu situs penyedia layanan dibawah ini:,,,

1. Psycho – Psychogenesis
Dengan bantuan layanan ini,Kita dapat merancang sendiri template kita dari Header Sampai Footer tanpa harus mengerti bahasa pemograman,pilihan kolom yang disediakan oleh layanan ini juga beragam,mulai dari yang 1 kolom sampai yang 5 kolom.kita hanya perlu melakukan beberapa settingan yang disediakan.

*Buat template mu dalam waktu kurang dari 10 menit
* Desain template mu tanpa harus menguasai bahasa pemograman
* Modifikasi templatemu semudah membuat Blog
* Sepenuhnya Gratis

2. Pimp My Profile
Template Generator yang satu ini telah menyediakan fasilitas yang dapat dipilih untuk membuat blog.kita dapat dengan luluasa men desain template yang kita inginkan

3. Page Colomn Layout Generator
Bahkan Template Generator yang satu ini telah menyediakan pilihan colomn yang dapat di pilih mulai dari 1 colomn sampai 5 colomn

4.Firdamatic
Template Generator yang satu ini telah menyediakan pilihan Colomn yaitu 2 colomn dan 3 colomn

5.Trix Blogspot Template Generator
TrixTG v1 sebuah Tool untuk membuat template Blogspot Anda sendiri. Antarmuka tidak sebagus yang Anda harapkan, tetapi fungsionalitas yang disediakan oleh generator template ini sangat bagus untuk menciptakan template berkualitas tinggi Blogs. Tidak mengharuskan Anda untuk mengetahui HTML coding. Anda hanya perlu memiliki sedikit kreativitas, sedikit imajinasi.

6.2 Colomns Blogger Layout Generator

7.3 Colomns Blogger Layout Generator

8.4 Colomns Blogger Layout Generator

9. 5 Colomns Blogger Layout Generator

Cara Membuat Tab View Menu

2010-10-27T19:07:00.000-07:00

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik – baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh…mantaabbbbb kita langsung ke TKP.

Silahkan login ke blogger dengan ID sobat tentunya.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>
<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i   = 0;
do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i    = 0;
do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
Setelah itu letakkan kode berikut di atas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br /> </div>
</div>
<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>
<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br /> </div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian Simpan.

Keterangan :

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba.

Navbar Animasi tanpa Flash (JQuery)

2010-10-27T15:05:00.000-07:00

Daripada berlama-lama, dan aku tau kalian dah gak sabar. Mending langsung aja ke tutorìal
Pertama langsung aja ke edit HTML pada template kamu!
Pastein kode CSS ini diatas ]]></b:skin>

.menu2 a {
padding: 14px 10px;
display: block;
color: #CCF2FF;
width: 100px;
text-decoration: none;
font-weight: bold;
background: url(http://1.bp.blogspot.com/_rJyl7MtUcdY/TACgQAQuBtI/AAAAAAAAAhk/DxFwObVAfvM/s320/akeg.png) no-repeat center center;
}
.menu2 li em {
font-weight: normal;
background: url(http://4.bp.blogspot.com/_QeR8kbaWhLU/S-ssv2cHXKI/AAAAAAAAAwo/oBcoHmjBu1c/s1600/black_arrow.png) no-repeat;
width: 180px;
height:35px;
position: absolute;
top: 10px;
left: -25px;
text-align: center;
color:#fff;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}

Kalo udah, install JQuery ini di template kamu! (paste di atas </head>)
(Kalo sebelumnya dah pernah instal lewati aja)

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js' type='text/javascript'/>

Lalu Paste script ini dibawah JQuery tadi

<script type='text/javascript'>
$(document).ready(function(){

$(".menu2 a").append("<em/>");

$(".menu2 a").hover(function() {
$(this).find("em").animate({opacity: "show", top: "-75"}, "slow");
var hoverText = $(this).attr("title");
$(this).find("em").text(hoverText);
}, function() {
$(this).find("em").animate({opacity: "hide", top: "-85"}, "fast");
});
});
</script>

Simpan dulu templatenya
Sekarang tinggal membuat menunya!
Kode HTMLnya sebagai berikut:

<ul class='menu2'>
<li>
<a href='#' title='Kata yang Muncul'>Link1</a>
</li>
<li>
<a href='#' title='Kata yang Muncul'>Link2</a>
</li>
<li>
<a href='#' title='Kata yang Muncul'>Link3</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link4</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link5</a>
</li>
<li>
<a href='#' target='blank' title='Kata yang Muncul'>Link6</a>
</li>
</ul>

Perhatikan beberapa kode yang bisa kamu ubah!

kode berwarna hijau adalah tujuan dari menu
warna merah adalah kata yang ingin dimunculkan
yang berwarna biru adalah tulisan pada menu

Ada 2 cara pemasangan yang bisa kamu lakukan
Via tambah gadget seperti biasa

Dari elemen halaman -> tambah gadget -> HTML/Javascript
Pastein kodenya disitu!
Simpan!
Supaya bagus, pindahin gadget tadi tepat dibawah header!
Pada beberapa template sering ditemui kasus sebuah gadget gak bisa diletakkan di bawah header
Jika kamu mengalami hal ini, klik spoiler ini untuk mengatasinya!
hapus kode kode locked='true' yang ada pada template kamu

Cara kedua adalah dengan menaruhnya di dalam elemen header pada template

Kode header kurang lebih:

<b:widget id='Header1' locked='true' title='JUDUL BLOG (Header)' type='Header'/>
</b:section>

Nah kode HTMLnya dipastein di BAWAH kode kuning
kalau sudah simpan templatenya!

Ditunggu lho komentarnya! semoga bermanfaat!!!!!

Memberikan Effect Lightbox Pada Gambar

2010-10-26T16:35:00.000-07:00

Bismillah ... Alhamdulillah sekarang saya akan menjelaskan cara memberi effetc light pada gambar. Untuk lebih jelasnya silahkan kalian perhatikan gambar berikut :

Lightbox untuk gambar ini mempunyai kelengkapan dengan adanya fitur sebagai berikut :

1. Tampil berdiri sendiri, Kalo dalam bahasa VB sering disebut ALways ON TOP
2. Adanya Button Next dan Prev untuk gambar lebih dari satu
3. Adanya Button CLOSE untuk menutup gambar

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

Untuk Membuatnya silahkan kalian ikuti tahap-tahap dibawah ini :

1. Login ke blogger kalian
2. Pilih Rancangan ---> EDIT HTML (centang expand template widget)
3. Sekarang simpan CSS berikut diatas kode ]]></b:skin>

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_Fm7TiIAusXk/TKAzmLsMrVI/AAAAAAAAABI/Xwqjr2RAwhs/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_Fm7TiIAusXk/TKAzmPM14CI/AAAAAAAAABE/MQlpAGatXcg/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

4. Kemudia simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/prototype.js' type='text/javascript'/>
<script src='http://www.lokeshdhakar.com/projects/lightbox2/js/scriptaculous.js?load=effects,builder' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/lightbox.js' type='text/javascript'/>

5. Simpan Template kalian

Nah... setelah kita berhasil menambahkan kode dalam template kita, sekarang waktunya untuk memasangkannya pada gambar. Untuk pemasangannya ada 2 cara yaitu:

1. Untuk Hanya 1 gambar silahkan tambahkan kode berikut

rel="lightbox"

contoh :

<a href="URL GAMBAR" rel="lightbox"><img src="URL GAMBAR" /></a>

2. Untuk Gambar lebih dari 1 silahkan tambahkan kode berikut

rel="lightbox[roadtrip]"

contoh :

<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR" /></a>
<a href="URL GAMBAR" rel="lightbox[roadtrip]"><img src="URL GAMBAR" /></a>

Alhamdulillah, postingan ini selesai saya buat dan semoga bermanfaat buat kalian. Terima kasih.

16 Style Vertical Menu For Blogger

2010-10-26T16:15:00.000-07:00

Berikut ini adalah 16 Style Vertical Menu

Kode :

<style>#z33sPR  ul { list-style: none; margin: 0; padding: 0; } #z33sPR img { border:  none; } #z33sPR { width: 200px; border-style: solid solid none solid;  border-color: #677D92; border-size: 1px; border-width: 1px; margin:  10px; } #z33sPR li a { height: 32px; font-family: Verdana, Arial,  Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;  background: #FFF; height: 24px; text-decoration: none; } #z33sPR li  a:link, #z33sPR li a:visited { color: #fff; display: block; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/z33sPR.gif);  padding: 8px 0 0 10px; } #z33sPR li a:hover, #z33sPR li #current {  color: #283A50; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/z33sPR.gif)  0 -32px; padding: 8px 0 0 10px; } #z33sPR li a:active { color: #283A50;  background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6YO033vI/AAAAAAAACpo/WkgKyq9Du-c/s800/z33sPR.gif)  0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sPR">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sG1  ul { list-style: none; margin: 0; padding: 0; } #z33sG1 img { border:  none; } #z33sG1 { width: 200px; border-style: solid solid none solid;  border-color: #94AA74; border-size: 1px; border-width: 1px; margin:  10px; } #z33sG1 li a { height: 32px; font-family: Verdana, Arial,  Helvetica, sans-serif; margin: 0; font-size: 10pt; font-weight: bold;  background: #FFF; height: 24px; text-decoration: none; } #z33sG1 li  a:link, #z33sG1 li a:visited { color: #5E7830; display: block;  background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/z33sG11.gif);  padding: 8px 0 0 10px; } #z33sG1 li a:hover, #z33sG1 li #current {  color: #26370A; background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/z33sG11.gif)  0 -32px; padding: 8px 0 0 10px; } #z33sG1 li a:active { color: #26370A;  background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze6WqpAYDI/AAAAAAAACpg/QVIqv0ABmSY/s800/z33sG11.gif)  0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sG1">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li><li><a  href="#5">Link5</a></li></ul></div>

Kode :

<style>#z33s2  ul { list-style: none; margin: 0; padding: 0; } #z33s2 img { border:  none; } #z33s2 { width: 200px; margin: 10px; border-style: solid solid  none solid; border-color: #D8D5D1; border-size: 1px; border-width: 1px; }  #z33s2 li a { height: 32px; font-family: Verdana, Arial, Helvetica,  sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:  #FFF; height: 24px; text-decoration: none; } #z33s2 li a:link, #z33s2 li  a:visited { color: #3688BA; display: block; background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-78iwjzI/s800/z33s2.gif);  padding: 8px 0 0 30px; } #z33s2 li a:hover { color: #3688BA;  background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze7rt53jHI/AAAAAAAACqw/hHM-78iwjzI/s800/z33s2.gif)  0 -32px; padding: 8px 0 0 32px; }</style><div id="z33s2">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sPink1  ul { list-style: none; margin: 0; padding: 0; } #z33sPink1 img {  border: none; } #z33sPink1 { width: 200px; margin: 10px; } #z33sPink1 li  a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;  margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:  24px; text-decoration: none; } #z33sPink1 li a:link, #z33sPink1 li  a:visited { color: #C7377D; display: block; background:  url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/z33sPink1.gif);  padding: 8px 0 0 10px; } #z33sPink1 li a:hover { color: #C7377D;  background:  url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze7_lAyz9I/AAAAAAAACsI/2kHgX_EVeow/s800/z33sPink1.gif)  0 -32px; padding: 8px 0 0 10px; }</style><div  id="z33sPink1"> <ul> <li><a href="#1">Link  1</a></li> <li><a href="#2">Link  2</a></li> <li><a href="#3">Link  3</a></li> <li><a href="#4">Link  4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sVr{border-bottom-width:  0;}#z33sVr ul{margin: 0;padding: 0;font: normal 90% 'Trebuchet MS',  'Lucida Grande', Arial, sans-serif;}#z33sVr a{display: block;padding:  3px 0;padding-left: 9px;width: 200px;text-decoration: none;color:  #333222;border-right:1px solid #000000;background-color:  #FBEC04;border-bottom: 1px solid #6A6731;border-left: 7px solid  #918C3B;}#z33sVr a:hover {background-color: #FAF6B9;border-left: 12px  solid #918C3B;width: 195px;}#z33sVr div.JudulNa{color:  white;border-bottom: 1px solid #053E66;padding: 5px 3px 5px  13px;background-color: black;width: 201px;font: bold 90% 'Trebuchet MS',  'Lucida Grande', Arial, sans-serif;}</style><br /><div  id="z33sVr"><div class="JudulNa">Contoh  1</div><ul><a href="#">Home</a><a  href="#">Link 1</a><a href="#">Link  2</a></ul><div class="JudulNa">Contoh  2</div><ul><a href="#">Link 3</a><a  href="#">Link 4</a><a href="#">Link 5</a><a  href="#">Link 6</a></ul></div>

Kode :

<style>#z33sBL1  ul { list-style: none; margin: 0; padding: 0; } #z33sBL1 img { border:  none; } #z33sBL1 { width: 200px; margin: 10px; } #z33sBL1 li a { height:  32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;  font-size: 10pt; font-weight: bold; background: #FFF; height: 24px;  text-decoration: none; } #z33sBL1 li a:link, #z33sBL1 li a:visited {  color: #4D4D4D; display: block; background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s800/z33sBL1.gif);  padding: 8px 0 0 10px; } #z33sBL1 li a:hover { color: #FF9834;  background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze76mVADoI/AAAAAAAACrw/wjRC9Z4jrP4/s800/z33sBL1.gif)  0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sBL1">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sBL2  ul { list-style: none; margin: 0; padding: 0; } #z33sBL2 img { border:  none; } #z33sBL2 { width: 200px; margin: 10px; } #z33sBL2 li a { height:  32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;  font-size: 10pt; font-weight: bold; background: #FFF; height: 24px;  text-decoration: none; } #z33sBL2 li a:link, #z33sBL2 li a:visited {  color: #fff; display: block; background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/z33sBL2.gif)  0 -32px; padding: 8px 0 0 10px; } #z33sBL2 li a:hover { color: #333;  background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze8BFiRUuI/AAAAAAAACsQ/TSV9un0iQfE/s800/z33sBL2.gif);  padding: 8px 0 0 10px; }</style><div id="z33sBL2"><br  /><ul><br /><li><a href="#1">Link  1</a></li><br /><li><a href="#2">Link  2</a></li><br /><li><a href="#3">Link  3</a></li><br /><li><a href="#4">Link  4</a></li><br /><li><a  href="#5">Link5</a></li><br /></ul><br  /></div><br />

Kode :

<style>#z33sBrown  ul { list-style: none; margin: 0; padding: 0; } #z33sBrown img {  border: none; } #z33sBrown { width: 200px; margin: 10px; border-style:  solid solid none solid; border-color: #3D261D; border-size: 1px;  border-width: 1px; } #z33sBrown li a { height: 32px; font-family:  Verdana, Arial, Helvetica, sans-serif; margin: 0; font-size: 10pt;  font-weight: bold; background: #FFF; height: 24px; text-decoration:  none; } #z33sBrown li a:link, #z33sBrown li a:visited { color: #E4D6CD;  display: block; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/z33sBrown.gif);  padding: 8px 0 0 10px; } #z33sBrown li a:hover { color: #FFF;  background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7kFpTupI/AAAAAAAACqo/c2Bn0V6oL38/s800/z33sBrown.gif)  0 -32px; padding: 8px 0 0 10px; }</style><div  id="z33sBrown"><br /><ul><br /><li><a  href="#1">Link 1</a></li><br /><li><a  href="#2">Link 2</a></li><br /><li><a  href="#3">Link 3</a></li><br /><li><a  href="#4">Link 4</a></li><br /><li><a  href="#5">Link5</a></li><br /></ul><br  /></div><br />

Kode :

<style>#z33sS1  ul { list-style: none; margin: 0; padding: 0; } #z33sS1 img { border:  none; } #z33sS1 { width: 200px; margin: 10px; } #z33sS1 li a { height:  32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;  font-size: 10pt; font-weight: bold; background: #FFF; height: 24px;  text-decoration: none; } #z33sS1 li a:link, #z33sS1 li a:visited {  color: #FFF; display: block; background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/z33sS1.gif);  padding: 8px 0 0 30px; } #z33sS1 li a:hover { color: #FFF; background:  url(http://lh5.ggpht.com/_7wsQzULWIwo/Sze71ba8QDI/AAAAAAAACrY/MPJLHCcZc2g/s800/z33sS1.gif)  0 -32px; padding: 8px 0 0 30px; }</style><div id="z33sS1">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sY1  ul { list-style: none; margin: 0; padding: 0; } #z33sY1 img { border:  none; } #z33sY1 { width: 200px; margin: 10px; border-style: solid solid  none solid; border-color: #889944; border-size: 1px; border-width: 1px; }  #z33sY1 li a { height: 32px; font-family: Verdana, Arial, Helvetica,  sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:  #FFF; height: 24px; text-decoration: none; } #z33sY1 li a:link, #z33sY1  li a:visited { color: #889944; display: block; background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/z33sY1.gif);  padding: 8px 0 0 25px; } #z33sY1 li a:hover { color: #889944;  background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze78f0F6lI/AAAAAAAACr4/FJiv57hTmXc/s400/z33sY1.gif)  0 -32px; padding: 8px 0 0 27px; }</style><div id="z33sY1">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sB9  ul { list-style: none; margin: 0; padding: 0; } #z33sB9 img { border:  none; } #z33sB9 { width: 200px; margin-top: 10px; } #z33sB9 li a {  height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;  margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:  24px; text-decoration: none; } #z33sB9 li a:link, #z33sB9 li a:visited {  color: #E5E8D4; display: block; background:  url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/z33sB9.gif);  padding: 8px 0 0 10px; } #z33sB9 li a:hover, #z33sB9 li #current {  color: #725033; background:  url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/z33sB9.gif)  0 -32px; padding: 8px 0 0 10px; } #z33sB9 li a:active { color: #fff;  background:  url(http://lh4.ggpht.com/_7wsQzULWIwo/Sze6w7o9FdI/AAAAAAAACqg/Cg0-bPbIR-k/s800/z33sB9.gif)  0 -64px; padding: 8px 0 0 10px; }</style><div id="z33sB9">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sRBT  ul { list-style: none; margin: 0; padding: 0; } #z33sRBT img { border:  none; } #z33sRBT { width: 200px; margin: 10px; } #z33sRBT li a { height:  32px; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 0;  font-size: 10pt; font-weight: bold; background: #FFF; height: 22px;  text-decoration: none; } #z33sRBT li a:link, #z33sRBT li a:visited {  color: #666; display: block; background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/z33sRBT.gif);  padding: 10px 0 0 35px; } #z33sRBT li a:hover { color: #000;  background:  url(http://lh6.ggpht.com/_7wsQzULWIwo/Sze7-X35bvI/AAAAAAAACsA/RWo_eC1a6l8/s800/z33sRBT.gif)  0 -32px; padding: 10px 0 0 35px; }</style><div  id="z33sRBT"> <ul> <li><a href="#1">Link  1</a></li> <li><a href="#2">Link  2</a></li> <li><a href="#3">Link  3</a></li> <li><a href="#4">Link  4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33s5  ul { list-style: none; margin: 0; padding: 0; } #z33s5 img { border:  none; } #z33s5 { width: 200px; border-style: none solid none solid;  border-color: #D0D0D0; border-width: 1px; margin: 10px; } #z33s5 li a {  height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;  margin: 0; font-size: 10pt; font-weight: bold; background: #FFF; height:  24px; text-decoration: none; } #z33s5 li a:link, #z33s5 li a:visited {  color: #777; display: block; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/z33s5.gif);  padding: 8px 25px 0 10px; text-align: right; } #z33s5 li a:hover,  #z33s5 li #current { color: #fff; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/z33s5.gif)  0 -32px; padding: 8px 25px 0 10px; text-align: right; } #z33s5 li  a:active { color: #fff; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6h5GM5nI/AAAAAAAACqA/ukLum90DRAs/s800/z33s5.gif)  0 -64px; padding: 8px 25px 0 10px; text-align: right;  }</style><div id="z33s5"> <ul> <li><a  href="#1">Link 1</a></li> <li><a  href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sBRSide  ul { list-style: none; margin: 0; padding: 0; } #z33sBRSide img {  border: none; } #z33sBRSide { width: 200px; margin: 10px; } #z33sBRSide  li a { height: 32px; font-family: Verdana, Arial, Helvetica, sans-serif;  margin: 0; font-size: 10pt; font-weight: bold; background: #FFF;  height: 24px; text-decoration: none; } #z33sBRSide li a:link,  #z33sBRSide li a:visited { color: #8D9179; display: block; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/z33sBRSide.gif);  padding: 8px 0 0 10px; } #z33sBRSide li a:hover, #z33sBRSide li  #current, #z33sBRSide li a:active { color: #6C7250; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze6kFX7HII/AAAAAAAACqI/yAWa9ZgZMPU/s800/z33sBRSide.gif)  0 -32px; padding: 8px 0 0 10px; }</style><div  id="z33sBRSide"> <ul> <li><a href="#1">Link  1</a></li> <li><a href="#2">Link  2</a></li> <li><a href="#3">Link  3</a></li> <li><a href="#4">Link  4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

<style>#z33sOR  ul { list-style: none; margin: 0; padding: 0; } #z33sOR img { border:  none; } #z33sOR { width: 200px; margin: 10px; border-style: solid solid  none solid; border-color: #000; border-size: 1px; border-width: 1px; }  #z33sOR li a { height: 32px; font-family: Verdana, Arial, Helvetica,  sans-serif; margin: 0; font-size: 10pt; font-weight: bold; background:  #FFF; height: 24px; text-decoration: none; } #z33sOR li a:link, #z33sOR  li a:visited { color: #CCC; display: block; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/z33sOR.gif);  padding: 8px 0 0 10px; } #z33sOR li a:hover { color: #FFF; background:  url(http://lh3.ggpht.com/_7wsQzULWIwo/Sze7wCsfFbI/AAAAAAAACrA/CQZ7RK4zKgQ/s800/z33sOR.gif)  0 -32px; padding: 8px 0 0 10px; }</style><div id="z33sOR">  <ul> <li><a href="#1">Link 1</a></li>  <li><a href="#2">Link 2</a></li> <li><a  href="#3">Link 3</a></li> <li><a  href="#4">Link 4</a></li> <li><a  href="#5">Link5</a></li> </ul> </div>

Kode :

Silahkan KLIK DISINI

Membuat Dropdown Horizontal Menu Jquery di Blog

2010-10-26T15:51:00.000-07:00

Membuat Dropdown Horizontal Menu Jquery di Blog merupakan trik yang akan saya bahas pada kali ini, berhubung ada sahabat blogger yang bertanya mengenai cara membuat horizontal menu. banyak yang menyajikan tutorial ini, namun hal ini cukup berbeda dengan tutorial yang lainnya karena menggunakan jquery. penggunaan jquery ini tidak terlalu berat dalam loading blog karena hanya alakadarnya saja, tidak terlalu full jquery.

untuk melihat dropdown menu ini dapat dilihat dengan klik gambar dibawah ini

Bagaimana cara membuatnya? mari kita simak tutorialnya :

Login ke account blog anda
Klik rancangan
Klik edit html dan expand widget template
Simpan kode script jQuery berikut diatas kode </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

Masukan kode Javascript berikut dibawah script jQuery tadi :

<script type='text/javascript'>
function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
}
$(document).ready(function(){
mainmenu();
});

</script>

Masukan kode HTML berikut sebelum <div id='header-wrapper'>:

<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/'>Riky Rizkiyana</a></li>
<li><a href='#'>Demo Dropdown Menu jQuery »</a>
<ul>
<li><a href='#'>Tutorial »</a>
<ul>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/cara-pasang-navigasi-breadcrumb-di-blog.html'>Pasang Breadcrumb di Blog</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/07/cara-membuat-related-post-di-sidebar.htmll'>Related Post di Sidebar</a></li>
</ul>
</li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/pasang-sexy-social-bookmark-di-blog.html'>Pasang Social Bookmark di Blog</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/backlink-dari-yahoo.html'>Dofollow Baclink Yahoo</a></li>
<li><a href='http://asrizalwahdanwilsa.blogspot.com/2010/09/kesalahan-dalam-optimasi-seo.html'>Kesalahan Optimasi SEO</a></li>
</ul>
</li> <div class='clear'/>
</ul>

Catatan : Anda bisa menepatkan HTML tersebut sesuai dengan template yang anda pakai.

Masukan kode CSS berikut diatas code ]]></b:skin>:

#nav{
background-color: #fff;
border: 1px solid #ccc;
}
#nav, #nav ul{
width: 960px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
text-align:left;
}
#nav a{
display:block;
padding:2px 10px;
border:1px solid #212421;
color:#fff;
text-decoration:none;
background-color:#212421;
}
#nav a:hover{
background-color:#333;
}
#nav li{
float:left;
position:relative;
padding:0px 5px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:100%;
left:0;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:13em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

Catatan: kode css ini bisa anda edit sesuai template anda.

Simpan hasil kerja anda dan lihat hasilnya

----Semoga Bermanfaat----

Mengenal Jenis Border Blog dan Cara Membuatnya

2010-10-26T15:47:00.000-07:00

Border ...? apa itu border ...? Border adalah garis tepi atau garis yang berada di setiap sisi dan biasanya untuk membedakan letak suatu komponen baik widget, Gadget atau yang lainnya.

Dalam Template blogger terdapat beberapa jenis atau style atau juga tampilan dari border ini. Adapun jenis border yang saya ketahui antara lain:

1. Solid
2. Dotted
3. Dashed
4. Double
5. Groove
6. Ridge
7. Inset
8. Outset

Untuk contoh tampilan dari jenis border tersebut, kalian bisa lihat berikut ini:

SOLID

DOTTED

DASHED

DOUBLE

GROOVE

RIDGE

iNSET

OUTSET

== CARA MEMBUAT BORDER/GARIS TEPI

Untuk membuat bordernya sendiri, kalian hanya perlu menggunakan kode berikut :

<div style="background:#F2F2F2;border:3px dashed #000000; padding:5px;">
TULISAN / SCRIPT KALIAN </div>

KETERANGAN :
== Kode #F2F2F2 adalah warna background atau warna latar belakang
== Kode 3px adalah ketebalan garis /border itu sendiri
== kode dashed adalah Jenis bordernya
== kode #000000 warna garis pada border
== TULISAN / SCRIPT KALIAN adalah tulisan atau script yang akan ditampilkan didalam border

Contoh :

Penulis: Azis Lamayuda Follow Me: @My Twitter
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya. Jika dari kalian ingin selalu tau artikel terbaru dari saya silahkan KLIK DISINI.

sekian penjelasan tentang jenis border ini.

Membuat Tooltip Blogger Dengan jQuery

2010-10-26T15:43:00.000-07:00

Nah ... untuk topik ini tooltipnya menggunakan script yang lumayan agak panjang. Untuk contoh gambar kalian bisa melihat pada gambar dibawah ini:

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

untuk membuat tooltip ini silahkan ikuti langkah-langkah pembuatannya di bawah ini:

1. Login ke blogger kalian
2. Pilih Rancangan
3. Pilih EDIT HTML (centang expand template widget)
4. Simpan CSS berikut diatas kode ]]></b:skin>

#easyTooltip{
padding:5px;
border:1px solid #000;
color: #fff;
background:#000;
}

Keterangan

Padding:5px : Jarak tootltip, bisa dirubah jika kalian mau
border: 1px solid #000 ---> Garis pada tooltip dengan ketebalan 1 px jenis solid dan warna Hitam (#000), kalian bisa merubah warna ketebalan dan jenis garisnya.
Color: #fff ---> Warna huruf atau tulisan berwarna putih
Background:#000 ---> Warna latar berlakang atau background tooltipnya

5. Sekarang simpan script berikut diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("a.tooltip").easyTooltip();
});
</script>
<script type='text/javascript'>
//<![CDATA[
(function($){$.fn.easyTooltip=function(options){var defaults={xOffset:20,yOffset:30,tooltipId:"easyTooltip",clickRemove:false,content:"",useElement:""};var options=$.extend(defaults,options);var content;this.each(function(){var title=$(this).attr("title");$(this).hover(function(e){content=(options.content!="")?options.content:title;content=(options.useElement!="")?$("#"+options.useElement).html():content;$(this).attr("title","");if(content!=""&&content!=undefined){$("body").append("<div id='"+options.tooltipId+"'>"+content+"</div>");$("#"+options.tooltipId).css("position","absolute").css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px").css("display","none").fadeIn("fast")}},function(){$("#"+options.tooltipId).remove();$(this).attr("title",title)});$(this).mousemove(function(e){$("#"+options.tooltipId).css("top",(e.pageY-options.yOffset)+"px").css("left",(e.pageX+options.xOffset)+"px")});if(options.clickRemove){$(this).mousedown(function(e){$("#"+options.tooltipId).remove();$(this).attr("title",title)})}})}})(jQuery);
//]]>
</script>

catatan
perhatikan kode berikut :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
Jika kode tersebut sudah ada pada template kalian maka abaikan saja alias tidak usah dipakai.

6. Simpan Template kalian

Untuk menggunakannya silahkan kalian gunakan kode berikut:

<a class='tooltip' href="LINK URL"title='PESAN DALAM TOOLTIP'>TULISAN KALIAN</a>

Selesai dan semoga bermanfaat...

Resensi :
CSS Globe | http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery

Membuat Tooltip Untuk Setiap Link Blogger

2010-10-26T15:38:00.000-07:00

Bagi yang belum membaca artikel sebelumnya silahkan klik aja link diatas. Untuk tooltip kali ini sungguh mempunyai kelebihan yaitu secara otomatis akan muncul pada setiap link yang ada pada blog kita. Namun tooltip ini hanya menampilkan Alamat URL dari suatu link. Untuk contoh, silahkan lihat gambarnya dibawah ini :

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

Untuk membuat tooltip ini kalian harus login dulu ke blogger kalian, setelah itu silahkan baca artikelnya dibawah ini:

1. Pilih Rancangan
2. Pilih EDIT HTML (centang Expand template widget)
3. Sekarang simpan CSS berikut diatas kode ]]></b:skin>

/* start Tooltip blogger Azis Lamayuda*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000000;
border:2px double #E80101;
text-align:left;
padding:5px;
min-height:1em;
-moz-border-radius:5px;
}

body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px trebuchet MS,arial,sans-serif;
font-weight:bold;
}

body div#toolTip p em {
display:block;
margin-top:3px;
color:#fff;
font-style:normal;
font-weight:normal;
}

body div#toolTip p em span {
font-weight:bold;
color:#fff;
}

/* End Tooltip blogger Azis Lamayuda*/

4. Sekarang simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/tooltipURL.js' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/Tooltipz33s.js' type='text/javascript'/>

5. Simpan template kalian dan Lihat hasilnya

Semoga bermanfaat ...

Cara Membuat Balloon Tooltip Pada Link di Blog

2010-10-26T15:34:00.000-07:00

Ballon Tooltip adalah informasi atau Penjelasan dari link atau gambar.Biasanya kita menemukan ini pada software ataupun system tray komputer kita. Nah kali ini saya akan menjelaskan cara membuat Ballon Tooltip pada Link yang ada di blog kita. Bisa...?

Untuk LIVE DEMO silahkan kalian Klik Button DEMO dibawah ini :

pastinya pertanyaan itu bisa dijawab dengan mengikuti langkah langkah dibawah ini:
1. Login ke Blogger Kalian
2. masuk k rancangan / tata letak
3. pilih Edit HTML ( Back Up template dulu )
4. cari kode ]]></b:skin>
5. lalu sisipkan kode berikut diatasny kode tadi

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcrZtXeiI/AAAAAAAACes/f3SeQ8tdw5A/bubble_filler_thumb%5B1%5D.gif) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(http://lh3.ggpht.com/_pt7i0nbIOCY/SzIcnNeAr-I/AAAAAAAACek/ol5o6rqB5Qw/bubble_thumb.gif) no-repeat bottom;
}

6. SIMPAN template.

Untuk menampilkan Balloon tooltipnya sendiri silahkan Copy code berikut:

<a href="TUJUAN LINK YANG AKAN DITUJU" class="tt">TEXT UNTUK LINK<span class="tooltip"><span class="top"></span><span class="middle">ISI DARI BALLOON TOOLTIP</span><span class="bottom"></a>

kETERANGAN :
== code warna merah : text yang kalian tulis
== code warna biru : Link yang akan diberi tooltip
== code warna Hijau : keterangan didalam balloon tooltip
== code warna pink : Link tujuan

Contoh hasilnya seperti ini :

Sekian dulu dan semoga bermanfaat... ditunggu komentarnya..

Membuat Balloon Tooltip Dengan Css3

2010-10-26T15:29:00.000-07:00

Sekarang saya akan mencoba membuat balloon Tooltip dengan Css3. Ya memang sekarang lagi seru-serunya dengan Css3. Untuk contoh balloon tooltip ini kalian bisa melihatnya dibawah ini :

Coba arahkan mouse pada link berikut ini :

Contoh Tooltip
Ini adalah contoh Balloon Tooltip
Contoh Tooltip
Ini adalah contoh Balloon Tooltip
Contoh Tooltip
Ini adalah contoh Balloon Tooltip
Contoh Tooltip
Ini adalah contoh Balloon Tooltip
Contoh Tooltip
Ini adalah contoh Balloon Tooltip

Untuk membuat balloon tooltip seperti ini, kalian harus login dulu ke blogger kalian, selanjutnya ikuti tahap-tahap berikut ini:

1. Masuk ke rancangan ---> EDIT HTML (centang Expand Template Widget)
2. Simpan CSS berikut diatas kode ]]></b:skin>

#bubblemenu li{ display:inline; float:left; margin-left:10px; cursor:pointer; }
#bubblemenu li >div{ width:150px; min-height:100px; position:absolute; display:inline; margin-left:-70px; padding:5px; visibility:hidden; opacity:0; margin-top:-150px; background:#fff; font-size:1em; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; -moz-box-shadow:0 0 8px gray; -webkit-box-shadow:0 0 8px gray; filter:progid:DXImageTransform.Microsoft.Shadow(color='#272229',Direction=135,Strength=3); box-shadow:0 0 8px gray; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

#bubblemenu li:hover >div{visibility:visible; opacity:1; margin-top:-150px; -moz-transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; -o-transition:all 0.5s ease-in-out; transition:all 0.5s ease-in-out}

3. Simpan template kalian

Tahap selanjutnya adalah pemanggilan kode diatas, Sekarang kalian masuk ke Elemen Halaman.

== Tambah Gadget --> HTML/JavaScript
== Simpan kode berikut didalam content Javascript nya

<ul id="bubblemenu"> <li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div> Keterangan Dalam Balloon Tooltip<br />
</div><br />
</li>
<li><br />

<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div>Keterangan Dalam Balloon Tooltip<br />
</div> </li>
<li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a><br />
<div>Keterangan Dalam Balloon Tooltip<br />

</div> </li>
<li><br />
<a href="URL LINK KALIAN" target="_blank">Contoh Tooltip</a> <br />
<div> Keterangan Dalam Balloon Tooltip<br />
</div> </li>
</ul>

Keterangan :

Kode Berwarna merah adalah Link kalian
Kode Berwarna biru adalah keterangan dalam balloon tooltip

sumber : z33s

Cara Membuat Dropdown Menu jQuery di Blogger

2010-10-26T15:05:00.000-07:00

Anda bisa merubahnya dengan cara memberi efek dropdown dengan jquery, "Create a multilevel Dropdown menu with CSS and improve it via jQuery" adalah salah satu pilihan menarik, yang dikembangkan oleh kriesi.at. Untuk melihat hasil dari penerapan itu anda bisa melihat pada blog saya atau melihat disini. Live Demo

Cara Membuat Dropdown Menu jQuery di Blogger:

1. Masukan script jQuery berikut diatas </head>:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

¶ Catatan: Jika anda telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.
2. Masukan kode Javascript berikut dibawah script jQuery tadi :

<script type='text/javascript'>
function mainmenu(){
$(&quot; #nav ul &quot;).css({display: &quot;none&quot;}); // Opera Fix
$(&quot; #nav li&quot;).hover(function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;visible&quot;,display: &quot;none&quot;}).show(400);
},function(){
$(this).find(&#39;ul:first&#39;).css({visibility: &quot;hidden&quot;});
});
}
$(document).ready(function(){    
mainmenu();
});

</script>
<!-- end dropdown menu-->

3. Masukan kode HTML berikut sebelum <div id='header-wrapper'>:

<ul id='nav'>
<li><a href='/'>Home</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/'>Riky Rizkiyana</a></li>
<li><a href='#'>Demo Dropdown Menu jQuery &#187;</a>
<ul>
<li><a href='#'>Tutorial &#187;</a>
<ul>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-back-to-top-menggunakan.html'>Back to Top</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/link-hover-dengan-jquery.html'>Link Hover</a></li>
</ul>
</li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-jquery-color-picker-di_12.html'>jQuery Color Picker</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-menu-horizontal-ala-cnncom.html'>Menu Horizontal Ala CNN.com</a></li>
<li><a href='http://www.rikyrizkiyana.co.cc/2010/05/cara-membuat-tabbed-sidebar-by-abu.html'>Tabbed Sidebar by Abu Farhan</a></li>
</ul>
</li> <div class='clear'/>
</ul>

¶ Catatan : Anda bisa menepatkan HTML tersebut sesuai dengan template yang anda pakai.
4. Masukan kode CSS berikut diatas code ]]></b:skin>:

#nav{
background-color: #fff;
border: 1px solid #ccc;
}
#nav, #nav ul{
width: 960px;
margin:0px auto;
padding:5px 0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em;
text-align:left;
}
#nav a{
display:block;
padding:2px 10px;
border:1px solid #212421;
color:#fff;
text-decoration:none;
background-color:#212421;
}
#nav a:hover{
background-color:#333;
}
#nav li{
float:left;
position:relative;
padding:0px 5px;
}
#nav ul {
position:absolute;
display:none;
width:12em;
top:100%;
left:0;
}
#nav li ul a{
width:12em;
height:auto;
float:left;
}
#nav ul ul{
top:auto;
}
#nav li ul ul {
left:13em;
margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
display:block;
}

¶ Catatan: kode css ini bisa anda edit sesuai template anda.
5. Save template, selesai.

Sumber artikel:

1. Penerapan Dropdown Menu jQuery di Blogger Template - Deconstructioncode
2. Create a multilevel Dropdown menu with CSS and improve it via jQuery - kriesi.at

Menyimpan File di Google Sites

2010-10-26T05:00:00.000-07:00

Google sites ini sebenarnya sebuah hosting yang sengaja di sediakan buat menyimpan file berupa gambar, dokumen, atau sejenisnya sebagai pengganti google pages yang pernah di tutup oleh google. Memang benar google sites juga bisa kita gunakan untuk membuat blog gratis. Namun berbeda dengan blogger dengan domain miscah.blogspot.com, di google site hasilnya akan seperti ini : sites.google.com/site/miscah

Saya tidak akan membahas membuat blog menggunakan hosting di google sites, yang akan saya bahas adalah cara menyimpan file di google sites. Buat sobat sincereza dan sobat blogger yang belum mengerti cara menggunakan google sites, berikut ini ada sedikit tutorialnya, semoga bermanfaat.

Pada halaman depan, silahkan sobat login dengan account gmail sobat. Jika belum punya gmail, klik pada Sign up for Sites
Setelah login, klik tombol Create Site
Isi saja nama yang sobat inginkan pada Name your site, kemudian klik Create Site.
Setelah selesai mengisi nama dan url, klik pada tab Create page
Kemudian pilih pada File Cabinet dan isi Nama file tersebut, misalnya pada contoh saya mengisinya dengan nama Gambar dan pilih radio button Put page at the top level.
Setelah itu sobat sudah dapat mengupload file yang sobat inginkan, klik tab Add file.
Untuk menggunakan url hasil gambar yang sudah di upload, silahkan klik kanan pada link download, pilih copy link location.
Contoh linknya seperti ini :
https://sites.google.com/site/ghaitsaa/gambar/art.jpg?attredirects=0&d=1

Hapus yang berwarna merah, sehingga menjadi :

https://sites.google.com/site/ghaitsaa/gambar/art.jpg

Mudah-mudahan bermanfaat.

Cara Paling Mudah Membuat Template Joomla, WordPress atau Blogger Dengan Artisteer

2010-10-24T05:25:00.001-07:00

Bagi kita seorang newbie tentu sudah terbayang betapa susahnya membuat template joomla. Banyak pertanyaan yang muncul seperti bagaimana cara memulainya ?? apa saja yang harus disiapkan ?? Apakah nanti dapat digunakan di CMS-CMS seperti joomla atau wordpress?? Lalu Apakah saya bisa ??

Sejek kita buang dulu pemikiran-pemikiran negatif tersebut karena kita semua pasti bisa membuatnya. Memang banyak buku-buku, posting-posting blog, hampir semua menyarankan untuk membuat template dengan menggunakan Adobe Dreamwaver dan sedikit banyak kita harus mengerti bahasa web. Padahal saat ini sudah terdapat program yang sangat memudahkan kita dalam membuat template web yaitu Artisteer

Artisteer adalah Web desain pertama dan satu-satunya yang secara otomatisasi menciptakan produk yang langsung fantastis, template website yang unik dan tema blog sendiri.

Kelebihan dari Artisteer yaitu:

Design awesome WordPress Blogs, profesional Joomla! dan Drupal template, dan Desain Website yang indah
Kemudahan Penggunaan
Tidak perlu belajar Photoshop, CSS, HTML atau teknologi lainnya
Ekspor sebagai CMS WordPress Theme atau Template

Memang program ini sudah lama hadir. Artisteer versi 2.0 – nya saja telah hadir sekitar awal Januari tahun 2009 namun saat program tersebut masih terlalu banyak menghadirkan kekurangan-kekurangan. Nah kini kekurangan-kekurangan tersebut telah diperbaiki seperti fix bug, support terhadap bermacam-macam CMS terkenal seperti blogger, wordpress, joomla, & drupal. Jadi dapat saya katakan program ini wajib untuk kalian miliki klik disini

Download Artisteer 2.5 Plus Keygen

2010-10-24T05:23:00.000-07:00

Web desain sepertinya saat ini menjadi sesuatu hal yang harus untuk dipelajari. Mengingat baik dari sekolah atau kuliah saat ini banyak yang beralih dari media kertas menjadi blog atau website. Bukan hanya untuk belajar, namun untuk dunia kerja pun sangat diperlukan. Hampir semua perusahaan-perusahaan ternama saat ini sudah mempunyai situs sendiri. Hal ini diperlukan karena untuk mempermudah orang mencari informasi tentang perusahaan kita.

Untuk membuat blog atau web ada beberapa hal yang wajib kita ketahui yaitu pertama cara membuat web itu sendiri ( hosting, dan pengetahuan tentang script web). Beberapa tutorial telah kami sediakan disini. Dan untuk cara mendesain kita tidak perlu repot-repot belajar HTML karena saat ini sudah ada software yang membantu kita dalam melayout tampilan blog dengan instan.

Software apalagi selain ARTISTEER. Berbeda dengan posting terdahulu tentang artisteer juga, disini saya akan memberikan Artisteer versi terbaru beserta keygennya.

Untuk mendownload artisteer silahkan gunakan link dibawah ini

Download:
http://www.artisteer.com/?p=download
Keygen :
Download Keygen Artisteer 2.5

Terdapat fiture baru menarik yang disediakan artisteer 2.5 yiatu ditambahkannya Sidebar Menu Dropdown dan flash animation di header. Dan beberapa fix problem untuk beberapa CMS. Untuk lebih jelasnya silahkan download dan anda coba sendiri.

Untuk contoh tampilan web yang dibuat oleh artisteer anda dapat melihatnya dibawah ini.

http://poategal.com/
http://www.nawala.org/

Daftar Isi

2001-01-01T03:23:00.000-08:00

______________________________________________________________________________________

Halaman ini merupakan kumpulan dari artikel-artikel yang pernah diterbitkan.

Susunan yang paling atas adalah judul dari artikel yang baru ditulis hingga ke yang paling bawah adalah tulisan yang pertama kali di tulis di Blog ini.

______________________________________________________________________________________