Cara Membuat Fan Page Facebook Auto Hide

Cara Membuat fan page Facebook Auto Hide ( muncul tanpa di klik ) - Ada beberapa cara memodifikasi fanpage facebook , setidaknya kali ini saya akan kasih salah satunya..kali ini akan memposting tentang fanpage facebook auto hide.
Widget ini akan muncul di bagian tepi sebelah kanan halaman blog sobat juga. 
Tertarik untuk memasang widget fanpage facebook auto hide, ikuti langkah -langkahnya..



Tahap 1

1. log in ke akun Blog sobat.
2. Klik Rancangan --> Edit HTML --> Cari kode </head> ( gunakan Ctrl + F )
3. Letakkan kode berikut di atasnya.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>
Tambahan : Jika sobat dapati kode tersebut memang sudah ada, hiraukan tahap ini dan langsung ke tahap berikut..

4. Klik Save


Tahap 2

1. Klik Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukkan kode berikut ke dalam kotak yang di sediakan
<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>

<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/idebagus/149904085104258&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=9&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href="http://eko-tipsntrick.blogspot.com/2012/05/cara-membuat-fan-page-facebook-auto.html">Tutorial Here</a></span></div></div>
Tambahan : Ganti tulisan bercetak tebal dengan URL page sobat
seperti gambar berikut..



5. Klik save dan lihat hasilnya!!

Semoga tips di atas bisa membantu sobat blogger.. Sekian.

Materi TIK Kelas 9

INTERNET & INTRANET
Internet berasal dari bahasa latin “inter” arti antara, dan “net” arti jaring, jadi secara bahasa internet adalah jaringan antara atau penghubung
Secara istilah internet : jaaringan computer yang luas dan besar yang mendunia dan menghubungkan pengguna computer dari suatu negara dengan negara lain di seluruh dunia, dimana didalamnya terdapat sumber daya informasi

Sejarah lahirnya internet
1.      Tahun 1969 Departemen Pertahanan Amerika “US Defence Advance Research Projects Agency (DARPA) mengadakan riset tentang bagaimana cara emnghubungkan sejumlah computer sehingga membentuk jaringan organic, program riset ini dinamai ARPANET
2.      Empat tempat yang pertama kali terhubung jaringan ARPANET :
a.       University of Utah
b.      University California of Los Angles (UCLA)
c.       University California of Santa Barbara (UCSB)
d.      Stanford University

Intranet : sebuah jaringan computer local yang berbasis TCP/IP yang biasa digunakan pada perusahaan atau kantor

Fasilitas / layanan yang tersedia di internet :
1.      www (World Wide Web)
2.      E-mail (Electronic Mail)
3.      IRC (Internet Relay Chat)
4.      Telnet
5.      Mailling List
6.      Newsgroup
7.      Gopher
8.      FTP (File Transfer Protocol)
9.      HTTP (Hyper Text Trasfer Protocol)

Situs web (sering pula disingkat menjadi situs saja; web site, site) adalah sebutan bagi sekelompok halaman web (web page), yang umumnya merupakan bagian dari suatu nama domain (domain name) atau subdomain di World Wide Web (WWW) di Internet

Unsur Website
1.      Domain Name
2.      Hosting
3.      Scripts
4.      Design Web
5.      Publication

Domain Name : alamat permanen situs di internet yang digunakan untuk mengidentifikasi sebuah situs
Istilah lain Domain Name : URL (Uniform Resource Locator)

Macam Domain Name
1.      Generic Domains : domain name yang berakhiran com, net, org, edu, mil, atau gov (top level domain) yang tidak berafiliasi berdasarkan negara
Contoh :
.com : perusahaan komersial
.edu : badan pendidikan (universitas, institute)
.gov : lembaga pemerintah non militer
.mil : militer
.net : jaringan
.org : organisasi
.int : organisasi internasional
.ac : badan pendidikan (universitas)
2.      Country Spesific Domains : domain yang berkaitan dengan dua huruf ekstensi (second level domain)
.id (Indonesia), .au (Australia) .jp (Jepang), .in (India), .uk (Inggris), .it (Italia), dsb…
Jika digabung :
.co.id : badan usaha di Indonesia
.ac.id : lembaga pendidikan di Indonesia
.go.id : lembaga pemerintahan Republik Indonesia
.or.id : lembaga / organisasi di Indonesia
.sch.id : lembaga pendidikan (SD, SMP, SMA) di Indonesia

JARINGAN INTERNET & AKSES INTERNET
Jaringan computer : himpunan sejumlah computer otonom yang saling terhubung satu sama lain
Manfaat jaringan computer :
1.      Manajemen sumber daya lebih efisien
2.      Mempertahankan informasi tetap andal dan up to date
3.      Mempercepat proses berbagi data
4.      Komunikasi lebih efisien
5.      Pelayanan klien lebih efektif

Jenis jaringan computer
1.      LAN / Local Area Network : jaringan milik pribadi di dalam sebuah gedung atau kampus yang berukuran sampai beberapa kilometer
2.      MAN / Metropolitan Area Network : versi LAN yang berukuran lebih besar dan menggunakan teknologi yang sama dengan LAN, mencakup kantor-kantor perusahaan yang letaknya berdekatan atau berada di sbuah kota
3.      WAN / Wide Area Network : jaringan yang jangkauannya mencakup daerah geografis yang luas, mencakup sebuah negara bahkan benua
4.      Internet : kumpulan jaringan yang saling terkoneksi satu sama lain, yang menggunakan perangkat keras dan perangkat lunak yang berbeda-beda

Backbone : jaringan koneksi antar computer yang menjangkau dunia yang menyediakan layanan penuh untuk Internet Service Provider (ISP)
Bandwidth : jumlah data yang dapat ditransfer melalui jaringan dalam jangka waktu tertentu, yang menggunakan satuan Mbps (Mega byte per second)

Faktor yang mempengaruhi kecepatan akses internet :
1.      Kecepatan computer pelanggan
2.      Kepadatan lalu lintas internet sepanjang rute yang dilalui
3.      Besar bandwidth yang disewa ISP ke Backbone Internet
4.      Jumlah pengguna yang mengakses server secara bersamaan
5.      Kemampuan dan kecepatan server dimana pelanggan meminta/mengakses

PERANGKAT KERAS JARINGAN KOMPUTER
Perangkat keras jaringan computer
1.      Server
2.      Clinet
3.      Network Interface Card (NIC) / kartu jaringan / LAN Card
4.      Switch Hub / konsentrator
5.      Network Cable /kabel jaringan
6.      Connector
7.      PCMCIA Network Interface Card
8.      Modem
9.      Repeater
10.  Bridge
11.  Router
12.  Crimping Tools

Server : computer yang bertugas sebagai eplayan bagi computer atau perengkat yang terhubung pada sebuah jaringan, bertugas untuk membagi koneksi ke semua perangkat yang terhubung dalam jaringan
Clinet : computer yang menerima pelayanan dari server, yang dapat melakukan pengolahan data yang diambil dari server
Network Interface Card (NIC) : perangkat yang berfungsi menghubungkan PC dengan jaringan, yang dipasang pada motherboard server maupun client
Switch Hub : perangkat yang berfungsi menghubungkan computer dengan jaringan, yang berfungsi mengubah sinyal data dan menguatkan sinyal dari LAN Card
Network Cable : media transmisi yang mengubungkan computer dengan jaringan, yang memancarkan gelombang elektromagnetik
Connector : perangkat yang digunakan untuk menghubungkan kabel jaringan dengan komputer
PCMCIA Network Interface Card : perangkat yang digunakan untuk menghubungkan computer dengan jaringan tanpa menggunakan kabel (wireless)
Modem / modulator de modulator : peralatan yang mengubah data dalam bentuk digital ke analog, dan sebaliknya
Repeater : perangkat yang berfungsi memperkuat sinyal pada jaringan
Bridge : perangkat yang digunakan untuk menghubungkan sebuah jaringan (LAN) dengan jaringan lain
Router : perangkat yang berfungsi untuk mengatur lalu lintas aliran data dari satu jaringan ke jaringan yang lain
Crimping Tools : peralatan yang berguna untuk memotong, merapikan dan mengunci kabel UTP dalam melakukan instalasi kabel jaringan

Jenis Network Cable
1.      Coaxial
2.      Unshielded Twisted Pair (UTP)
3.      Shielded Twisted Pair (STP)
4.      Serat Optik (Fiber Optic)

Jenis Connector
1.      RJ 11, RJ 45 (UTP & STP)
2.      BNC, MMCX, SMA, F, N, X,  (Coaxial)
3.      ST, SC, FC, LC ,SMA, MU, MTRJ, DIN (Fiber Optic)

AKSES INTERNET
Jenis koneksi internet
1.      Dial up
2.      ADSL (Asymmetric Digital Subcriber Line)
3.      Broadband
4.      Mobile access (handphone)
5.      Wi-Fi / hotspot
6.      VSAT (Very Small Aperture Terminal)

Pertimbangan memilih ISP
1.      Biaya langganan
2.      Biaya pemasangan
3.      Jarak ISP
4.      Ruang atau space untuk membuat web
5.      Perlindungan terhadap virus atau spam
6.      Lamanya kontrak
7.      Bantuan teknis

AKSES INTERNET
Web browser : perangkat lunak aplikasi yang digunakan untuk mengakses dan menjelajah di internet

Jenis Browser
Berbasis Grafis
    * Mozilla
    * Mozilla Firefox
    * CometBird
    * Epiphany
    * Camino
    * K-Meleon
    * Kazehakase
    * Beonex Communicator
    * Browser Web IBM untuk OS/2
    * Aphrodite
    * Salamander
    * Skipstone
    * BackArrow

Berbasis Internet Explorer
    * Internet Explorer
    * Chakra Browser
    * Avant Browser
    * Crazy Browser
    * iRider
    * MSN Explorer
    * Maxthon
    * NeoPlanet
    * NetCaptor
    * Tablane Browser

Berbasis GRML
    * Pioneer Report MDI
    * Tree MDI
    * Bar Graph MDI

Berbasis KHTML
    * Konqueror
    * Safari
    * ABrowse
    * OmniWeb
    * SkyKruzer
    * Shiira

Browser lainnya
    * Opera
    * Google Chrome
    * Comodo Dragon
    * Enigma browser
    * Oregano
    * Amaya
    * iCab
    * NetPositive
    * OmniWeb
    * Dillo
    * IBrowse
    * AWeb
    * Voyager
    * Espial Escape
    * HotJava
    * Arachne
    * Off By One
    * Emacs/W3
    * Grail
    * My Kids
    * Advanced
    * Fast Browser Pro
    * GoSuRF
    * XANA Web Browser
    * FastStone
    * Freeware Browser
    * 32bit
    * Cygsoft LDAP
    * Ideal
    * The Nubonyx
    * Dimension
    * Flock
    * ballot screen

Berbasis Handphone
    * Doris Browser (untuk nokia 7650)
    * Opera Mini
    * OpenWave
    * UC WEB
    * Tea Shark

Berbasis teks
    * Lynx
    * Links
    * ELinks
    * w3m
    * Netrik

Browser lama yang tidak lagi dikembangkan
    * WorldWideWeb
    * Mosaic
    * AMosaic
    * Netscape Navigator
    * Arena
    * Cello
    * CyberDog
    * IBM Web Explorer
    * MidasWWW
    * Viola
    * WebRouser
    * MacWeb

Tampilan Internet Explorer
1.      Title bar
2.      Menu bar
3.      Standard button
4.      Address bar
5.      Halaman website
6.      Status bar

Menu bar berjumlah 6 : file, edit, view, favorites, tools, help

Ciri-ciri link pada website
1.      Berupa gambar atau teks
2.      Berupa teks bergaris bawah dan berwarna
3.      Jika pointer mouse diarahkan ke suatu link, maka akan berubah menjadi telunjuk tangan
4.      Link yang sudah dikunjungi akan berubah warna

Tips efisien menjelajah internet
1.      Hindari jam-jam sibuk
2.      Hentikan proses download  halaman web yang lama
3.      Non aktifkan animasi dan multimedia
4.      Tutup jendela yang tidak perlu
5.      Persiapakan alamat situs yang akan dibuka
6.      Gunakan fasilitas mesin pencari

E-MAIL

E-mail (electronic mail) : surat yang berbentuk elektronik yang memungkinkan pengguna internet untuk berkirim pesan melalui alamat elektronik di internet

Jenis e-mail
1.      POP Mail : e-mail yang hanya bisa diterima melalui ISP
2.      E-mail forwarding : layanan e-mail yang meneruskan e-mail yang diterima ke alamat e-mail lain
3.      Web based E-mail : e-mail yang ditawarkan garis oleh website penyedia jasa layanan e-mail

Cara menulis dan mengirim e-mail
1.      Login ke  e-mail account
2.      Klik tombol New (YahooMail)
3.      Masukkan alamat e-mail penerima, subject e-mail yang akan dikirim
4.      Ketikan isi e-mail
5.      Setelah selasai klik tombol Send

Membuka e-mail
1.      Tampilkan halaman login YahooMail
2.      Masukkan user ID dan password, klik Sign In
3.      Tunggu beberapa saat sampai muncul homepage yahoo.com
4.      Klik Inbox atau Check Mail
5.      Klik subject e-mail untuk membaca
6.      Klik Inbox untuk kembali ke daftar e-mail yang masuk

Membalas e-mail
1.      Cara sama dengan membuka e-mail
2.      Setelah membaca, klik tombol Replay
3.      Masukkan alamat e-mail penerima, subject e-mail yang akan dikirim
4.      Ketikan isi e-mail
5.      Setelah selasai klik tombol Send

Mengirim file / melampirkan file melalui e-mail
1.      Login ke  e-mail account
2.      Klik tombol New (YahooMail)
3.      Masukkan alamat e-mail penerima, subject e-mail yang akan dikirim
4.      Ketikan isi e-mail
5.      Klik tombol Attach untuk menambahkan file, pilih file dengan browse letak file disimpan, klik Open
6.      Tunggu beberapa saat sampai file berhasil di lampirkan
7.      Setelah selasai klik tombol Send
(sn)

Cara Membuat Tulisan Copyright di Blog

Membuat tulisan copyright di blog memang banyak manfaatnya. Salah satunya supaya blog kita anti pembajakan. Sebenarnya pembajakan tetap saja terjadi karena tulisan copyright ini hanya sebuah tulisan tanpa ada hukum yang mendampinginya.

Tulisan copyright ini sangat sering kita temui di bagian bawah sebuah blog atau website. Kalau menurut saya, tulisan ini memberikan informasi siapa pembuat template blog Sobat, siapa pemilik blog tersebut atau info-info lainnya.

Selain memberikan informasi, tulisan ini juga membuat blog atau website kita lebih profesional. Membuat tulisan copyright di blog cukup mudah karena tidak menggunakan kode HTML yang sulit. Kalau di blog Sobat belum ada tulisan Copyright kenapa ngga mulai memasang sekarang juga??? Okeh lah, langsung saja kita meluncur ke tutorial membuat tulisan copyright di blog.

Langkah 1
Login ke akun Blogger milik Sobat > Tata Letak > Edit HTML. Klik Download Full Template untuk membackup template blog Anda.

Copas kode berikut tepat di atas kode ]]></b:skin>
.copyright{
float:left;
padding-top:5px;
padding-bottom:5px;
font:normal 80% Verdana,Trebuchet,Arial,Sans-serif;
}
Ganti float menjadi right jika Sobat ingin meletakkannya pada bagian kanan blog, left pada bagian kiri. Jika ingin terletak di tengah, hapus kode float.

Langkah 2
Copas kode berikut ini tepat di atas kode </body>
<div class='copyright'>Copyright © 2009-2010 di sini kata-kata terserah Sobat<div>
Misalnya tulisan Copyright pada blog Greyghost
<div class='copyright'>Copyright &#169; 2009-2010 <a href='http://eko-tipsntrick.blogspot.com/'>Greyghost</a> Weblog<br/>Template Donor Ilmu | Dimodifikasi oleh <a href='http://www.blogger.com/profile/17408571515369499460'>Eko Yulianto</a><br/></div>
Hasilnya bisa Sobat lihat pada bagian bawah blog ini.
Semoga Bermanfaat...

Cara membuat Artikel Terkait Dengan Gambar

Assalamu'alaikum sobat blogger, kali ini eko akan menuliskan tentang tips blogging yaitu cara membuat artikel terkait di blog, namun bukan sembarangan artikel terkait sob, artikel terkait ini lengkap dengan gambar pada postingan. Selain menambah blog semakin menarik, related post atau artikel terkait ini juga bisa mengalihkan perhatian pengunjung, sehingga pengunjung ingin membaca artikel yang tertera pada related post tersebut.

Nah, ingin tau seperti apa artikel terkaitnya sob? ini dia screen shootnya.

Yups itulah contoh artikel terkait yang akan kita buat sob, nah langsung saja nyook kita buat.

1. Yang pertama, biasa sob login blogger sobat dahulu.
2. Kemudian klik Template --> Pilih Edit HTML --> Klik Lanjutkan --> Centang Expand template Widget lalu sobat cari kode </head> . Gunakan ctrl+f untuk memudahkan pencarian.
3. Salin kode di bawah ini dan letakkan di atas atau sebelum kode </head>


<!--Start Related Posts Script From http://eko-tipsntrick.blogspot.com/-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFe10jly4Ofqz6VPd_M3uPIxKwJgt64JgHeg5HcS1b5La1KRurnI2sbjvPlZna2G_xYHbpzfZDofoeHeiKQPOknJ3zqCiMznzyi99AunPcoMRQX-eB9f-3HJAI7HinmfTIgIBedbxMhup0/s1600/No+Image.jpg&quot;; var maxresults=7; var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Related Posts&quot;;
</script>
<script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
</b:if>
<!--End Related Post From http://eko-tipsntrick.blogspot.com/-->
Note
  • Ganti angka 7 dengan angka berapapun yang sobat inginkan karena itu akan menampilkan jumlah postingan terkait yang akan di tampilkan.
  • Ganti Related Posts dengan kata-kata yang sobat inginkan juga, seperti "artikel terkait, baca juga, dll".
4.  Lalu Cari kode <div class='post-footer'> atau bila kode tersebut tidak ditemukan, sobat cari kode ini <data:post.body/>. Salin kode di bawah ini dan letakkan di bawah kode <div class='post-footer'> atau <data:post.body/>.
<!-- start related posts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><br/><a href='http://eko-tipsntrick.blogspot.com/' target='_blank'><font color='#ccc' size='small'>Tutorial Blog dan SEO</font></a><div style='clear:both'/>
</b:if>
<!-- end related posts-->
5. Dan yang terakhir simpan dan lihat hasilnya.

Huft, selesai juga kan sob artikel terkait dengan gambarnya? intinya jangan mudah putus asa jika ingin berhasil, begitu juga bisa sobat ingin membuat suatu gadget atau hal apapun juga dalam blog sobat, kuncinya hanya cukup telaten dan teliti sob. Ouke hanya seperti itu yang bisa saya tuliskan, terimakasih yah udah mampir..... good luck.

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Kali ini saya posting membuat navigasi horisontal serta kotak pencarian masih penasaran ini dia screenshotnya :


Untuk membuatnya bisa lakukan posedur berikut:
  • Login ke menu blogger. Klik Design -> Edit HTML
  • Backup template anda
  • Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>
/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
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:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinn-BUX56RWIWOJOX5jUkE_qNbknPBzKXPNeS0K_VO7H4fznSo_hogu1oktgaq4r0On8GYHHiMlQR3WXF5JezCp94sInVdrTHVXLNGUYyzUEDOvErO13i1KcAQ0s-8lLGp5oR9ixSuNQZq/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);

  • Setelah itu cari kode seperti dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Greyghost (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas

  • Kalau sudah ketemu, letakkan kode berikut dibawahnya.
<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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
  • Sehingga susunannya menjadi seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<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='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
  • Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.