Templates -->

Terkini.net - Berita Tutorial Terkini, Terbaru dan Terupdate Setiap Hari: Templates

Templates

Template
adalah tema atau tampilan dari sebuah blog. Template yang bagus harus memiliki 3 unsur : a) Web and Mobile friendly, b) SEO, c) Fast & Responsive. Berikut kode HTML yang populer digunakan oleh para blogger dalam menciptakan template mereka :

#1. 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.

#2. 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


#3. 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>


#4. 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 + &quot;_headerimg&quot;' expr:src='data:sourceUrl' style='display: block'/></h1>
        </a>

#5. 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.


<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/AVvXsEg2F0RGTksYvf8JXPFKzNdYYXfxRXnLXSbm_JEoTNU6t-NXODsCcOyfOtzLM7nx7Z7IBFCvI348EX2xaw6WX2LU1fXglDO-wgmc6HTFVn-iIWDD2tIEZ_N7EMnGoX-KKvqLvn5DAMs5Qi0/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>


Link warna merah adalah link gambar panah. Bisa diganti dengan gambar lain.

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

#7. 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 == &quot;error_page&quot;'>
<script type='text/javascript'>
BSPNF_redirect=setTimeout(function() {
location.pathname= &quot;/&quot;
}, 1);
</script>
</b:if>

#8. 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 &#169; <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.

#9. 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 + &quot;?&amp;max-results=5&quot;
Angka 5 adalah jumlah posting. Bisa diubah menjadi lebih kecil atau besar.

#10. 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>

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;amp;max-results=5'>Blogging</a></li>
<li><a href='/search/label/Tips%20SEO?&amp;amp;max-results=5'>Nama Label</a></li>

Note! Harap diperhatikan, penulisan nama label harus persis sama, soal huruf besar kecilnya.

Kesimpulan : Demikian kode HTML yang sering dipakai para blogger pada template mereka. Anda pun juga dapat mengubahnya dengan mengikuti tahapan diatas.