Cara membuat kotak pencarian sidebar

Kotak pencarian berguna untuk membantu pengunjung untuk menelusuri sebuah artikel di dalam blog menggunakan kata kunci tertentu yang di kirim melalui query ke directory blog. Tutorial ini merupakan bukan hal baru, namun meletakkan/memasang kotak penelusuran di blog memang tergolong penting jadi sebaiknya anda memasangnya untuk para pengunjung anda. berikut ini adalah cara memasang kotak penelusuran di blogger

Pertama silahkan login terlebih dahulu ke akun Blogger.com anda
Pilih menu tab Template > Edit HTML
Cari kode tag sidebar di dalam HTML template anda, biasanya seperti berikut

<div id='sidebar-wrapper'> atau <div id='sidebar_wrapper'>

Lalu letakkan kode berikut ini dibawahnya:

<div class='search-form'>
<form action='/search' class='clearfix' id='searchform' method='get'>
<fieldset>
<div id='searchfield'>
<input class='text clearField' id='searchbox' name='q' onclick='doClear(this)' type='text' value='Cari Articles'/>
</div>
<input class='submit' type='submit' value=''/>
</fieldset>
</form>
</div>

Setelahnya, kemudia cari kode tag ]]></b:skin> dan paste kode css dibawah ini diatasnya

/* search form db */
.search-form{position:relative;margin:0 8px 0 4px;width:auto !important;width: 400px;max-width:400px;}
.search-form form fieldset{border:0;margin:0;padding:0;background:none;background-color:transparent;}
.search-form #searchfield{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfpjF-WUGrxCVm3wsk0D-yFs9J20EL38T0UV-D2sVe8_-87VC1dbMvqHvyFxLNlDt2kR1eeIIO28ACWtTeh5nJXWHZ0QFtRoONexPE-8-V0TICKrRseo7WLp2cy8PFGMHSC7XSue3W0k/s1600/search.png) no-repeat left top;height:34px;display:block;margin-right:55px;}
.search-form input.text{border:0;margin:9px 0 0 34px;padding:0;}
.search-form input.submit{background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJfpjF-WUGrxCVm3wsk0D-yFs9J20EL38T0UV-D2sVe8_-87VC1dbMvqHvyFxLNlDt2kR1eeIIO28ACWtTeh5nJXWHZ0QFtRoONexPE-8-V0TICKrRseo7WLp2cy8PFGMHSC7XSue3W0k/s1600/search.png) no-repeat right -34px;height:34px;width:56px;margin:0;padding:0;position:absolute;right:0;top:0;border:0;text-transform:uppercase;text-shadow:#fff 1px 1px 1px;font-weight:bold;font-size:160%;color:#9b9b9b;cursor:pointer;}
.search-form input.submit:hover{background-position:right bottom;}
#primary-content .search-form{margin:2em 0;}

Langkah terakhir klik simpan perubahan dan lihat hasilnya.

Jika sobat ingin cara lebih mudah, Buka tata letak, pilih widget kotak pencarian dan tambahkan ke blog anda.

Note: Kotak pencarian/penelusuran ini dapat diletakkan dimana saja sesuai yang anda inginkan.

Semoga berguna...

Blockquote yang membuka otomatis di posting

Dengan memanfaatkan css transisi dan css pseudo classes kita coba untuk membuat blockuote yang akan terbuka dengan sendirinya ketika pointer di arahkan ke area elemen blockquote tersebut. trik ini sendiri sebenarna lebih cenderung seperti efek hover, dan tidak menggunakan javasript atau pun jQuery di dalam cara kerjanya. jika anda ingin tau coba lihat demo di bawah ini dan arahkan pointer mouse ke bloclquote tersebut:

Dengan trik blockquote ini anda tidak perlu kuatir dengan masalah tidak dapatnya kontent dalam elemen yang tidak dapat di Copy, karena semua kontent di dalam elemen blockquote ini tetap dapat di copy/disalin dengan mudah...

untuk membuatnya, silahkan login ke akun blogger anda, pilih template dan Edit HTML, lalu copy kode css berikut ini dan pastekan diatas tag kode ]]></b:skin> atau di antara </style>:

blockquote.auto-db {
  margin:15px 30px;
  font:italic normal 14px/1.4 Georgia,Serif;
  height:0;
  padding:0 0;
  background-color:#333;
  border:10px solid #ccc;
  border-left-color:#D7362E;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,.4);
  box-shadow:0 1px 2px rgba(0,0,0,.4);
  overflow:auto;
  -webkit-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -moz-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -ms-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  -o-transition:all 1s cubic-bezier(1,0,0,1) .5s;
  transition:all 1s cubic-bezier(1,0,0,1) .5s;
}

blockquote.auto-db:hover {
  padding:10px 15px;
  background-color:#fff;
  border:1px solid #ccc;
  border-left:5px solid #800000;
  height:350px;
}

untuk menggunakannya di dalam posting, silahkah tambahkan class auto-db pada blockquote anda, seperti berikut ini:

<blockquote class="auto-db">
    Tulis isi konten anda di sini...
</blockquote>

Silahkan anda ubah cssnya dengan gaya yang anda inginkan, seperti border/garis, tinggi, lebar, warna latar belakang dan lainnya.

Semoga berguna....

Filter otomatis kata - kata kotor dalam komentar

Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan diri sehingga bertindak bodoh dibalik nama anonim/anonymous. untuk mencegah hal ini, saya akan berbagi triknya dan silahkan simak berikut ini:

Pertama kita harus membuat sebuah script golongan kata - kata apa saja yang ingin kita kategorikan sebagai kata - kata yang tidak layak untuk di tampilkan dan harus di bersihkan. kemudian tentukan class/id element yang akan dipilih oleh selector untuk menerapkan tindakan ini, Contoh:

var comt = document.getElementsByClassName('comment-content');

var comt adalah merupakan pengelompokan/nama saja sebagai ciri untuk tindakan komentar, dan document.getElementsByClassName('comnment-contet'); adalah pengambilan class untuk menjalankan tindakan, class element bisa di lihat pada comment-content. ini adalah penamaan dan class tujuan yang akan di pilih. Selanjutnya buat sebuah perintah penerapan dalam sebuah element seperti berikut:

for(var i=0;i<comt.length;i++){
    comt[i].innerHTML = comt[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "saya-ganti-dengan-ini");
}   

for(var i=0;i<comt.length;i++) adalah dilakukan untuk perintah yang di beri nama comt, sedangkan comt[i].innerHTML = comt[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "saya-ganti-dengan-ini"); adalah jika di temukan di dalam penamaan comt maka perintahnya untuk mengganti dengan yang di tentukan.

Maka ketika script hasil dari semuanya telah selesai akan menjadi seperti berikut:

var comt = document.getElementsByClassName('comment-content');
  for(var i=0;i<comt.length;i++){
       comt[i].innerHTML = comt[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "kata-kata-pengganti");
}   

Script di atas sudah bisa digunakan, tinggal letakkan di template anda.

Jika anda memasang recent comment pada widget anda, sebaiknya buat juga script yang sama dengan nama variabel yang berbeda, agar kata - kata kotor dalam komentar anda juga tidak muncul dalam recent comment widget anda, Contoh seperti berikt.

var widg = document.getElementsByClassName('widget-content');
  for(var i=0;i<widg.length;i++){
       widg[i].innerHTML = widg[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "pengganti-kata-kotor");
}

Masih sama dengan trik diatasnya untuk komentar, sedangkan untuk widget saya hanya mengganti penamaan variabel var comt menjadi var widg dan class comment-content menjadi widget-content. jadikan satu/bungkus dua script di atas dalam satu kelompok seperti berikut:

<script type='text/javascript'>
//<![CDATA[
var comt = document.getElementsByClassName('comment-content');
  for(var i=0;i<comt.length;i++){
                        comt[i].innerHTML = comt[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "kata-kata-pengganti");
}   
var widg = document.getElementsByClassName('widget-content');
  for(var i=0;i<widg.length;i++){
                        widg[i].innerHTML = widg[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "pengganti-kata-kotor");
}
//]]>
</script>

Letakkan di atas kode tag </body> dan simpan.

Tambahan, jika kata - kata yang ingin anda filter di dalam komentar lebih dari satu, tambahkan saja comt[i].innerHTML = comt[i].innerHTML.replace(/kata-kata-kotor-pilihan-anda/gi, "kata-kata-pengganti"); kebaris berikutnya. lakukan hal yang sama untuk class widget.

untuk lebih mudahnya, saya sudah menyimpan script ini dalam satu paket yang bisa langsung anda gunakan tanpa susah. cukup copy kode dibawah ini:

<script type="text/javascript" src='http://template-defandaky.googlecode.com/files/filter-komentar.js'></script>

Letakkan tepat di atas kode tag </body> dalam HTML template anda dan simpan. tes pada komentar anda dengan memasang kata yang telah di tentukan untuk di filter dan lihat hasilnya.

Semoga bermanfaat....

Klik kanan hanya berfungsi di tag pre

Trik ini adalah bagian dari tujuan untuk melindungi content blog anda, mematikan fasilitas klik kanan dengan mengeset tag <body> menggunakan dasar oncontextmenu='return false;'. trik ini mematikan semua klik kanan dalam blog, lalu bagaimana caranya kita membuat sebuah ijin klik kanan yang berfungsi di area tertentu saja... kali ini saya akan berbagi tips memperbolehkan klik kanan hanya pada blockquote/area tag pre untuk anda yang memiliki blog tutorial dan hanya ingin mengijinkan pengunjung untuk mengcopy kode saja.

Pertama silahkan buka pengaturan Template blog anda, cari kode tag <body> dan ganti kode tag tersebut dengan kode di bawah ini...

<body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'>

cara ini memiliki kekurangan, yaitu kotak penelusuran/pencarian bawaan dari template blog anda tidak akan berfungsi. Satu-satunya jalan keluar untuk mengatasi masalah ini mungkin hanya dengan menampilkan kembali navbar blog jika anda merasa bahwa kotak penelusuran itu sangat penting. atau anda dapat menggantinya dengan kotak penelusuran/pencarian kostum seperti google search/kotak pencarian dengn jQuery.

Kemudian, kita buat jQuery yang meriset element blockquote/pre agar ketika pointer menyorot/berada di area tersebut fungsi dari klik kanan di aktifkan. dan ketika pointer keluar dari area elemen tersebut fungsi klik kanan akan di nonaktifkan kembali. lihat contoh kode di bawah ini:

$(function() {
    $('body').attr('oncontextmenu', 'return false;');  // mematikan fungsi klik kanan
    $('blockquote').hover(function() { // menentukan element dengan hover
        $('body').removeAttr('oncontextmenu'); // pengecualian alternatif klik kanan
    }, function() {
        $('body').attr('oncontextmenu', 'return false;'); // memfungsikan klik kanan pengecualian element
    });
});

contoh kode di atas saya eksekusikan dalam element blockquote, jika anda ingin menggantinya pada elemen tertentu, ubah saja kode $('blockquote').hover(function() yang mengandung blockquote dengan element yang anda inginkan, misalnya seperti pre, post, code dan lain sebagainya

Setelah itu kita bungkus kode sehingga menjadi seperti berikut:

<script type="text/javascript">
//<![CDATA[
$(function() {
    $('body').attr('oncontextmenu', 'return false;'); 
    $('blockquote').hover(function() {
        $('body').removeAttr('oncontextmenu');
    }, function() {
        $('body').attr('oncontextmenu', 'return false;');
    });
});
//]]>
</script>

Letakkan kode di atas sebelum tag kode </body> dan simpan template anda.

Sebelumnya trik ini hanya sebuah percobaan saja, belum sempat saya uji, silahkan sobat coba jika ada masalah/tidak berfungsi tulis saja di komentar dan saya akan coba memperbaiki. Semoga sukses....

Blokir otomatis link aktif di dalam komentar

Blogger memang sudah memberi fasilitas moderasi untuk mengontrol kegiatan komentar di dalamnya, namun jika blog anda tergolong sebuah blog yang memiliki aktifitas komentar yang ramai tidak mungkin anda akan memeriksa satu persatu, selain memakan waktu juga menambah pekerjaan. Tidak semua pengunjung blog memiliki itikad baik, santun dan memahami aturan apa lagi para spamer yang terkadang hadir dan merugikan yang berkomentar hanya bertujuan untuk memasang link aktif. Menurut dari beberapa sumber yang pernah saya baca, link aktif memiliki beberapa dampak negatif pada blog Anda, anda bisa cari refrensinya di berbagai sumber.

untuk hal itu, kita bisa memasang beberapa trik untuk menonaktifkan link aktif yang di pasang oleh para spammer pada komentar blogger dan berikut ini caranya silahkan anda simak...

1. Login ke akun Blogger anda
2. Pilih Template > Edit HTML

Sebelum melanjutkan langkah berikutnya, silahkan cari kode tag <head> terlebih dulu dan paste kode kode dibawah ini diatasnya

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>

jika template anda telah disertai dengan kode di atas, silahkan lewati langkah diatas.

3. Cari kode tag </body> di html template anda
4. Pilih salah satu script bloked link di bawah ini dan pastekan di atas tag kode </body>
5. Tambahkan css berikut di template anda

mark{background:#800000;color:#fff;padding:1px 6px;margin-right:5px;}

6. Simpan perubahan template anda

Berikut kumpulan script bloked link komentar blogger

01Menghilangkan secara otomatis link aktif di komentar

dengan kode ini, link aktif yang di pasang ke komentar akan secara otomatis di hapus/di hilangkan.

<script type='text/javascript'>
$(function() {
$('.comment_body p').find('a').remove(); });
</script>

02Mengubah link aktif menjadi teks biasa

script ini mengubah link otomatis di komentar anda menjadi teks biasa yang tidak mengarahkan ke halaman apa pun

<script type='text/javascript'>
//<![CDATA[
$(function() {
$('.comment_body p').find('a').contents().unwrap();
});
//]]>
</script>

03Menandai link aktif dengan tulisan

dengan script ini, link aktif akan secara otomatis diganti dengan tulisan

<script type='text/javascript'> 
$(document).ready(function(){ 
$('.comment_body p').find('a').replaceWith('<mark>Jangan memasang link aktif bro...</mark>'); }); 
</script>

04Mematikan link aktif dengan menambah peringatan

Saat link aktif di blok dengan script ini, maka akan muncul peringatan. silahkan anda ubah tulisan yang saya beri warna sesuai keinginan anda.

<script type='text/javascript'>
//<![CDATA[
function blockLinks(parentID, children) {
    var parent = document.getElementById(parentID),
        content = parent.getElementsByTagName(children);
    for (var i = 0; i < content.length; i++) {
        if (content[i].innerHTML.indexOf('</a>') !== -1) {
            content[i].innerHTML = "<mark>No live link!!!</mark> Dilarang melakukan spam di blog ini!";
            content[i].className = "deteksi-spam";
        }
    }
}
blockLinks('comment-holder', 'p');
//]]>
</script>

Silahkan ubah comment-holder menjadi comment_block atau comment_body jika tidak berfungsi dengan tag tersebut. pasang css berikut ini di template anda

.deteksi-spam{color:white;font-size:90%}

Semoga bermanfaat untuk anda....

Mematikan link aktif di komentar dengan jQuery

Jika Anda telah bosan berurusan dengan semua jenis komentar spam dan Anda begitu sibuk untuk meninjau semua komentar, maka trik blogger hack baru ini akan membantu Anda untuk itu dengan menghapus link yang disertakan dalam komentar dan menggantinya dengan teks biasa menggunakan jQuery.

Cara Hapus Link Dalam Komentar Dengan jQuery

1. Masuk ke dashboard blogger
2. Klik pada Template> Edit HTML
3. Gunakan ctrl F untuk menemukan tag kode </ body> dan paste kode berikut di atas/sebelumnya.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>

jika di template blog anda sudah memiliki, sebaiknya lewati langkah di atas.

4. Sekarang paste kode berikut di atas tag kode </body>

<script type="text/javascript">
$('.comment-content a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script>

Kode di atas bekerja untuk komentar blogger yang menggynakan threaded comment, jika anda menggunakan komentar blogger lama, gunakan kode di bawah ini.

<script type="text/javascript">
$('.comment-body p a[rel$=nofollow]').replaceWith(function(){return ($(this).text());});
</script> 

5. klik simpan perubahan template anda.

Semoga bermanfaat dan jangan lupa bagikan untuk teman anda...

Link aktif di menu dengan tag conditional

Dapet ide yang tidak pernah terpikir, sempat senyum - senyum sendiri saat menerapkan tag conditional home untuk background <body> kenapa gak saya coba pada menu ya, hadeh... begini teorinya, misal kita mengunjungi sebuah situs/blog lalu kita menekan salah satu link menu contoh widget, semula ketika kita berada di halaman depan tidak ada perbedaan warna background link, lalu ketika link kita klik dan membuka halaman link tersebut memiliki warna background yang berbeda.

dengan ini kita bisa mrngetahui link menu yang sedang aktif/berada,  Contoh anda memiliki memu navigasi seperti berikut

<menu id='navigasi'>
    <ul>
        <li><a href='http://contoh.com'>Beranda</a></li>
        <li><a href='http://contoh.com/aku.html'>Aku</a></li>
        <li><a href='http://contoh.com/arsip.html'>Arsip</a></li>
        <li><a href='http://contoh.com/contact.html'>Kontak</a></li>
    </ul>
</menu>

untuk memberi class warna yang berbeda silahkan sisipkan setiap class di link menu anda, seperti berikut

<menu id='navigasi'>
    <ul>
        <li><a class='depan' href='http://contoh.com'>Beranda</a></li>
        <li><a class='gue' href='http://contoh.com/aku.html'>Aku</a></li>
        <li><a class='arsip' href='http://contoh.com/arsip.html'>Arsip</a></li>
        <li><a class='telpon' href='http://contoh.com/contact.html'>Kontak</a></li>
    </ul>
</menu>

kini setiap link menu anda telah memiliki class yang nanti berguna untuk memberi efek sesuai yang telah di tentukan pada tag conditional, kini kita buat css yang nanti akan kita sisipkan di tag conditional untuk menentukan class dari menu anda, lihat kode di bawah ini:

<style type='text/css'>
    .depan a {background-color:#0A7936;color:white;}
    .gue a {background-color:#0A7936;color:white;}
    .arsip a {background-color:#0A7936;color:white;}
    .telpon a {background-color:#0A7936;color:white;}
</style>

anggap saja css di atas sudah jadi dan sesuai keinginan, kemudian Letakkan kode di atas tepat di atas tag </head> atau buang kode <style type='text/css'> dan <style> lalu gabung dengan kolom css template anda.

Sekarang mengatur tag conditional untuk menunya/Mengatur Warna Menu dengan Tag Kondisional

Pada intinya kita hanya akan memecah semua selektor di atas menjadi kode CSS tunggal yang akan tampil hanya jika halaman yang sedang aktif merupakan halaman yang memiliki URL sama dengan URL pada menu. Jadi kita bisa menggunakan tag conditinal halaman terpilih untuk kondisi ini, lihat tag conditional dibawah ini:

<b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>

Lalu buat beberapa pemisah dan batas perintah seperti berikut

<style type='text/css'>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .depan a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .gue a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .arsip a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;URL HALAMAN/MENU&quot;'>
        .telpon a {background-color:#0A7936;color:white;}
    </b:if>
</style>

Ganti kode URL HALAMAN/MENU dengan URL halaman pada menu yang terkait dengan class menu dalam selektor CSS. Dalam contoh menu yang Saya ilustrasikan di atas, seharusnya kodenya akan menjadi seperti ini:

<style type='text/css'>
    <b:if cond='data:blog.url == data:blog.homepageUrl'>
        .depan a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/aku.html&quot;'>
        .gue a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/arsip.html&quot;'>
        .arsip a {background-color:#0A7936;color:white;}
    </b:if>
    <b:if cond='data:blog.url == &quot;http://contoh.com/contact.html&quot;'>
        .telpon a {background-color:#0A7936;color:white;}
    </b:if>
</style>

Semoga trik ini bermanfaat untuk anda...

Memgenal javascript dan cara menggunakan

Dalam artikel ini Anda mempelajari dasar-dasar JavaScript dan membuat program JavaScript pertama Anda.

Apa itu JavaScript?

JavaScript adalah bahasa scripting yang digunakan untuk script sisi klien. JavaScript dikembangkan oleh Netscape pada tahun 1995 sebagai metode untuk memvalidasi bentuk dan menyediakan konten interaktif ke situs web. yang kemudian disusl oleh Microsoft dan Netscape yang mulai memperkenalkan dukungan JavaScript di browser mereka setelahnya.

Manfaat JavaScript

Berikut ini adalah manfaat JavaScript.

• array asosiatif
• variabel longgar diketik
• ekspresi reguler
• objek dan kelas
• tanggal sangat berkembang, matematika, dan perpustakaan
• dukungan W3C DOM di JavaScript

Kekurangan JavaScript

• Pengembang tergantung pada browser dukungan untuk JavaScript
• Tidak ada cara untuk menyembunyikan kode JavaScript dalam kasus aplikasi komersial

Membuat Program JavaScript pertama Anda

Dalam pelajaran pertama kita akan membuat program JavaScript yang sangat sederhana dan berjalan di Internet Explorer. Contoh ini hanya menampilkan pesan dalam browser "Selamat datang di Dunia JavaScript!".

buat javascript sederhana

<script type="text/javascript">
function sayhello(){
alert("Selamat datang di Dunia JavaScript!");
}
</script>

lalu buat pemanggil di dalam HTML

<p><a href="javascript:sayhello()">Jalankan javascript petama ini</a></p>

Berikut adalah penggunaan kode program JavaScript:

<html>
<head>
<title>First Java Script</title>
<script type="text/javascript">
function sayhello(){
alert("Selamat datang di Dunia JavaScript!");
}
</script>
</head>
<body>

<p><b>klik link dibawah ini untuk melihat hasil</b></p>
<p><a href="javascript:sayhello()">Jalankan javascript petama ini</a></p>

</body>

Demikian sedikit informasi dari saya dan semoga berguna....

Cara Memasang Sintaks Highlighter untuk blogger

Kebanyakan blogger menggunakan blockquote standar untuk berbagi tutorial skrip dan kode dengan pengunjung mereka, namun Alex Gorbatchev telah menciptakan sebuah Highlighter yang berfungsi penuh untuk membuat script dan kode tampak lebih rapi dengan menampilkannya dalam gaya teknologi web seperti HTML, CSS, JavaScript, Php, Python, Sql, xml dll. Dengan Syntax Highlighter Kode ditampilkan baris demi baris dengan nomor baris dan kelompok class kode juga tersedia untuk pengguna dengan pilihan Cetak kode, salin ke klip papan atau untuk melihat Source code.

Cara Menambahkan Sintaks Highlighter Di Blogger?

Langkahnya sederhana dari apa yang Anda bayangkan Ikuti langkah-langkah dibawah ini,

1. Buka akun Blogger> Pilih Template> Edit HTML
2. Backup template Anda untuk menjaga terjadinya kesalahan
3. Lalu cari kode tag seperti ini,

]]></b:skin> atau </style>

4. Dan tepat di bawahnya paste kode berikut,

<!--SYNTAX HIGHLIGHTER BY DB STARTS-->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shYouBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER BY DB ENDS--> 

5. Simpan perubahan yang telah anda buat

Bagaimana menempatkannya di dalam posting?

Setiap kali Anda ingin berbagi kode dari jenis apa pun dengan pembaca Anda, cukup letakkan kode di antara kode berikut,

<pre class="brush:css, brush:html, brush:js, brush:php, brush:sql, brush:python">

Tulis kode disini

</pre>

Catatan: Jangan menambahkan kode secara langsung karena Anda akan mendapatkan error di Blogger Editor, silahkan mengurai kode menggunakan Parser terlebih dahulu.

Ganti Tulis kode disini dengan kode yang telah diurai/dikodekan dengan parse dan publikasikan posting anda lalu lihat hasilnya.

Selamat mencoba sob...

Tool font size di posting blogger

Fluid Text widget Resizer adalah tool yang berguna untuk merubah ukuran font di posting dan script ini saya adopsi dari drive dinamis. Ini akan muncul tepat di bawah judul posting Anda dan akan memungkinkan pengunjung Anda untuk mengubah ukuran teks untuk kenyamanan mereka. Ukuran teks pada seluruh blog Anda akan diperbesar Dari sidebar sampai footer, semua teks akan dimaksimalkan. tool ini juga dapat mengubah kembali ukuran font ke ukuran default/semula sebelum di rubah. ikuti saja trik di bawah ini untuk membuat tool ini...

Cara memasang tool resize font di posting

1. Login ke Blogger> Template> Edit HTML
2. Backup template Anda
3. Cari kode tag di bawah ini,

]]></b:skin>

4. Tepat di bawahnya paste kode berikut

<style type='text/css'>

/*----- Text Resizer By DB ------*/
.controlstyle a{ /*links inside DIV sizecontroldiv*/
outline:none;
}
.controlstyle a img{ /*image links inside DIV sizecontroldiv*/
border-width:0;
}
.controlstyle a.selectedcontrol img{ /*selected control&#39;s image*/
border-bottom:4px solid darkred;
}
.DB-text-resizer{
font-weight:bold!important; color:#F07727!important; text-decoration:none!important; font-family:arial,tahoma !important; font-size:16px!important;
}

#DB-text-resizer-container {
margin:4px 0px;
padding:4px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd; width:100%;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://template-defandaky.googlecode.com/files/resize-font.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var mytextsizer=new fluidtextresizer({
    controlsdiv: &quot;sizecontroldiv&quot;, //id of special div containing your resize controls. Enter &quot;&quot; if not defined
    targets: [&quot;body&quot;], //target elements to resize text within: [&quot;selector1&quot;, &quot;selector2&quot;, etc]
    levels: 10, //number of levels users can magnify (or shrink) text
    persist: &quot;session&quot;, //enter &quot;session&quot; or &quot;none&quot;
    animate: 200 //animation duration of text resize. Enter 0 to disable
})
</script> 

5. Lalu berikutnya cari kode dibawah ini,

<data:post.body/>

6. Tepat di atasnya paste kode berikut,

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='DB-text-resizer-container'>
<div class='controlstyle' id='sizecontroldiv'>
<font style='color:#666; font-weight:bold;'>Sesuaikan ukuran:</font>  <a class='mbt-text-resizer' href='#smaller'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis96p-bGRY0IcY1Hpohu15edGhpOsOiiarNV0REChmB-_lFJ227pm0WBp1VR0ZVgOmmznZUPsP86GGFJkX7sgRBBwFKikFQJigW8xJqiP_mLaZtcId5ONNvNf3lDZ017SeO12UMYyjN7c/s400/oranged.png'/>&#160;</a>  <a class='DB-text-resizer' href='#bigger'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNZ5OWs_FnaRtvZvRfk7cQTCWcf2lQsRPl7YSqcwWJMlREPPk4mk69P10AJvwko8SMrv5bl_Rtj-enENKroCu9ybhej_UwZILEc6dxXpCIopjJcNo1boYwiscW6wEiUsiiNGQRj1Jcg80/s400/orangei.png'/>&#160;&#160;</a><a class='DB-text-resizer' href='javascript:mytextsizer.setFontLevel(0)' rel='nofollow'>Batalkan &#8597;</a>
</div>
</div>
</b:if>

Anda dapat mengubah teks yang akan ditampilkan jika Anda inginkan, lihat warna merah.

7. Simpan template Anda dan lihat hasilnya!

Buka setiap posting Anda untuk melihatnya munculnya tepat di bawah judul posting. Saya telah mematikan tampilan widget pada homepage. Jika Anda ingin widget ini ditampilkan pada homepage anda, anda hanya perlu menghapus tag conditinal berwarna orange dari kode pada langkah #6. saya tidak menyertakan demo untuk trik ini silahkan lihat pada hasilkan.

Semoga berguna....

Bullet otomatis dan manual dengan css di post

Bullet default dari blogger memang tidak terlihat begitu jelek di posting namun para blogger memodifikasinya agar lebih terlihat unik dan berbeda dari yang lainnya dengan menambahkan icon yang bervatif. Selain menambah kesan postingan unik bullet hasil modifikasi ini juga menambah tampilan posting lebih cantik dan tidak terlihat biasa saja sehingga pengunjung semakin lebih menarik untuk membaca, lihat di bawah ini:

• Modifikasi bullet sederhana dari saya
• Mau bikin di blog anda ikuti triknya
• Membuat yang otomatis atau manual

Efek ini sangat mudah diterapkan. Kita hanya perlu menerapkan kode sederhana untuk template Anda. Mari kita mulai!

Pilih dua cara di bawah ini yang anda inginkan, bullet otomatis atau secara manual:

01Bullet secara manual

1. Login ke akun Blogger
2. Buat posting baru
3. Pilih tab editor HTML posting di sebelah tab compose dan paste kode dibawah ini ke dalamnya

<style>
/* bullet blogger DB */
.post ul {list-style:none;}
.post ul li {
    line-height: 1.4em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNnt66LCdD2XfcTzEu1132F_NH_Lo1pN13yAI2w4WoGgscJufVosQMa4HL0AAQvMp5XX-Y2CRX-6bpt6yLanocrVixTiVND6ymrL1yDc1ma0ZZklppr2OO9ZeJ6P-CBhKW7Yct02iGuSE/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51Rf9Aqb0HNhKuX9nFR04sNJ8nHrA3a1JTPEHSqGcncDjSzZvFDm6lFC5RJ8Kt53LqxwvRNkYFPblzddH8ZRLqnhemN4ya6CiqYmWzJb7shqd8SxJehgX0o_rZwP1Wz_yReN2ZZv_7VY/s400/261.gif) no-repeat scroll 0px 4px;
}
</style>

<ul>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
<li>Tulis sesuatu di sini sesuai keinginan anda</li>
</ul>

4. Lalu klik publikasikan dan lihat hasilnya.

ingat: jangan lupa mengganti Tulis sesuatu di sini sesuai keinginan anda dengan tulisan yang anda inginkan.

02Bullet secara otomatis

1. Login ke akun Blogger Anda
2. Pilih Template > Edit HTML
3. Cari kode tag ]]></b:skin> dan paste kode di bawah ini diatasnya

/* bullet blogger DB */
.post ul li {
    line-height: 1.4em;
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNnt66LCdD2XfcTzEu1132F_NH_Lo1pN13yAI2w4WoGgscJufVosQMa4HL0AAQvMp5XX-Y2CRX-6bpt6yLanocrVixTiVND6ymrL1yDc1ma0ZZklppr2OO9ZeJ6P-CBhKW7Yct02iGuSE/s400/265.gif) no-repeat scroll 0px 4px;
    margin: 0.3em 0;
    padding: 0 0 0.8em 20px;
}
.post ul li:hover {
    background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj51Rf9Aqb0HNhKuX9nFR04sNJ8nHrA3a1JTPEHSqGcncDjSzZvFDm6lFC5RJ8Kt53LqxwvRNkYFPblzddH8ZRLqnhemN4ya6CiqYmWzJb7shqd8SxJehgX0o_rZwP1Wz_yReN2ZZv_7VY/s400/261.gif) no-repeat scroll 0px 4px;
}

4. Lalu simpan perubahan.

Langkah berikutnya untuk menambahkan ke posting

Buka blogger anda dan buat posting/entri baru
Tulis tulisan yang anda inginkan lalu blok dan tekan tombol bullet di bar editor posting, lihat gambar di bawah ini:

Dan publikasikan postingan anda.

Catatan: Bullet yang saya gunakan untuk contoh berbeda dengan hasil yang akan anda dapat nanti, jika anda kurang suka dengan bullet ini anda bisa mengganti gambar bullet sesuai dengan ke inginan dengan mengganti link yang saya beri warna orang dan merah. warna orange adalah gambar dalam keadaan non mouse hover, dan merah adalah gambar ketika mouse hover atau disorot. Gambar bullet usahakan sepasang yang berbeda, agar ketika disorot akan muncul perbedaan seperti bullet yang saya pakai untuk contoh.

Demikian saja, semoga berhasil dan berguna...

Memasang link hover multi color di blogger/blogspot

Tidak jauh berbeda dengan random hover link trik ini sama - sama berfungsi untuk memberikan efek warna hover link berubah secara otomatis ketika mouse menyoroti. hanya bedanya, jumlah warna dalam hover link ini dapat di sesuaikan/diatur berapa banyak efek warna pada hover yang ingin anda munculkan.

Untuk menambahkan ini Berkedip efek Link ke blog Anda melakukan hal berikut,

Login ke Blogger> Template> Edit HTML
Cari kode tag </head> di template anda
Dan tepat di atas kode tag </head> paste kode di bawah ini,

<script type='text/javascript'>
 //<![CDATA[
    var rate = 20;
    if (document.getElementById)
    window.onerror=new Function("return true")
    var objActive;  // The object which event occured in
    var act = 0;    // Flag during the action
    var elmH = 0;   // Hue
    var elmS = 128; // Saturation
    var elmV = 255; // Value
    var clrOrg;     // A color before the change
    var TimerID;    // Timer ID
    if (document.all) {
        document.onmouseover = doRainbowAnchor;
        document.onmouseout = stopRainbowAnchor;
    }
    else if (document.getElementById) {
        document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
        document.onmouseover = Mozilla_doRainbowAnchor;
        document.onmouseout = Mozilla_stopRainbowAnchor;
    }
    function doRainbow(obj)
    {
        if (act == 0) {
            act = 1;
            if (obj)
                objActive = obj;
            else
                objActive = event.srcElement;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
    function stopRainbow()
    {
        if (act) {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
    function doRainbowAnchor()
    {
        if (act == 0) {
            var obj = event.srcElement;
            while (obj.tagName != 'A' && obj.tagName != 'BODY') {
                obj = obj.parentElement;
                if (obj.tagName == 'A' || obj.tagName == 'BODY')
                    break;
            }
            if (obj.tagName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = objActive.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }
    function stopRainbowAnchor()
    {
        if (act) {
            if (objActive.tagName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }
    function Mozilla_doRainbowAnchor(e)
    {
        if (act == 0) {
            obj = e.target;
            while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
                obj = obj.parentNode;
                if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                    break;
            }
            if (obj.nodeName == 'A' && obj.href != '') {
                objActive = obj;
                act = 1;
                clrOrg = obj.style.color;
                TimerID = setInterval("ChangeColor()",100);
            }
        }
    }
    function Mozilla_stopRainbowAnchor(e)
    {
        if (act) {
            if (objActive.nodeName == 'A') {
                objActive.style.color = clrOrg;
                clearInterval(TimerID);
                act = 0;
            }
        }
    }
    function ChangeColor()
    {
        objActive.style.color = makeColor();
    }
    function makeColor()
    {
        // Don't you think Color Gamut to look like Rainbow?
        // HSVtoRGB
        if (elmS == 0) {
            elmR = elmV;    elmG = elmV;    elmB = elmV;
        }
        else {
            t1 = elmV;
            t2 = (255 - elmS) * elmV / 255;
            t3 = elmH % 60;
            t3 = (t1 - t2) * t3 / 60;

            if (elmH < 60) {
                elmR = t1;  elmB = t2;  elmG = t2 + t3;
            }
            else if (elmH < 120) {
                elmG = t1;  elmB = t2;  elmR = t1 - t3;
            }
            else if (elmH < 180) {
                elmG = t1;  elmR = t2;  elmB = t2 + t3;
            }
            else if (elmH < 240) {
                elmB = t1;  elmR = t2;  elmG = t1 - t3;
            }
            else if (elmH < 300) {
                elmB = t1;  elmG = t2;  elmR = t2 + t3;
            }
            else if (elmH < 360) {
                elmR = t1;  elmG = t2;  elmB = t1 - t3;
            }
            else {
                elmR = 0;   elmG = 0;   elmB = 0;
            }
        }
        elmR = Math.floor(elmR).toString(16);
        elmG = Math.floor(elmG).toString(16);
        elmB = Math.floor(elmB).toString(16);
        if (elmR.length == 1)    elmR = "0" + elmR;
        if (elmG.length == 1)    elmG = "0" + elmG;
        if (elmB.length == 1)    elmB = "0" + elmB;
        elmH = elmH + rate;
        if (elmH >= 360)
            elmH = 0;
        return '#' + elmR + elmG + elmB;
    }
  //]]>
</script>

Anda dapat mengubah nilai var rate = 20. Ini mengontrol kecepatan link saat berubah warna.

Semoga trik sederhana ini bermanfaat...

Mengatasi blog pagger/navigasi link yang tidak muncul

Umumnya, setiap blog blogger memiliki sebuah link navigasi untuk mengarahkan setiap laman, posting dan arsip saat di buka kecuali si admin/author menghilangkannya untuk tujuan tertentu. namun apa yang terjadi jika link navigasi ini tidak muncul, tentunya akan membuat pengunjung kesulitan menelusuri laman, posting dan juga arsip seperti yang di alami oleh teman saya. kali ini saya akan berbagi trik menangani masalah ini untuk sobat yang memiliki masalah yang sama.

Cara Membuat navigasi Link Terlihat?

Cukup melakukan ini,

1. Login ke Blogger> Template> Edit HTML
2. Backup Template Anda untuk mencegah kesalan yang terjadi
3. Cari kode css berikut ini dengan menekan Ctrl + F,

#blog-pager-newer-link {
    float: left;
       
}
#blog-pager-older-link {
    float: right;
}
#blog-pager {
    text-align: center;
       
} 

4. Ganti dengan kode css berikut:

#blog-pager-newer-link {
    float: left;
        display:inline;
       
}
#blog-pager-older-link {
    float: right;
        display:inline;
}
#blog-pager {
    text-align: center;
        clear:both;
       
} 

5. Kemudian simpan perubahan dan lihat hasilnya.

Masalah yang masih terjadi: Sudah di lakukan trik di atas, link navigasi muncul di halaman beranda, arsip dan laman namun tidak di halaman posting. coba anda ikuti trik di bawah ini:

Maka saya kira Anda harus mengubah kode dengan cara di bawah ini.

1. Masuk ke blogger dan editor template dan cari <div class='blog-pager' id='blog-pager'>
2. Ganti semua kode yang anda temukan dengan kode di bawah ini,

<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</div>
<div class='clear'/>

Jika ini masih belum mengatasi masalah tersebut, priksa struktur element template anda.

Semoga berhasil dan membantu....

Menambahkan multi kolom widget di footer

Membuat kolom dibawah footer dengan menambahkan css agar terlihat lebih menarik dan membuat ruang untuk widget yang di butuhkan. Dengan lebih banyak kolom di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk mengakomodasi widget lainnya seperti Flickr foto dan update Twitter.

Juga Anda dapat menempatkan widget yang lebih sering digunakan seperti Recents comment, arsip, pengikut, About Me dll di bagian bawah template Anda sehingga hanya widget paling penting dimuat pertama. Untuk hasil terbaik template Blogger anda minimal memiliki lebar 950px.

Langkah pembuatan :

Terlebih dahulu backup Template Anda
Lalu masuk ke menu Template >> Edit HTML
Cari kode tag ]]></b:skin>
Tepat di atasnya ]]></b:skin> paste kode di bawah ini,

/* multi kolom widget footer blogger db */
#lower {
margin:auto;
padding: 0px 0px 10px 0px;
width: 100%;
background:#333333;
}
#lower-wrapper {
background:#333333;
margin:auto;
padding: 20px 0px 20px 0px;
width: 960px;
border:0;
}
#lowerbar-wrapper {
background:#333333;
float: left;
margin: 0px 5px auto;
padding-bottom: 20px;
width: 23%;
text-align: justify;
color:#ddd;
font: bold 12px Arial, Tahoma, Verdana;
line-height: 1.6em;
word-wrap: break-word;
overflow: hidden;
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
.lowerbar h2 {
margin: 0px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: left;
border:0;
color:#ddd;
text-transform:uppercase;
font: bold 14px Arial, Tahoma, Verdana;
}
.lowerbar ul {
color:#fff;
margin: 0 auto;
padding: 0;
list-style-type: none;
}
.lowerbar li {
display:block;
color:#fff;
line-height: 1.6em;
margin-left: 0 !important;
padding: 6px;
border-bottom: 1px solid #222;
border-top: 1px solid #444;
list-style-type: none;
}
.lowerbar li a {
text-decoration:none; color: #DBDBDB;
}
.lowerbar li a:hover {
text-decoration:underline;
}
.lowerbar li:hover {
display:block;
background: #222;
}

Lalu cari kode yang sama atau mungkin mirip dengan kode dibawa ini : gunakan (Ctrl + F) untuk mempercepat pencarian

<div id='footer-wrapper'>

Pate kode di bawah ini tepah di bawahnya

<div id='lower'>
<div id='lower-wrapper'>

 <div id='lowerbar-wrapper'>
 <b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div>

Anda bisa menempatkan ini sesuai dengan template anda, karena struktur template terkadang berbeda. Atau sobat bisa membuat pengecualian menempatkan di atas credit wrapper atau </body> dan paste kode di atas </body>.

Kemudian simpan.

Sekarang buka Elemen template dan tambahkan widget Anda ke kolom element Widget yang baru ditambahkan di Footer yang akan terlihat seperti ini,

Cara Customize Widget?

Disini saya anggap margin, padding dan warna bacground sudah sesuai, kecuali anda ingin melakukan perubahan tersendiri silahan di bedah cssnya. Satu-satunya hal yang perlu Anda sesuaikan agar sesuai dengan template Anda adalah lebar widget dan jumlah kolom vertikal.

1. Dalam rangka untuk mengurangi atau menambah lebar keseluruhan widget hanya perlu mengubah width: 960px;
2. Jika Anda ingin mengurangi jumlah widget misal menjadi tiga maka cukup menghapus kode di bawah ini, contoh dari kode,

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

3. jika Anda ingin menambahkan kolom tambahan, tambahkan kode di bawah ini tepat di atas kode <div style='clear: both;'/>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar#' preferred='yes'>
</b:section>
</div>

Ingat bahwa lowerbar# mengacu pada jumlah kolom. Jadi jika Anda ingin menambahkan kolom kelima maka cukup mengganti lowerbar# dengan lowerbar5.

Setelah Anda telah menambahkan kolom kelima maka ingatlah untuk mengubah width: 23%, dengan width: 17%; lihat kode berwarna kuning di css.

Anda hanya perlu mengulangi langkah 3 untuk menambah banyak kolom yang Anda inginkan. Tapi jumlah tiga dan empat atau lima adalah jumlah kolom yang standar. terlalu banyak kolom widget akan membuat tampilan menjadi terlihat jelek.

Semoga berhasil dan berguna, jika mendapat masalah silahkan tulis di komentar...

Trik memasang random banner di blogger

Memasang banner di blog memang bukan sesuatu hal/topik pembahasan yang baru melainkan hal yang sudah lama di bahas, banyak para blogger memasang banner dengan tujuan tertentu, seperti periklanan, perujuk link tertentu ataupun sebagai penghasilan sampingan. umumnya banner ini memiliki dimensi yang bervariatif tergantung dari kebutuhan/tujuan tertentu yang disesuaikan dengan keperluannya dan kali ini saya akan berbagi cara memasang banner yang secara acak otomatis berganti simak saja caranya dibawah ini.

Sebelumnya, terlebih dahulu anda sudah mengupload file banner/gambar di hosting anda dan menyimpan linknya untuk di letakkan dalam trik ini, jika belum silahkan di upload terlebih dahulu. kembali ke trik yang di bahas...

Cara memasang Random Banner Untuk Blog Blogger Anda

Untuk melakukan hal ini anda hanya perlu menambahkan kode berikut di ini HTML / JavaScript Widget, ingat letakkan sesuai dengan ukuran banner yang anda pilih, kode di bawah ini adalah contoh untuk banner/gambar berdimensi 468x60 lihat kode yang saya beri warna kuning.

<script language="JavaScript">
images = new Array(3);

images[0] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[1] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[2] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

PERUBAHAN YANG PERLU:

1. Ganti URL LINK TUJUAN dengan link website pengiklan/link tujuan.

2. Ganti URL BANNER/GAMBAR ANDA dengan link Banner/Gambar Pengiklan atau link tujuan

3. Ganti DESCRIPSI LINK dengan beberapa informasi yang berhubungan dengan link banner/gambar yang anda pasang. Deskripsi muncul pada mouse hover. Anda dapat membiarkannya kosong jika Anda inginkan.

Jangan lupa simpan setelah anda memasukkan kode di atas pada widget/gedget blog anda.

Pertanyaan yang sering di ajukan.

01Bisakah trik ini saya gunakan untuk banner/gambar yang berukuran berbeda?

Bisa, banner ukuran/dimensi berapapun bida anda terapkan dalam triki ini dan pengaturannya pun cukup mudah, silahkan cari kode height dan width lalu ubah ukuran dalam dimensi yang anda mau, misal height='60px' width='468px' ini adalah untuk tinggi 60pixel dan 468pixel tinggal anda ganti menjadi height='250px' width='300px' untuk dimensi/ukuran 300x250 pixel, terapkan ini juga pada dimensi/ukuran lain yang anda inginkan, misal 125x125, 728x90 dll. tambahan, kode border='0' adalah untuk memberi garis keliling, ubah nilai 0 menjadi satu jika anda ingin gambar anda memiliki garis keliling berukuran 1pixel.

02Berapa banyak Banner/gambar yang bisa di pasang?

Terserah yang anda inginkan, misal anda punya banner 10 maka yang perlu anda lakukan adalah mengubah variabel 3 new Array(3); menjadi sepuluh new Array(10); dan mengubah fungsi aray sampai nilai 9 dimulai dari 0 - images[0] s/d images[9], Contoh jika anda bingung:

<script language="JavaScript">
images = new Array(10);

images[0] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[1] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[2] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[3] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[4] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[5] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[6] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[7] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[8] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

images[9] = "<a href = 'URL LINK TUJUAN' rel='nofollow' ><img src='URL BANNER/GAMBAR ANDA' border='0' height='60px' width='468px' alt='DESCRIPSI LINK'></a>";

index = Math.floor(Math.random() * images.length);
document.write(images[index]);
</script>

Lihat perbedaan di atas dengan kode sebelumnya, dan lakukan hal yang sama jika anda ingin menambahkan banner/gambal menjadi lebih banyak.

03Trik ini menambah beban load blog tidak?

Tentu saja, tapi tidak berdampak begitu buruk karena banner/gambar yang terpilih secara otomatis saja yang di munculkan.

Demikian cuap - cuap dari saya semoga membantu dan berguna untuk anda, jangan lupa berkomentar....

Recover Tulisan? Cara mengembalikan Posting

Memulihkan posting Anda yang dihapus atau halaman dari Blogger mungkin tampak menjadi tugas yang menantang. Karena, semua data berada di bawah kepemilikan Google. Oleh karena itu, sulit untuk memulihkan database Anda melalui Hosting atau layanan lainnya. Selanjutnya, Blogger tidak memiliki fungsi pulih hanya memungkinkan untuk cadangan Posting dan Komentar. Untungnya, ada sebuah metode di mana Anda dapat dengan mudah mendapatkan kembali posting dan halaman Anda yang dihapus dalam hitungan detik. Hari ini, dalam artikel ini kita akan membahas cara untuk memulihkan Semua posting atau Halaman Anda  di hapus di Blogger.

Ada banyak metode di mana Anda dapat memulihkan pos setelah itu akan sengaja dihapus dari situs Anda. Berikut ini adalah beberapa cara yang mungkin.

1. Ambil dari Blog, melalui teks.
2. Ambil dari Search Engine Cache, melalui teks.
3. Ambil dari Search Engine Cache, melalui Pos ID.

Cara yang paling mudah adalah dengan menggunakan tembolok mesin pencari untuk mengambil Pos ID dari isi cache. Dengan Menggabungkan Pos ID dengan ID Blog, anda bisa langsung mendapatkan akses ke Blogger Posting Editor yang memiliki semua konten yaitu teks dan gambar yang dihapus secara tidak sengaja.

Langkah 1: Cari Cached dan Copy Post Dari Search Engine:

Jika posting Anda diindeks di mesin pencari Google, silahkan buka Google.com dan menulis Judul artikel Anda (tulis judul lengkap artikel Anda sehingga mesin pencari dapat dengan mudah menampilkannya dalam hasil).

Setelah menemukan posting Anda dalam hasil pencarian dan panah kecil akan muncul sebagaimana ditunjukkan pada screenshot berikut. Hanya Tekan bahwa "Panah >>" dan sebuah jendela baru akan meluncur keluar yang akan menampilkan chaced.

Langkah 2: Mencari Pos ID Dari Search Engine Cache:

Sekarang Anda telah mengakses "Cache artikel Anda", langkah berikutnya adalah untuk menemukan Pos ID dari kode sumber itu. Hanya tekan CTRL + U dan akan membawa Anda ke kode sumber.

Dalam pencarian kode sumber untuk HTML coding berikut (Tip: Jangan mencari seluruh pada satu kode, hanya mencari di satu set kecil kata kunci yaitu <div class='post hentry'>). Pada menemukan kode tersebut, ada yang unik Pos ID 5177832322223143509.

<div class='post hentry'>
<a name='5177832322223143509'></a>
<div class='bordertop'></div>
<h1 class='post-title'>
Cara membuat daftar isi otomatis di blogger/blogspot
</h1>

Langkah 3: Mengakses Tulisan yang Dihapus Melalui Blog dan ID Pos

Sekarang Anda memiliki Pos ID serta ID Blog sehingga Anda dapat dengan mudah memulihkan artikel yang dihapus. Cukup kunjungi URL berikut dan itu akan membawa Anda ke editor Blogger konten yaitu teks dan gambar yang dihapus tidak sengaja. (Ingat: Jangan lupa untuk mengganti ID Blog serta Pos ID Dari URL berikut jika tidak, anda akan menghadapi kesalahan).

http://www.blogger.com/blogger.g?blogID=24069595#editor/target=post;postID=5177832322223143509;

Itu saja, sekarang Anda dapat memPublikasikannya, Simpan atau perbarui artikel Anda yang telah dihapus baik oleh Anda atau Google DMCA.

Pertanyaan yang Sering Diajukan:

1. Cara Mendapatkan ID Blog?

Masing-masing dan setiap situs host di Blogger memiliki nomor ID Blog berbeda / unik, biasanya tidak perlu khawatir tentang ID, tetapi occupationally Anda perlu mengetahui nomor untuk menginstal plugin pihak ketiga ke situs Anda. Jika Anda membutuhkan itu, inilah bagaimana caranya:

Pertama Login ke Akun Blogger Anda, dan pilih blog yang memiliki ID yang ingin Anda temukan. Pilih dari dashboard, sama seperti Anda lakukan sambil menerbitkan topik baru ke situs Anda.

Dari halaman apapun, Template, Layout Anda dapat menemukan nomor ID blog Anda. Hanya lihatlah browser Anda di Alamat bar. Lihat screenshot berikut di bawah ini.

Pada akhir address bar, Anda akan melihat beberapa nomor yaitu BlogId = XXXXXX (dimana "X" merupakan nomor ID). Catatan: Setiap situs memiliki ID yang berbeda sehingga, pastikan Anda mendapatkan yang benar.

2. Apakah Siapapun dapat Akses Admin Panel Situs saya?

Tidak ada yang bisa mengakses situs Anda kecuali Anda. Jika orang lain menemukan ID Blog Anda hanya sebagai Pos ID bahkan daripada mereka tidak dapat mencoba untuk meng-hack atau mengedit situs Anda sampai atau kecuali mereka memiliki hak istimewa Alamat Email admin. Setiap kali orang tak dikenal akan mengakses admin dashboard situs Anda akan menampilkan pesan error yaitu "akun Anda saat ini (example@gmail.com) tidak memiliki akses untuk melihat halaman ini. Klik di sini untuk logout dan mengubah account".

 

Selamat mencoba...

Membuat komentar blogger dan google+

Ada sebuah metode toggle yang dapat Anda pakai untuk mengaktifkan Komentar baru Google+, tetapi tanpa kehilangan sistem lama Anda yaitu komentar Blogger. Pengguna dapat terus berkomentar dengan komentar blogger seperti sebelumnya, dan jika pengunjung ingin berkomentar melalui Google Plus pengguna dapat menekan "G+" tombol toggle, Simak cara membuatnya pada langkah di bawah ini.

Apa Kekurangan dari Komentar Google+?

Pertama dan terpenting untuk menggunakan fitur ini, adalah anda harus memiliki account di Google+ kalau tidak, anda tidak akan bisa membalas komentar. tetapi, tidak semua pengunjung mempunyai akun google+, bila anda hanya menerapkan komentar Google+ saja bagaimana pengunjung yang tidak memiliki akun google+ akan berkomentar jadi ini mungkin akan mengganggu pengunjung Anda.

Kedua, sistem komentar tergantung pada URL, tidak ada API data komentar Anda. Tidak seperti Facebook Aplikasi ID. jadi ketika Anda mengubah URL artikel Anda , maka anda akan kehilangan semua komentar Anda sebelumnya.

Tidak mengirim pemberitahuan ke Alamat Email Anda setiap kali seseorang baik meninggalkan balasan ke blog atau posting komentar baru. Di sisi lain, semua komentar yang diterbitkan langsung tanpa review apapun sehingga dapat menjadi tempat yang ideal untuk Spammer.

Solusi:

Langkah # 1: Hal pertama yang perlu Anda lakukan adalah untuk membackup template Anda. Setelah log in, dari dashboard pergi ke Template >> Edit HTML. Sekarang cari kode berikut. (Quick Tip: Klik di manapun pada editor HTML dan Tekan CTRL + F untuk mengaktifkan kotak pencarian).

<b:includable id='threaded_comments' var='post'>
......
......
......
......
</b:includable>

Langkah # 2: Setelah menemukan kode di atas, ganti seluruh kode dengan kode berikut. (Ingat: Pastikan bahwa tag ditutup dengan benar jika tidak, anda akan menghadapi kesalahan).

    <b:includable id='threaded_comments' var='post'>
      <div id='com-header'>
    <h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEO_l9JSLz0biesuxDG5yMvpqBKjoXGdRUVDotjyHAHRv5KXYQnSCn3yCm9QghkXRjImbrwCLrYwWAf3wGi4KyeOFq-u0iDgNSLh-Gi80u8v5Pg4ekrOU1n6UvWu37j2nvuSW-V48L3a2/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW6KTdn0BdLpKVO3PqdfyNuzAhEqASZgoYWzjEC2KPX03588JxUh3vrzg4ANYLC_1tl_uIWexG_rarA77Wu70eAB_QEHGZwq5-JUjAyf9AkUS_VWJoQ4n6X41YivLMVD4f5g6jKZYOohJ5/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6> 
    <div id='copyrigtsmbl'><a href='http://defandaky.blogspot.com/2013/07/cara-menggunakan-toggle-komentar.html' id="mblrights">Dapatkan Widget Ini</a></div>
    </div>
    <div id='comment-zone'>
      <div class='comments' id='comments'>
        <a name='comments'/>
        <h4><data:post.commentLabelFull/>:</h4>
        <div class='comments-content'>
          <b:if cond='data:post.embedCommentForm'>
            <b:include data='post' name='threaded_comment_js'/>
          </b:if>
          <div id='comment-holder'>
             <data:post.commentHtml/>
          </div>
        </div>
        <p class='comment-footer'>
          <b:if cond='data:post.allowNewComments'>
            <b:include data='post' name='threaded-comment-form'/>
          <b:else/>
            <data:post.noNewCommentsText/>
          </b:if>
        </p>
        <b:if cond='data:showCmtPopup'>
          <div id='comment-popup'>
            <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
            </iframe>
          </div>
        </b:if>
        <div id='backlinks-container'>
        <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
           <b:if cond='data:post.showBacklinks'>
             <b:include data='post' name='backlinks'/>
           </b:if>
        </div>
        </div>
      </div>
      <div id='gcontainer'><div id='gcomments'/></div>
    <script src='http://apis.google.com/js/plusone.js'/>
    <script src='http://template-defandaky.googlecode.com/files/google-koment-defandaky.js'/>
    <style>
    #gcontainer {
    display:none;
      }
    #com-norm,#com-gplus {
    cursor:pointer;
    padding:0 5px;
    float:left
      } 
    #com-header { 
    border: 1px solid #d2d2d2;
    padding: 10px;
    float: left;
    width: 580px;
    margin-bottom: 20px;
    background: #f5f5f5;
      }
    #com-header h6{ 
    font-size: 20px;
    text-transform: uppercase;
    font-weight: bold;
    float: left;
    padding-top: 15px;
    margin: 0px;
    margin-right: 7px;
    margin-left: 7px;
      }
    #copyrigtsmbl {
    float: right;
    margin-top: 20px;
    border-top: 1px solid #d2d2d2;
    margin-right: -10px;
    padding-right: 10px;
    padding-top: 5px;
    padding-left: 10px;
    border-left: 1px solid #d2d2d2;
    padding-bottom: 5px;
    margin-bottom: -10px;
    font-size:11px;
    background: #fff;
      }
    #copyrigtsmbl a {
    text-decoration:none;
    color:111!important; 
      }
    </style>
    </div>
    </b:includable>

Langkah # 3: Sekarang sekali lagi cari dengan kotak pencarian kode berikut.

<b:includable id='comment_picker' var='post'>
.......
.......
.......
.......
</b:includable>

Langkah # 4: Setelah menemukan kode seperti yang ditentukan di atas, ganti dengan kode berikut. (Ingat: Cobalah untuk menutup tag dengan benar, sehingga template tidak mendapati kesalahan).

<b:includable id='comment_picker' var='post'>
      <b:if cond='data:post.forceIframeComments'>
        <b:include data='post' name='iframe_comments'/>
        <b:if cond='data:post.showThreadedComments'>
          <b:include data='post' name='threaded_comments'/>
        <b:else/>
          <b:include data='post' name='comments'/>
        </b:if>
      <b:else/>
        <b:if cond='data:post.commentSource == 1'>
          <b:include data='post' name='iframe_comments'/>
        <b:else/>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='threaded_comments'/>
          <b:else/>
            <b:include data='post' name='threaded_comments'/>
          </b:if>
        </b:if>
      </b:if>
 </b:includable>

Langkah # 5: Setelah menerapkan instruksi yang disebutkan di atas tekan tombol "Simpan Perubahan".

Selamat: Anda telah berhasil menambahkan sistem komentar Google+ ke blogger tanpa menghapus sistem komentar blogger sebelumnya.

kesimpulan:

Dengan Mengaktifkan kedua sistem komentar, Anda memberi pengunjung anda kebebasan untuk memilih platform yang paling disukai mereka untuk berkomentar. Itu membawa banyak manfaat bagi Anda dan pembaca Anda.

Semoga berguna, jika ada pertanyaan tulis di komentar sob....