Cara buat Menu navigasi Drop-Down Horisontal

Menu navigasi berfungsi sangat penting untuk website atau blog. Selain memberikan daya tarik lebih  pada website atau blog. Tapi sangat berguna untuk menavigasi atau memberi petunjuk pada pengunjung untuk memudahkan menelusuri dan melihat seluruh isi yang ada pada website atau blog anda. Ada beberapa bentuk menu navigasi, diantaranya vertikal dan horisontal. Dan keduanya mempunyai fungsi yang sama.
Kali ini saya menampilkan bermacam-macam koleksi menu navigasi Horisontal  yang saya dapat dari Blogger Tips And Tricks. Dan anda bisa membuat dan memiliki menu-menu ini sesuai selera anda. Anda tinggal lihat demonya, baca artikel panduannya, dan coba untuk membuat.

Langsung saja berikut koleksi menu navigasi Drop-Down Horisontal :

1. Advanced CSS Menu

Demo : http://www.webdesignerwall.com/demo/advanced-css-menu/
Article : http://www.webdesignerwall.com/tutorials/advanced-css-menu/
Download : http://www.webdesignerwall.com/file/advanced-css-menu.zip


2.  Bulletproof CSS Sliding Doors

Demo : http://azadcreative.com/files/Bulletproof.zip
Article : http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Download : http://azadcreative.com/files/BulletproofSlidingDoors.psd.zip


3.  How to Make a CSS Sprite Powered Menu

Demo : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.html
Article : http://buildinternet.com/2010/01/how-to-make-a-css-sprite-powered-menu/
Download : http://s3.amazonaws.com/buildinternet/live-tutorials/css-sprite-menu/css-sprites-nav.zip


4.  CSS Express Drop-Down Menus

Demo : http://www.projectseven.com/tutorials/navigation/auto_hide/workpage.htm
Article : http://www.projectseven.com/tutorials/navigation/auto_hide/
Download : http://www.projectseven.com/tutorials/navigation/auto_hide/p7exp.zip


5.  CSS3-only horizontal drop line tab menu

Demo : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/demo/index.html
Article : http://www.skyrocketlabs.com/articles/css3-only-horizontal-dropline-tab-menu.php
Download : http://www.skyrocketlabs.com/categories/tutorials/css3-only-horizontal-dropline-tab-menu/css3-only-horizontal-dropline-tab-menu.zip


6.  Nicer Navigation with CSS Transitions

Demo : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions
Article : http://www.gethifi.com/blog/nicer-navigation-with-css-transitions



7.  Pure CSS Horizontal Menu

Demo : http://devinrolsen.com/wp-content/themes/typebased/demos/css/css-horizontal-menu/WORKS.php
Article : http://www.devinrolsen.com/pure-css-horizontal-menu/


8.  DropDown CSS Menu

Demo : http://divitodesign.com/dd-articles/horizontal-css-menu/index.html
Article : http://divitodesign.com/css/how-to-dropdown-css-menu/
Download : http://www.divitodesign.com/dd-articles/horizontal-css-menu/horizontal-css-menu.rar


9.  Pure CSS Menu With Infinite Sub Menus Tutorial

Demo : http://www.devinrolsen.com/wp-content/themes/typebased/demos/css/infinite-sub-menu/
Article : http://www.devinrolsen.com/pure-css-menu-with-infinite-sub-menus-tutorial/


10. CSS3 Dropdown Menu

Demo : http://www.webdesignerwall.com/demo/css3-dropdown-menu/
Article : http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/


11. Elegant Drop Menu with CSS Only

Demo : http://aext.net/example/elegant-menu-with-css-only/
Article : http://aext.net/2009/09/elegant-drop-menu-with-css-only/
Download : http://www.box.net/shared/paoqo8y1lt


12. CSS dropdown menu without javascripting or hacks

Demo : http://www.texaswebdevelopers.com/blog/examples/ddmenu2.asp
Article : http://www.texaswebdevelopers.com/blog/template_permalink.asp?id=129


13. Create Vimeo-like top navigation

Demo : http://www.jankoatwarpspeed.com/examples/vimeo_navigation/
Article : http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
Download : http://www.jankoatwarpspeed.com/file.axd?file=2009%2f1%2fvimeo_navigation.zip


 14. ADxMenu

Demo : http://aplus.rs/adxmenu/examples/htb/
Article : http://aplus.rs/adxmenu/
Download : http://aplus.rs/adxmenu/adxmenu-v4.zip


15.  A Great CSS Horizontal Drop-Down Menu

Demo : http://sperling.com/examples/menuh/
Article : http://sperling.com/examples/menuh/
Download : http://sperling.com/examples/menuh/menuh.css


16. CSS menus

 Demo : http://www.howtocreate.co.uk/tutorials/testMenu.html
Article : http://www.howtocreate.co.uk/tutorials/testMenu.html


17. Pure CSS Fish Eye Menu

Demo : http://www.jampmark.com/html+css-techniques-demos/pure-css-fish-eye-menu-demo.html#expandDown
Article : http://www.jampmark.com/html+css-techniques/pure-css-fish-eye-menu.html
Download : http://www.jampmark.com/downloads/javascript-html-css-codes/pure-css-fish-eye-menu.html


18. A centered menu with gradient and two pointers

Demo : http://www.cssplay.co.uk/menus/two_points.html
Article : http://www.cssplay.co.uk/menus/two_points.html

19. Create an Advanced CSS3 Menu

Demo : http://blog.cameronbaney.com/tutorials/cbdb-menu/demo.html
Article : http://blog.cameronbaney.com/tutorials/advanced-css3-menu/
Download : http://blog.cameronbaney.com/tutorials/cbdb-menu/cbdb-menu.zip


20. Solid Block Menu

Demo : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/solid_block_menu/
Download : http://www.dynamicdrive.com/cssexamples/media/blockdefault.gif
http://www.dynamicdrive.com/cssexamples/media/blockactive.gif


21. Sleek Pointer Menu

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


22. Sleek Pointer Menu 2

Demo : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Article : http://www.dynamicdrive.com/style/csslibrary/item/sleek-pointer-menu-2/
Download : http://www.dynamicdrive.com/cssexamples/media/rightround2.gif
http://www.dynamicdrive.com/cssexamples/media/pointer.gif


23. How to Create a CSS Menu Using Image Sprites

Demo : http://line25.com/wp-content/uploads/2009/css-menu/demo/demo.html
Article : http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites
Download : http://line25.com/wp-content/uploads/2009/css-menu/demo/awesome-menu.zip


24. CSS Sprite Navigation Tutorial

Demo : http://www.ehousestudio.com/assets/downloads/sprite/
Article : http://www.ehousestudio.com/blog/view/css_sprite_navigation_tutorial
Download : http://www.ehousestudio.com/assets/downloads/sprite.zip

25. CSS Overlapping Tabs Menu

Demo : http://www.tutorialsphere.com/homemade/uploads/2009/02/css-overlapping-tabs-menu.html
Article : http://www.tutorialsphere.com/homemade/2009/02/18/css-overlapping-tabs-menu
Download : http://www.tutorialsphere.com/homemade/uploads/2009/02/tabs.gif


26. CSS Navigation Menus

Article : http://www.jacorre.com/design/cssnavmenus.htm

27.
CSS3 Chunky Menu

Demo : http://zubeta.com/demo-menu.html
Article : http://zubeta.com/css3-menu-demo.html


28. Creating a glassy non div navigation bar

Demo : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/
Article : http://www.james-blogs.com/2009/01/07/creating-a-glassy-non-div-navigation-bar/
Download : http://www.james-blogs.com/wp-content/tutorials/glassy-nav-tabs/nav-tab-bg.png


29. Centered Tabs with CSS

Demo : http://24ways.org/examples/centered-tabs-with-css/final.html
Article : http://24ways.org/2005/centered-tabs-with-css


30. Apple’s Navigation bar using only CSS

Demo : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css
Article : http://westciv.com/style_master/blog/apples-navigation-bar-using-only-css


31. Animated horizontal tabs

Demo : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Article : http://www.dynamicdrive.com/style/csslibrary/item/animated_horizontal_tabs/
Download : http://www.dynamicdrive.com/cssexamples/media/tab-blue-right.gif
http://www.dynamicdrive.com/cssexamples/media/tab-blue-left.gif


32. A Horizontal Button Menu - The Easy Way

Demo : http://www.cssplay.co.uk/menus/listnine.html
Article : http://www.cssplay.co.uk/menus/tutorial.html


Naah.... banyak kan...?
sekarang Selamat Mencoba...
Semoga bermanfaat.

Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Baca artikel lain :

Membuat Label Animasi blogumulus

Blogumulus adalah sebuah label tag cloud berbentuk animasi atau label flash. Blogumulus bentuknya lebih unik karena teks label tag cloud ini bisa bergerak memutar seperti globe bila mouse kita arahkan ke area Blogumulus.
Blogumulus  awalnya bernama Tag-Cumulus yang diciptakan oleh Roy Tanck untuk pengguna Wordpress. Dan berkat kreatifitas Amanda Fazani sebagai pengguna  blogger, Tag-Cumulus yang banyak dikenal dengan nama Blogumulus pada waktu yang lalu bisa dipakai di blogger.  Tapi entah kenapa sekarang Javascript yang yang saya post pada artikel ini sudah tidak berfungsi.
Jadi saya harus update ulang artikel ini, agar sobat blogger yang tetap menginginkan animasi ini takkan kecewa. Untuk itu saya ucapkan terima kasih banyak pada sobat Apal dan sobat Amricow, karena komentar mereka saya jadi tahu kalau kode yang saya tampilkan sudah kadaluarsa...sa...sa....

OK....bila sobat tetap menginginkan animasi ini, saya ada solusi lain. Tapi animasi Blogumulus ini tidak menghubungkan dengan label atau tag cloud, melainkan kita memberi tag link secara manual. Walaupun demikian Blogumulus ini tidak kalah menarik dibanding dengan Blogumulus yang sudah kadaluarsa tadi.

LIHAT DEMO


Silahkan anda ikuti langkah - langkah berikut ini bila anda berminat membuat :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget

4. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

5. Copy dan paste kode dibawah ini pada gadget tersebut :

<div align="center" style="display:true;background:#ffffff; border: 1px solid rgb(198, 198, 198); padding: 0px;">
<script src="http://sites.google.com/site/ruangsc/enes/swfobject.js" type="text/javascript">
</script>
<br />
<div id="flashcontent">
<a href="http://www.carabuatwebgratis.com/">Cara Buat Web Gratis</a></div>
<script type="text/javascript">
var so = new
SWFObject('http://www.swfcabin.com/swf-files/1275932799.swf', 'tagcloud',
'400', '200', '7', '#000000');
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0xfbfe01");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "150");
so.addVariable("tagcloud", "<tags><a href='ULR' style='15'>JUDUL</a><a href='ULR' style='11'>JUDUL</a><a href='ULR' style='20'>JUDUL</a><a href='ULR' style='25'>JUDUL</a><a href='ULR' style='15'>JUDUL</a><a href='ULR' style='10'>JUDUL</a></tags>");so.addParam("allowScriptAccess", "always");so.write("flashcontent");</script></div>

Catatam :

• Nilai 400 adalah Lebar ruang animasi.
• Nilai 200 adalah Tinggi ruang animasi.
• Lebar div 100% (anda bisa menentukan ukuran sendiri).
• Semakin banyak link yang anda masukkan akan terlihat lebih indah. 
• Atribut style menentukan besar kecilnya teks yg muncul
• Untuk menambah tags / Link, harus rapat tanpa spasi atara link satu dengan yang lain seperti berikut :

<a href='ULR' style='15'>JUDUL</a><a href='ULR' style='15'>JUDUL</a>

6. SIMPAN

 
Ada banyak template yang tidak suport dengan script diatas, seperti Blog ini. Tapi setelah Edit Bin Edit, akhirnya saya mendapatkan solusi.

Anda bisa lihat Animasi  Blogumulus hasil rekayasa ulang saya, yang ada pada sidebar kanan Blog ini.

Jadi intinya script ini harus dipastikan pada deretan kode tertentu harus benar - benar rapat, terutama pada penulisan Link / ULR.

Berikut script sebagai solusi, apabila anda menggunakan script tidak bekerja dengan baik :

<div align="center" style="display:true;background:#ffffff; border: 1px solid rgb(198, 198, 198); padding: 0px;"><script type="text/javascript" src="http://sites.google.com/site/ruangsc/enes/swfobject.js"></script><a href="http://www.carabuatwebgratis.com/">Cara Buat Web Gratis</a><div id="flashcontent"><embed width="400" height="200" flashvars="tcolor=0xfbfe01&amp;mode=tags&amp;distr=true&amp;tspeed=150&amp;tagcloud=&lt;tags&gt;DERETAN ULR ANDA TANPA JARAK SPASI&lt;/tags&gt;" allowscriptaccess="always" wmode="transparent" quality="high" bgcolor="#000000" name="tagcloud" id="tagcloud" src="http://www.swfcabin.com/swf-files/1275932799.swf" type="application/x-shockwave-flash"/></div></div>

Catatan :
Saran saya..., tidak langsung memasukkan Link/ULR satu persatu pada script diatas. Tapi sebaiknya anda buat pada notepad DERETAN ULR TANPA SPASI, dengan catatan format word wrap pada notepad tidak di centang. Untuk memastikan ULR yg anda buat benar - benar utuh.

Setelah jadi, deretan ULR yg anda buat tadi  harus di PARSE. 
Anda bisa gunakan TOOL PARSE HTML gratis DISINI

Oh iya maaf, warna background saya ganti dengan warna Putih, tapi anda bisa menggantinya sesuai selera anda.

Selamat mencoba ya... Semoga berhasil seperti pada Blog ini dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar dengan menggunakan nama anda yang benar ya......agar saya bisa merespon komentar anda dengan baik.

Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

Cara membuat Tag Cloud

Tag cloud sama dengan Label atau biasa disebut label cloud yaitu merupakan daftar kategori semua label yang digunakan untuk menandai suatu artikel. Untuk membuat tag cloud, anda harus pasang gadget label terlebih dahulu lalu membuat label pada setiap artikel atau postingan pada blog anda. Cara pasang gadget label dan cara membuat label, anda bisa lihat DISINI.

OK.... sekarang kita langsung cara membuat Tag cloud, Silahkan anda ikuti langkah - langkah dibawah ini:
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.




3. KLik tab Edit HTML.

4. Klik tulisan Download Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.
5. Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

]]></b:skin>

7. Copy kode di bawah ini dan taruh tepat diatas kode ]]></b:skin> :

/* Label Cloud Styles
----------------------------------------------- */
#labelCloud {text-align:center;font-family:arial,sans-serif;}
#labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
#labelCloud a{text-decoration:none}
#labelCloud a:hover{text-decoration:underline}
#labelCloud li a{}
#labelCloud .label-cloud {}
#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
#labelCloud .label-cloud li:before{content:"" !important}

8. Kalau tadi diatasnya sekarang Copy kode di bawah ini dan taruh tepat dibawahnya kode ]]></b:skin>

<script type='text/javascript'>
// Label Cloud User Variables
var cloudMin = 1;
var maxFontSize = 20;
var maxColor = [0,0,255];
var minFontSize = 10;
var minColor = [0,0,0];
var lcShowCount = false;
</script>

9. Simpan template.

10. Masih pada Edit HTML, silahkan anda cari kode yang mirip dengan kode di bawah ini (biasanya yang berbeda pada  id='Label1'). Dan alangkah baiknya backup terlebih dahulu template ke komputer anda agar template aman, bila terjadi kesalahan. :

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

11. Ganti kode diatas dengan kode di bawah ini :

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a&gt;b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = &quot;<data:label.name/>&quot;;
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] &lt; cloudMin){
continue;
}
for (var i=0;3 &gt; i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

12. Simpan Template!
Selesai ! waaaah..... panjang bangeeeet........ (Jangan khawatir setiap tutorial blog Html Noer sudah teruji keberhasilannya).

Nah ..., sekarang Selamat Mencoba...
Semoga bermanfaat.

Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Baca artikel lain :

Radio Online

Radio Online atau biasa disebut dengan radio streaming yang bisa didengarkan lewat media online. Radio ini sangat menarik bila dipasang di blog kita. Selain ukuran filenya kecil sehingga enak didengar tanpa terdengar putus-putus, radio yang saya buat di blog ini terdapat 70 lebih radio streaming yang saya kumpulkan dalam satu bentuk media player. Dan player yang saya gunakan adalah Media Player Windows.
Di radio ini anda tinggal pilih stasiun radio yang ada di menu drop down dibagian bawah, lalu klik radio yang anda suka dan kemudian anda tunggu sesaat hingga proses koneksi selesai..... dan bunyi deh....
Untuk sementara jumlah radio steaming yang saya kumpulkan hanya seperti yang ada di menu, tapi lumayan cukup untuk sebagai teman online nonstop 24 jam perhari. Dan saya berharap akan selalu update jumlah radio streaming, agar lebih banyak pilihan suka-suka....hehe..

Okey.....anda juga bisa pasang radio seperti tampak di sebelah kiri halaman ini di blog anda, enak kok kita pilih radio yang enek-enak lagunya dan dilain tab windows kita sambil nulis artikel..... wah....ndak terasa kita nulis sampai kehabisan halaman...hehehe...
Bila anda berminat, silahkan ikuti langkah berikut :
1. Login ke blogger dengan id anda.
2. klik “Rancangan” atau “Layout”.
3. Klik Tambah Gadget di kiri atau kanan Layout.
4. Cari dan pilih gadget HTML/Java Script.
5. Tulis Judul yang diinginkan.
6. DOWNLOAD KODE DISINI dan Copy lalu paste kode tersebut pada bagian Konten gadget.
7. Kemudian klik Simpan.

Selamat menikmati radio anda yang baru....
Semoga bermanfaat....
Mohon luangkan waktu anda untuk meninggalkan komentar anda ya..... Terima kasih.

Baca artikel lain :

Cara Membuat label di blog

Label diperlukan agar kita lebih mudah mengkatagorikan sebuah artikel, dengan label kita lebih mudah memilih artikel sesuai dengan kategori atau jenis artikel tertentu. Selain itu label juga berpengaruh  sebagai kata kunci atau tag cloud pada searh engine. Dalam hali ini terlebih dulu kita harus selalu memberi label pada setiap artikel yang kita buat atau akan kita posting. 

Lalu bagaimana cara membuat label ?

Okey...., untuk membuat label saya akan coba jelaskan dalam beberapa cara, mengingat banyak teman yang sudah posting artikel banyak tapi belum memberi label.

A. Pada saat kita buat artikel. 

1. Login ke blogger
2. Pilih Entri Baru

3. Tulis Artikel Anda
 
 4. Memberi Label
Pada gambar diatas, anda lihat pada bagian bawah kanan bertuliskan "Label". Silahkan anda isi sebuah atau beberapa kata kunci yang menggambarkan artikel yang anda tulis.
5. Terbitkan Entri.

B. Bila Artikel sudah dibuat tapi Label belum dibuat

Anda masih bisa buat label pada artikel anda Yaitu :
1. Login ke blogger
2. Pilih Edit Entri
 

Selanjutnya langkah ke 3 - 5 lakukan seperti langkah A.

Anda bisa lihat hasil label yang sudah anda lihat pada halaman edit entri, yaitu tulisan berwarna hijau setelah judul Posting adalah label yang kita buat. Lihat gambar dibawah :

Setelah anda membuat label pada seluruh artikel atau postingan anda, selanjutnya anda tinggal menampilkan label pada halaman depan blog anda. Perhatikan langkah berikut :

1. Login ke blogger
2. Klik Rancangan dan pilih Elemen Laman

3. Tambah Gadget



4. Pada jendela baru anda scroll kebawah dan pilih "Label"
 

5. Simpan.


Nah..., label sudah anda buat, dan gadget label sudah ditampilkan. Silahkan anda kembali kehalaman depan blog anda, perhatikan hasil yang terjadi pada gadget Label.

Keterangan :

Pada edit gadget ada beberapa pengaturan tentang penampilan label, silahkan anda atur sesuka anda.


Selamat mencoba dan Semoga bermanfaat.... Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini. Jangan lupa luangkan waktu untuk beri komentar ya...... Terima kasih.

Baca artikel lain :

Cara membuat Slider

Kalau yang lalu saya membahas cara membuat slideshow, tutorial blog kali ini saya akan coba share mengenai slider. Perbedaan slideshow dengan Slider yaitu Kalau slideshow bekerja secara otomatis, sedang slider yang akan saya bahas yaitu slider bergerak kesamping kanan atau kiri apa bila kita mengklik tombol yang ada di sisi kanan dan kiri slider tersebut.

Contoh 1  Gambar slider seperti ini :

Contoh 2  Gambar slider seperti ini :

LIHAT DEMO CONTOH 1

LIHAT DEMo CONTOH 2

Bila anda berminat, silahkan anda ikuti langkah-langkah berikut ini :
1. Login ke blogger
2. Klik Rancangan dan pilih edit html
3. Sebagai pengaman silahkan download dulu template dan simpan dikomputer anda.
4. Silahkan anda cari kode </head>
5. Copy kode dibawah ini, dan paste diatas kode </head> 

Untuk slider contoh 1 :

<script src='http://bnote.googlecode.com/files/jquery-1.2.6.min.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery.jcarousel.pack.js' type='text/javascript'></script> <script src='http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:0 20px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {width: 850px;height: 254px;} .jcarousel-skin-tango .jcarousel-item {width: 270px;height: 254px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1tjjct0ZwK5Xma1IBa76vdCHV1iiMo5DeHaSmdCr-vfgsK_RE_A8l9Mt8w_RzKogDPQVtjMFs4vymY6bazSsf9fB0PuYtNo_1p7A15Utod2sOx3dl34Tj3-xv0A6JACsbGnGd6gYHtF6/s1600/image-slider-button.png) no-repeat scroll -46px 0; cursor:pointer; height:254px; right:20px; position:absolute; top:0; width:46px; } .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz1tjjct0ZwK5Xma1IBa76vdCHV1iiMo5DeHaSmdCr-vfgsK_RE_A8l9Mt8w_RzKogDPQVtjMFs4vymY6bazSsf9fB0PuYtNo_1p7A15Utod2sOx3dl34Tj3-xv0A6JACsbGnGd6gYHtF6/s1600/image-slider-button.png) no-repeat scroll 0 0; cursor:pointer; height:254px; left:20px; position:absolute; top:0; width:46px; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 3;display: none;} .jcarousel-prev {z-index: 3;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:254px;width:250px;} </style>

Untuk slider contoh 2 :

<script src="http://bnote.googlecode.com/files/jquery-1.2.6.min.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery.jcarousel.pack.js" type="text/javascript"></script> <script src="http://bnote.googlecode.com/files/jquery-ui-personalized-1.5.2.packed.js" type="text/javascript"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#mycarousel').jcarousel({ wrap:"both", scroll:2, animation:"slow" }); function mycarousel_initCallback(carousel) { jQuery('#featured-next-button').bind('click', function() { carousel.next(); return false; }); jQuery('#featured-prev-button').bind('click', function() { carousel.prev(); return false; }); jQuery('.button-nav span').bind('click', function() { carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text())); return false; }); }; jQuery('#feature-carousel').jcarousel({ wrap:"both", scroll:1, auto:10, initCallback: mycarousel_initCallback, buttonNextHTML: null, buttonPrevHTML: null }); }); </script> <style type="text/css"> .jcarousel-skin-tango .jcarousel-container {-moz-border-radius: 10px;border:2px solid #5d5d5d; background-color:#aaa;} .jcarousel-skin-tango .jcarousel-container-horizontal {width: 900px;margin: 0 auto;padding:10 10px;} .jcarousel-skin-tango .jcarousel-clip-horizontal {-moz-border-radius: 5px;width: 840px;height: 100px;margin: 0 auto;padding:10px;border:2px solid #fff; background-color:#bbb;} .jcarousel-skin-tango .jcarousel-item {width: 100px;height: 110px;} .jcarousel-skin-tango .jcarousel-item-horizontal {margin-right: 10px;} .jcarousel-skin-tango .jcarousel-item-placeholder {background: #fff;color: #000;} .jcarousel-skin-tango .jcarousel-prev-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png) no-repeat scroll 0 0; cursor:pointer; height:25px; right:0px; position:absolute; width:25px; top: 50%; } .jcarousel-skin-tango .jcarousel-next-horizontal { background:transparent url(https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png) no-repeat scroll 0 0; cursor:pointer; height:25px; left:5px; position:absolute; width:25px; top: 50%; } .jcarousel-container {position: relative;} .jcarousel-clip {z-index: 2;padding: 0;margin: 0;overflow: hidden;position: relative;} .jcarousel-list {z-index: 1;overflow: hidden;position: relative;top: 0;left: 0;margin: 0;padding: 0;} .jcarousel-list li,.jcarousel-item {float: left;list-style: none;width: 75px;height: 75px;} .jcarousel-next {z-index: 100;display: none;} .jcarousel-prev {z-index: 100;display: none;} #news-slider{background-color:#FFFFFF;padding:10px 0;} #news-slider img{border:none;height:100px;width:100px;} </style>

Catatan : Untuk membuat satu slider, anda tinggal pilih salah satu kode diatas.

Langkah selanjutnya :
4. Simpan  template.
5. Lankah selanjutnya kembali ke Rancangan dan pilih Elemen Halaman.
6. Silahkan tambah Gadget'.
7. Pilih 'HTML / Javascript' dan masukkan kode dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li><a href='Ulr dokumen 1'><img src='Ulr gambar 1'/></a></li>
<li><a href='Ulr dokumen 2'><img src='Ulr gambar 2'/></a></li>
<li><a href='Ulr dokumen 3'><img src='Ulr gambar 3'/></a></li>
<li><a href='Ulr dokumen 4'><img src='Ulr gambar 4'/></a></li>
<li><a href='Ulr dokumen 5'><img src='Ulr gambar 5'/></a></li>
</ul>
</div>

Kalau sudah diisi ulr nya, bentuknya seperti dibawah ini :

<div id='news-slider'>
<ul class='jcarousel-skin-tango' id='mycarousel'>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivE0o245y9ON1TYPf6iMtnKKmGLBqtU00HUx3lHIsVwFuj4mswXRHIpqre5p-1u6Eo9g3lrds7pShGGc5WbY2HeYMAojk-tiP1_uH5Wyu_iPxLmmfVdKKCP-7SAVR2hn6O5nw5pw0LryyP/s1600/Business+Company+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzjkIMp5vbMQPQdrlN7RT2EsaeFCZ97Su_SqVsbL3exR1pjpCZvIsoeMLSZVB1lfHI9UkNOqYVQ1JdFUw9FJoEzuOGG9ExQOEFcTCZ-NcKSrtl_lnzo0zuBwbZqXjuUfGYhXygIAwqChwj/s1600/Incorporate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi16_CDnb4Va1eK7SZFolwzREtLTe3QyOb_Et_Zsvz9dPsUzRjZE2p2H2KE8BDtmKCMSS31ZR4bwG0Kky2oHwQw0Igv8vGt0SGjE0BCqop7Q7QKIGnyg9mnmBryDndLtiNKRYqWhkFlXsg7/s1600/Business+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Wvhn2eHu4DgAI5CKIQA2-rQj0ptbwo8dYIYSocb_Nfx8eJSnloClwfQ1-oMc2wSVP0WiewoD-aoVXIrJJxA83xNWy04pfpk-p3TJ_4dtF4pz-RVyipYbXjZnytQK3FCrPcAKNMIMoDjY/s1600/Dominate+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqo4ZadeD7MrFSl6gYDDuGe66n6gs4lspPporEkQX9IFIELb1PI3XL5z6Youqkxa4bwcOfmXQ0U4GmnJyOiDzzlKw8KqSpqmCdpp1otx9C_526gLtvMqFT0UzUbLHvaa4sLXXd6p_opNTG/s1600/Business+Corp+Blogger+Template-1.jpg'/></a></li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZqxZ2VNmRdiYJGBYTUjZr7OxFI_jliL32BGwWUK0ZRYxeBNh5Tnv_-8BmoZJD9Y2e-nTZW4t2WqUD3SUzW7mYVIugp5IZD_5mznp1jMRg534S6kv_B14cFQmeuvlgmR4fH9gtkMYgEH8p/s1600/Business+View+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5Nw6WujBwLedpeGE7iiQxBhezzEiv4IaEW2eltDr6JDJCL_ECM8oUSq4KGcTHs-up1lg9BlKg2qtqMtW78zDwaY7S4TKnZ8Rhce9pOhe3Ih4eSofeO4Tw0sutAc-Nf0N7ftCjYE772hZZ/s1600/Glorius+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEippK0MNCU15XwtJvP-twBpZczZ4H3N6K94tOd0T88iSsOSQZUBSgCS9qy9a1j4_CDYK8x2llwtphZeKbUHwMvyPZ-oiUxrCO99EimUQctcMNx_NafzY9yLr76koKSatPZgIdhu-z8AZEw-/s1600/iFinance+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG4l_jdyaRLhCPBb8wifWIkth4d8rUMyulfWfRd_D7SLOxhIMxloL7PLjThu8gDRrCne_vI8e77LT9QNr5Bi0GqFXioBVsKGIFKpqpJH342M21Ng1xfcpzzBIKycOCbmeK5B3_RYBkl-Gm/s1600/Company+Style+Blogger+Template-1.jpg'/></a>
</li>
<li>
<a href='#'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIyxqw4RjvT-AOBOSgvDcvmfvgHTrm9JpD59gtOhmmibIQwLZKWfiiDwibc3XZpBBNhfH7_EWh_saONOxZUDRcMalLmcsNAQ2dTzlMni4cLyIBQKhW_Z6xnk3MnFmFDfX2Q0i7UriWy0N0/s1600/Business+Top+Blogger+Template-1.jpg'/></a>
</li>
</ul>
</div>

 
8. Simpan.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :