ChugyGogog

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 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 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-

Kalau ngomongin widget tentu identik dengan tampilan blogger baik sidebar Footer maupun Header, yang selalu mendapatkan posisi istimewa untuk menampilkan widget karean biasanya para blogger selalu mempercantik tampilannya dengan memasang widget widget tersebut, Baik dengan Related Post , Resent post , Recent Comment , Top Post , Tab View ataupun yang lainya yang tentu memerlukan space atau ruang pada template anda. Disini saya tidak akan membahas script atau HTML yang aneh aneh karena saya yakin sudah banyak master blogger yang memposting Script script seperti itu. Kali ini saya coba untuk meminimalkan pemasangan script script yang dianggap penting untuk di simpan pada widget/Gadget sidebar blog anda. tujuanya untuk menghemat widget yang di pasang. lihat screen shoot di samping ini. untuk membuat tampilan seperti ini cara cukup mudah dan tidak terlalu rumit. silahkan ikuti caranya di bawah ini. Modifikasi Satu Widget Menjadi Double Fungsi Untuk Penyimpanan Script Langkah pertama s

Memasang kotak pencarian atau search box di blogger akan memberikan kemudahan bagi pengunjung untuk mencari dan melihat postingan di blog anda. Dan untuk kali ini saya coba memposting cara membuat search box menggunakan Auto Hide denga menambahkan backkground warna ataupun background image. Untuk Auto Hide tentunya anda sudah jadi saya tidak perlu menjelaskan lagi. Untuk search box sebenarnya dari blogger sendiri sudah menyediakanya. namun kita tidak bisa meng custom tampilan dari search box tersebut ataupun merubahnya. Tapi dengan cara di bawah ini anda bisa merubah tampilan dari search box di blog anda. Contoh search box auto hide seperti di bawah ini Langsung saja pada pokok bahasan membuat atau me - modifikasi search box auto show hide. Masuk ke Blogger Pilih Tata Letak ( Rancangan ) - Tambah Gadget - HTML/JavaScript Masukan Kode HTML di Bawah ini. <style type="text/css"> #searchboxo{ background:#f3f3f3; border:1px solid #6B7171 ; width:240px; height:25px; ma

Membuat ronded corner pada template mungkin akan mempercantik tempilan dari blog itu sendiri di bandingkan hanya dengan menggunakan Kotak persegi saja tapi tentunya bukan berarti template yang menggunakan kotak persegi jelek , Untuk selera dan penilaian setiap orang tentunya berbeda-beda. Ok langsung saja pada pokok pembahasan, kali ini saya akan memberikan tips cara merubah tampilan template anda dengan menggunakan ronded corner. Sebagai conton anda bisa lihat blog saya yang ini www.chulection.blogspot.com . Sebelumnya Sebagai tambahan saya akan menjelaskan sedikit tentang bagian-bagian dasar dari template itu sendiri. Bagian Bagian Dasar dari Template : Yang pertama Background : Ini merupakan lapisan paling bawah dari sebuah template. Yang kedua Outer Wraper : Ini merupakan lapisan kedua di atas background. yang ketiga Header - Main Wraper - Sidebar - Dan Footer : Ini merupakan lapisan paling atas dari sebuah template. Header mempunyai posisi di bagian atas . Main wraper mem

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