Membuat Kontak Komentar Facebook disamping Kotak Komentar Blog

         Cara Menambahkan Kotak Komentar Facebook di Samping Kotak Komentar Blog , yaitu sangat bergunasekali untuk membantu buat pengunjung blog berkomentar menggunakan facebook , kotak komentar nya akan dipasang bersebelahan dengan kotak komentar blog selain rapi juga dapat meningkatkan traffick blog agan berikut contoh screen shoot komentarnya gan :

 

 

 untuk cara memasang nya :

• login dulu dengan account blog yang mau di pasang
• Lalu masuk lah ke template
• Lalu edit HTML Template blog dan jangan lupa centang Expand Template Widget
• Cari kode <div class='comments' id='comments'>
  menggunakan Ctrl + F

kalau kode <div class='comments' id='comments'> ada 2 pasangan lah kode di bawah ini bawah         kode ke 2 dari <div class='comments' id='comments'>

     kode yang akan dipasang :

 <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

 

 

 

• lalu cari lagi kode </head>
  

lalu pasangkan kode di bawah ini tepat di atas kode </head>

kode yang dipasang :

 <script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='ID Facebook' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>

 

 

 

Ganti ID Facebook dengan url id profil facebook kepunyaan sobat.

• Cari kode yang mirip dengan kode /* Comment atau #comments
    lalu pasangkan kode dibawah ini diatas kode/* Comment atau #comments
  

      

kode yang dipasang :
 .comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}

 

 

 

 Terakhir simpan untuk melihat hasil nya gan.

Membuat Recent Post Thumbnail Bergerak Atas Kebawah

Untuk Mempercantik Blog dan terlihat Bagus menjadi daya tarik tersendiri bagi pengunjung. Salah satu upaya untuk itu dengan menampilkan Recent Post, yang fungsinya agar Pengunjung blog lebih mudah melihat-lihat postingan melalui cuplikannya.
Kita langsung aja, 

berikut ini cara membuat recent post thumbnail bergerak Atas Ke Bawah di blog :

1. Login ke akun blogger.com.
2. Pilih "Rancangan" atau "Design".
3. Pilih "Add gadget" pada bagian "Page elements" dan lalu pilih "html javascript".
4. Isikan judul widgetnya dan copas kode recent post di bawah ini ke kotak tersebut dan ganti tulisan Biru dengan alamat blog sobat

 <center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://alfacellular.googlecode.com/files/jquery.min.js.js" type="text/javascript">
</script>
<script src="http://alfacellular.googlecode.com/files/newsticker-plick.js.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://dudu-blogger-poetra-tasik.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

 Nah Kemudian "Save" dan lihat hasilnya.


Selamat Mencoba & Semoga Bermanfaat !!!

APLIKASI UNTUK PROFIL FACEBOOK

Jika Anda ingin mengubah gambar profil di Facebook dengan keren, Anda bisa menggunakan cara-cara yang berbeda ke profil Facebook Anda. Bahkan, beberapa fitur di dalamnya mampu mengambil foto profil langsung dari Webcam.

1. Pic Scatter
Pic Scatter adalah fitur yang hampir mirip dengan Profil Maker. Fitur ini dapat membuat gaya profil baru untuk Facebook Anda. Bahkan, bisa Anda lakukan setiap saat.

Perbedaan antara aplikasi ini dengan Profil Maker adalah pada penempatan foto yang memberikan Anda pilihan untuk mengirim foto profil yang Anda buat untuk dinding teman atau dinding halamannya.

1. Facebook Banner
FBanners adalah situs Web yang memiliki ratusan desain unik yang dapat Anda gunakan untuk menyesuaikan gambar profil di samping profil utama. Karena berbagai gaya telah di sediakan dalam situs ini, Anda harus dapat menemukan satu yang sesuai selera Anda. Di jamin Anda akan bingung memilih tampilan karena banyaknya tawaran dari situs ini.


1. Profile Maker
Profil Maker adalah Anda bisa langsung menggunakan fasilitas ini tanpa harus meninggalkan Facebook, karena editingnya langsung di lakukan di Facebook..

Caranya, kunjungi http://apps.facebook.com/profile-maker/, lalu tekan tombol Izinkan. Setelah itu, anda bisa membuat foto profile Anda dengan memainkan tombol-tombol yang tersedia. Bahkan, Anda bisa memanipulasi tampilan foto dengan cukup elegan.

TANDA PROFIL PALSU FACEBOOK

Dari sekian orang yang mendaftarkan diri di Facebook, tidak semuanya menuliskan data yang sebenarnya. Sebagian facebooker justru memasang identitas palsu dengan berbagai macam tujuan, seperti memata-matai, mengumpulkan data-data dari Facebook seseorang, menipu, menfitnah hingga sekedar iseng untuk berbuat usil.

Ada beberapa ciri profil palsu yang bisa anda gunakan untuk mendeteksi profil palsu. Jika ada di antara teman anda yang memiliki ciri khas seperti di bawah ini, sebaiknya blokir saja, sehingga anda akan lebih aman berkomunikasi lewat Facebook. Berikut ini beberapa karakter profil palsu yang biasa digunakan :

1. Profil palsu dibuat dengan identitas berjenis kelamin wanita cantik.

2. Terdapat koleksi foto cewek cantik dengan penampilan memikat.

3. Data pada jenis hiburan, Film, hoby serta data identitas lainnya, sengaja di arahkan berbau pornografi

4. Info profil terlalu singkat dengan kategori tidak dilengkapi. Misalnya tidak menyebutkan nama sekolah dan tahun angkatan

5. Daftar temannya lobih dominan laki-laki lajang.

6. Pada pesan dinding, banyak sekali komentar dari teman-temannya.

7. Tidak memiliki galeri foto hasil tag dari teman atau sahabat-sahabat terdekatnya.

Jika anda menerima Friend Request dari seseorang yang sama sekali tidak anda kenal, sebaiknya batalkan atau abaikan saja.

Cara Instalasi Windows XP

Kita langsung saja ke pri hal...
Untuk melakukan penginstalan windows xp diperlukan ketelitian dan kesabaran dalam prosesnya karena memerlukan waktu yang lumayan lama.

Ada beberapa jenis windows xp diantaranya windows xp professional, Home Edition, Media Center Edition, Tablet PC Edition, Starter Edition, Professional x64 Edition, Professional 64-bit Edition For Itanium.

berikut langkah-langkah yang mudah dan lengkap cara menginstal windows xp :

1. Siapkan CD WINDOWS XP

2. Siapkan CD DRIVER MOTHERBOARD

3. Atur bios terlebih dahulu agar prioritas bootingnya dimulai dari CD(DVD)-ROM, caranya:

a. Masuk ke BIOS dengan menekan tombol Del, atau F1, atau juga F2.
Pilih menu Advanced Settings, kemudian carilah ‘Boot Priority’ atau yang sejenis.

b. ubah pengaturanya, agar CDROM jadi urutan yang pertama kemungkinan pilihan ini ada 2 jenis

* menu ‘First boot priority’, ‘Second boot priority’ dll: Aturlah ‘First boot priority’ ke ‘CDROM’ dengan menekan tombol PgDn/Pgup (Page Down/Up) atau +/-.
Atur juga ‘Second boot priority’nya ke HDD0/HDD1.
* Jika menunya ‘Boot priority’: atur ke ‘CDROM, C, A’ atau ‘CDROM, A,

C. dengan menekan tombol PgDn/Up.

Cara paling mudah instal windows xp
(lengkap dengan gambar):

gak usah di utak-atik biosnya. biarin aja bios diload masukin CD WINDOWSnya, lalu Restart komputer, trus tekan-tekan F8 atau F10 atau F11 (boleh dicoba satu-satu) nanti bakal muncul opsi boot selection. pilih aja yg ada 'bau' cd-nya. trus enter. selesai deh...ga pake repot-repot...

4. Tunggu beberapa saat sampai muncul tulisan "press any key to boot from CD" seperti tampilan Seperti gambar di bawah ini



5. Tekan ENTER atau sembarang tombol, lalu proses instalasi akan mengecek hardware komputer anda, kemudian akan muncul tulisan "windows setup" seperti gambar dibawah ini



6. lalu file-file di dalam cd akan di load ke dalam komputer, kemudian akan muncul tampilan "welcome to setup" seperti gambar dibawah ini



7. Tekan "ENTER" untuk menginstal windows xp, "R" untuk repair system windows yang sebelumnya pernah terinstal, "F3" untuk keluar dari proses instalasi, lalu akan muncul (End User Licese Aggrement) seperti gambar di bawah ini



8. Tekan "F8" kemudian proses instalasi akan mencari dan membaca partisi hardisk anda, kemudian akan muncul semua partisi hardisk anda, seperti gambar di bawah ini



9. Tekan "ENTER" untuk langsung menginstal windows, "C" untuk membuat partisi hardisk anda, kapasitas partisi sesuai dengan kebutuhan anda, dalam satuan MB, selanjutnya jika anda membuat partisi dengan menekan tombol "C", maka akan muncul gambar seperti di bawah ini



10. Kemudian tuliskan kapasitas partisi yang ingin anda buat, seperti terlihat pada gambar diatas, sebagai contoh, misalkan kapasitas hardisk anda 40 GB, lalu anda ingin membagi dua, maka tuliskan 20000,jangan 20, karna partisi satuannya MB, tentunya anda mengerti kan...?? cat" 1GB = 1000 MB

11. Kenudian tekan "ENTER" maka akan muncul gambar seperti dibawah ini



12. kemudian pilih "format the partition using the NTFS file system (Quick)" atau "format the partition using the NTFS file system (Quick)" lalu tekan "ENTER" maka akan muncul layar sepert gambar di bawah ini



13. Kemudian arahkan pointer pada posisi "unpartitioned space", lalu tekan "C" maka akan muncul gambar seperti gambar sebelumnya, dalam hal ini layar yang akan muncul seperti gambar sebelumnya menunjukan sisa partisi yang telah anda bagi, jika anda cuma membagi 2 partisi saja maka langsung tekan "ENTER" tapi jika anda ingin mempartisi lagi sisa hardisknya maka tinggal di bagi lagi aj, seperti langkah-langkah sebelumnya, mengertikan maksud saya....??
setelah selesai partisi ketika anda menekan "ENTER" seperti yang di jelaskan di atas, maka akan muncul gambar sperti gambar diatas, setelah itu arahkan poiter di posisi C: partition1 [New Raw], tapi biasanya sudah berada di posisi tersebut, maka anda tinggal menekan "ENTER" saja untuk proses instalasi windows, kemudian akan muncul proses format seperti gambar di bawah ini



14. Setelah selesai format, kemudian windows akan ,menyalin file untuk proses instalasi, seperti gambar di bawah ini



15. Setelah proses penyalinan selesai, secara otomatis komputer akan melakukan restart seperti gambar di bawah ini, dalam hal ini untuk mempercepat proses restart, anda bisa langsung menekan "ENTER"



16. Setelah itu akan muncul loading windows seperti gambar di bawah ini



17. selanjutnya proses instalasi windows di mulai 1..2..3...GOoooo muncul layar seperti gambar di bawah ini



18. selanjutnya tinggal menunggu, sambil ngopi jg bisa, biar lebih terinspirasi, eitssss, tp jangan kemana mana dulu, karna selanjutnya akan muncul layar seperti gambar di bawah ini



19. Langsung klik "NEXT" aja BOS...!!! lalu mucul lagi bos layar seperti gambar di bawah ini



20. Isi nama dan organisasinya, terserah BOS aja... lalu tekan "NEXT" kemudian akan muncul layar seperti gambar di bawah ini



21. Masukan serial nombernya, jangan sampe salah ya....!!! kemudian tekan "Next" selanjutnya akan muncul layar administrator, isi aja mau dinamain apa komputernya, terserah deeeehhhhh......
kalau mau pake pasword tinggal di isi juga paswordnya, terserah juga mo apa paswordnya.... lalu tekan "Next" maka muncul layar Date and Time Setting seperti gambar di bawah ini




22. Masukan settingan jam dan tanggal, tentukan juga time zone anda, untuk jakarta : pilih GMT+7 Klik "Next" lagi BOS.... setelah proses instalasi windows delanjutkan, seperti gambar di bawah ini



23. Silahkan Menunggu lumayan lama BOS,.... sampai muncul layar seperti gambar di bawah ini



24. Selanjutnya akan muncul layar work group or computer Domain,seperti gambar di bawah ini



25. jika komputer anda terhubung dengan sebuah domain, maka isikan nama domainnya, tapi jika komputer anda stand alone, maka pilih radio button yang paling atas, lalu tekan "Next"

26. Selanjutnya akan muncul display setting, seperti gambar di bawah ini, klik "OK" aja BOS....!!!



27. Kemudian windows akan mendeteksi tampilan optimal dari PC anda, seperti terlihat pada gambar di bawah ini, Klik "OK" aj BOS...!!!



28. Proses instalasi hampir selesai BOS..... selanjutnya akan muncul loading jendela windows seperti gambar di bawah ini



29. Selanjutnya anda akan dibawa masuk ke dalam windows untuk pertama kalinya seperti terlihat pada gambar di bawah ini, tekan "Next" aj BOS..



30. Selanjutnya akan muncul layar "Help Protect Your PC", seperti gambar di bawah ini, kemudian pilih "Not Right Now" lalu tekan "Next"



31. Kemudian komputer akan mengecek koneksi ke internet, seprti terlihat pada gambar di bawah ini, pilih "Yes" lalu tekan "Next"



32. Kemudian akan muncul pilihan aktivasi windows, seperti gambar di bawah ini, lalu tekan "Next"



33. Setelah itu akan muncul tampilan seperti gambar di bawah ini yang menunjukan pilihan untuk menambah pengguna komputer, Anda bisa memasukkan beberapa pengguna yang akan mengakses komputer Anda, Namun jika satu akun sudah cukup, atau Anda menginstall komputer untuk dipakai bergantian, cukup masukkan satu user kemudian klik "Next"

34. Proses instalasi windows selesai, kemudian akan muncul layar seperti gambar di bawah ini, klik "finish", maka proses instalasi selesai.....



35. Selesailah sudah semua.... kemudian perlahan masuk ke windowsnya seperti telihat pada gambar di bawah ini




36. Kemudian tinggal menginstal CD Driver Motherboad, dan perangkat pendukung lainnya....

Demikianlah langkah-langkah dan cara install windows xp lengkap berikut gambarnya..

"Semoga Bermanfaat"

Demikianlah artikel mengenai Cara Instalasi Windows XP

Scroll Untuk Menghemat Halaman

Seperti halnya kita membuat spoiler atau teks area, dalam pembuatan fungsi scroll dalam blog berfungsi untuk menghemat halaman post maupun sidebar, dengan membuat ukuran yang sesuai dengan panjang dan lebar template kita.

Fungsi scroll tidak hanya bisa digunakan dalam suatu posting, bisa juga digunakan dalam sidebar untuk menghemat ruang sidebar atau untuk menghemat ruang dalam komentar yang berderet panjang, untuk membuat fungsi scroll ini tidak membutuhkan kode HTML yang panjang, hanya membutuhkan script seperti dibawah ini :

<div style="overflow:auto;width:350px;height:150px;padding:10px;border:1px solid #C33F00">
ISI SCROLL BAR
</div> 

Sebagai contoh kita akan membuat menu post dengan memakai fungsi scroll, penerapannya seperti contoh dibawah ini :

<div style="overflow:auto;width:350px;height:150px;padding:10px;border:1px solid #C33F00">  
1. Isi Scroll bar hanya dengan sebuah teks

2. Isi Scroll bar dengan sebuah link <a href="http://dudu-blogger-poetra-tasik.blogspot.com/2012/11/membuat-fungsi-scroll-untuk-menghemat.html">Cara Membuat Teks Area Untuk Blogspot</a>  

3. Isi scroll bar dengan sebuah gambar <img src="http://dudu-blogger-poetra-tasik.blogspot.com/-LBw4179bRS0/TqVBZw5QtdI/AAAAAAAAACQ/554KblqPsh4/s1600/Situseo+no+image.jpg" /> 
</div> 

Hasilnya :

1. Isi Scroll bar hanya dengan sebuah teks

2. Isi Scroll bar dengan sebuah link Cara Membuat Teks Area Untuk Blogspot

3. Isi scroll bar dengan sebuah gambar

Keterangan :
width:350px : merupakan lebar dari scroll bar
height:150px : merupakan tinggi dari scroll bar
padding : merupakan jarak antara garis pinggir
border : merupakan ketebalan garis frame

yang saya contohkan hanya sebagai ilustrasi saja, kalian bisa mengisi fungsi scroll dengan item-item yang kalian inginkan.

>>>>>>>> Semoga bermanfaat <<<<<<<<

Bikin Animasi Mengikuti Cursor

Membuat objek animasi atau gambar mengikuti cursor caranya cukup mudah.

Dengan cara ini maka sebuah gambar akan terus berada di letak tempat cursor berada.

Di sini saya menggunakan Macromedia Flash. Caranya seperti ini :
1. Buatlah sebuah gambar untuk dijadikan objek pengikut
2. Setelah jadi, seleksi gambar tersebut
3. Lalu pilih menu Modify > Convert to Symbol atau langsung tekan F8
4. Namanya terserah, typenya Movie Clip dan titik registrasinya tepat berada di tengah
5. Klik OKEY
6. Seleksi movie clip tersebut lalu tekan F9 untuk memunculkan panel Actions tempat memasukkan Action Script
7. Masukkan Action Script ini

 onClipEvent(enterFrame){ //
ketika movie clip masuk ke frame this._y+=_ymouse //
letak _y sama dengan letak _ymouse this._x+=_xmouse //
letak _x sama dengan letak _xmouse }

 8. Cara mengetes animasi pada macromedia cukup pilih menu Control > Test Movie atau tekan Ctrl+Enter

Widget Kumbang Mengikuti Cursor

langsung aja tutorialnya... Seperti biasa, kita buat sebuah dokumen baru. Sekarang yang mengikuti kursor adalah kepik, atau kumbang, gambar yang bagus ya..

kumbang Setelah kita gambar kumbang yang bagus, kemudian seleksi kumbang tersebut atau tekan Ctrl + A (Seleksi semua).

Kemudian kita klik kanan pada kumbang tersebut dan pilih Convert To Symbol, lalu pilih MovieClip (Setting seperti di gambar ya ) convert to symbol convert to symbol Oke,

sekarang Kumbang kita jadi sebuah MovieClip.
Terlebih dahulu kita klik kumbangnya dulu terus kita pergi ke panel properties (caranya tekan Ctrl + F3) dan ubah instance name-nya menjadi kumbang_mc.

properties kumbang properties kumbang Sekarang kita beralih ke Actionscript nih, siap2 ya.. :lol:

Buka Panel Actions dengan menekan F9 pada keyboard, jika yang muncul adalah Panel Actions – MovieClip, berarti kita harus meng-klik Layer 1 frame 1 agar Panelnya menjadi Actions – Frame. actions - frame actions - frame Kemudian ketikkan script berikut :

01 _root.onEnterFrame=function(){
02 //mencari selisih dari koordinat
03 var deltaX = _xmouse - kumbang_mc._x;
04 var deltaY = _ymouse - kumbang_mc._y;
05 //menggerakkan kumbang ke kursor sebesar 1/10 dari jarak ke kursor
06 kumbang_mc._x += deltaX / 10;
07 kumbang_mc._y += deltaY / 10;
08 //kumbang menghadap ke mouse
09 kumbang_mc._rotation = -Math.atan2(-deltaX,-deltaY)*180/Math.PI;
10 }

menu Navigasi Horizontal Blogger 3

Menu Navigasi Horizontal Bag. III # 21- # 30

Menu Navigasi Horizontal # 21

<style> #tabs3 img { border: none; } #tabs3 { float:left; width:100%; background:#E4E6EB; font: bold 7.5pt Verdana; line-height:normal; } #tabs3 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs3 li { display:inline; margin:0; padding:0; } #tabs3 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi67D7Hh99WfBJcQPWQolvqSGmHRlOoephyphenhyphenruEBFEOucl8Z8SA8gEj6XCzFofzzt9UZGymYezoInc5HxC-i2f1-DiRR5T6acQVmgURe7noKksHL8bl6UakwrkKwVe9JTEGmOHJOZWYL6ks/s1600/tableft3.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs3 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFbx9FZ8t1JEIYRFePQI5SsM9_coEFi0gaa1V1xLlalxarx4qIS0R7JCgBevW0dqlKkuwNo3HW8RBb0Z_vhrfWUNjXEAgijLZFbrPikh1nnvGcv0kX_J5Um8vID5hKaMa3bwiTvtk_MIo/s1600/tabright3.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs3 a span {float:none;} /* End IE5-Mac hack */ #tabs3 a:hover span { color:#FFF; } #tabs3 a:hover { background-position:0% -42px; } #tabs3 a:hover span { background-position:100% -42px; } #tabs3 #current a { background-position:0% -42px; } #tabs3 #current a span { background-position:100% -42px; } </style> <div id="tabs3"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 22

<style> #tabs2 img { border: none; } #tabs2 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #84776B; } #tabs2 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs2 li { display:inline; margin:0; padding:0; } #tabs2 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggfzlIJ5FH9Jq9A0dsqeV_BN0l4oLOirNcC_AlHEuhfsDKfcPJmS5lRh5JkgEEGG4Dhcd4sdkOYF9-FW7pyv7PxZGouUhE6ZHvWqdVJdrxa-uFHfvDR10RfXiBRBlUnPdsAPkGA-qMTAM/s1600/tableft2.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs2 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq7M4MWs4kBhcFdzEofsB7_ZHxlR76ikcc0j50IFdjlXazJeEwyM89XmjrIPlaPp1xbD2TzIo5SLpwehr4-yppwN2qBQ7TBUtYeSdOVHT7F_4p9wxWpvfAEB2JkwiFu-NKRw7op-VonkU/s1600/tabright2.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#84776B; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs2 a span {float:none;} /* End IE5-Mac hack */ #tabs2 a:hover span { color:#74675B; } #tabs2 a:hover { background-position:0% -42px; } #tabs2 a:hover span { background-position:100% -42px; } #tabs2 #current a { background-position:0% -42px; } #tabs2 #current a span { background-position:100% -42px; } </style> <div id="tabs2"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 23

<style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <div class="container"> <ul id="navSquare"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 24

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 25

<style> #tabsH { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline; margin:0; padding:0; } #tabsH a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCrJ7VFSdwRe9s-tKlmKfPsuoJAEYbw4CG2_xOwvIZvhn5uSOWv6UDEAPLFBqtVv5OSDF3i91umLuJgLYQp2gCC2KeawDBOlABOWpCiUCS5qW9GdiHImKoil8_kfGzwfU3tKzf5Ngkf2A/s1600/tableftH.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsH a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Ek04bGk86BXLsnrRA22bJfCk16LHan-Or2S-pR3FqWiOkXZQjZLUZW8a6-dq5mw57uQdWnaCEJXv8blcKbT5npC1ZhVywib915SB0gXHdhH1cFR2TuR1khyZBVSlVls2lwh72zSmJNA/s1600/tabrightH.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span {float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; } #tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span { background-position:100% -42px; } </style> <div id="tabsH"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 26

<style> #tabs1 img { border: none; } #tabs1 { float:left; width:100%; background:#F4F7FB; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #BCD2E6; } #tabs1 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs1 li { display:inline; margin:0; padding:0; } #tabs1 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3rUbj1nSyhckvlGllVDOL_D8hZFyvq70U5Mup-NHJw0nNPxjs5EDX_Va-3U6pkAmK3uDyIvIR8qPz2x8kKufxxXYegXW7Xq70TOhwAxGOrOGbcnd6c8VDcdtGdE8pLpaZ5666C6ZME1s/s1600/tableft1.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs1 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIqOS6VKdiDB4fuQCOSLaIiZc-rHBTO0DxaujSqNYky2DOEcr9Md5ErpZyfcBH-1rDaJrHgEBfQSIs15SRxQfg5tQ9c65es7k6xBmdJTfWrgiXjbobWFDRytiYIBMEDAYytAKVC4JJnTA/s1600/tabright1.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#627EB7; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs1 a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#627EB7; } #tabs1 a:hover { background-position:0% -42px; } #tabs1 a:hover span { background-position:100% -42px; } #tabs1 #current a { background-position:0% -42px; } #tabs1 #current a span { background-position:100% -42px; } </style> <div id="tabs1"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 27

<style> #tabs { float:left; width:100%; background:#BBD9EE; font: bold 7.5pt Verdana; line-height:normal; } #tabs ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs li { display:inline; margin:0; padding:0; } #tabs a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitys_J_RKuuHyu8aV03_attLPXAJryC5RsT7iE7bYXAcdvWaSEUEmsbSaIPoU_Ngx9IhaFi0RH42zamSzpYsJSDpPzNA3pikNQCc-jAJVIM4oQhQSDVC2JQSee6-q9fNf8_JUhKclW1zU/s1600/tableft.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxdxijui3Sg5YhJ3NrdhFmczbgFGIiQ2KXiA2gQAZppxsCwn5U36p0hnTH6HjDTa2trbFMJwegBTLLKpRXCtGjiMhyphenhyphenzfL-q7AMIoINaASwUz4hYkiYDGFE4KJ8RibEzEmAjmDdiRhvxzs/s1600/tabright.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs a span {float:none;} /* End IE5-Mac hack */ #tabs a:hover span { color:#FF9834; } #tabs a:hover { background-position:0% -42px; } #tabs a:hover span { background-position:100% -42px; } </style> <div id="tabs"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 28

<style> #tabs5 img { border: none; } #tabs5 { float:left; width:100%; background:#E3ECF3; font: bold 7.5pt Verdana; line-height:normal; } #tabs5 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs5 li { display:inline; margin:0; padding:0; } #tabs5 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEy1TuFGkykIyEBztLEUPE6r9DRQPMKO0HT2Dyb_-E9jZPq40olutWzt7IeXptx1_UJq5Yl6stYUDKY8LCnlES7WTo2NQsgQbllzEcPM4dF0ZkVs-q3uGdidR-WyCtv8xaXqFhqkBhTyE/s1600/tableft5.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs5 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7gyHZ7RD6thWI0SlHbiKBGBKr-AkUNF8o1l7m7e-Dc-TgTwRWvpi0FZJDDAO1_qzECDPQOnkKupHT2UJrzHDMnCxZezqVzGQ-T4n9giS8nRqiLOJIobHkAI9gGUiEfp7HFquuMNKVNw/s1600/tabright5.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs5 a span {float:none;} /* End IE5-Mac hack */ #tabs5 a:hover span { color:#FFF; } #tabs5 a:hover { background-position:0% -42px; } #tabs5 a:hover span { background-position:100% -42px; } #tabs5 #current a { background-position:0% -42px; } #tabs5 #current a span { background-position:100% -42px; } </style> <div id="tabs5"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 29

<style> #tabsB { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; } #tabsB ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsB li { display:inline; margin:0; padding:0; } #tabsB a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8GTI46GwOTNxk3spwU_d6QJ43iz9S7UVLEppoi99494Vw1Iyphy-j-wMSbeFC8NJaaimZe0mKwwXYGkdU5CBgGJ1UMxvNqTNq_bCbgswnT7-ryOnm0RmUi-Z5ULhs8vy37joKw1x41eQ/s1600/tableftB.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsB a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWJ1Y-a0qRT67t55coS803z35jc29fkEZ2mi_tiq9uMFhGAPbobWTus3B_sWTkjKAyGneK0mmXHvePC5ZDdkgICv0yx80QygSOi24vIEyW5enRV0vjdV4R8vrNyheq3l3hKVHnGiNzEfs/s1600/tabrightB.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsB a span {float:none;} /* End IE5-Mac hack */ #tabsB a:hover span { color:#000; } #tabsB a:hover { background-position:0% -42px; } #tabsB a:hover span { background-position:100% -42px; } </style> <div id="tabsB"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Menu Navigasi Horizontal # 30

<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTrWS0_G4THLau0oG8LQfKpxdy6AmxNiH_YcN-X0paps1SGfOrGL-6CxmK5smOTOoZVn8Xko4zir2VV_tAU_u2321IkUgejLyaEdi0_Vj_0Oy3NbXyMasuUOfx0fF1GYUCxNUuDPHbWBU/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie9W-5Df8f7nKuqYzr1bjdt_yOW6ZUfC0dx4wMsFMciaLPZ1yZnXDeBR8hUlxPGorMzd4H3VAdbzGmfHaVoKaC36sgjDsff4oLBAi26G_YACcvjZO_nCV59IxESLHlCAQmMQCrKKFhmAc/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a href="#"><span>Link 1</span></a></li> <li><a href="#"><span>Link 2</span></a></li> <li><a href="#"><span>Link 3</span></a></li> <li><a href="#"><span>Link 4</span></a></li> <li><a href="#"><span>Link 5</span></a></li> <li><a href="#"><span>Link 6</span></a></li> <li><a href="#"><span>Link 7</span></a></li> </ul> </div>

Itulah Menu Menu Navigasi Horizontal Bag I, Bag II, Bag III yang saya kumpulkan dan sedikit memodifikasi kode CSS, agar bisa digunakan atau Anda pilih salah satunya untuk dipasang pada blog sobat di Blogger.

Semoga Bermanfaat !!!