tutorial

Membuat Dropdown Menu( DDM)

2009-06-20T22:02:00.000-07:00

Dropdown Menu Berguna sekali Buat Menghemat space ruangan Blog Kita.tapi sebelumnya teman teman udah tau Kan dropdown Menu Itu kayak Apa ....Nih aku Kasih Contoh :
Udah Tau Kan??Kalu UDah Tau Kita Lanjutin Lagi,itu Bisa di Isi dengan sesuai selera teman teman.untuk memasang DDM Ikuti pembahasan di bawah Ini...
Kamu Login dulu ke Blogger Trus Masuk Ke " PAGE ELEMENT " Trus Pilih " ADD PAGE ELEMENT =>HTML/JavaScript "Kemudian masukkan script berikut ini di kocat "Content"

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">Text 1</option>
<option value="Links 2">Text 2</option>
</select>

Text yang berwarna Hijau adalah link. ganti text2 tersebut dengan link2 kamu.
Text yang berwarna biru adalah tulisan yang ditampilkan. Itu juga harus km ganti.

Contohnya seperti ini :

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>DROPDONW MENU</option>
<option value="http:bla-bla.blogspot.com"> Isi Di sini </option>
<option value="http:bla-bla.blogspot.coml"> ISi Di sini</option>
</select>

Kalau Sudah semua.Hasilnya akan seperti Ini.

Bagi Teman Teman Yang Mau Menambah Menu Lagi.kamu Bisa Nambahin Kode seperti Ini Sebelum Kode </select>:

<option value="Links 2">Text 2</option>

Gimana Sobat.Bisa Gak !!!!

Cara Pasang Kotak Pencarian Google

2009-06-20T21:44:00.001-07:00

seringkali kita lihat di setiap blog atau situs Yang Lain Mesin pencari ( search engine).yang biasa di sebut dengan GOOGLE.memang Mesin pencari ini sangan berguna,terutama bagi kamu yang ingin mencari sesuatu baik itu informasii tentang apa saja atau mencari gambar.nah sekarang saya ingin bagi bagi tips gimana cara memasang Mesin pencari(Google)ini.terutama bagi teman " yang mau memasangnya di blog atau website yang anda miliki.

Dan jangan khawatir caranya mudah kok gak sulit.anda tinggal memasang kode - Kode di bawah Ini kemana saja yang anda inginkan,anda tinggal Pilih google mana yang layak dan pantas untuk di pajang di blog anda....

Google search 1

<center>
<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google" align="absmiddle"></A>
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Google Search">
</td></tr></TABLE>
</FORM>
</center>

ada yang harus anda ketahui kode FFFFFF adalah kode warna.anda tinggal mengganti kode warna tersebut dengan warna yang sesuai dengan blog anda,Anda juga bisa merubah tulisan "Google Search" dengan kata yang anda sukai. Untuk kode warna html,.bisa di cari di adobe Photoshop..
Google Search 2

<center>
<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/search?safe=vss">
<IMG SRC="http://www.google.com/logos/Google_Safe.gif"
border="0" ALT="Google" width="115" height="45" align="absmiddle"></A>
<INPUT TYPE=text name=q size=25 maxlength=255 value="">
<INPUT type=hidden name=safe value=strict>
<INPUT type=submit name=sa value="Google Search">
</td></tr></TABLE>
</FORM>
</center>

Keterangannya sama seperti Yang Di atas
Google Search 3 :

<FORM method=GET action="http://www.google.com/search">
<input type=hidden name=ie value=UTF-8>
<input type=hidden name=oe value=UTF-8>
<TABLE bgcolor="#FFFFFF"><tr><td>
<A HREF="http://www.google.com/">
<IMG SRC="http://www.google.com/logos/Logo_40wht.gif"
border="0" ALT="Google"></A>
</td>
<td>
<INPUT TYPE=text name=q size=31 maxlength=255 value="">
<INPUT type=submit name=btnG VALUE="Monggo Klik">
<font size=-1>
<input type=hidden name=domains value="http://tutorial-alchans.blogspot.com/"><br><input type=radio name=sitesearch value=""> Prof. Google <input type=radio name=sitesearch value="http://tutorial-alchans.blogspot.com/" checked> Alchan <br>
</font>
</td></tr></TABLE>
</FORM>

Keterangan : kamu Tinggal ganti URL.Blog kamu " http://tutorial-alchans.blogspot.com/ "yang Berwarna Hijau dengan alamat Url Blog kamu.dan kamu juga bisa mengganti alchan dengan nama anda atau terserah kamu aja dehh gimana Enaknya..:-p

Selamat Mencoba Dan Sukses selalu...!!!

Widget Google Translate

2009-06-20T21:26:00.000-07:00

nah pada kesempatan kali Ini saya Ingin membahas tentang cara membuat " Google Translate " Trus apa gunanya google translate ini, bagi yang suka ngeblog khususnya bagi blogger indonesia, tentunya pengen donk blog yang kita miliki dikunjungi banyak orang, bukan saja orang indo doank, bahkan kita pengen blog kita dikunjungi oleh semua orang di dunia ini. tapi masalahnya kebanyakan isi postingnya berbahasa indonesia juga. tentu saja yg ngerti cuma orang indonesia doank, atau negara tetangga,
Trus gimana sih caranya supaya isi potingan kita dibaca sama orang selain orang Indonesia, makanya kita gunakan google translate ini, banyak banget pilihan basahasanya, dari bahasa Inggris, Jerman, Italia, Arab dan lainnya. Kita tinggal memasukkan url situs tersebut langsung ke Google Translate atau kita memasang widgetnya di blog Temen Temen....

Okeh Langsung saja menuju TKP.google Translate Ini ada dua versi yang berbeda.Dan Kita akan Bahas Tentang Google Translate VERSI 2.COba temen " Lihat Gambar Di Bawah Ini :

VERSI YANG PERTAMA :
VERSI YANG KE DUA :

Nah Untuk Memasang Googlate TranslateNya Teman Teman Tinggal Menaruh Elemen di Blog kamu,Dan akan Lebih Baiknya kalau Teman " menaruhnya Di sidebar.
1- Login
2-Tata Letak
3-Elemen Halaman
4-terus pilih HTML/JavaScript.
Kemudian masukkan kode di bawah ini.

<script src="http://www.gmodules.com/ig/ifr?url=http://www.rosettainterpreters.com/xn_resources/widgets/gadget/gadget.xml&up_siteLanguage=Indonesian&up_phone=081233131226&synd=open&w=330&h=49&title=Selaraskan++Bahasa+Anda&lang=en&country=ALL&border=%23ffffff%7C0px%2C1px+solid+%23004488%7C0px%2C1px+solid+%23005599%7C0px%2C1px+solid+%230077BB%7C0px%2C1px+solid+%230088CC&output=js"></script>

Selamat Mencoba ....!!!

Cara Membuat Read More do blogger

2009-06-20T21:11:00.000-07:00

Mungkin diantara teman-teman udah tau cara atau tutorial membuat read more...tapi untuk yang belum tau gimana sih cara membuat read more.. kadang kita kurang srek ngeliat postingan kita terlihat panjang sekali sampai kebawah di beranda atau home blog kita... (keliatan seperti makalah aja...)nah gimana solusinya, biar potingan kita gak terlalu panjang, kalau kita meliat atau meninjau suatu website, terdapat potongan postingan dan dibawah nya ada tulisan link read more atau baca selengkapnya, kalau kita ingin meliat seluruh tulisan itu tinggal ng'klik tulisan read more itu, trus bisa gak kita gunakan di blogger? jawaban sangat bisa sekali, caranya mudah saja tinggal ngikutin langkah-langkah dibawah ini..

1- Log In Dulu Trus Buka Menu Layout setalh Itu Edite HTML
2- Cari Kode Berikut

<p><data:post.body/></p&gt

3- kalau sudah Ketemu Ganti Kode Tersebut Dengan Kode Yang Ini

<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'>Read More......</a>
</b:if>

Tulisan Read MoreNya Bisa Temen " Rubah Dengan Baca selengkapnya atau apa saja...

4- Kalau Sudah Di Ganti Klik SAVE.
5- Kemudian Pilih Menu SETTING Trus FORMATING
6- Pada kotak Post Template isikan kode berikut:

<span class="fullpost">

</span>

7- Kemudian Kamu Simpan
8- Letakkan abstraksi posting atau artikel yang akan ditampilkan dihalama utama (sebelum tulisan "Redmore") diatas kode ini : <span class="fullpost"> sementara sisanya yaitu keseluruhan posting letakkan di antara kode <span class="fullpost"> Dan
</span>

9- Setelah Itu Simpan.

nah gitu doank.. tinggal liat aja hasilnya

Menu Navigasi Horizontal

2009-06-20T21:01:00.001-07:00

saya ingin berbagi ilmu sama teman-teman yang suka ng'blog.. ini cara membuat menu navigasi horizontal, mungkin sudah banyak tutorial tentang masalah ini, tapi gak apa kan kalau saya membuat tutorial ini..mudah-mudahan bermanfaat

01 - Horizontal Tab Menu 10 :
Teman Teman BisaLangsung Melihat Cara Membuatnya Di sini

02 - Horizontal Tab Menu ( J ) :
Bisa Langsung Melihat Cara Membatnya Di sini.

03 - Horizontal Tab Menu ( F ):
Bisa Langsung Cara Membuatnya Di sini.

04 - Menu Dropdown With CSS:
Bisa Langsung Cara Membuatnya Di sini.

05 - Tab Navigasi With CSS (2):

Bisa Langsung Cara Membuatnya Di sini.

06 - Menu Navigasi CSS (6)

Bisa Langsung Melihat Cara Membuatnya DiSini.

07 - Menu Navigasi Link ListUntuk membuatnya, Kamu bisa mendownload templet Elegant Style & SEO Friendly, kemudian improvisasikan dengan blog ini. Atau sobat bisa menambahkan kode Css sebelum tag dan id navbar pada bagian body.

Kode CSS :

/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://i537.photobucket.com/albums.......gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#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:#fff url(http://i537.photobucket.com/albums.......gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#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 30px; width:140px}

Dan ID Navbarnya Biasa Seperti Ini :

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='' type='LinkList'/>
<b:widget id='HTML1' locked='true' title='Search' type='HTML'/>
</b:section>
</div>

Nb : Tinggal Kamu Sesuaikan Kode warna ( #fff)Sama UrlNya Dengan Milik Kamu.

SELAMAT MENCOBA DAN SMOGA BERHASIL.!!!