Banyak sobat blogger yang menanyakan cara membuat navbar menu seperti pada SC Community, baik yang animasi (Beranda, Post Feed, dll.) maupun yang non animasi (Tutorial, Artikel, dll.). Bukanya saya tidak mau memberikan penjelasan mengenai hal ini, tapi lantaran script-nya yang lumayan panjang dan perlu penjelasan memadai maka saya selalu mengurungkan untuk mempostingnya.
Sehubungan masih ada beberapa sobat yang menanyakan hal itu maka akhirnya sayapun mengalah, hehehe... Namun perlu diketahui bahwa setiap menambahkan "atribut" baru yang menambahkan kode CSS (seperti Tabview, Navbar Menu, Tambah Kolom, dll.) ke dalam template blog, tidak serta merta akan sama dengan yang ada pada SC Community atau pada contoh blog yang direkomendasikan. Hal ini karena adanya perbedaan layout blog itu sendiri. Untuk itu, perlu dilakukan editing, terutama pada width, margin, dan padding-nya, disesuaikan dengan layout blog kamu.
Nah, jika kamu masih penasaran dengan navbar menu seperti yang SC Community miliki, sebaiknya kamu melihatnya langsung dari sumber aslinya. Berikut adalah "contekan" yang bisa kamu gunakan dalam blog kamu:
Ok brow, mudah-mudahan dengan informasi ini dapat membantu kamu untuk membuat navbar menu seperti yang SC Community miliki. Selamat mencoba...!!!
Sehubungan masih ada beberapa sobat yang menanyakan hal itu maka akhirnya sayapun mengalah, hehehe... Namun perlu diketahui bahwa setiap menambahkan "atribut" baru yang menambahkan kode CSS (seperti Tabview, Navbar Menu, Tambah Kolom, dll.) ke dalam template blog, tidak serta merta akan sama dengan yang ada pada SC Community atau pada contoh blog yang direkomendasikan. Hal ini karena adanya perbedaan layout blog itu sendiri. Untuk itu, perlu dilakukan editing, terutama pada width, margin, dan padding-nya, disesuaikan dengan layout blog kamu.
Nah, jika kamu masih penasaran dengan navbar menu seperti yang SC Community miliki, sebaiknya kamu melihatnya langsung dari sumber aslinya. Berikut adalah "contekan" yang bisa kamu gunakan dalam blog kamu:
- Navbar menu animasi (seperti menu Beranda, Post Feed, dll.) bisa kamu lihat di:
http://www.cssplay.co.uk/menus/shutter.html - Navbar menu nonanimasi (seperti menu Tutorial, Artikel, dll.) bisa kamu lihat di:
http://www.cssplay.co.uk/menus/drop_definition2.html
Ok brow, mudah-mudahan dengan informasi ini dapat membantu kamu untuk membuat navbar menu seperti yang SC Community miliki. Selamat mencoba...!!!
Catatan:Untuk melihat kode CSS dan HTML kedua menu tersebut, tekan Control U atau klik kanan mouse lalu pilih Lihat sumber halaman.
28 commentsPosting Komentar
Ajarin Tia dunk kak... asli lom paham neh ttg CSS, selama ini Tia edit2 yang XML ajah *sama nga kak prosesnya kak??
Eniwey.. makasih ya kak udah sharing tips n sharing info nya :)
@Rep Cyntia:
Klo proses pengeditan pasti sama atuh cantik, hehe...
Kode CSS itu yang di letakkan di atas ]]></b:skin> klo HTML-nya di bawah.
Tapi pada dasarnya mirip kok...
Mantap tutorialnya. Terima kasih sharingnya
selalu ada yang baru nich.sukses ya bro.. :)
kalo buat seperti punya mas menu yang header itu gimana???
Mantaf mang Infona Nuun ah...!
Kucoba nanti! Sudah lama saya menginginkannya!
Tampilannya memang bagus ya Kang, terima kasih ya!
Kang Enes..., ada animasi nabar yang alen g...???
iyah..yg rajin dong kakak EnEs
@Rep Semua:
Makasih atas komentarnya.
@Rep Ali:
Sobat bisa mencarinya di situs yang saya sebutkan pada postingan ini. Disana banyak sekali tipe-tipe navbar menu yang bisa dipilih.
@Rep Beben:
Hehe... Kerajinan teuing mah cape unk...
Informasi canggih
kok di situs yang dikasih gk ada tutorialnya
disitusnya gak ada tutorialnya..
makasi atas info nya
bung,gimana yah buat kolom seperti blog yang bung punya,dg tulisan recent post,tips bloging
@Rep Andi:
Buat sementara bung bisa pake TabView aja. Untuk Tab Content ribetnya gak ketulungan, hehehe...
terimakasih. tapi aku agk bingung jadian....??
.....seduniailmukita.blogspot.com.......
pagi bos...
maaf sebelumnya, mau nanya gimana buat menu dan sub menu kayak yang ada di blog ini? soalnya referensi yang ada sy bingung, maklum baru pemula bos. Selanjutnya yang kedua, gmn cara mem-border halaman sidebar kayak di blog ini. Soalnya template blog yang sy pakai tidak ada border siderbarnya, jd kelihatan kacau krn tdk ada pembatas. Terimakasih masukan dan jawabannya. Salam kenal...
@Rep Blo^g:
Bingung kenapa sob?
@Rep Shine:
1) Di artikel atas kan ada tautannya sob, kamu tinggal klik aja dan ikuti petunjuk-petunjuk di web tsb. Atau kamu bisa klik kanan mouse kamu, lalu pilih view page source. Setelah itu kopi kode CSS dan XTML-nya.
2) Kamu cari saja kode CSS untuk sidebar, kemudian tambahkan perintah border, misalnya:
.sidebar {
border: 1px solid #C0C0C0;
}
mantep gaaan.... thx!!.....
wah bagus..tp caranya ..? yg newbie kayak sy pst msh bingung neh..?
bgus ni blog mampir ke sya:http://www.blogger.com/
apik tenan mas
salam kenal dari saya.blog kamu bagus cara memperbagus blog dan pasang iklan gimana ya tolong dibantu ya.
Tolong dijelasin dengan jelas, satu aja. Bingung nih. Dari copy code sampai penempatan dan akhir penyelesainnya.... Trims...
mana HTML coyyyyyyyyyyyy
@Rian AndriantoControl U saja coy...
Tambahkan Komentar