Berbagi Pengetahuan di Internet

Blog tutorial berikut ini adalah tutorial tentang link open new tab. Link open new tab adalah link yang terdapat di blog atau di postingan blog khususnya pada tutorial berikut  adalah link yang terdapat di blog blogger blogspot, yang di buka atau di klik akan membuka tab baru. Tab baru disini adalah untuk semua tab aplikasi  browser internet.

Untuk membuat link open new tab atau tab baru yang terdapat di blog di browser yang digunakan. sobat blogger bisa menggunakan beberapa cara, diantaranya mengedit di bagian kode css dan html yang terdapat pada template blogger untuk membuat semua link yang terdapat di blog blogger blogspot open new tab, atau juga dengan menambahkan kode link open new tab satu persatu pada bidang link yang ingin di buat open new tab. misalnya link yang terdapat di postingan, link yang terdapat di header, link yang terdapat di widget sidebar dan sebagainya

Cara di atas adalah untuk membuat mudah pengunjung membuka halaman blog dengan tidak meninggalkan halaman blog yang sedang di baca. Proses membuka link yang tidak open new tab akan menghabiskan waktu untuk loading page, untuk itu dengan membuat link open new tab pada link penting yang terdapat pada postingan atau widget template lainnya, harus digunakan atau ditambahkan .sebagai contoh link open new tab yang terdapat di postingan blog blogger. Link pada post entri bisa anda tambahkan dengan menggunakan fitur klik "tautan", dan akan muncul perintah untuk memasukan url atau link yang akan ditambahkan pada kata / kalimat tersebut.

Jika sobat blogger hanya manambahkan url saja tanpa menggunakan kode link open new tab maka jika postingan tersebut di terbitkan atau dipublikasikan akan membuat link membuka pada halaman yang sama atau link pada tab yang sama atau tidak membuka tab baru.

Di bawah ini adalah sebagian contoh kode link open new tab dan link open new window

(target="_blank") , (target="_new") , (target="_up"

Untuk lebih jelasnya cara membuat link open new tab, pada tutorial ini saya akan menjelaskan cara membuat link open new tab pada link yang terdapat di postingan blogger, dengan menggunakan kode link open new tab target="_blank". Tutorialnya seperti berikut:

Login ke blogger.com untuk membuat postingan blog, Klik disini buat tutorial cara posting di blogger

Klik New Entri / Entri Baru untuk mulai posting,

Pilih dan blok kata atau kalimat pada postingan anda yang akan ditambahkan link, misalnya

Kata atau kalimat
Cara Membuat Link Open  New Tab

Link yang akan di gunakan
http://www.buatblogger.net/2009/07/cara-membuat-link-open-new-tab.html

Kode link open new tab yang ditambahkan
target="_blank"

Cara menggabungkan kalimat, link dan kode link open new tab diatas adalah seperti berikut
kalimat+link+target="_blank" 

Contoh
<a href="http://www.buatblogger.net/2009/07/cara-membuat-link-open-new-tab.html" target="blank">Cara Membuat Link Open  New Tab </a>

Hasilnya:
Cara Membuat Link Open New Tab

Selamat mencoba!!!!!

Tutorial berikut adalah tutorial tentang blog design dengan tema membuat link blink yang terdapat di blog template blogger. Yang dimaksud dengan link blink adalah link atau huruf link yang dibuat agar berkelip atau berkedip. link berkelip / berkedip tersebut biasanya link penting seperti link peringatan, link yang penting di buka pengunjung atau link penting pemberitahuan lainnya.

Kode Link blink untuk membuat huruf link berkelip / berkedip berfungsi buat semua link yang terdapat di blog blogger, link blink tersebut bisa digunakan pada link yang terdapat di postingan. atau link lainya yang terdapat di bagian temlate blog, misalnya di bagian header, Navigasi menu, sidebar, footer dan bagian template lainnya.

Untuk membuat link blink atau huruf link berkelip / berkedip bisa dengan menggunakan cara menambahkan kode blink satu persatu pada link yang ingin dibuat blink atau berkelip / berkedip atau juga bisa dengan membuat link blink semua link yang terdapat di blog blogger blogspot dengan mengedit atau menambahkan kode blink di bagian css template blogger.

Kode blink yang di gunakan untuk membuat huruf link berkelip / berkedip

<blink></blink>

Sebagai contoh hurufp blink atau huruf berkelip / berkedip

Blog Design

Kode blink yang digunakan

<blink>Blog Design</blink>

Contoh huruf link blink atau huruf link berkelip / berkedip


Kode link blink yang digunakan
<a href="http://www.buatblogger.net/search/label/Blog%20Design?max-results=100"><blink>Blog Design</blink></a&gt

Cara menggunakan kode koe blink diatas
Ganti url http://www.buatblogger.net/search/label/Blog%20Design?max-results=100 dengan link yang digunakan

Ganti huruf Blog Design dengan huruf link

Photobucket adalah situs hosting gratis dengan space dan Bandwidth yang cukup besar, namun jika kita ingin menggunakan situs photobucket melebihi space dan Bandwidth dari batas space dan Bandwidth yang sudah di sediakan di photobucket, sobat blogger bisa upgrade ke photobucket pro. file yang dapat di upload di photobucket terdiri dari beberapa macam file, diantaranya seperti file zip, file exe, file gambar dan berbagai macam nama file lainnya. selain dari beberapa nama file diatas Photobucket supprot untuk file video editing

Buat sobat blogger pengguna blogger blogspot, sebuah hosting buat Upload di hosting atau menyimpan data di internet untuk mengakses dan menjalankan blog sangat diperlukan misalnnya untuk mengupload atau menyimpan data JavaScript, CSS, Html, gambar dan data lainnya yang berkaitan dengan keperluan blog.

Untuk menggunakan fasilitas Upload di Photobucket buat keperluan blog, atau keperluan situs lainnya, sobat blogger harus mempunyai account Photobucket terlebih dahulu. Tutorial berikut adalah cara mendaftar account Photobucket dan cara upload di Photobucket.


Klik photobucket.com

Cara Daftar dan Upload di Photobucket
Klik join now untuk register,

Isikan form seperti berikut

Cara Daftar dan Upload di Photobucket
Klil Next step akan terbuka seperti ini

Cara Daftar dan Upload di Photobucket
Isikan kembali form - form di atas klik "I accept Sign me up"

Proses register account Photobucket sudah selesai.

Sekarang cara upload di Photobucket, disini saya akan menjelaskan tentang cara mengupload file dari komputer ke hosting Photobucket

Login ke Photobucket dengan nama dan password yang sudah didaftarkan


Klik Upload

Klik images from my PC

Klik Telusuri untuk membuka file yang akan di upload  dari komputer

Cara Daftar dan Upload di Photobucket
Selamat mencoba !!!!!!!

link Pelangi
Turorial buat blog design kali ini adalah buat membahas tenteng link yang terdapat pada blog. Link atau url situs website blog yang terdapat di blog akan berbeda warna font jika sobat blogger menambahkan kode link secara terpisah pada template blog. Kode untuk membuat warna link terpisah atau berbeda warna font dengan font content blog lainnya adalah seperti kode a visited, a activ, dan a hover.

Berberapa kode diatas adalah khusus untuk membuat link berbeda warna font, background, padding, margin dan sebagainya. kode - kode untuk link diatas berfungsi untuk kode kode link barusan seperti warna font, background, padding, margin adalah jika pada widget atau gadget blog tidak menggunakan kode a visited, a activ, dan a hover seperti yang sudah dijelaskan diatas.

Sedangkan untuk design blog lainnya untuk warna font, misalnya membuat link pelangi di blog. untuk membuat warna link dengan hover warna font seperti wanra pelangi, sobat blogger harus menambahkan kode JavaScript rainbow pada template blogger yang digunakan. Setelah sobat blogger menambahkan kode JavaScript rainbow link pelangi tersebut pada template blog, fungsi kode buat llnk yang terdapat di blog seperti a visited, a activ, dan a hover menjadi tidak berfungsi.

Untuk memperjelas apa yang dimaksud dengan link pelangi adalah seperti berikut,
Link pelangi (rainbow) di blog adalah link yang berubah warna ketika kursor didekatkan pada kata  /  kalimat yang  ditambahkan link dan berkelip - kelip seperti warna pelangi Link pelangi tersebut menampilkan beberapa warna hover yang bisa diatur di JavaScript rainbow sebelum di upload ke hosting.

Untuk Membuat Link Pelangi di Blog bisa mengikuti cara di bawah ini

1. Login Ke Blogger,

2. Klik "Tata Letak / Rancangan"

3. Klik "Edit HTML"

4. Cari kode </head>

5. Kemudian copy paste kode dibawah tepat di bawah kode </head>

<script src='http://jscript-buatblogger.googlecode.com/files/rainbow.js'> </script>

6. Simpan Template.

Sebagai penggunca blog blogger blogspot sobat blogger harus mengetahui apa yang disebut dengan Newer Post, Older Post dan Home, Newer Post, Older Post dan Home adalah link untuk membuka halaman postingan terbaru baru, posting lama dan link halaman home atau halaman depan blog. Newer Post, Older Post dan Home yang terdapat pada bagian bawah blog blogger blogspot untuk pengguna blogger di indonesia, biasannya banyak yang mengganti dengan kode posting labih baru, posting sebelumnya dan halaman muka.

Secara otomatis buat pengguna browser yang menggunakan bahasa negara sendiri, kode Newer Post, Older Post dan Home di translate atau diterjemahkan sesuai bahasa negara. kode kode template blogger  untuk
Newer Post, Older Post dan Home yang di terjemahkan ke berbagai bahasa adalah seperti <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/>.

Buat mengetahui kode kode halaman blog dan fungsi kode diatas di template blogger, saya akan mencoba menguraikan ke bahasa  indonesia seperti berikut:
data:newerPageTitle adalah kode Newer post untuk membuka Postingan lebih baru
data:olderPageTitleadalah kode Older post untuk membuka Postingan lama
data:homeMsg adalah kode Home untuk membuka Halaman Muka
Setelah sobat blogger mengetahui apa yang dimaksud dengan kode Newer Post, Older Post dan Home diatas dan mengetahui fungsi bagian bagian kode tersebut, sobat blogger bisa membuat dan menggati kode tersebut sesuai dengan template blog yang di inginkan, misalnya memberi pilihan link halaman postingan lainnya dengan menambahkan  tooltip, mengganti tulisan newer post, older post dan home dengan gambar, atau menghilangkan tulisan tersebut.

Sesuai judul postingan diatas tutorial berikut adalah tutorial blog design cara mengganti tulisan newer post, older post dan home dengan gambar, buat meringkas postingan caranya sebagai berikut:

1. Login ke Blogger

2. Klik Rancangan

3. Klik Edit HTML

4. Klik Expand Widget Templates

5. Cari kode yang mirip dengan kode berikut
#blog-pager,#blog-pager-newer-link,#blog-pager-older-link,dan #home-link
6. Setelah ketemu, ganti dengan kode di bawah ini
#blog-pager{
text-align: center;
}

#home-link{
float: center;
border:1px solid #cccccc;
padding:2px;
color:000000;
}

#blog-pager-newer-link {
float: left;
border:1px solid #cccccc;
padding:2px;
color:000000;
}
#blog-pager-older-link {
float: right;
border:1px solid #cccccc;
padding:2px;
color:000000;
}
7. Kemudian cari kode seperti berikut
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>
8. Ganti kode yang berwarna merah dengan kode kode berikut
<data:newerPageTitle/>
9. Ganti dengan
<img align=' left ' border='0' src='ulr gambar anda ' title='Postingan lebih baru'/>
<data:olderPageTitle/>
10. Ganti dengan
<img align=' left ' border='0' src='ulr gambar anda ' title='Postingan lama'/>
<data:homeMsg/>
11. Ganti dengan
<img align=' left ' border='0' src='ulr gambar anda ' title='Halaman Muka'/>
12. Klik Simpan template

Judul Postingan pada label mungkin bukan kalimat yang benar buat judul postingan artikel ini, maksud dari Judul Postingan Pada Label judul postingan diatas adalah hanya menampilkan judul postingan pada label atau halaman label.cara tersebut perlu dilakukan pengaturan pada template blogger blogspot pada kode template blog. Secara default designer template blogger kebanyakan membuat template blogger dengan menggunakan fasilitas menampilkan judul postingan dan content postingan sebagian pada label., Judul postingan beserta sebagian content yang terdapat pada label tersebut di awali dari kalimat pertama postingan sampai kalimat di akhir read more atau baca selengkapnya.

Sebagai contoh tutorial hanya menampilkan judul postingan pada label, sobat blogger bisa melihat halaman label tersusun Vertikal.hanya judul postingan tanpa menampilkan content postingan dengan membuka salah satu halaman label yang terdapat pada blog ini. atau bisa melihat contohnya dengan category blog design disini

Settingan atau pengaturan yang harus dilakukan untuk membuat halaman label hanya menampilkan judul postingan pada label seperti halaman label diatas adalah dengan menambahkan kode html dan css yang di pasang pada kode template bagian halaman label blog. Untuk kode html dan css buat menampilkan hanya judul postingan pada label, sobat blogger bisa menggunakan kode yang sama dengan template yang digunakan berikut. buat sobat blogger yang ingin menggunakan kode berikut sobat blogger bisa mengedit kode tersebut agar sesuai dengan template blog yang digunakan.

Cara menambahkan kode untuk menampilkan hanya judul postingan pada label, caranya seperti berikut

1. Sign in di blogger anda,

2. Klik Rancangan,

3. Klik Edit HTML,

4. Klik Download Template ,

5. Centangkan "Expand Widget Template".

6. Cari kode seperti ini :
<b:include data='post' name='post'/>
7.Kemudian Ganti dengan kode di bawah ini
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='display:block; font-size:11px;font-family:&quot;Arial&quot;,Verdana,sans-serif; padding-left:20px;border:1px solid #ccc; margin-bottom:4px;background: #FFFFFF ;color:#000000; text-decoration: none'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
8. Simpan Template.

Optimasi Blog Dengan Technorati
Technorati adalah situs blog directory Social Bookmark yang banyak digunakan sobat blogger buat Optimasi blog atau mengoptimalkan blog. Untuk Cara Claim Blog di Technorati, blog yang di daftarkan harus sudah berisi content postingan yang cukup, hal tersebut adalah cara agar blog bisa diterima dan di indeks system technorati, semakin banyak bloggers yang menggunakan situs Social Bookmark technorati buat optimasi blog, technorati semakin ketat buat blog yang tidak mempunyai content yang cukup, blog yang di daftarkan ke technorati tersebut tidak disetujui atau tidak mendapatkan kode token technorati buat memverifikasi blog yang didaftarkan

Technorati akan memberi peringkat atau ranking untuk semua blog terdaftar, Rank technorati terhitung dari pengunjung blog yang datang dari technorati, diantaranya buat link postingan dan page view blog. Manfaat yang diperoleh dengan mendaftarkan blog ke technorati adalah blog tersebut akan lebih cepat di indeks mesin pencari lainnya dan mendapatkan backlink buat meningkatkan page rank, dan manfaat manfaat Social Bookmark lainya.

Blog Terdaftar akan di share oleh technorati ke berbagai search engine, selain itu blog tersebut akan mendapat backlink gratis sebanyak postingan yang terdapat di technorati, karena technorati akan membuat link ke setiap postingan blog secara otomatis melalui feed blog yang didaftarkan. Dengan cara tersebut pastinya akan banyak mendatangkan pengunjung dari technorati.


Buat Cara Claim Blog di Technorati, pertama sobat blogger harus mempunyai account technorati terlebih dahulu, buat yang belum mempunyai account technorati ikuti caranya sebagai berikut

Klik Tecnorati.com

Klik join now

Mengisi data lengkap buat account Profile Technorati,

Setelah selesai klik join

Buka Email sobat buat verifikasi acoount Technorati,

Klik link verifikasi seperti
http://technorati.com/account/ verify?username=z123xckey=fea69d64048092030fc2c4359b91b421
Setelah itu akan terbuka halaman Technorati , klik Sign in

Selanjutnya adalah cara Optimasi blog dengan technorati dengan cara mendaftarkan blog atau claim blog di technorati, caranya Cara Claim Blog di Technorati

Klik My Profile

Masukan URL blog yang akan di daftarkan,

Optimasi Blog Dengan Technorati

Klik My claimed blog,

Lengkapi Form pendaftaran blog seperti gambar berikut, klik Proceed to the next step

Optimasi Blog Dengan Technorati

Klik Proceed to the next step

Selanjutnya posting kode token Technorati seperti JJ9BM5M6AKYH yang dikirim technorati ke email yang sobat daftarkan

Kemudian kembali lagi ke technorati klik Verify Claim Token

Sampai disini Optimasi Blog Dengan Technorati sudah selesai

Tutorial berikut akan membahas tentang cara design blog untuk membuat banner blog yang terdapat pada widget blog berjalan dengan menggunakan fungsi html marquee. Banner berjalan dengan menggunakan fungsi marquee akan bergerak sesuai dengan kode perintah marquee html. Banner yang menggunakan fungsi marquee berjalan diantaranya berjalan ke kiri, berjalan ke kanan, berjalan ke bawah, berjalan ke atas, berjalan bolak balik ke kiri dan ke kanan dan masih banyak lagi fungsi marquee yang bisa digunakan di blog, diantanya marquee dengan menggunakan fungsi jquery, ajax, dan JavaScript marquee lainnya.

Setelah sobat blogger mengetahui berbagai fungsi kode marquee sobat bisa menggunakan kode marquee untuk membuat banner berjalan dengan kode marquee seperti marquee html, marquee jquery, marquee ajax dan kode marquee lainnya.Sebagai tutorial buat pemula dan contoh marquee saya akan memberi contoh cara membuat banner gambar berjalan dengan menggunakan fungsi marquee html, untuk membuat banner berjalan dengan fungsi yang sama seperti yang sudah saya jelaskan diatas.

Untuk membuat banner berjalan pertama yang harus di siapkan adalah gambar yang akan dijadikan banner, kemudian upload gambar tersebut sampai selesai, ambil link gambar tersebut dan simpan. berikutnya Link blog atau link lainnya yang akan dijadikan link banner berjalan, setelah url gambar dan url blog untuk membuat banner berjalan sudah siap, caranya copy kode marquee di bawah ini kemudian simpan pada widget template blog blogger sobat. Atau Sobat blogger ingin menggunakan url gambar dan url blog blogroll misalnya url blog sobat sobat blogger lainnya.

Fungsi marquee khusus lainnya adalah buat menjalankan berbagai perintah html dengan menggunakan JavaScript dan Css, tutorial ini akan dibahas pada tutirial berikutnya. Buat memperjelas dari kelima fungsi marquee yang sudah dijelaskan diatas, dibawah ini pengertian dan cara penulisan marquee html dasar yang biasa digunakan pada widget blog.

marquee left  untuk membuat perintah marquee kiri
marquee right untuk membuat perintah marquee kanan
marquee down untuk membuat perintah marqueebawah
marquee up untuk membuat perintah marquee atas
marquee behavior untuk membuat perintah marquee bolak balik

Dibawah ini adalah contoh banner berjalan dan kode untuk membuat banner berjalan, silahkan ambil kode banner berjalan sesuai dengan banner berjalan yang ingin digunakan pada blog sobat, kemudian Ganti URL blog dan URL banner dengan URL blog dan URL banner Sobat

Membuat Banner Berjalan

Kode marquee :
<marquee>
<a href="http://URL blog"><img border="0" src="http://URL banner" /></a>
</marquee>

Membuat Banner Berjalan

Kode marquee :
<marquee direction="right">
<a href="http://URL blog"><img border="0" src="http://URL banner" /></a>
</marquee>

Membuat Banner Berjalan

Kode marquee :
<marquee direction="Down">
<a href="http://URL blog"><img border="0" src="http://URL banner" /></a>
</marquee>

Membuat Banner Berjalan

Kode marquee :
<marquee direction="up">
<a href="http://URL blog"><img border="0" src="http://URL banner" /></a>
</marquee>

Membuat Banner Berjalan

Kode marquee :
<marquee behavior="alternate">
<a href="http://URL blog"><img border="0" src="http://URL banner" /></a>
</marquee>

Footer wrapper adalah gadget bagian bawah template blog buat menampilkan widget widget blog. Gadget footer wrapper disebagian template klasik banyak yang menggunakan hanya satu widget, widget tersebut misalnya digunakan buat menampilkan link penting seperti Copyright, template by, powerad by, Sitemap, Privasi dan sebagainya.

Buat pengguna blogger blogsspot yang ingin menggunakan fasilitas widget footer wrapper satu sidget untuk digunakan menjadi tiga widget, sobat blogger harus mengedit atau mengganti kode css dan html pada bagian kode footer wrapper dengan kode footer 3 kolom.

Pada postingan blogger tutorial berikut khusus kode css dan html untuk membuat footer wrapper satu widget menjadi footer 3 widget yang siap digunakan, sobat bloggers tinggal menyesuaikan kode warna font, background, dan border agar sesuai dengan template yang digunakan.

Cara membuat footer 3 kolom caranya bisa mengikuti tutorial berikut

Login ke blogger.com anda

Klik Rancangan

Klik Edit Html

Cari kode #footer-wrapper atau footer

Kemudian delete dan ganti dengan kode berikut
/* ----- FOOTER ----- */
#footer-wrapper {
clear: both;width: 100%;
word-wrap: break-word;
overflow: hidden;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
background: #0000FF;
border: 1px solid $bordercolor;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
text-align: left;width: 960px;
color: #000000;
font: $footerTextFont;
line-height: 1.6em;
}

#footer h2 {
margin: 10px 0px 0px 0px;
padding: 3px 0px 3px 0px;
color: #cc0000;
font: $footerTextFont;
}

#footer1 {
width:320px;
float:left;
background:#FFFFFF;
padding: 0px;
border: 1px solid #cccccc;
}

#footer2 {
width:320px;
float:right;
background:#FFFFFF;
padding: 0px;
border: 1px solid #cccccc;
}

#footer3 {
width:320px;
float:left;
background:#FFFFFF;
padding: 0px;
border: 1px solid #cccccc;
}

#footer1 .widget-content {
margin:0 .5em 0 ;
}

#footer2 .widget-content {
margin:0 .5em 0 ;
}

#footer3 .widget-content {
margin:0 .5em 0 ;
}

#footer a {
color: #3D81EE;
text-decoration: none;
}

#footer a:hover {
color: #cc0000;
text-decoration: none;
}

#footer a:visited {
color: #3D81EE;
text-decoration: none;
}
Kemudian cari kode footer wrapper 1 widget seperti

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

Delete dan ganti dengan kode footer 3 kolom seperti berikut
<!-- Star footer-wrapper -->
<div id='footer-wrapper'>
<div id='footer'>

<b:section class='footer' id='footer1' preferred='yes'>
</b:section>

<b:section class='footer' id='footer2' preferred='yes'>
</b:section>

<b:section class='footer' id='footer3' preferred='yes'>
</b:section>

</div>
</div>
<!-- end footer-wrapper -->
Klik Simpan template

Software cssMenuGenerator adalah software css untuk membuat Menu Horizontal, Vertikal, Combo Box, dan Pull-Down. Dengan software ini anda bisa dengan mudah memilih tampilan menu dari keempat menu di atas,untuk anda yang belum mempunyai softwarenya bisa download dulu disini, dalam postingan ini saya akan menjelaskan cara membuat menu menyamping alias Horizontal seperti diatas, caranya instal dahulu cssMenuGenerator di PC anda.



Buka cssmenugenerator " sperti ini",


Klik Next,


Pilih I accept the agreement dan klik Next,


Browse pilih "C:\Program Files\CSS Menu Generator" klik next,


Browse ketikan "CSS Menu Generator" klik next,


Tanda centang "Dekstop dan Quick Launch" klik Next,


Klik instal "tunggu hingga selesai"


Klik Finish, selesai instalasi cssMenuGenerator.

Untuk memulai membuat menu horizontal ikuti langkah - langkah berikut
Siapkan "kata" yang akan dijadikan menu horizintal pada blog anda.


Buka Program cssMenuGenerator pada PC anda


Pada style tab klik "menu item"dan klik "new" isikan ( item:nama menu, link:http://www.percobaan.net/"link halaman" ) lakukan lagi untuk beberapa menu lainnya,


Pada style tab klik "Horizontal Menu" sesuaikan warna pada masing - masing form


Pada style tab klik "HTML/CSS Code"dan klik "XHTML File" copy paste semua kode pada Notepad sebagai cadangan!

Selanjutnya

  1. Sign ke Blogger anda,
  2. Klik Tata letak,
  3. Klik Elemen Halaman,
  4. Klik Tambah Gadget,
  5. Pilih HTML Java Script, "Paste kode tadi pada kotak HTML Java Script,Drag dan letakan persis di bawah header,
  6. Klik tombol Simpan, Selesai.

Jika pada Template anda tidak mempunyai Widget di bawah header bisa membuatnya dengan mengklik disini ,Sekarang Template anda sudah memiliki Menu Horizontal dengan cssMenuGenerator.


Download link : Download Now