Daftar Kode Penting untuk Modifikasi Template Blog biar lebih Keren dan SEO Friendly.
MODIFIKASI template blog adalah bagian dari aktivitas ngeblog (blogging). Kebanyakan blogger ingin tampilan blognya berbeda dengan blog lain, meskipun templatenya sama.
Modifikasi template blog biasanya dilakukan dari segi warna, jenis huruf, ukuran huruf, penambahan widget, desain tampilan widget, dan sebagainya.
Risiko asyik modifikasi template adalah "ketinggalan" oleh blogger lain yang lebih fokus ke konten (update posting) ketimbang utak-atik template.
Memang, ngurusin tampilan blog (template) menguras waktu, energi, dan pikiran. Bisa seharian bahkan berhari-hari waktu dihabiskan untuk modifi template, apalagi kalo "gagal maning-gagal maning" menerapkan kodenya.
Daftar Kode Penting untuk Modifikasi Template Blog
Berikut ini beberapa kode CSS, HTML, dan JavaScript --tiga jenis kode yang membangun sebuah template blog-- yang bisa dan biasa digunakan untuk modifikasi template. |
| HTML, CSS, JavaScrip. Image: Fastwebstart.com |
Kita mulai dulu dari pengertian CSS, HTML, dan JavaScript yang dikutip dari Wikipedia:
- CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.
- HTML adalah kependekan dari Hyper Text Markup Language, yaitu sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.
- JavaScript adalah bahasa pemrograman tingkat tinggi dan dinamis. JavaScript populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
#1. Kode Warna HTML
Kode warna HTML adalah kode yang berfungsi mengubah warna huruf atau warna apa pun di template blog. Kode warna HTML diawali dengan kode "tagar" alias tanda-pagar (#). Misalnya, kode #000000 adalah warna hitam dan #ffffff kode warna putih.
Lihat: Daftar Kode Warna HTML
#2. Kode Quickedit
Kode ini untuk menyembunyikan Icon Obeng & Tang (Wrench) alias ikon pensil yang biasa muncul di widget. Ikon atau gambar Obeng & Tang ini wajib disembunyikan biar tidak mengganggu tampilan blog.
Secara, banyak pengunjung sedang login ke akun bloggernya sehingga tanda obeng & tang itu akan terlihat juga, bukan hanya oleh admin/author blog.
.quickedit{display:none}
Simpan kode tersebut di atas kode </b:skin> atau </style> untuk menghapus gambar obeng & tang.
Silakan baca: Cara Hapus Icon Quickedit
#3. Kode Redirect Error 404 Page Not Found
Jika permalink posting Anda berubah atau posting Anda dihapus, maka akan ditemukan halaman kosong alias Error 404 Halaman Tidak Ditemukan. Ini bahaya buat reputasi blog kita di mata mesin pencari ataupun pengunjung.
Untuk mengatasinya, salah satu solusinya, adalah dengan memasang kode yang akan mengarahkan halaman yang tidak ditemukan itu ke halaman depan (homepage). Berikut ini kodenya, simpan di atas kode </body>
<b:if cond='data:blog.pageType == "error_page"'>
<script type='text/javascript'>
BSPNF_redirect=setTimeout(function() {
location.pathname= "/"
}, 1);
</script>
</b:if>
<script type='text/javascript'>
BSPNF_redirect=setTimeout(function() {
location.pathname= "/"
}, 1);
</script>
</b:if>
#4. Kode Anti-Komentar Spam
Kode ini untuk menghapus otomatis link hidup/aktif yang ada dalam isi komentar blog. Pasang di atas kode </body> atau </head>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery("#comments p").find("a").replaceWith("<mark>Spam Detected!</mark> Link aktif otomatis terhapus!!!");
});
</script>
jQuery(document).ready(function(){
jQuery("#comments p").find("a").replaceWith("<mark>Spam Detected!</mark> Link aktif otomatis terhapus!!!");
});
</script>
#5. Kode Heading Tag H1 untuk Logo/Gambar Header
Kode berikut ini, yaitu <h1> dan </h1>, untuk menjadikan gambar logo header sebagai H1 agar SEO Friendly. Pasang di bagian seperti dalam kode berikut ini:
<!--Show the image only-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/></h1>
</a>
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<h1><img expr:alt='data:title' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' style='display: block'/></h1>
</a>
#6. Kode Mengatur Jumlah Posting Halaman Label
Kode berikut ini untuk mengatur jumlah posting di halaman label. Ketika kita klik link label/kategori, maka akan terbuka halaman berisi posting label yang yang diklik.
Untuk membatasi jumlahnya, maka GANTI semua kode:
data:label.url
DENGAN kode:
data:label.url + "?&max-results=5"
#7. Kode Tahun Copyright Otomatis
Di bagian footer biasanya ada tahun copyright, seperti Copyright (c) 2016 Contoh Blog. All Rights Reserved.
Nah, agar tahunnya berubah secara otomatis begitu pergantian tahun terjadi, maka hapus kode copyright lama dan ganti dengan kode ini:
Copyright © <script type='text/javascript'>var creditsyear = new Date();document.write(creditsyear.getFullYear());</script> <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>. All rights reserved.
#8. Kode Link Halaman Statis & Halaman Label
Kode link ini untuk menampilkan menu halaman statis (about, kontak, sitemap, disclaimer) di navigasi menu:
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
Kode berikut ini untuk menampilkan Halaman Label yang dipasang di Navigasi Menu:
/search/label/Blogging -- jika nama label hanya satu kata
/search/label/Tips%20SEO --jika nama label dua kata
Contoh:
<li><a href='/search/label/Blogging?&amp;max-results=5'>Blogging</a></li>
<li><a href='/search/label/Tips%20SEO?&amp;max-results=5'>Nama Label</a></li>
Note! Harap diperhatikan, penulisan nama label harus persis sama, soal huruf besar kecilnya.
Panduan Lengkap: Cara Menampilkan Halaman Statis dan Link Label di Navigasi Menu
#9. Kode Tombol Back to Top
Berikut ini kode tombol "Back to Top" atau kembali ke atas yang keren dan mudah dipasang.
Cara memasangnya:
1. Layout > Add a Gadget > Pilih HTML/JavaScript
2. Judul kosongkan
3. Copas kode "Back to Top" berikut ini di kolom Content lalu Save.
Link warna merah adalah link gambar panah. Bisa diganti dengan gambar lain.
Cara memasangnya:
1. Layout > Add a Gadget > Pilih HTML/JavaScript
2. Judul kosongkan
3. Copas kode "Back to Top" berikut ini di kolom Content lalu Save.
<script type="text/javascript" >
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgguiuD6aFIMrZ2Zi3cxtg_vt8qnXMQHtzgaV9GmfJMCuvr5W87gJoY-ZOIBzKeqSeUWl35_5he3QIFE9B8Feos2kHXNlkYHSRDPEjyH7e-D4dxn_lBZhyphenhyphenPB0HKLxF6EzEtDAqkbXUjIM8/s50/back+to+top+button.gif" alt="back to top"/>',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
var scrolltotop={
setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 200]},
controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgguiuD6aFIMrZ2Zi3cxtg_vt8qnXMQHtzgaV9GmfJMCuvr5W87gJoY-ZOIBzKeqSeUWl35_5he3QIFE9B8Feos2kHXNlkYHSRDPEjyH7e-D4dxn_lBZhyphenhyphenPB0HKLxF6EzEtDAqkbXUjIM8/s50/back+to+top+button.gif" alt="back to top"/>',
controlattrs: {offsetx:5, offsety:5},
anchorkeyword: '#top',
state: {isvisible:false, shouldvisible:false},
scrollup:function(){
if (!this.cssfixedsupport)
this.$control.css({opacity:0})
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1)
dest=jQuery('#'+dest).offset().top
else
dest=0
this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},
togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},
init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //khusus versi IE6 ke bawah untuk loose check, juga untuk melihat apakah control mengandung teks
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- perlu diset witdh yang jelas agar kontainer text terbentuk dengan rapi
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}
scrolltotop.init()
</script>
Memasang Link ke Kode jQuery
Kode jQuery adalah kode yang membuat kode-kode javascript berfungsi di template Anda.Jika Anda memasang sebuah kode, namun ternyata tidak berfungsi, maka salah satu kemungkinan penyebabnya adalah belum ada link ke kode jQuery di template blog Anda.
Jika belum ada, pasang kode jQuery berikut ini sebelum kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js' type='text/javascript'></script>
Penutup
Demikian Daftar Kode Penting untuk Modifikasi Template Blog. CB batasi sembilan kode saja. Soalnya, 9 'kan angka tertinggi, tidak ada angka tunggal yang lebih tinggi dari 9. Tul 'gak? Lagian, nomor jersey Zlatan Ibrahimovic di Manchester United juga 9 'kan? GGMU!!!
Kode-kode lainnya bisa Anda cari di Kotak Pencarian di Sidebar Atas. Ketik aja kode yang Anda cari, insya Allah ada. Kalo belum ada, kasih tau aja di komentar ya. Good Luck & Happy Blogging!