ChugyGogog

Melanjutkan dan menambahkan postingan yang lalu mengenai pembuatan menu navigasi horizontal dengan tab pointer no image , kali ini saya coba membuat menu navigasi horizontal dengan tambahan search box atau kotak pencari. menu navigasi horizontal ini masih cukup simple hanya menggunakan sedikit gradasi dan juga box shadow css3 pada background. Lihat Demo Untuk pemasangannya saya coba memasang pada area widget template supaya lebih cepat. Tambah widget pada bagian bawah header template blogger > Pilih HTML/JavaScript lalu masukan kode dibawah ini : <style type="text/css"> .black{ float:left; margin-bottom:10px; padding:0px; width: 100%; overflow: hidden; background: #499bea; background: -moz-linear-gradient(top, #999 0%, #000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(100%,#000)); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#999', endColorstr='#000',GradientType=0 ); -moz

Untuk kali ini saya coba melengkapi atau menambahkan sedikit koleksi menu navigasi horizontal untuk blogger, yang mungkin ingin merubah tampilan menu navigasi di blognya. Untuk demonya bisa lihat gambar dibawah atau klik link demo yang ada di bawah. Demo Navigasi Untuk pemasangannya navigasi horizontal saya rasa blogger sudah paham jadi silahkan lihat kodenya di bawah ini. Kode CSS (Cascading Style Sheet) .menu { padding:0; margin:0; list-style-type:none; white-space:nowrap; } .menu li { float:left; min-width:100px; } .menu a { position:relative; display:block; text-decoration:none; min-width:100px; float:left; } * html .menu a { width:100px; } .menu a span { display:block; color:#fff; background:#7cbc0a; border:1px solid #fff; border-width:2px 1px; text-align:center; padding:4px 16px; cursor:pointer; } * html .menu a span { width:100px; cursor:hand; w\idth:66px; } .menu a b { display:block; border-bottom:2px solid #06a; } .menu a em { display:none; } .

Tutorial kali ini saya akan memodifikasi tampilan tag atau label pada postingan, untuk blogger biasanya label dipisahkan dengan menggunakan tanda koma[,] contohnya seperti ini : Tutorial blogger , Modifikasi label , Tag Ala Wordpress . dst, Pemisah antara tag atau label ini bisa kita modifikasi seperti menu navigasi . Lihat screen shoot gambar dibawah ini : Jika anda tertarik untuk membuat tag atau label seperti menu navigasi silahkan ikuti tutorialnya di bawah ini :: Pertama Masuk pada Edit HTML - Expand Template Widget Selanjutnya kita sembunyikan dulu comment - Author - dan Label dengan cara menambahkan kode dibawah ini pada bagian body. .post-comment-link a{display:none;} .post-author{display:none;} .post-labels{display:none;} Untuk mempercepat pengerjaan saya menggabungnya kode diatas pada bagian Tag, jadi hasil kode keseluruhan seperti berikut : .post-comment-link a{display:none;} .post-author{display:none;} .post-labels{display:none;} div.tag{font-size:11px;padding-top:5px; col

postingan kali ini saya akan memberikan tutorial pembuatan menu navigasi dengan model circle atau lingkaran menggunakan css3. Menu navigasi ini full menggunakan css3 tanpa image, Circle Horizontal navigasi menu css3 ini cukup lumayan walaupun hasil dari iseng-iseng membuat lingkaran dengan css3 sehingga terpikir untuk di implementasikan kepada menu navigasi horizontal , ternyata cukup memuaskan hasilnya. Untuk contohnya lihat gambar dibawah ini. Untuk kode css3 lingkaran atau circle sebenarnya menggunakan border radius contoh kodenya seperti dibawah ini: -moz-border-radius:100px; -webkit-border-radius:100px; Langsung pada pembuatan circle menu navigasi dengan css3 : Untuk lebih mudah tanpa obrak abrik kode template, jadi saya memasang navigasi ini langsung di widget. Masuk pada Rancangan >> Tambah Gadget >> HTML/JavaScript Masukan kode di bawah ini : <style type="text/css"> ul#circle { display: inline;list-style: none; } ul#circle li { margin-right:6px;

Postingan ini saya coba menjawab pertanyaan [Rizky2009] yang menanyakan cara membuat navigasi Next Page - Home - Back Page dengan menggunakan Button CSS3 , untuk contohnya bisa lihat ilustrasi gambar dibawah, atau link next page di bagian bawah. Langsung pada cara membuat Button Next Page - Home - Back Page Dengan CSS3 . Pertama pastikan anda sudah memasang Button CSS3 pada template anda agar button bisa diterapkan, Untuk lebih jelasnya baca postingan sebelumnya yaitu : " Membuat Tombol Dengan CSS3 - Buttom CSS3 Style " Sekarang masuk pada Edit HTML > Expand Template Widget Cari kode seperti dibawah ini <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'> <b:includable id='nextprev'> <div class='blog-pager' id='blog-pager'> <b:if cond='data:newerPage

Postingan kali ini saya coba menulis seputar CSS3 lagi, sebagai pelengkap dari CSS3 yang lalu yaitu Hover background transitions , Hover Tab menu dan juga Postingan yang lalu saya pernah membahas membuat menu navigasi CSS3 dengan menggunakan Free CSS3 Menu Maker . dan kali ini saya coba membuat menu navigasi horizontal dengan menggunakan background gradient linear full CSS3 tanpa image dengan warna Black Dop. Seperti apa bentuknya menu navigasi dengan CSS3 ini lihat screen shoot di bawah ini. Menu Navigasi diatas menggunakan background Gradient linear CSS3 dengan kode warna #444444 pada bagian atas dan #666666 untuk bagian bawah. dan juga ronded corner pada bagian ujung kiri dan kanan, semuanya menggunakan CSS3. Untuk contoh kode Gradient linear seperti ini : background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#666666)); background: -moz-linear-gradient(top, #444444, #666666); Model navigasi seperti ini kalau dalam bahasa sundanya sih Slick navigasi

Akhirnya bisa beres juga mengganti tampilan template blog ini, walaupun cukup lama dalam pengeditan dan koneksi inet yang lagi ngadat tapi alhamdullilah akhirnya beres juga dan bisa kembali menulis postingan lagi, sebelumnya saya meminta maaf kalau pengunjung blog ini dibuat tidak nyaman dengan tampilan blog ini. Masih seputar CSS3 , Untuk sekarang saya akan membahas cara membuat Hover Tab Menu CSS3 tanpa Javasript. Tab menu mungkin sudah tidak asing lagi untuk blogger karena dari sekian blog yang pernah saya singgahi hampir 50% memasang tab menu. Lihat demo Hover Tab Menu CSS3 tanpa Javascript Tab menu ini cukup simple dan menarik dan saya rasa belum banyak yang memansang tab menu seperti ini. Tab Menu CSS3 ini di buat oleh www.kamikazemusic.com jadi silahkan blogger langsung ke situsnya untuk melihat atau mencoba membuat hover tab menu CSS3 tanpa Javascript. Langsung pada Tutorial pembuatan Hover Tab Menu CSS3

Kayanya masih seputar CSS3 yang akan di bahas untuk postingan sekarang, mudah mudahan tidak bosan ya. Untuk kali ini saya akan memberikan info cara membuat Menu CSS3 Style simple nan cantik dengan bantuan program dari CSS Menu yaitu Free CSS3 Menu Maker. Postingan sebelumnya seputar CSS3 bisa lihat di bawah ini. (+) Buat Box Shadow dengan CSS3 (+) Menambahkan Stroke Pada Teks "Judul Blog Dengan Stroke" Program Free CSS3 Menu Maker ini bisa di download secara gratis, Free CSS3 Menu Maker akan memudahkan anda untuk membuat menu navigasi dengan gaya CSS3. Lihat Demo → Link Download →

Postingan ini sebagai tambahan untuk Navigasi Page Number 123 yang sebelumnya telah saya bahas silahkan dilihat kembali pembuatan Page Number 123 untuk blogger . Sekarang saya coba Memodifikasi page number 123 ini dengan menggunakan CSS3, yang pasti akan lebih menarik dibandingkan dengan navigasi page number sebelumnya. Contohnya seperti gambar di bawah ini :: Dengan Memasangkan CSS3 pada page number , page number terlihat seperti menggunakan background image (Gradasi dua warna) seperti yang anda lihat pada gambar di atas. padahal itu hanya permainan dari CSS3 mungkin itu yang menjadi unggulan untuk CSS3. Betul tidak bang [Hendro]. Langsung saja pada cara pemasangan page number dengan CSS3 :: Pertama masuk pada Dashboard > Rancangan > Element Halaman > Tambah Gadget > Pilih HTML/JavaScript . Masukan Script di bawah ini :: <style> .showpageArea { padding:2px;margin-top:8px;margin-bottom:8px; } .showpageArea ul{ margin: 0 2px; padding: 8px;padding-top:6px; padding-

Buat blogger yang tampilan blognya masih perlu penambahan menu navigasi sebagai sarana untuk mempermudah pengunjung melihat konten atau isi di blog anda, Tapi anda masih bingung ingin membuat menu navigasi seperti apa yang pas dan menarik ? Disini saya akan memberikan alternative bagi anda yang belum mendapatkan menu navigasi yang sesuai dengan selera anda anda tidak perlu repot mendesain menu navigasi dari awal sampai akhir , anda cukup menggunakan program dari CSS Tab designer ini semuanya bisa dilakukan dengan sangat mudah. Khusus bagi anda yang ingin membuat navigasi vertikal maupun horizontal yang super cepat dengan hasil yang bagus dan profesional anda bisa menggunakan program CSS Tab Designer V 2.0. Program CSS Tab Designer V 2.0 ini akan membantu anda membuat berbagai macam navigasi baik vertical maupun horizontal dengan cara yang cukup cepat dan mudah kaena program CSS Tab Designer V 2.0 telah menyediakan beragam macam menu navigasi vertikal dan horizontal dengan banyak pi

Kalau sebelumnya membahas cara membuat Navigasi page number 123 pada Edit HTML, sekarang saya coba membuat Page number 123 langsung pada Gadget Elemen Laman. cara ini akan lebih mudah di lakukan karena anda tidak perlu ubrak abrik kode HTML pada template blog anda, cukup dengan menambahkan gadget pada elemen halaman maka Page Number ini sudah bisa terpasang. Langsung saja pada cara pembuatanya. Pertama anda masuk pada Rancangan >> tambah Gadget >> HTML/JavaScript . Masukan Kode di bawah ini : <style type='text/css'>.showpageArea a {text-decoration:underline;}.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}.showpage a {text-decoration:none;border: 1px solid #cccccc;

Mungkin untuk sebagian blogger sudah tahu ataupun sudah menggunakan menu Navigasi page number atau page 123 pada postingan. dan mungkin juga telah banyak yang memposting navigasi page number 123 seperti ini. Tapi tidak apa sebagai pelengkap tutorial blog di blog chugygogog.blogspot.com . Tutorial atau cara Membuat menu navigasi page number ini dikhususkan buat teman blogger yang belum tahu dan ingin memasang page number di blognya. Untuk yang sudah tahu silahkan baca postingan yang lain saja. Langsung saja pada cara pembuatanya : Langkah pertama masuk pada Rancangan >> Edit HTML >> Expand Widget Templates Cari kode ]]></b:skin> Setelah ketemu,letakkan kode di bawah ini tepat di atas ]]></b:skin> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #cccccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #cccccc; background-color:#f3f3f3; } .showpagePoint { color:#333; text-decor

Navbar atau Navigasi Bar adalah sebuah Navigasi atau Menu yang di gunakan untuk menyimpan Link Link Menu pokok atau penting di Blog atau Website. Navigasi ini bisa berbentuk Vertical ataupun Horizontal . Navigasi Bar ini bisa dibuat dengan menggunakan image ataupun background warna saja dengan berbagai macam variasi. Di Postingan sebelumnya saya pernah membahas bagaimana Cara Membuat Menu Horizontal Yang Simple dan Cantik. silahkan di baca baca dulu untuk flash back memory anda. Kalau sudah silahkan lanjukan bacanya. Untuk kali ini saya akan memberikan informasi cara membuat Navbar atau Menu Navigasi ini secara online, yaitu dengan menggunakan Pasilitas dari Graphic navbar Generator . Graphic Navbar Generator ini menyediakan pasilitas pembuatan Navbar secara online, Sehingga Anda tidak perlu repot repot untuk membuat sebuah Navbar Menu. Baik Navbar verical maupun horizontal. Anda tinggal memilih Navbar yang sudah disediakan dengan banyak pilihan yang menarik, lihat screen shoot gam

Mungkin postingan seperti ini sudah banyak yang memposting tapi tidak apalah untuk update postingan saja sekalian memberikan tips bagi yang belum tahu cara membuat menu Dropdown. Dropdown menu merupakan solusi bagi anda yang ingin menghemat tempat di blog anda karena dengan menggunakan Dropdown menu ini kita bisa menyembunyikan banyak link dalam satu menu dropdown . Lihat contoh menu Dropdown di bawah ini. DropDown Menu Tutorial Blog Tutorial Flash Desain Grfis Multimedia Dan Lain lain Gimana anda tertarik ingin membuatnya. Kalau tertarik Silahkan ikuti caranya di bawah ini. silahkan anda masuk ke Blogger. lalu pilih Tata Letak - Element Halaman. Pilih Tambah Gadget lalu pilih HTML/ JavaScript. Masukan code di bawah ini : <select onChange="document.location.href=this.options[this.selectedIndex].value;"> <option value="0" selected> DropDown Menu </option> <option value=" Link Anda "> Judul Link Anda </option> <option

Tutorial Kali ini saya akan membahas cara membuat Vertical Menu dengan Modifikasi menggunakan Ronded Corner , Mungkin Vertical Menu ini pernah saya bahas pada postingan sebelumnya bisa di lihat disini . Sebagai tambahan saja buat teman teman blogger yang ingin merubah atau mengganti link Menu Vertical dengan Ronded Corner silahkan ikuti caranya dibawah ini. seperti biasa saya membuat menu ini tanpa harus membuka EDIT HTML template anda cukup dengan menambahkan Widget HTML/Java Sript di sidebar atau di bagian footer seperti menu vertical yang ada di blog ini. Langsung saja : 1. Masuk ke Blog anda. 2. Pilih Tata Letak di lanjutkan dengan memilih Element halaman. 3. Tambah Gadget - Lalu pilih HTML/JavaScript. 4. Masukan Kode HTML di bawah ini : <style type="text/css"> /* vertikal vertikal merah di mulai ---------------------------------------- */ /*Credits: CSS Library */ /*URL: http://css-lybrary.blogspot.com */ #vertikal-merah{ border-bottom-width: 0; } #vertikal-me

Menu vertical ini biasanya di gunakan atau di tempatkan pada bagian sidebar. Mungkin untuk menu link vertical ini biasanya tidak menggunakan background hanya menggunakan teks tanpa backround paling untuk hover menggunakan perubahan warna saja pada teks tanpa menggunakan background. Disini saya coba membuat Menu Link Vertikal dengan menggunakan Hover background . Maksudnya yaitu ketika mouse menyentuh link tersebut maka background akan muncul atau berganti warna. Link hover seperti ini juga biasanya di gunakan untuk link Horizontal yang biasa di letakan di bagian atas blog atau di bawah header. Kelebihan dari kode HTML di bawah ini bisa di pasang langsung pada widget template tanpa membuka edit HTML. Jadi kita bisa memodifikasi setiap Widget link yang ada di sidebar menjadi berbeda beda. Langsung saja Ikuti caranya seperti di bawah ini : Yang pertamaMasuk Ke Blogger Pilih Tata Letak Pilih Elemen Halaman dan Klik Tambah Gadget Pilih HTML/JavaScript Masukan Kode di bawah ini. <sty

postingan ini saya buat sebagai pilihan untuk posting sebelumnya yaitu membuat menu horizontal yang simple , berhubung ada teman yang koment Katanya kurang paham dengan postingan tersebut, jadi Saya membuat postingan mengenai cara membuat menu horizontal yang lebih mudah yang diletakan langsung pada widget, jadi kita tidak perlu membuka edit HTML. Mudah mudahan bisa dimengerti. Cara ini Sangat mudah sekali karena ini cuma menambah Kode HTML yang ada di bawah ini ke dalam Gadget + HTML/Javascript . Silahkan Ikuti caranya di bawah ini. Pertama Buka blog Blogger Kedua Pilih Tata Letak + Elemen Laman + Tambah Gadget + Pilih HTML/JavaScript Lalu Masukan Kode Di bawah ini : <style type="text/css"> ul.menu { margin:0px; padding:0px; } ul.menu li { list-style:none; float:left; width:100px; text-align:center; font:11px/25px verdana,arial,sans-serif; height:auto !important; height:25px; } ul.menu li a { display:block; text-decoration:none; background:#EFEFEF; color:#000000; }

Ada beberapa macam menu link horizontal yang biasa di pakai untuk sebuah blog ataupun website, dari yang menggunakan warna dasar sampai dengan menggunakan image, tapi toh fungsinya tetap sama yaitu menuju link yang diinginkan. Untuk membuat sebuah menu atau link yang horizontal tidaklah sulit. Disini saya coba untuk membuat menu link horizontal yang sederhana tatapi akan terlihat cantik. Silahkan ikuti langkah - langkahnya berikut ini : Masuk pada Tata Letak dan Edit HTML Masukan kode di bawah ini diatas kode ]]></b:skin> ********************************************************* /* horizontal solid menu di mulai ------------------------------------------- */ /*Credits: CSS Library for new blogger (beta) */ .menu-solid{ margin: 0; padding: 0; float: left; font: bold 12px Arial; width: 100%; border: 1px solid #625e00; border-width: 1px 0; background: #000 ; } .menu-solid { display: inline; } .menu-solid a{ float: left; color: white; padding: 9px 11px; text-decoration: no