-
Recent post
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Cara membuat Menubar di blog - Hmm, sobat sudah pada tau menubar itu apa kan? hah belum? okedeh tidak apa-apa reggy jelaskan lagi untuk yang belum tau. Menubar
adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi
menubar yaitu untuk menyimpan link-link penting di suatu blog, agar
pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada
pada suatu blog itu. Pada postingan sebelumnya saya juga telah
menjelaskan bagaimana cara membuat menubar pada template klasik. Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:
Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di
gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link
itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya,
menubar di postingan ini tidak ada search box seperti digambar. Tetapi
jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan Disini. Sudah tau kan bagaimana penampakan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok.
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{7. Selanjutnya cari kode <div id="content-wrapper">
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
<div id='menubar'>9. Simpan Template dan lihat hasilnya
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>Keterangan:
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
- Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
- Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
- Di setiap blog juga ada juga yang berbeda tanda kutipnya. Sobat bisa menelitinya lagi. Tanda kutip ' atau "
Cara Mengganti Background Blog (Manual)
Background blog, suatu yang sederhana namun sangat mempengaruhi
kemenarikan tampilan blog. Ketika kita menggunakan Template standard
Blogger, background bisa diganti secara otomatis pada pilihan Sesuaikan.
Namun, bagaimana jika kita mengubah Template blog kita dengan Template
costume? Ketika kita memakai Template costume, kita tidak bisa mengganti
background blog kita secara otomatis. Lalu bagaimana cara manual
mengganti background blog? Berikut ini adalah Cara Mengganti Background Blog (Manual).
- Masuk ke Dasboard blog kalian
- Masuk ke Template
- Pilih Edit HTML
- Cari kode body { (Gunakan CTRL+F untuk mempercepat pencarian)
- Setelah ketemu kode body {, disitu ada kode background:
- Hapus kode setelah kode background: tersebut sampai tanda titik koma (;) pertama (Jangan hapus tanda titik koma (;) nya)
- Setelah itu masukan kode berikut diantara kode background: dengan titik koma (;)
url (Isi dengan Url gambar yang akan kalian pakai background)repeat-x
- Ganti kode berwarna UNGU denganUrl gambar yang akan kalian jadikan background
- Terakhir, simpan Template kalian
Sekian artikel Cara Mengganti Background Blog (Manual). Semoga bermanfaat. Maaf jika ada kekurangan. Saya hanyalah seorang Blogger newbie yang masih harus banyak belajar tentang
Bahaya ( Dampak ) Mencuri Template Blog Orang Lain
Keyword : Dampak Negatif Mengambil
Template Blog Orang Lain, Akibat Buruk Mencuri Kode HTML Blog Orang
Lain, Resiko Mencuri Template Orang Lain.
Sudah lama saya tidak memposting tentang Informasi Blog. Kali ini saya
akan mengShare sebuah artikel. Bahayanya Mencuri Template Blog Orang
Lain. Sejujurnya saya tahu informasi ini karena dulu saya pernah mencuri
Template milik orang lain. Karena merasa bersalah dan merasakan
dampaknya, saya memutuskan untuk membuat blog baru, dan jadilah blog YONDARKNESS ini. Oke, tanpa berlama-lama, berikut ini adalahDampak Dari Mencuri Template Orang Lain :
Membuat Postingan Kita Sulit Terindex Oleh Search Engine ( Mesin Pencari )
Jika kita mencuri kode HTML blog orang lain, maka besar kemungkinan
Template blog kita akan menjadi rusak karena banyak kode HTML yang tidak
cocok ( Rusak ). Oleh karena itu, mesin pencari akan sulit mengindex
postingan kita, bahkan sama sekali tidak terindex. Hal ini pernah
terjadi pada blog lama saya.
Membuat Kita Tidak Tenang Dalam Blogging
Jika kita Mencuri Template milik orang lain, kita akan menjadi tidak
tenang dalam blogging. Kita akan merasa takut jika sampai ketahuan oleh
pemilik template yang kita curi.
Mematikan Kreativitas
Jika kita mencuri Template orang lain, maka kita tidak akan menjadi
Kreative. Bahkan jika sudah ketagihan, maka kita tidak akan berkembang.
Kita Akan Ketagihan Untuk Meniru Template Orang Lain
Seperti yang saya katakan di atas, kalau kita sudah ketagihan
meniru/mencuri Template orang lain, maka kita akan cenderung untuk terus
mengganti Template kita jika kita melihat ada blog lain yang
Templatenya WOW. Jika kita terlalu sering mengganti Template, maka itu
akan berdampak jelek pada SEO blog kita.
Resiko Dilaporkan Ke Google
Jika sampai pemilik Template yang kalian curi tahu bahwa Templatenya
kalian curi dan dia tidak terima, bukan tidak mungkin orang tersebut
akan melaporkan blog kita ke Google agar blog kalian dihapus secara
permanen.
Setelah membaca dampaknya di atas, masihkah kalian mencuri/meniru
Template orang lain? Sekian artikel saya kali ini. Semoga bermanfaat.
Silakan mengCopy artikel ini dengan sumber berupa link aktif menuju
postingan ini. Hargailah hasil karya orang lain! Dilarang membuat link
sumber yang berwarna sama dengan warna background blog kalian!
Keyword : Mendisable Click Kanan
Dengan Peringatan Gambar, Melarang Klik Kanan Pada Blog Menggunakan
Peringatan Gambar, Mencegah Click Kanan Dengan Gambar Keren, Melindung
Artikel Blog Dari Copaser.
Oke, dari pada bingung mau ngeShare apa, kali ini saya akan mengShare
sebuah tutorial blog Cara Membuat Anti Klik Kanan Dengan Gambar. Bukan
merupakan tutorial baru. Di blog lain sudah banyak. Tapi tidak ada
salahnya kalau mengShare tutorial hasil kreativitas rz ini, siapa tahu ada yang membutuhkannya.
Kegunaan dari Anti Klik Kanan ini adalah melarang seseorang untuk
mengklik kanan di blog kita supaya tidak bisa mengcopy paste artikel
kita lewat Klik Kanan. Untuk yang belum mengerti, kali bisa coba lakukan
Klik Kanan di blog saya ini.
Bagaimana? Tertarik membuatnya? Berikut ini adalah Cara Membuat Anti Klik Kanan Dengan Gambar :
Bagaimana? Tertarik membuatnya? Berikut ini adalah Cara Membuat Anti Klik Kanan Dengan Gambar :
- Pertama, masuk ke Dasboard blog kalian
- Masik ke Tata Letak
- Klik Tambah Gadget
- Kemudian pilih Gadget HTML/JavaScript
- Masukkan kode dibawah ini :
<script type='text/javascript'>var DADrightclicktheme = 'Dark';var DADrightclickimage = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNo7727v7Il_qnSOmz20-BqpPXfwv9dGSA_H9-UGoNR3l0cqoA7vgRC7YTyA_JTDyy3w2-PUBgEmrfzjuQksqkiru6JB4K8Uhg2AkpoHqqoSHuyv48WQYPe-1D0NsdGLVed90JHkkR8AV/s1600/No+Right+Click+copy.png';</script><script type='text/javascript' src="http://yondarkness.googlecode.com/files/AntiCopas.js"> </script>
- Kemudian tinggal diSave
Keterangan :
Ganti kode berwarna BIRU dengan skema
blog kalian. Jika blog kalian berwarna dasar gelap, isi dengan Dark. Dan
jika blog kalian berwarna dasar terang, isi dengan Light.
Ganti kode berwarna HIJAU dengan URL/Alamat gambar Anti Klik Kanan kalian.
Cara Membuat Widget Label Atau Blogroll Dengan Efek Keren
Keyword : Cara Membuat Widget
Blogroll, Label, Atau Link List Di Blog, Cara Membuat Label Keren Dengan
Css3, Mengedit Gadget Blogroll Keren Di Blog.
Oke, sekarang saya akan mengshare lagi artikel tentang desain blog. Kali
ini saya akan mengshare tutorial cara membuat salah satu widget yang
dipakai blog YONDARKNESS
ini. Seperti yang kalian lihat dijudul artikel ini, kalian pasti sudah
tahu apa widget yang saya maksud itu. Belum tahu? Oke, kalian bisa lihat
di gambar postingan di atas.
Widget tersebut bisa kalian pakai sebagai Label, Blogroll, Tempat Link,
atau apapun itu sesuai keinginan kalian. Ingin tahu cara membuatnya? Oke
langsung saja, berikut ini caranya.
- Pertama, masuk dulu ke Dasboard blog kalian
- Masuk ke Template, pilih Edit Template
- Cari kode ]]></b:skin>
- Masukkan kode dibawah ini tepat di atas kode ]]></b:skin>
.widgetSystem a{text-decoration:none;border-bottom:1px solid #008ee0;display:block;font-size:13px;font-weight:700;font-family:Arial,Arial,sans serif;-webkit-transition:all .5s ease 0;-moz-transition:all .5s ease 0;-o-transition:all .5s ease 0;transition:all .5s ease 0;margin:5px;padding:5px}.widgetSystem a:hover{background:#008ee0;color:#fff; }.widgetSystem li{list-style:none;margin:5px;}
.systemyondarkness{background:rgba(0,0,0,0.6);height:140px;overflow:auto;margin-top:10px;border:2px solid #008ee0;border-radius:3px}
- Kalau sudah, kalian simpan
Belum selesai sampai di situ, sekarang masuk ke Tata Letak, kemudian Add
Gadget, pilih HTML/JavaScript. Kemudian kalian masukkan kode dibawah
ini.
<div class='widgetSystem'>Kemudian, kalian simpan.
<div class='systemyondarkness'>
<ul>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
<li><a href='http://anonymous-bunshin.blogspot.com' target='_self'>YONDARKNESS</a></li>
</ul></div></div>
Keterangan :
Ganti kode yang berwarna ORANGE dengan Link/Url yang akan dituju jika diklik
Ganti kode yang berwarna UNGU dengan Nama Link tersebut
Oke itulah caranya. Tidak hanya itu, kalian juga bisa memodifikasinya sendiri. Oke, sekian artikel kali ini. Semoga bermanfaat. Jika ada yang kurang jelas bisa kalian tanyakan di komentar.
Kali ini saya akan share cara Redirect ctrl + u. Bila blog anda menggunakan trick ini maka apabila ada seseorang yg menekan ctrl + u maka secara otomatis akan di alihkan. Mau lihat demonya coba anda tekan ctrl + u sekarang.
Fitur-Fitur :
- Tidak bisa CTRL+U
- Tidak bisa CTRL+S
- Tidak bisa Ctrl+Shift+I
- Tidak bisa F12
Bagaimana anda tertarik untuk mencobanya. silahkan ikuti tutorial berikut.
- Log in ke blogger anda
- Masuk ke Template > Edit Html
- Tekan Ctrl + F, lalu cari kode <head>
- Setelah ketemu copy code dibawah ini lalu letakkan di atas kode <head>
<script src='http://adithya.googlecode.com/files/Apctrl%2Bu.js' type='text/javascript'></script>- Setelah selesai SIMPAN Template kamu.
~Selamat Mencoba~
