Icha ads

Sebelumnya saya pernah memuat artikel tentang Cara Menambah 1 Kolom di Bawah Header dan Cara Menambah 2 Kolom di Bawah Header . Sekarang saya akan mencoba menambah 3 kolom di bawah header . Trik ini tentu saja untuk menambah ruang di template untuk penempatan berbagai macam widget. Terutama penempatan banner iklan. Bagaimana cara membuatnya? Cara Menambah 3 Kolom di Bawah Header: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> #tiga-kolom-dibawah-header { clear:both; } .tiga-kolom { } Lalu copy-paste script di bawah ini di atas kode <div id='main-wrapper'> <div id='tiga-kolom-dibawah-header'> <div id='kolom1' style='width: 35%; float: left; margin:0; text-align: left;'> <b:section class='tiga-kolom' id='kolom1' preferred='yes' style='float:left;'/> </div> <div id='kolom2' style='width: 35%; float: center; ...

Sebelumnya saya pernah memuat artikel tentang Cara Menambah 1 Kolom di Bawah Header . Sekarang saya akan mencoba menambah 2 kolom di bawah header   Trik ini bisa menambah opsi untuk penempatan berbagai macam widget/ gadget. Bagaimana cara membuatnya? Cara Menambah 2 Kolom di Bawah Header: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> #dua-kolomheader { clear:both; } .dua-kolomheader { } Lalu copy-paste script di bawah ini di atas kode <div id='main-wrapper'> <div id='dua-kolomheader'> <div id='kolom1' style='width: 50%; float: left; margin:0; text-align: left;'> <b:section class='dua-kolomheader' id='kolom1' preferred='yes' style='float:left;'/> </div> <div id='kolom2' style='width: 50%; float: right; margin:0; text-align: left;'> <b:section class='dua-kolomheader' id='kolom2' pr...

Apa fungsi menambah kolom di bawah header? Biasanya untuk blog yang sudah mulai dikomersilkan kolom ini sangat strategis untuk ditempati iklan.   Selain itu bisa menambah opsi lain untuk penempatan berbagai macam widget. Lihat contoh gambarnya di bawah ini: Tertarik untuk membuatnya? Bagaimana caranya? Cara Menambah 1 Kolom di Bawah Header: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> #under_header{ margin:10px 0; padding:1%; width:98%; } Lalu cari kode yang mirip dengan kode di bawah ini: <div id='header-wrapper'> <b:section class='header' id='header' maxwidget="1" showaddelement="no"> <b:widget id='Header1' locked='true' title='test (Header)' type='Header'/> </b:section> </div> Copy-paste script berikut di bawah kode di atas: <div id="under_header"> <b:section class='header' id=...

Kolom komentar tentunya sangat mendukung untuk para pengunjung yang ingin share tentang artikel yang dimuat di blog kita. Terlebih lagi kita sebagai admin harus tetap setia membalas semua komentar yang masuk ke blog kita dengan bijak dan semua orang bisa tahu bahwa yang membalas komentar mereka itu adalah admin yang punya blog tersebut.    Nah, untuk mempermudah mengenali seorang admin di sebuah blog, saya punya cara untuk menandai pemilik blog dengan logo admin di setiap balasan komentarnya. Lihat contoh gambarnya di bawah ini: Tertarik? Bagaimana cara membuatnya? Cara Memasang Tanda Admin di Komentar Blog: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode </body> <script src='http://code.jquery.com/jquery-latest.js'/> <!-- Komentar admin by Brader Blog start --> <script> $(function() { function highlight(){ $('.user.blog-author,.ssyby').closest('.comment-block') .css('border', ...

Sebelumnya saya membuat artikel tentang Cara Membuat Footer 2 Kolom Di Blog . Kali ini saya akan coba Cara Membuat Footer 3 Kolom di Blog . Setiap template mungkin berbeda beda fungsi tapi segala hal bisa dimodifikasi sedemikian rupa. Lihat screen shoot 3 kolom footer di bawah ini: Tertarik untuk membuatnya? Bagaimana cara membuatnya? Cara Membuat Footer 3 Kolom Di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> #footer-column-divide { clear:both; } .footer-column { padding: 10px; } Cari kode yang mirip dengan kode berikut ini: <div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/></div> Copy-paste script berikut di bawah kode <b:section class='footer' id='footer' showa...

Footer adalah kolom yang biasanya terdapat di paling bawah bagian blog, kita bisa mengisinya dengan berbagai macam widget yang diinginkan. Kali ini saya akan mencoba membuat Footer 2 Kolom Di Blog. Fungsinya untuk apa? Tentu saja dengan adanya 2 kolom footer tersebeut kita bisa jadi lebih banyak ruang untuk menempatkan widget. Lihat screenshoot -nya di bawah ini: Bagaimana cara membuatnya? Cara Membuat Footer 2 Kolom Di Blog Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> #footer-column-divide { clear:both; } .footer-column { padding: 10px; } Lalu cari kode yang mirip dengan kode berikut ini: <div id='footer-wrapper'> <b:section class='footer' id='footer' showaddelement='yes'/> </div> atau, yang mirip dengan kode berikut ini: <div id='footer'> <b:section class='footer' id='footer' showaddelement='yes'/></div>  Tamba...

Sebelumnya saya memposting artikel tentang cara merubah Template 2 kolom menjadi 3 kolom dengan kolom postingan di samping. Kali ini saya akan Membuat Template 3 kolom dengan Kolom Posting di Tengah. Sesuai permintaan dari sebagian pengunjung kali ini saya akan membuat trik tersebut. Mungkin setiap template memiliki kode HTML yang berbeda-beda, tetapi triknya sama saja sebenarnya. Cara Membuat Template 3 kolom dengan Kolom Posting di Tengah: Login ke akun Blogger Pilih Template >> Edit HTML Cari kode yang mirip dengan kode berikut ini: #outer-wrapper (gunakan ctrl F agar lebih mudah mencarinya) ---------------------------- #outer-wrapper { width: 660 px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } ---------------------------- Ganti angka 660 menjadi 900 Selanjutnya cari kode yang mirip dengan yang berikut ini: #main-wrapper (gunakan ctrl F agar lebih mudah mencarinya) ----------------------------- #main-wrapper { width: 410 px; float: $startSide; w...

Setiap template di Blogger mungkin memiliki kolom berbeda-beda tergantung jenis template yang digunakan. Namun ketika kita memilih sebuah template yang kolomnya tersedia hanya untuk beberapa kolom saja, kadang butuh beberapa cara agar kolom template tersebut bisa di desain sesuai kebutuhan kita. Berikut ini ada cara untuk mengganti template 2 kolom menjadi 3 kolom. Bagaimana cara menggantinya? Cara Mengganti Template 2 kolom menjadi 3 kolom: Login ke akun Blogger Pilih Template >> Edit HTML Cari kode yang mirip dengan kode seperti ini karena setiap template berbeda beda kode htmlnya #wrapper (gunakan ctrl F agar lebih mudah mencarinya) ------------------------------------- #wrapper { background:#97C03E; font-size:12px; margin:0px auto 0px; width: 660 px; ----------------------------------- Ganti angka yag berwarna Biru menjadi 950 Kemudian cari kode yang mirip seperti ini: #sidebar (gunakan ctrl+F untuk lebih mudah mencarinya) -------------------------------- /* Sidebar */ #s...

Setiap template di Blogger mungkin memiliki kolom berbeda-beda tergantung jenis template yang digunakan. Namun jika seseorang sudah 'jatuh hati' pada satu template, dan kolom yang tersedia di template tersebut tidak sesuai keinginan. Kadang butuh beberapa racikan agar kolom template tersebut bisa di desain sesuai kebutuhan penggunanya. Berikut ini ada cara untuk merubah template 2 kolom menjadi 3 kolom. Bagaimana cara merubahnya? Cara Merubah Template 2 kolom menjadi 3 kolom: Login ke akun Blogger Pilih Template >> Edit HTML Cari kode yang mirip dengan kode seperti ini karena setiap template berbeda-beda kode htmlnya #outer wrapper (gunakan ctrl F agar lebih mudah mencarinya) ----------------------------------- #outer-wrapper { width: 660 px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } ----------------------------------- Ganti angka yang berwarna Biru menjadi 950 Kemudian cari kode yang mirip seperti ini: #sidebar-wrapper (gunakan ctrl+F un...

Tombol Back To Top berfungsi untuk mempercepat scrolling dari bawah ke atas sehingga mempermudah pengunjung untuk kembali ke bagian atas halaman dari sebuah website/ blog. Tombol ini biasanya di tampilkan di sudut bawah Blog, bisa di sebelah kiri ataupun sebelah kanan. Asalkan jangan menghalangi konten artikel di blog. Contohnya bisa dilihat di bawah ini: Tertarik untuk membuatnya? Bagaimana caranya? Cara Memasang Tombol Back To Top di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script di bawah ini di atas kode </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://bloggerpeer.googlecode.com/files/backtotop.js' type='text/javascript'/> <!-- Back to top designed by Blogger Peer - bloggerpeer.blogspot.com --> <a href='#' style='display:scroll;position:fixed;bottom:5px;right:5px;' title='Back to Top...

Attribution adalah sebuah widget bawaan Blogger yang berfungsi untuk menampilkan data atribusi sebuah blog. Namun tampaknya widget ini kurang disukai oleh para Blogger. Dan sayapun terkadang suka menghapusnya secara permanen. Ini adalah contoh widget Attribution yang saya maksud: Bagaimana cara menghapus widget tersebut secara permanen? Cara Menghilangkan Attribution di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Gunakan ctrl F di keyboard untuk mempermudah pencarian, ketik Attribution1 Jika sudah ketemu, hapus seluruh kode yang mirip dengan kode di bawah ini <b:widget id='Attribution1' locked='true' title='' type='Attribution'>         <b:includable id='main'>   <b:if cond='data:feedbackSurveyLink'>     <div class='mobile-survey-link' style='text-align: center;'>       <data:feedbackSurveyLink/>     </div>   </b:if>   ...

Blog yang template-nya bawaan Blogger sudah pasti akan ditemukan sebuah widget Navbar , dan biasanya sulit dihapus. Sebenarnya sah-sah saja jika widget ini di- nonaktifkan / di- off di setingan widgetnya, namun kebanyakan Blogger tidak menykai widget ini dan ingin menghapusnya secara permanen. Karena cukup mengganggu pemandangan yang berada di halaman Tata Letak Blog. Ini adalah contoh widget Navbar yang saya maksud: Bagaimana cara menghapusnya secara permanen? Cara Menghilangkan Navbar Blog Bawaan Blogger : Login ke akun Blogger Pilih Template >> Edit HTML Cari kode yang mirip seperti di bawah ini, gunakan ctrl F untuk mempermudah pencarian <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'>        bla...        bla...        bla... </b:widget> </b:section> Jika sudah ketemu...

Untuk Blog yang baru dibuat, atau menggunakan template bawaan blogger pasti terdapat widget Langganan: Entri (Atom) di Templatenya. Fungsinya adalah sebagai fasilitas untuk berlangganan artikel dari blog yang bersangkutan.   Namun jika merasa widget tersebut fungsinya kurang maksimal dan menghapusnya, saya punya cara untuk menghilangkan widget tersebut. Ini mungkin contoh gambar yang saya maksud Lalu bagaimana cara menghilangkannya? Cara Menghapus Langgan: Entri (Atom) di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Cari kode seperti di bawah ini: <b:include data='feedLinks' name='feedLinksBody'/> Hapus semua kode tersebut Simpan Template Itulah sekilas pengetahuan saya tentang Cara Menghilangkan Langganan: Entri (Atom) di Blog . Baca juga: Cara Menghilangkan Langganan: Poskan Komentar (Atom) di Blog Cara Menghapus Navbar Blog Bawaan Blogger Cara Menghapus Attribution di Blog Jika mencari artikel lainnya silahkan cek di bawah ini:

Blog yang menggunakan template bawaan blogger pasti terdapat widget Langganan: Poskan komentar (atom) atau Subscribe to: Poskan Komentar (Atom) di Templatenya. Fungsinya adalah sebagai fasilitas untuk berlangganan bagi pengunjung untuk mengetahui komentar-komantar artikel dari blog yang bersangkutan. Jika merasa widget tersebut fungsinya kurang maksimal, kita bisa menghapusnya dan saya punya cara untuk menghilangkan widget tersebut. Ini mungkin contoh gambar yang saya maksud: Bagaimana cara menghilangkannya? Cara Menghilangkan Subscribe to: Poskan Komentar (Atom) di Blog Login ke akun Blogger Pilih Template >> Edit HTML Cari kode seperti di bawah ini: <div class='feed-links'> <data:feedLinksMsg/> <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </...

Kita sekarang harus waspada dengan budaya copy-paste terhadap blog kita. Tentunya menjadi kerugian bagi pemilik blog asli jika artikelnya dibajak tanpa izin. Mencari ide dari blog orang lain itu tidak menjadi masalah selama cara penulisan artikelnya berbeda alias tidak sama dengan blog yang akan diambil artikelnya tersebut. Ya, minimal 80% artikel harus murni buatan sendiri. Lalu bagaimana cara mengetahui bahwa artikel Blog kita dicopy 100% oleh mereka tanpa mengeditnya sedikitpun? Saya punya sebuah situs yang membantu kita untuk mengetahui artikel kita yang dicopas oleh blog lain. Apa nama situsnya? Cara Mengetahui Artikel Kita Yang di Copas Orang Lain: Kunjungi situs berikut: http://www.copyscape.com/duplicate-content Lalu copy alamat URL blog kita lalu paste -kan pada kota pencarian yang sudah disediakan Klik GO Jika kemudian muncul deretan link dari beberapa situs/ blog, itu artinya blog tersebut mencuri artikel 100% dari blog kita. Lalu apa yang harus kita lakukan? Laporkan k...

Salah satu cara untuk melindungi blog kita dari 'budaya copas' atau copy-paste , adalah dengan menambahkan sedikit script agar artikel yang sudah kita buat dengan susah payah tidak mudah di bajak secara ilegal. Apalagi jika tidak mencantumkan link sumber.   Script seperti apa? Adalah sript untuk menonaktifkan fungsi klik kanan di blog. Ataupun anti blok cursor , sehingga menggunakan tombol ctrl c di keyboardpun tidak akan berfungsi. Tertarik untuk membuatnya? Cara Memasang Script Anti Copy Paste di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Lalu Copy-paste script berikut di atas kode </head> <script language='JavaScript1.2'> function disableselect(e){ return false } function reEnable(){ return true } document.onselectstart=new Function ("return false") if (window.sidebar){ document.onmousedown=disableselect document.onclick=reEnable } </script> Simpan Template Silahkan buka salah satu artikel di blog lalu klik ka...

Apa itu Sitemap ? Sitemap adalah fitur daftar isi di dalam sebuah Blog. Sitemap bisa juga disebut sebagai Peta sebuah situs. Fungsinya untuk melihat semua artikel postingan yang disusun berdasarkan label. Sehingga pengunjung bisa dengan mudah melihat semua daftar isi blog yang dikunjunginya.   Jangan salah, sitemap ini juga merupakan bagian dari optimasi search engine atau lebih dikenal dengan nama SEO . Karena nantinya alamat Sitemap ini bisa di daftarkan ke Google Webmaster Tools . Lihat contoh sitemap di bawah ini:   Tertarik untuk memasangnya? Bagaimana caranya? Cara memasang sitemap di Blog Login ke akun Blogger Pilih Laman >> Buat Laman Baru Pilih Mode HTML (bukan mode Compose ) Copy-paste script di bawah ini: <div style="background-color: # fff ; border: 1px solid # 999999 ; height: 500 px; overflow: auto; padding: 10px; width: 100%px;"> <script src="http://me-sitemap.googlecode.com/files/mysitemap.js" type="text/javascript"> ...

Apa itu Tab View ? Tab View adalah sebuah widget yang berbentuk tabel mengelompokkan halaman sesuai dengan menu tabel di atasnya. Cara ini sangat efektif untuk menghemat halaman Blog, dan merupakan fitur yang sangat cantik. Cocok untuk Blogger yang suka bereksperimen dan tampil beda dari Blog lainnya. Lihat contoh tampilan Tab View di bawah ini: Bagaimana cara membuatnya? Cara Membuat Tab View di Blog: Login di Blogger Pilih Tata Letak >> Tambah Gadget >> pilih HTML/ Java Script Copy-paste script berikut ini: <style type="text/css"> div.TabView div.Tabs {height: 30px;overflow: hidden} div.TabView div.Tabs a {float:left; display:block; width: 90px; /* Lebar Menu Utama Atas */ text-align:center ; height: 26px; /* Tinggi Menu Utama Atas */ padding-top:8px; vertical-align:middle; border:1px solid #014B84; /* Warna border Menu Atas */ border-bottom-width:0; text-decoration: none; font-family: "Verdana",Arial; /* Font Menu Utama Atas */ font-weight...

Apa itu Recent Comment ? Recent Comment adalah sebuah fitur di dalam Blog yang berfungsi menampilkan komentar-komentar paling baru dari pengunjung Blog. Fungsinya untuk apa? Tentu saja agar Admin Blog ybs. dan pengunjung lain dapat melihat komentar-komentar yang bisa dijadikan sarana untuk share.   Lalu bagaimana cara membuatnya? Cara Membuat Recent Comment di Blog Login ke akun Blogger Pilih Tata Letak >> Tambah Gadget >> pilih  HTML/ JavaScript Copy-paste script berikut ini: <script style="text/javascript" src="http://www.belajarngeblog.com/script/showrecentcomments.js"> </script><script style="text/javascript">var numcomments = 5;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script> <script src="http:// endolita.blogspot.com /feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> Simpan Template Catatan: Gant...

Apa itu Breadcrumb ? Breadcrumb adalah 'Link Berantai' yang menghubungkan halaman utama dengan halaman artikel dalam bentuk Navigasi . Jika dijabarkan seperti ini: Ketika membaca sebuah artikel, tentunya artikel tersebut berada dalam sebuah kategori/ label artikel tersebut, sementara kategori/label adalah fitur yang terdapat di halaman utama Blog ( Home ) Karena itu fungsi Breadcrumb adalah untuk menampilkan barisan link tersebut agar pengunjung bisa melihat artikel tentang apa yang dia baca. Lihat contoh gambarnya di bawah ini: Selain untuk mempermudah menavigasi sebuah halaman blog, fungsi Breadcrumb inipun cukup manjur untuk optimasi search engine terhadap blog kita. Bagaimana cara membuatnya? Cara Memasang Breadcrumb di Blog: Login ke akun Blogger Pilih Template >> Edit HTML Letakkan script berikut tepat di atas kode ]]></b:skin> .breadcrumbs{ padding:5px 5px 5px 0; margin:0;font-size:95%; line-height:1.4em; border-bottom:4px double #cadaef} Setelah itu, ...

Menu Navigasi adalah salah satu widget yang berfungsi untuk mengkategorikan sebuah menu tertentu di dalam Blog. Biasanya widget ini dipasang di bawah header Blog. Selain itu, menu ini juga menambah penampilan Blog terlihat lebih Profesional.   Pengunjung yang datang pun pasti bisa lebih mudah untuk menemukan daftar menu di blog kita jika memakai widget ini. Misalnya ketika pengunjung membaca salah satu artikel di blog Anda, dia akan mudah kembali ke halaman utama dengan memilih menu Home yang sudah tersedia di widget ini. Atau bisa juga dipakai untuk menampilkan Data pribadi admin Blog , Contact Person , maupun hak cipta dari blog yang bersangkutan. Dibawah ini adalah contoh menu navigasi Dropdown di salah satu blog saya: Tertarik untuk memasangnya? Bagaimana caranya? Cara Membuat Menu Navigasi Dropdown Login ke akun Blogger Pilih Template >> Edit HTML Copy-paste script berikut di atas kode ]]></b:skin> /* Menu Nav */ #menu{background-color:# 014B84 ; font:12px ...

Artikel Terkait atau yang lebih terkenal dengan sebutan Related Posts berfungsi untuk menampilkan artikel-artikel lain yang berkaitan dengan artikel yang sedang dibaca oleh pengunjung blog. Biasanya Artikel Terkait ini ditampilkan tepat bawah postingan blog. Hal ini bertujuan agar pengunjung melihat dengan jelas artikel lain yang berkaitan dengan artikel yang telah dibacanya.   Selain untuk memberikan kemudahan bagi para pengunjung untuk menemukan tulisan yang lainya, Artikel Terkait ini juga menjadi salah satu penilaian di mata search engine , karena menurut pengalaman saya, sebuah blog akan menjadi lebih SEO Friendly (mudah dicari di search engine ) jika dipasang Artikel Terkait. Bagaimana cara memasangnya? Cara Membuat Artikel Terkait dibawah Postingan Blog Login ke akun Blogger Pilih Template >> Edit HTML Letakkan script berikut di atas kode ]]></b:skin> #related-posts { float : left; width : 250px; margin-left : 5px; font-size: 12px; line-height : 1.8em; m...

Sama seperti Arsip Blog, fungsi Popular Post tentunya penting untuk menampilkan artikel paling sering dibaca atau dicari oleh pengunjung. Dengan adanya widget tersebut, pengunjung bisa melihat daftar artikel yang paling populer di sebuah blog. Ada nilai tersendiri jika kita menyulap widget Popular Post tersebut agar terlihat lebih simple , dan enak untuk dipandang. Saya akan menambahkan sedikit variasi untuk widget Popular Post dengan menambahkan Scroll Bar agar widget tersebut tidak memakan banyak tempat di halaman blog. Contohnya bisa dilihat di gambar berikut ini: Tertarik untuk memasangnya? Bagaimana caranya? Cara Memasang Scroll Bar pada Popular Post Login ke akun Blogger Pilih Template >> Edit HTML Cari kode berikut, caranya tekan Ctrl F: <div class='widget-content popular-posts'> Jika sudah ketemu, ganti kode tersebut dengan kode di bawah ini: <div class='widget-content popular-posts' style='overflow:auto; width: 100 %; height: 300 px...