Tips Mempercepat Loading Form Komentar Blog

Setelah kemarin mengulas trik URL Redirect pada blog, sekarang kita masuk kebagian optimasi loading blog, yaitu Cara Mempercepat Loading Form Komentar Blogspot.
Tips yang saya terapkan juga cukup mudah cuman 2 (dua) langkah, yaitu dengan sedikit mengedit kode HTML saja.
Sebelum saya jelaskan lebih lanjut pahami terlebih dahulu kode HTML untuk Form komentar blog dibawah ini.


1. Kode HTML Original Form Komentar
2. Kode Yang Sudah DiModifikasi
3. Tutorial

Sedikit ulasan, seperti yang kita tahu,form komentar blog ini mempunyai/mengandung banyak error dan tidak valid HTML. Setelah sobat lihat kode HTML yang Ori dan yang sudah dimodifikasi, pasti rada sedikit aneh kan dengan kodenya?? Anehnya karena pemanggilan iframe'nya dibuat terpisah menjadi dua bagian. Kode src yang biasanya digunakan untuk memanggil data external, lah koq dipisah. Inilah yang sedikit membuat loadingnya lambat.

Pehatikan saja load elemen bagian sidebar pasti lebih duluan nongol daripada form komentar. Seharusnya kan form komentar yang nongol duluan karena satu urutan setelah konten. Iya sih, sekilas memang tidak kelihatan/tidak terlalu diperhatikan. Tapi bila sobat ada yang merasakan hal yang sama dengan saya (haha kek lirik lagu galau aja yah!! :p ) Sobat bisa sedikit meminimalisir loading form komentar dengan cara berikut.

Tutorial

1. Langsung wae mlebu Edit HTML dan Lanjutkan. Jangan lupa centang pada "Expand Widget Template, dan tidak ada salahnya buat BackUp template sobat.

2. Cari kode dibawah ini

Kode HTML Original Form Komentar

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='' width='100%'/>

Penjelasan:
Perhatikan kode HTML diatas, pada data:post.commentFormIframeSrc dan juga src='' itu yang bikin aneh, target "src iframe" yang dibiarkan kosong.

3. Pindahkan kode data:post.commentFormIframeSrc kedalam target src'' yang kosong. Sehingga menjadi seperti dibawah ini:

Kode Yang Sudah DiModifikasi

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='520' id='comment-editor' name='comment-editor' src='data:post.commentFormIframeSrc' width='100%'/>

Penjelasan:
Kalau dilihat kode tersebut ada 2, jadi ganti semuanya saja.

4. Langkah terakhir simpan template.

Seperti itulah Tips Mempercepat Loading Form Komentar Blog. Selamat mencoba dan ditunggu tanggapannya.

Tags ALT Otomatis Pada Setiap Gambar di Blog

Cara memberikan Tags ALT Otomatis pada setiap gambar di Blogspot.  Postingan Sebelumnya yaitu Cara Membuat CTRL+U Redirect Dengan Javascript, sekarang lanjut lagi membahas tentang tags ALT otomatis pada Image di Blogspot. Pengalaman sendiri nih sob, yang suka males ataupun lupa naruh ALT pada tiap image yang dipasang. Penting gak penting lebih banyak pentingnya sih, diantaranya dengan Tags ALT ini bila image/foto kita di upload dan di copas bisa kebaca oleh google bot.
Jadi Sedikit banyak ngaruh juga di Image SEO. Yang pasti google lebih tahu mana yang asli dengan yang copas. Disamping itu juga ada manfaatnya buat validalitas di CSS Validation Service biasanya image yang ada di blog kita bila tidak ada Tags ALT kedetect error sob. Selebihnya anda cari sendiri yoo. Hehe

Bila sudah males baca basa-basi saya silahkan langsung saja klik menu dibawah ini:

Menu di dalam postingan:

1. Kode JavaScript
2. Cara Pemasangan

Nah bila tidak perlu repot-repot dalam kita memberi Tags ALT alangkah lebih baiknya bisa sobat memakai cara ini. Pastinya lebih efisien.
Kode yang digunakan disini yaitu dengan JavaScript sob. Yowes, simak lebih lajut dibawah ini.

Kode JavaScript

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
});
//]]>
</script> 

Note: 
Perhatikan kode JS yang saya tandai dengan warna merah, bila ditemplate sobat sudah ada kode JS tersebut, hapus saja kode tersebut. Tujuannya agar tidak terjadi Crash.

Cara Pemasangan

1. Login pastinya
2. Masuk Template - Edit HTML - Lanjutkan - Ceklist Expand template widget.
3. Cari kode </body>
4. Bila sudah ketemu, letakan kode script'nya diatas kode </body>
5. Save Template.


Piye sob, gampang kan Cara memberikan Tags ALT Otomatis pada setiap gambar di Blogspot.
Selamat mencoba, semoga bermanfaat.
Salam Blogger !! \m/

Update:

Kode script diatas bisa kita perisingkat lagi menjadi seperti dibawah ini.

$(document).ready(function() {
  $('img').each(function(){
    var $img = $(this);
    var filename = $img.attr('src')
    $img.attr('title', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
    $img.attr('alt', filename.substring((filename.lastIndexOf('/'))+1, filename.lastIndexOf('.')));
  });
}); 

Lebih ringkas dengan fungsi yang sama. Jangan lupa kode JS, dan pembungkusnya. Semoga bermanfaat.

Cara Membuat CTRL+U Redirect Dengan Javascript

Cara proteksi CTRL+U dengan redirect link pada blogspot - Banyak tutorial yang saya jumpai dan saya ketahui tapi blm semua saya share disini, saking lamanya gak di share tips n triknya jadi basi. hahaa...
Pastinya sobat sudah tidak asing lagi kan dengan judul diatas? Jelas, karena sudah banyak yang share diluar sana. Yang akan saya ulas disini yaitu Redirect CTRL+U ke link yang kita kehendaki, tentunya dengan JavaScript. Memang ada banyak caranya, tapi beberapa juga ada yang memanfaatkan kode script seperti di postingan saya sebelumnya, yang hanya tinggal memanimulasi kodenya dengan menambahkan url redirect yang kita inginkan. Tapi bukan itu yang akan saya share disini.

Sedikit ulasan apa itu Redirect Link.
Redirect Link berfungsi untuk mengalihkan halaman yang satu ke halaman yang lain. Ada banyak macamnya, contoh yang mudah dipahami yaitu Redirect link Otomatis dan Manual. Redirect otomatis, berarti tanpa kita suruh juga sudah langsung pergi ketempat yang sudah ditentukan, bisa url gambar, link, dsb (redirect). Lain halnya dengan yang manual, nah contohnya seperti yang akan saya bahas kali ini.
Mudeng apa Mubeng sob dengan penjelasan saya diatas ?? Hahaha :p

Untuk DEMOnya silahkan pencet CTRL+U diblog ini sob.
Piye sob, dadi ora ?? :D
Sek sob, ngopi + udud sek yo... kesel mikir + ngetik ki... :v

CTRL+U Redirect yang kita pakai disini yaitu mengguanakan kode JavaScript berikut:

 <script src="http://k-blogger.googlecode.com/files/rdctrl%2Bu.js" type="text/javascript"> 

Note:
Silahkan dikombinasikan (edit) sendiri kode javascript diatas (yang berwarna merah). Jangan sampai salah redirectnya ke blog orang lain loh ?? Hohoho

Seperti itulah kiranya Cara Membuat CTRL+U Redirect Link di Blog. BIla ada kesulitan silahkan langsung saja tanyakan disini. Selamat mencoba !!

Cara Mempercepat Loading Blog With Script Lazyload

Cara Mempercepat Loading Blog With Script Lazyload - Cara mempercepat loading blog memang ada banyak macam dan cara, seperti yang jauh-jauh hari sudah pernah saya share disini yaitu antara lain, Kompres CSS Untuk Mempercepat Loading Blog, Cara Mempercepat Loading Blog With CSS External, dan masih ada banyak cara lain tentunya. Nah Script Lazyload awalnya saya tahu itu script/plugin untuk Wordpress, ternyata ada juga yang diterapkan di Blogspot.

jQuery Lazyload

Sebelum Sobat menerapkan script ini, sedikit saya beri ulasan sebelum dan sesudah menggunakan Script Lazyload.
Dengan tools ini Sobat mengetahui berapa kecepatan blog Sobat.
Dari situ Sobat bisa membedakan sendiri setelah dan sebelum menggunakan Script Lazyload ini.

Oke, berikut cara memasang Script Lazyload di Blogspot:

1. Login blogger pastinya
2. Masuk ke Rancangan
3. Klik Edit HTML dan klik Expand Template Widget (backUp template)
4. Cari kode </head>
5. Letakan script dibawah ini tepat diatasnya

<script charset='utf-8' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/easy-loading.js' type='text/javascript'/>
<script charset='utf-8' type='text/javascript'>
$(function() {
$(&quot;img&quot;).lazyload({placeholder : &quot;http://bit.ly/Qv60g5&quot;,threshold : 200});
});
</script>

6. Simpan Template.


Tambahan:
Pengalaman saya sendiri untuk kode blogger, tidak semua website/blog bisa lebih ringan menggunakan Script Lazyload ini.
Saat di cek, ada pula yang malah membuat blog lebih berat.
Jadi sebelum dan sesudah anda menggunakannya alangkah lebih baiknya sobat cek dulu disini.
Semoga bermanfaat.

Sumber referensi :
http://exitren.blogspot.com

Membuat Efek Tampilan Loading Halaman Pada Blogspot

Membuat Efek Tampilan Loading Halaman Pada Blogspot - Kemarin sudah saya bahas tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3, nah pada sore hari ini saya akan membahas masih seputar efek-efek pada blogspot, yaitu Membuat Efek Tampilan Loading Halaman Pada Blogspot. Efek loading disini yaitu ketika kita masuk kesebuah wesite/blog, sebelum kita dibawa ke hompage blog, kita akan diperlihatkan efek loading terlebih dahulu. Jadi intinya seperti ada jeda sebelum kita masuk ke homepage blog/website. Tahu kan maksud ane ??
Cara membuatnya kita hanya butuh code CSS dan sedikit polesan JQuery.

Yowes, biar makin jelas bisa Sobat lihat Demonya dibawah ini:

-=[LIVE DEMO]=-

Tertarik ?? Bagi yang tertarik untuk membuatnya silahkan ikuti step by step berikut:

1. Seperti biasa login blogger sob!
2. Go to Design/Rancangan > Edit HTML > and ceklish pada "Expand Widget Templates"
3. Lalu cari kode  ]]></b:skin> dan letakan kode CSS berikut tepat diatasnya.

#loading {
    position: fixed;
    z-index: 50;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #000 url(URL_GAMBAR_ANDA) no-repeat center;
    line-height: 350px;
    text-align: center;
    font-size: 36px;
    color: #353231;
    text-indent: -9999px;
}
.v2 #loading { display: none; }
 
#progress-bar {
    position: absolute;
    top: 0; left: 0;
    background: #f3f3f3;
    opacity: 0.8;
    width: 0;
    height: 18px;
}
#loader {
 background: url(<span style="background-color: #ea9999;">URL_GAMBAR_ANDA</span>) no-repeat center 25%;
 height: 100%;
 display: block;
}

Keterangan:
Perhatikan kode CSS diatas untuk URL_GAMBAR_ANDA
Gantilah gambar loading blognya sesuai kreasi sobat.
Tapi bila ingin seperti gambar yang ada pada DEMO, silahkan pakai gambar ini:
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9xbQGE0-oXj6VyMfHYTrZdWf0KkpThAlInRy774IAtYdrjiVb1DmSd69Lfetzsmlo4tljLdgO1qwF_RtDtEB0RuOtkWimnc-h5ViTH_BVhl963Ob2U9zaSMyw94jn_mmQOdTgwDV1vUB7/s1600/loading.gif)

5. Bagian kedua yaitu menambahkan script JQuery, cari kode </head> dan taruh script JQuery berikut tepat diatasnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

Kalau script JQuery diatas sudah ada di blog sobat, maka tidak perlu lagi memasangnya.
Kemudian tambahkan lagi script berikut dibawahnya:

<script>
(function($){

$("html").removeClass("v2");

$("#header").ready(function(){ $("#progress-bar").stop().animate({ width: "25%" },1500) });
$("#footer").ready(function(){ $("#progress-bar").stop().animate({ width: "75%" },1500) });

$(window).load(function(){
 
    $("#progress-bar").stop().animate({ width: "100%" },600,function(){
        $("#loading").fadeOut("fast",function(){ $(this).remove(); });
    });
});
})(jQuery);
</script>

6. Next lanjut untuk edit HTML. Cari kode <body> letakan kode berikut tepat dibawahnya.

<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>

7. Simpan template dan lihat hasilnya.

Tambahan:
Ingat, untuk hasil yang sudah kita buat diatas itu efek loadingnya disetiap halaman yang kita buka!
Jadi bagi kalian yang hanya ingin tampilan loading blognya hanya di Home Page'nya saja, silahkan ganti kode HTML pada langkah No.6 dengan kode dibawah ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id='loading'>
<div id='progress-bar'></div>
<div id='loader'>Loading...</div>
</div>
</b:if>

Selesai sob! Selamat mencoba Membuat Efek Tampilan Loading Halaman Pada Blogspot, dan semoga sukses. Bila sobat mengalamai kesulitan dalam prakteknya bisa sobat langsung tanyakan dengan berkomentar pada tread ini.

Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3

Setelah kemarin posting tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot Kali ini lanjut lagi share tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Efek gambar pada postingan blog, pastinya akan membuat blog lebih enak dipandang mata. Seperti yang kita tahu, ada banyak macam dan cara untuk membuat efek pada gambar di postingan blog, salah satunya yaitu efek image dengan JQuery, tapi yang akan saya bahas disini yaitu efek image dengan CSS3. Dibawah ini merupakan kumpulan efek-efek gambar pada postingan blog yang bisa saya kumpulkan.

Wuookeee.. langsung saja praktek sob !!
1. Login blogger
2. Pergi ke Edit HTML
3. Beri ceklist pada Expand Widget Templates
4. Cari kode CSS .post img dan .post img:hover, bila ada kode tersebut ganti/replace dengan kode yang saya siapakan dibawah. Tapi bila tidak ada kode seperti diatas, tinggal paste'kan saja diatas kode ]]></b:skin>

DEMO : Arahkan mouse ke gambar dan lihat efeknya.
Dan berikut adalah KODE CSS beserta DEMO untuk efek gambar pada postingan blog :

.post img {
    box-shadow: 0 3px 6px rgba(0,0,0,.25);
    transform:  rotate(+2deg);
    -o-transform: rotate(+2deg);
    -webkit-transform:  rotate(+2deg);
    -moz-transform: rotate(+2deg);
}
.post img:hover {
    box-shadow:  0 3px 6px rgba(0,0,0,.5);
    transform:  rotate(-1deg);
    -webkit-transform:  rotate(-1deg);
    -o-transform:  rotate(-1deg);
    -moz-transform: rotate(-1deg);
}

.post img {
    height:auto;
    transition: all 0.5s;
    -o-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.post img:hover {
    transition: all 0.3s;
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -webkit-transform: scale(1.5);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
}

.post img {
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
}

.post img {
    border-radius: 30px 0 30px 0;
    -moz-border-radius: 30px 0 30px 0;
    -webkit-border-radius: 30px 0 30px 0;
    -o-border-radius: 30px 0 30px 0;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
}
.post img:hover {
    box-shadow: 1px 1px 10px 3px rgba(0,0,0,0.5);
    border-radius:0;
    -moz-border-radius:0;
    -webkit-border-radius:0;
    -o-border-radius:0;
}

.post img{
    transition:all 1.2s ease-out; 
    -o-transition:all 1.2s ease-out; 
    -moz-transition:all 1.2s ease-out; 
    -webkit-transition:all 1.2s ease-out; 
} 
.post img:hover {
    z-index:99;
    transform:rotate(-10deg) scale(1.4) translate(5px,-3px);  
    -o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
    -moz-transform:rotate(360deg) scale(2) translate(1px,-3px); 
    -webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
    box-shadow: 0 3px 6px rgba(0,0,0,.5);
} 

5. Bila sudah memilih salah satu efek gambar diatas, jangan lupa Save Template.

Nah, simpel dan gampang kan tutorialnya sob ??
Demikian ulasan saya tentang Kumpulan Efek Gambar Pada Postingan Blog Dengan CSS3. Semoga bermanfaat, dan salam Kode Blogger \m/

Terjadi Galat bX-fa9wwp, Setiap Login Blogger.com dan Solusinya

Hadeww... dari kemarin siang saya [kode-blogger] gak bisa login di blogger.com, pasti muncul kesalahan atau Galat bX-fa9wwp. Saya kira cuma masalah pada histori/cokies pada browser yang saya pakai, tapi setelah saya utak-utik semuane tetep aja masih Galat setiap login ke blogger.com. Berikut screenshotnya:

Dan sampai sekarangpun setiap saya login apsti muncul galat seperti gambar diatas.Tapi karena itulah saya punya sedikit pist, yang mungkin berguna buat blogger yang mengalamin hal yang sama dengan yang saya alami tersebut, Terjadi Galat bX-fa9wwp, Setiap Login Blogger.com dan Solusinya.
Saya tunjukan disini ada dua cara untuk menaggulangi masalah tersebut:

1. Cara pertama
Sobat bisa login blogger melalui link berikut: http://draft.blogger.com/home
Dan tampilan dasbor seperti yang sudah saya jelaskan pada postingan saya sebelumnya yaiitu "Coba Antarmuka Blogger Yang Diperbarui"

2. Cara kedua

• Login ke draft.blogger.com.
• Pergi ke Setting > Basic di tab permission "add authors", lalu masukan akun gmail anda yang lain.
• Verifikasi invite tersebut melalui akun gmail yang tadi anda invite.
• Setelah di verifikasi lalu refresh draft.blogger anda yang pertama.
• Jadikan akun yang tadi anda invite sebagai admin.
• DONE !!

Keterangan:
Tapi kekurangan pada cara yang kedua yaitu kita (admin baru yang ditambahkan) tidak bisa sepenuhnya bisa men-setting semua blogger seperti admin aslinya. Hanya sbats bisa memposting artikel dan edit artikel saja.Tapi daripada tidak bisa login ke blogger.com, gak ada salahnya memakai cara yang kedua.Dan menutut saya lebih baik silahkan gunakan cara yang pertama.
Sekian dari saya, semoga bermanfaat. [kode-blogger]

Article Information:
Description: Terjadi Galat bX-fa9wwp, Setiap Login Blogger.com dan Solusinya
Reviewer: Viyan Pradita - Itemreviewed: Terjadi Galat bX-fa9wwp, Setiap Login Blogger.com dan Solusinya - Rating: 5

Cara Membuat Anti Klik Kanan, Disable Block Text, dan Disable Ctrl+ C, pada Blogspot

Posting again sob, Setalah kemarin saya share tentang Cara Membuat Halaman Maintenance Pada Blogspot, sekarang lanjut lagi Cara Membuat Anti Klik Kanan, Disable Block Text, dan Disable Ctrl+ C, pada Blogspot (Anti Kopas). Cara ini pastilah sudah banyak yang share, dan tentunya engan macam-macam cara dan beda kode tentunya. Nah yang ingin saya share disini yaitu dengan cara dan kode yang menurut saya paling simpel dan gak pakek ribet. Dan dengan satu kode ini kita sudah bisa membuat 3 trik sekaligus, yaitu:

1. Disable Klik Kanan (onmousedown)
2. Disable Block Text (oncontextmenu)
3. Disable Ctrl+C / Ctrl+V (onkeydown)




Tapi untuk penggunaan kode ini harus disesuaikan dengan kebutuhan saja, jadi kalo blog memiliki tutorial, dan banyak kode script (seperti blog saya ini kode-blogger), pastinya gak begitu pas rasanya kalau di beri trik ini. Yaaa pastinya akan membuat pengunjung gak betah, bahkan bingung, karena gak bisa di copy paste. Dan satu lagi, mungkin trik ini juga gak pas kalau di pasang di blog yang COPAS !! masa isi konten-nya aja copy-paste mau di anti klik kanan ?? kata temenku "ORA NGILO" kalau dlm bhs indon'nya "GAK NGACA" konten Copas masa di anti copas?? wkwkwkwk... langsung sadar dan langsung tak copot tuh script :))

Sedikit cerita, dan ini adalah murni pendapat serta pengalaman saya pribadi (viyan pradita) tentang kopy paste (Kopas):

Saya sendiri masih banyak menemukan artikel-artikel saya yang di kopas tuntas tanpa sumber (link back) ke artikel aslinya.
Selain itu ada banyak juga yang menjiplak sama persin template saya ini.
Bagi saya.. sudah gak kaget'lah untuk hal-hal seperti itu, mungkin sudah sewajarnya konten yang unik (yang benar-berar susah payah mikir dan nulis) itu di kopas!! eneg tp rasanya bangga!! kenapa ??
Positif'nya berarti konten yang saya buat iru bagus, coz banyak yang kopas.. hahaha
Daripada kita banyak omong, ngingetin, toh belm tentu juga m,aksud baik dibls juga denga hal yang baik. Jadi ya cuma menguras tenaga saja! :))

Toh juga sebenarnya deengan mencantumkan sumber link asli, tidak akan mengurangi reputasi anda sebagai seorang blogger !! Justru disitulah nilai dari sportifitas dan lebih bisa untuk menghargai hasil karya orang lain.
(just share dan jgn diambil hati jika merasa) Xixixiii :p
Negatifnya... dipikir sendiri saja.. :D

Yowes, lanjut ke topik bahasan, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: <body> (gunakan Ctrl+F di keyboard untuk memudahkan pencarian), setelah ketemu, gantilah kode <body> dengan kode dibawah ini:

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

Penting !!
Ada 3macam script "return false" untuk meng'enable kan lagi ganti saja kode "false" menjadi "true"

Intinya :
Anti copas : return false;
Copas: return true;

6. Simpan template, dan lihat hasilnya.


Begitulah kiranya cara simpel membuat anti kopy paste pada blogspot.
Semoga bermanfaat. (salam kode-blogger)

Article Information:
Description: Cara Membuat Anti Klik Kanan, Disable Block Text, dan Disable Ctrl+ C, pada Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Anti Copas, Cara Membuat Anti Klik Kanan, Disable Block Text, dan Disable Ctrl+ C, pada Blogspot - Rating: 4.5

Cara Membuat Halaman Maintenance Pada Blogspot

Cara membuat Halaman Maintenance Pada Blogspot, (Under Maintenance). Setelah kemarin saya membahas tentang Search Box Simpel dan Keren Untuk Blogspot, kali ini saya akan kembali membahas tentang tips dan trik blogspot. Dulu awalnya, saya pikir cuman di blog Wordpress saja yang bisa maintenis, eh maintenance maksude :)) Ternyata Blogspot-pun bisa.
Just to share saja sob, kebetulan saya (kode-blogger) sudah lama tidak meng-update postingannya, jadi kali ini saya sempatkan untuk membahas tips dan trik blogspot again.
Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada?? malu n gak enak dilihat kan sob ?? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia (Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance. Gak cuman Wordpress, Blogspot-pun bisa !! Hihihi (buat para master2 pastilah sudah gak asink lagi tentang hal ini, jd lewatin saja) :))

Oke, silahkan lihat demonya. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !! bila sobat memasang kode maintenance-nya, maka akan muncul creenshot seperti dibawah ini:

Bila tertarik untuk membuat Halaman Maintenance Pada Blogspot, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

html { height: 100%; background: url(http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) no-repeat center 50%; margin: 0; } body { display: none; }

6. Jangan lupa Simpan Template.


Sip, sampai disini sobat udah bisa membuat Halaman Maintenance Pada Blogspot, melihat kode diatas jelaslah sangat simpel dan mudah dimengerti tentunya.
Silahkah ganti link image diatas (http://i865.photobucket.com/albums/ab218/1rd3/site-under-maintenance-kodeblogger.png) sesuai dengan kreasi sobat.

Sekian dari saya (kode-blogger) untuk topik Cara Membuat Halaman Maintenance/Under Maintenance Pada Blogspot.

Article Information:
Description: Cara Membuat Halaman Maintenance Pada Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Halaman Maintenance Pada Blogspot - Rating: 4.5

Cara Membuat Link Nudging Dengan jQuery

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya masih banyak tips dan trik blogspot yang saya bookmark tapi belum sempat saya share disini, jadi kalau tips ataupun triknya udah ketinggalan jaman, harap dimaklumi saja ya. Kali ini saya akan membahas seputar jQuery, pastinya menarik untuk disimak dan dipraktekan sob, sobat pasti udah sering mendengar link nudging atau gampangannya yaitu sebuah link bila tersentuh kursor maka link tersebut akan bergeser kesamping kanan, bisa juga hover link yang bergerak.




Yowes, agar lebih jelasnya silahkan lihat demonya dibawah ini:

DEMO LINK NUDGING: Coba arahkan kursor ke arah link dibawah ini

• Tutorial Blog
• Blogger Trik
• Tips SEO
• jQuery
• Blogger Hack
• Blogger Widgets
• Alexa

Tertarik untuk membuatnya?? Berikut langkah-langkahnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

6. Sekarang simpanlah template sobat.

Penting:

Bila di blog sobat sudah ada file.js untuk kode:
http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js
Maka sobat tidak perlu lagi memasang file.js tersebut.


7. Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat seperti contoh dibawah ini:

<a class='linknudge' href='http://kode-blogger.blogspot.com/'>Kode Blogger</a>

8. Selesai!

Nah cara atau kode di atas adalah untuk link kostum, dengan menambahkan kode class 'linknudge'.
Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

Keterangan:

Untuk pemasangan kode sama seperti yang sudah saya jelaskan diatas.
Sekian dari saya, itulah Cara Membuat Link Nudging Dengan jQuery, Semoga bermanfaat.

Description: Cara Membuat Link Nudging Dengan jQuery
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Link Nudging Dengan jQuery - Rating: 4.5

Cara Membuat Floating Spoiler Menu Di Blog

Cara membuat floating menu dengan efek slide, blogwallking dapet trik yang menurut saya cukup menarik dan keren, selain bisa untuk mempercantik blog, menu floating ini juga bisa menghemat tempat di blog. Menariknya lagi untuk kode'nya tanpa menggunakan script.js hanya menggunakan kode CSS. Nah, pasti tidak membuat berat blog kan?? Penasaran??
Sobat bisa melihat demonya disini, (perhatikan menu kiri bawah), atau bisa melihat scrennshot'nya dibawah ini:

Screenshot

Cara membuatnya sangatlah mudah. Bila sobat tertarik, berikut langkah-langkah membuatnya.

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Add Gadget, dan pilih HTML/JavaScript
4. Lalu masukan kode berikut didalamnya

<style text-type="CSS">
#floatmenu{
position:fixed;
right:5px;
center:0px;
background-color:#000;
border-radius:10px;
-moz-border-radius:10px;
border:1px solid #FFF;
width:202px;
height:20px;
color:#FF0606;
transition:all .5s ease-in;-moz-transition:all .5s ease-in;-webkit-transition:all .5s ease-in;-o-transition:all .5s ease-in;z-index:3;overflow:hidden;padding:9px 15px 10px;}
#floatmenu h3{
margin:0;
padding:0;
text-align:center;
cursor:pointer;}
#floatmenu ul{
border-radius:10px;-moz-border-radius:10px;
border:2px solid #FFf;
background-color:#FF0606;
margin:15px 0;
padding:0 15px;}
#floatmenu li{list-style:none;margin:0 0 5px;padding:0;} #bmenu li a{
color:#000;
text-decoration:none;
font-size:14px;}
#floatmenu li a:hover{
color:#fff;}
#floatmenu:hover{
z-index:5;
height:175px;
</style>

<div id="floatmenu">
<h3>TITLE / JUDUL</h3>
<ul>
<li><a href="LINK URL">MENU-1</a></li>
<li><a href="LINK URL">MENU-2</a></li>
<li><a href="LINK URL">MENU-3</a></li>
<li><a href="LINK URL">MENU-4</a></li>
<li><a href="LINK URL">MENU-5</a></li>
</ul>
</div>

Keterangan:
Warna Merah pada kode diatas, itu untuk mengatur posisi menu floating.
Bila sobat ingin menaruhnya di bagian kanan atas dengan slide kebawah, ganti kode yang berwarna merah dengan kode berikut:

right:10px;
top: 5px;

Bila ingin berada di bagian kiri bawah, dengan slide kearah atas, ganti dengan kode berikut:

left:10px;
bottom: 5px;

Warna Biru, itu untuk judul menu floating.
Warna Hijau itu adalah link url yang ingin sobat pasang, dan juga untuk nama menu gantilah sesuai dengan judul dari link url tersebut.
Selebihnya bisa sobat edit-edit sendiri sesuai keinginan sobat.

5. Bila sudah, jangan lupa klik Simpan / Save.

Begitulah kiranya Cara Membuat Floating Spoiler Menu Di Blog, semoga bermanfaat.
Sumber: full-tricks.blogspot.com

Article Information:
Description: Cara Membuat Floating Spoiler Menu Di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Floating Spoiler Menu Di Blog - Rating: 4.5

Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog

Cara Membuat Artikel Terkait (Related Post) di Sidebar Blog, back to blogspot tips and trick, setelah beberapa hari kemarin google melakuan update pagerank dan beberapa sistem search engin'nya, kalai ini saya akan kembali mengulas tentang beberapa trik blog yang sempat tertunda. hoho... kali ini yang akan saya bahas yaitu bagaimana cara membuat related post/artikel terkait di sidebar blog. kebanyakan artikel terkait/related post itu biasanya ada dibagian bawah posting. Itu yang sering saya jumpai di beberapa web/blog. Tapi ada banyak juga yang memakai cara ini yaitu memasang related post/artikel terkait lainnya di sidebar.
Untuk demonya sobat bisa langsung melihatnya diblog saya ini, atau pada gambar dibawah ini:

Artikel Terkait Lainnya

Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

6. Kemudian cari lagi kode berikut:

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>

7. Gantilah kode diatas dengan kode berikut:

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Catatan:
Perhatikan kode max-results=10, angka 10, itu merupakan jumlah artikel terkait yang akan ditampilkan di sidebar. Sobat bisa menggantinya sesuai keinginan.


8. Simpan Template, dan lanjut ke langkah berikut ini

9. Next, masuk ke Page Element > Add a Gadget > HTML/JavaScript > lalu copy paste kode dibawah ini kedalam konten HTML/JavaScript.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

10. Simpan dan lihatlah hasilnya.


Tambahan:
Dan biasanya untuk artikel terkait di sidebar ini hanya muncul pada halaman posting selanjutnya/tidak nampak di home pagenya, dan sobat bisa melihat caranya membuatnya di:
Cara Menampilkan dan Menyembunyikan Sidebar atau Widget di Halaman Tertentu

Kelihatan rumit dan panjang, tapi begitulah kiranya Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog. Dan bila sobat menginginkan tampilan related post/Artikel terkait lainnya, seperti punya o-om.com, sobat bisa tanyakan langsung disini, dengan berkomentar.
Semoga bermanfaat.

Article Information:
Description: Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Artikel Terkait (Related Post) Di Sidebar Blog - Rating: 4.5

Cara membuat Kwick Menu Navigasi Di Blog

Kwick Menu Navigasi Blogger dengan jQuery, kiranya itulah yang akan saya bahas kali ini. Setelah kemarin saya bahas juga untuk cara membuat Jquery Tab View Scroll Show Hide Widget, kita lanjut lagi, dan masih seputar JQuery. Ini juga merupakan reques dari beberapa sobat blogger, yang meminta untuk membuatkan tutorialnya. Ok, bila masih penasaran sobat bisa melihatnya pada menu navigasi diblog saya ini, ataupun bisa melihat pada gambar/sreenshot dibawah ini.

demo/screenshot

yang pasti membuat tampilan blog makin keren sob, karena dengan jQuery Sliding Navigation Menu. untuk melihat demonya, sobat bisa melihat langsung DISINI.
Berikut langkah-langkah membuatnya:

1. Login ke akun blogger sobat
2. Masuk ke Rancangan/Design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

.kwicks{height:50px;list-style:none;margin:0;padding:0;position:relative;width:840px;z-index:2
}
.kwicks li{cursor:pointer;display:block;float:left;height:50px;overflow:hidden;padding:0;width:120px;z-index:2}
.kwicks li a{background-image:url(http://4.bp.blogspot.com/-e1c5hdvd0MQ/TbgSHi-7EEI/AAAAAAAAAzs/Y9aTBHEgh84/s1600/menu%2Bjquery%2Bpelajaran%2Bblog.jpg
);background-repeat:no-repeat;cursor:pointer;display:block;height:50px;outline:none;text-indent:-9999px;z-index:2}
#kwick1 a:hover{background-position:0 -50px!important}
#kwick2 a{background-position:-190px 0}
#kwick2 a:hover{background-position:-190px -50px!important}
#kwick3 a{background-position:-380px 0}
#kwick3 a:hover{background-position:-380px -50px!important}
#kwick4 a{background-position:-570px 0}
#kwick4 a:hover{background-position:-570px -50px!important}
#kwick5 a{background-position:-760px 0}
#kwick5 a:hover{background-position:-760px -50px!important}
#kwick6 a{background-position:-950px 0}
#kwick6 a:hover{background-position:-950px -50px!important}
.kwicks li ul a{float:left;width:12em}
.kwicks ul ul{top:auto}
.kwicks li ul ul{left:12em;margin:0 0 0 10px}
.kwicks li:hover ul,#nav li li:hover ul,#nav li li li:hover ul,#nav li li li li:hover ul{display:block}

6. Kemudian cari kode </head> dan letakkan kode jQuery berikut tepat diatasnya:

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.kwicks-1.5.1.pack.js' type='text/javascript'/>
<script src='http://k-blogger.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>

Tambahin juga kode script berikut dibawahnya:

<script type='text/javascript'>
$().ready(function() {
$(&#39;.kwicks&#39;).kwicks({
max : 205,
spacing : 5
});
});
</script>

7. Simpan template.

Nah untuk file.js bila sudah ada yang menggunakan jquery-1.3.2.min.js, untuk file.js ini tidak perlu dipasang lagi.

8. Masih lanjut sob, masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Untuk cara berikutnya, rada gampang-gampang susah, bila ditemplate sobat sudah ada halaman untuk widget ditas halaman posting, sobat tinggal menambahkan kode berikut:

<div class='kwickswrap'>
<ul class='kwicks'>
<li id='kwick1'><a href='http://kode-blogger.blogspot.com/' title='halaman utama'>Home</a></li>
<li id='kwick2'><a href='#' id='hide_top-klik'>Portfolio</a></li>
<li id='kwick3'><a href='http://www.blogger.com/profile/08113139411481282535' title='about'>About</a></li>
<li id='kwick4'><a href='http://kode-blogger.blogspot.com/search?max-results=200'>Portfolio</a></li>
<li id='kwick5'><a href='http://kontactr.com/user/viyan%20pradita' title='contact us'>Contact</a></li>
<li id='kwick6'><a href='http://code.google.com/p/k-blogger/' title='recomended links'>Resource</a></li>
</ul>
</div>

9. Simpan/Save. Sipppp, sampai disini sobat sudah bisa membuat kwick menu navigasi blogger dengan jQuery.


Catatan:
Untuk gambar menu kwick'nya saya dapat dari pelajaran-blog.blogspot.com, disana juga ada tutorialnya, tapi sedikit berbeda dengan cara saya. Untuk Kode CSS silahkan sesuaikan sendiri dengan blog sobat.
Nah, cara diatas merupakan cara yang saya terapkan pada blog saya ini. Bila sobat mendapat kesulitan, bisa sobat bertanya lewat komentar dibawah.

Article Information:
Description: Cara membuat Kwick Menu Navigasi Di Blog
Reviewer: Viyan Pradita - Itemreviewed: Cara membuat Kwick Menu Navigasi Di Blog - Rating: 4.5

Jquery Tab View Scroll Show Hide Widget

Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, back to tutorial blog, maaf neh sudah dua hari tidak mengUpdate blog, lagi sok sibuk di offline soalnya. Dan kebetulan juga ada sobat blogger yang request untuk membuatkan tabview ini, tp saya lupa siapa namanya. jadi pada kesempatan kali ini saya akan membahas lagi tentang cara membuat menu tab view, yang sebelumnya sudah saya share juga untuk Membuat Tab View/Widget Multi halaman Di blog, pada cara yang kedua ini pastinya akan lebih bagus, menarik dankeren tentunya, karena ditambah dengan sentuhan JQuery didalamnya. Sebagai contoh anda bisa melihatnya di sidebar sebelah kiri blog saya ini.
Dan bila belum jelas juga anda bia melihatnya pada screenshot dibawah ini:

Demo/Sceenshot

Gimana masbro, keren kan tab view widgetnya?? selain itu tabview ini juga bisa membuat blog kita terkesan rapih. Yowes, ayo mulai saja cara membuatnya.

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin>

#slick_area{background-color:#fff;padding:8px;margin:10px 0;line-height:18px}
#slick_area a{color:#000;text-decoration:none}
.slick_area a:hover{color:#fff}
ul.slick{margin:2px 5px 5px 5px;padding:0px}
ul.slick li{list-style:none;display:inline;background-color:transparent;padding:7px 18px;text-decoration:none;font-size:10px;text-color:#dedede;font-weight:bold;text-transform:uppercase;cursor:pointer;border:1px solid #585858}
ul.slick li:hover{border:1px dotted #f00}
ul.slick li.active{background-color:transparent;border:1px solid #585858;color:#dedede}
.content-slick{background-color:transparent;border:1px solid #585858;color:#dedede;min-height:0;padding:5px 5px 5px;text-align:left}
.content-slick ul{margin:10px;padding:0}
.content-slick ul li{list-style:none;border-bottom:0px solid #585858;padding:5px}
.content-slick ul li:last-child{border-bottom:none}
.content-slick ul li:hover,.content-slick ul li a:hover{display:block;background-color:transparent}
.content-slick ul li a{text-decoration:none;color:black;display:block}

6. Setelah itu,carilah kode </head> setelah ketemu letakkan kode javascript dan jQuery berikut tepat diatasnya:

<script language='javascript' src='http://k-blogger.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&#39;#tabdua, #tabtiga&#39;).hide();
$(&quot;ul.slick li&quot;).click(function () {
$(&quot;.active&quot;).removeClass(&quot;active&quot;);
$(this).addClass(&quot;active&quot;);
$(&quot;.content-slick&quot;).slideUp();
var content_show = $(this).attr(&quot;title&quot;);
$(&quot;#&quot;+content_show).slideDown();
});
});
</script>

8. Simpan tempalate, dan masih lanjut neh sob... masuk ke Tata Letak/Rancangan, klik Add New Widget/Tambah Widget, lalu pilih HTML/Javascript. Kemudian letakan kode dibawah ini:

<ul class="slick">
<li title="tabsatu" class="slick active">Tab Satu Gan</li>
<li title="tabdua" class="slick active">Tab Dua Gan</li>
<li title="tabtiga" class="slick">Tab Tiga Gan</li>
</ul>

<div id="tabsatu" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Satu
</div>

<div id="tabdua" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Dua
</div>

<div id="tabtiga" class="content-slick">
Taruhlah kode HTML/Javascript anda di Tab Tiga
</div>

9. Sampai disini anda sudah bisa membuat jquery tab view scroll show hide widget. dan jangan lupa simpan.


Keterangan:
Kode bercetak tebal gantilah/isilah dengan widget yang sobat inginkan.
dan untuk kode CSS, silahkan diedit dan sesuaikan dengan template sobat. dan bila tampilannya mau mirip sepeti blog saya, jgn lupa tinggalkan komentar, sebisa mungkin akan saya bantu.
Dan lagi, bila ditemplate anda sudah ada jquery-1.3.2.min.js?? berarti untuk file.js'nya tidak perlu ditambahkan lagi.

Begitulah kiranya Cara Membuat Tab View dengan Efek Animasi Gulung Jquery, selamat mencoba, semoga bermanfaat.

Article Information:
Description: Jquery Tab View Scroll Show Hide Widget
Reviewer: Viyan Pradita - Itemreviewed: Jquery Tab View Scroll Show Hide Widget - Rating: 4.5

Kompres CSS Untuk Mempercepat Loading Blog

Kompres Code CSS Untuk Mempercepat Loading Blog, kiranya itulah yang akan saya bahas malam ini, karena para pengunjung sering komplain dan paling males jika menemui blog yang loadingnya minta ampun beratnya, dimana efek buruknya yaitu, jangan berharap para pengunjung akan kembali lagi ke blog kita. contohnya gak jauh-jauh, blog saya ini juga tergolong berat, tp karana kebantu oleh cache jadi mending'lah gak berat-berat amat, tapi menurut saya masih perlu di kompres lagi. hihihi...
Setelah kemarin saya membahas tentang Cara Mempercepat Loading Blog With CSS External , dimana pada cara tersebut, kode CSS kita buat file.css dan mengupload ke webhosting, Nah kali ini ada cara yang lebih mudah dan lebih praktis, yaitu kita mengkompres kode CSS dengan aplikasi online. Cara yang sudah saya praktekan sebelumnya yaitu mengkompres CSS dengan CSS Compressor.

Penting!!
Untuk jaga-jaga selalu backUp dulu template sobat, agar bila nanti sobat mengalami masalah, bisa sobat upload kembali backup templatenya. Ok....
Berikut langkah-langkahnya:

• Seperti biasa, Login ke akun blogger sobat
• Masuk Rancangan/Layout
• Pilih Edit HTML
• Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
• Perhatikan Langkah-langkah berikut ini
  

1. Kompres kode CSS pada umumnya (standart)
Untuk pada cara pertama ini adalah cara yang umumnya sering kita/para blogger lakukan.

• Untuk melihat/membandingkan hasilnya, terlebih dahulu, untuk mengeceknya silahkan cek di Speed Test
• Kemudian blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
• Bila sobat kurang jelas dengan penjelasan diatas perhatikan ini:

<b:skin><![CDATA[
disini mulainya | . . . . . .

. . . . .KODE-KODE CSS. . . . .

sampai disini |
]]></b:skin>

• Buka situs CSS compressor disini
• Setting pengaturannya seperti berikut:

Compression mode = pilih 'Normal'
Comment handling = pilih 'Don't strip any comments'

Pastekan kode CSS yang telah di potong tadi pada kotak kosong
Kemudian klik Compress-It
Selanjutnya copy hasil kompresan tadi dan tempatkan pada template kamu diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

• Terakhir klik Simpan

Tugas sobat selanjutnya yaitu membandingkan berat blog sebelum dan setelah dikompres.


2. Cara Kompress Kode CSS Kedua (ini jurus dari mbah saya) dan juga Kompres pada Kode HTML

Triknya juga gak jauh-jauh dari cara yang pertama, cuma cara kedua ini lebih galak dari yang sebelumnya, (kata simbah gitu) Ckckckk
Karena memang caranya yang agak rumit, apalagi melihat kode CSS yang sudah kita kompres, pasti gak ada koma, titik dan spasinya. Pastinya membuat bingung kalo kita mau edit kodenya.
Tapi bila sobat berminat untuk mengkompres kode CSS biar makin maknyus, silahkan ikuti langkah-langkahnya berikut ini:

Caranya perhatikan kembali langkah pada cara yang pertama, yaitu:

• Blok dan POTONG semua kode CSS dari setelah kode <b:skin><![CDATA[ sampai pada kode sebelum ]]></b:skin>
• Buka situs CSS compressor disini
• Settingnganya rubah seperti berikut:

Compression mode = pilih 'Super Compact'
Comment handling = pilih 'Strip all any comments'

• Kemudian tempatkan hasil kompresannya diantara kode

<b:skin><![CDATA[
Pastekan disini kode CSS yang telah di kompres tadi
]]></b:skin>

• kemudian potong kembali pada kode diantara kode

<body>
Bla. . . . .bla. . . . .bla. . . . . Bla . . . . .
</body>

• Selanjutnya buka halaman berikut dan kompres kode tersebut disini HTML Optimizer
• Copy dan pastekan kode hasil kompresan tadi diantara kode <body> dan </body>

• Terakhir klik Simpan

Untuk cara kedua harap lebih berhati-hati dalam mempraktekannya, karena kode CSS/HTML setelah dikompres benar-benar akan membuat kita pusing membacanya, hohoho karena memang tanpa spasi.
Oke, tugas sobat selanjutnya yaitu membandingkan hasil dari sebelum dan sesudah dikompres.
Untuk cara diatas sudah saya terapkan pada blog saya ini. Dan Alhamdulillah tidak mengalami masalah alias lancar!! Dan akhirnya begitulah kiranya Cara Kompres CSS Untuk Mempercepat Loading Blog yang saya lakukan.
Selamat mencoba Sobat... Semoga bermanfaat.

Article Information:
Description: Kompres CSS Untuk Mempercepat Loading Blog
Reviewer: Viyan Pradita - Itemreviewed: Kompres CSS Untuk Mempercepat Loading Blog - Rating: 4.5

zFPmenu, Custom Menu and Navigation/Share Widget

zFPmenu, Custom Menu and Navigation/Share Widget, Baru pernah neh membuat postingan bingung memberi judulnya apa. hehe... rada jenuh juga dari kemarin saya disibukan dengan SEO, untuk Kontes SEO, jadi lupa sama yang lain deh!!
Nah pada kesempatan siang ini, saya akan membahas tentang custum widget keren yaitu zFPmenu – Fixed-Position Custom Menu and Navigation/Share Widget, adalah sebuah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan.
Dengan widget ini sobat bisa menentukan sendiri menu-menunya. Dan lagi di dalamnya juga sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan). gimana sob... keren kan ??

Dengan satu widget ini sobat sudah seperti membuat 2macam widget, yaitu:
a. navigasi scroll to top/bottom of page
b. Share ke social bookmark

Preview/Demo

Bila Sobat tertarik, silahkan langsung saja ikuti langkah-langkah membuatnya.

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: </body>

7. Bila sudah ketemu, copy paste-kan kode dibawah ini tepat diatas kode </body>

<!-- zFPmenu START -->
<div id="zfpm_div" style="display:none;">
<div id="zfpm_upperBox">
KODE BLOGGER
</div>
<ul id="zfpm_ul">
<!-- Your menus start -->
<li><a href="">YOUR MENU-1</a></li>
<li class="dir"><a href="">YOUR MENU 2 (containing submenu)</a>
<ul>
<li class="dir"><a href="">YOUR SUBMENU 2.1 (containing sub-submenu)</a>
<ul>
<li><a href="">YOUR SUB-SUBMENU 2.1.1</a></li>
<li><a href="">YOUR SUB-SUBMENU 2.1.2</a></li>
</ul>
</li>
<li><a href="">YOUR SUBMENU 2.2</a></li>
<li><a href="">YOUR SUBMENU 2.3</a></li>
</ul>
</li>
<li><a href="">YOUR MENU 3</a></li>
<!-- Your menus end -->
</ul></div>
<script type="text/javascript">
var zfpm_colorTheme = 'light'
var zfpm_shareBox = 'no';
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://zfpmenu.googlecode.com/svn/trunk/js/zfpmenu.js"></script>
<!-- zFPmenu END -->

8. Sebelum menyimpan template sobat, harap gantilah untuk Submenu sesuai keinginan sobat.


Setting/Variable
Perhatikanlah kode berikut:

var zfpm_colorTheme = 'light'

pilihan warna yaitu 'ligh' or 'dark'
Ganti dan sesuaikan dengan template sobat.

var zfpm_shareBox = 'no'

Kode tersebut untuk memunculkan share to Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget).
Bisa sobat setting sendiri, mau dimunculkan atau tidak.
Bila mau memunculkannya cukup mengganti kode 'no' dengan 'yes'

Setting Preview
Color theme : light or dark
Show share box: yes or no


Penting !!
Script ini tidak desain untuk Internet Explorer 6 browser.

Sebaliknya, jika Anda menambahkan variabel zfpm_ieUpgradeMessage var = 'yes' untuk script, ia akan menampilkan pesan pemberitahuan upgrade di bagian atas halaman (lihat screenshot di sini) untuk IE 6 pengguna.

Sumber reverensi : http://inimu.com
Bila sobat masih menemui beberapa kesulitan, Sobat bisa bertanya langsung dengan berkomentar di tread ini. Terimakasih.

Article Information:
Description: zFPmenu, Custom Menu and Navigation/Share Widget
Reviewer: Viyan Pradita - Itemreviewed: zFPmenu, Custom Menu and Navigation/Share Widget - Rating: 4.5

Membuat Vertical Sliding Info Panel Dengan JQuery

Membuat Vertical Sliding Info Panel Dengan JQuery, itulah yang akan saya share pada kesempatan kali ini. Setelah kemarin blogwalking kesana-kesini, ada beberapa sobat blogger yang menanyakan bagaimana sih caranya membuat menu Info Panel, seperti menu dipojok kiri atas blog sobat?? Selagi saya sempat dan bisa, pasti saya buatkan tutorialnya, ini juga saya cari sana-sini koq. cuman untuk CSS dan tambahan menu, saya modifikasi sendiri. dan pastinya untuk kode CSS-nya lebih simple.
Untuk lebih jelasnya silahkan sobat lihat gambar/demonya dibawah ini.

Sceenshot/Demo Vertical Sliding Info Panel Dengan JQuery

Kiranya seperti gambar diataslah yang kali ini akan saya share.
Berikut langkah-langkah membuatnya:

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Tekan Ctrl+F (untuk mempermudah pencarian) dan cari kode: ]]></b:skin>

7. Taruhlah kode CSS berikut tepat diatas kode: ]]></b:skin>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #666;width:320px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:10px 30px 30px 100px}
.panel p{color:#fff;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK2ZBWeeXKQsflfXTzYwZqa2RCvGIsg_wTNwL6MlBumIHDGEUn4ZlpYGErB4mb3pM6ViIevETl-VNR1TbmKP5ehzS8TsxztRctdzaOeje63BEPW0M2_j0rd9hYCKn0koQwGU1rfN0I0mE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 35px 10px 10px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK2ZBWeeXKQsflfXTzYwZqa2RCvGIsg_wTNwL6MlBumIHDGEUn4ZlpYGErB4mb3pM6ViIevETl-VNR1TbmKP5ehzS8TsxztRctdzaOeje63BEPW0M2_j0rd9hYCKn0koQwGU1rfN0I0mE/s320/plus.png) 85% 55% no-repeat;border:1px solid #fff;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:10px 40px 10px 10px}
a.active.trigger{background:#222 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwb_0HdGxOdofKO1hs3sYFCL2TSF3F2t1fGRS9vNPSuhcRG6a8_0B__8HoMMsMESnc6Be1d_6btppGoFlRFsfIpN8wtyP2yY506rRpEyI4mahe_c7P-ZJR9ocJQPuB-d8osAtrSbFghQ/s320/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
a:focus{outline:none}
.panel img{border:1px solid #666;float:right;margin:3px 0px 6px 5px;padding:2px}
.panel h3{border-bottom:1px solid #666;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#fff;font-size:13px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

8. Kalau sudah, cari kembali kode: </head> dan taruh kode JavaScript berikut, tepat diatasnya

<script src='http://k-blogger.googlecode.com/files/jquery-1.3.2.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$(&quot;.trigger&quot;).click(function(){
$(&quot;.panel&quot;).toggle(&quot;fast&quot;);
$(this).toggleClass(&quot;active&quot;);
return false;
});
});
</script>

9. Simpan/Save Template.

Langkah terkahir, agar menu Info panel-nya bisa nongol di blog sobat,
Masuk ke:
> Tata Letak/Rancangan
> ADD New Widget
> Tambah Gadget
> Pilih HTML?Javascript

Kemudian Masukan kode dibawah ini:

<div class='panel'>
<center><font size="1"><a href="http://kode-blogger.blogspot.com/2011/05/membuat-vertical-sliding-info-panel.html"target=_blank"><div style="color: #444444;">
<span >make own</span></div></a></font></center>
<h3>Selamat Datang Di Kode Blogger [Dofollow]</h3>
<p style="text-align:justify">Salam Blogger | Senang rasanya sobat blogger sudah bersedia singgah disini. semoga saja kalian bisa mendapatkan apa yang kalian butuhkan diblog saya ini. Terima kasih Telah Berkunjung Di Blog saya, dan apabila berkenan silahkan berkomentar dan follow blog saya, dengan harapan kita sebagai sesama blogger bisa menjalin silaturohmi antar sesama blogger.
<br/>
<a title="Viyan Pradita" target="_blank" href="http://www.blogger.com/profile/08113139411481282535">Selengkapnya tentang saya</a></p>
<h3>Sekilas tentang penulis</h3>
<img width="73px" height="73px" alt="Viyan Pradita" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeStBu9mWja7VolwU8-74eaOiSXaOL0RzVeKghViqa40Ec87XU036ZxYeFnK90fALxPy4MMdB4-1RRbxFsVxNnHSQ0Uxgt2apB_Ak_H9Tg_5DfDfmMfTop3Mn3cq7d-yTvFcvrM9o2cIQ/s320/pepenk.jpg" />
<p>Nama Saya Yus Aviyan
<br/>
Saya seorang mahasiswa disalah satu perguruan tinggi di Yogyakarta</p>
<div class='columns'>
<div class='colleft'>
<h3>Social Stuff</h3>
<a href="feeds/posts/default"><img alt="RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoOsflWn2eHpr_tJpkogBS2kiMdB38Ync5C6mB6dAeUeC_6Rek8I4LtxoqspL8jDqEdm5-px_N9hmngxGffUjOD1VNtZVVARuClPwLv9XwOsm4ahoupDWB-g6Z4YQGwESe573o4i1U4eg/s320/r.png" /></a>
<a href="http://www.mybloglog.com/buzz/members/08113139411481282535/"><img alt="mybloglog" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAjIDrBAHqsNtJRbDGYuU88aK3X5h3OkuUReqU8nUz7bMM61Gjc14lxC5lXHjcnZj8khyW7fwJ7gNL1Pijbb_iLsBNGMt3ECSAqpHaLWoT9Ld95EzsGx8s45x9JFusMnvjCZTiIEqVHhg/s320/l.png" /></a>
<a href="https://twitter.com/#!/viyan_padita"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0k7YZKjzF5rZToQQOPzJ6QGPb_tBdVolmA4ZpTSKkPvcMDIc9my1uImxcafiFX-lOKPjNUtjSfjC9LR2-GhJ4lR02Y22KaAgUj7Iuc4cq1jAIHR-dqywyRvGgXMFlpHmQ5FQ3OMxgkU4/s320/t.png" /></a>
<a href="http://www.facebook.com/fiyant"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyPjWLgykwb_3JqKflVBXYdFwm4_KH1IEpD-y2CLiEZR-r1Lmd92pnd9wc64qTH847falZd2Y5IDf5uiC8llodo1nFGK9QTrRq-PdYFm1QtWxkuMDXWSqC2RFgCBna7xHZCgylWkuxV5A/s320/f.png" /></a>
<a href="http://kode-blogger.blogspot.com"><img alt="HOME" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs5S64jcOy0q9GI91szVbxK_1HhHEIqLizlfTIEE3YzLwef5IZBLJPxj6APqa3-oUvm0eNT4U5Q0EW3rN3AAshDY7IUhOWPspqvDScxoOkjGG1YX4hD7e7aTc-WUbHuJ-ZJ33jGL6NlR0/s320/b.png" /></a>
</div>
</div>
</div>
<a class='trigger' href='#'>Info</a>

Seppp sampai disini selesai sob, Simpan dan lihatlah hasinya.
Eittt... tunggu dulu, sebelum menyimpannya harap rubahlah untuk kode widget ditas, sebab nanti prifile sayalah yang keluar diblog sobat. hehehe :p


Tambahan:
BIla dalam pemasangan Info panel di blog sobat bermasalah? ini bisa dikarenakan kode.js di template sobat double, dan mungkin diblog sobat sudah tepasang kode jquery-1.3.2.js atau semacamnya. Untuk itu hapuslah salah satu kode.js tersebut.
jadi bila ditemplate sobat sudah terdapat jquery-1.3.2.js, maka sobat tidak perlu lagi menambahkan kode.js tersebut.
Ok... Selamat mencoba, dan semoga bermanfaat.

Cara Mempercepat Loading Blog With CSS External

Mengingat kecepatan akses blog sangatlah penting dan berpengaruh besar untuk sebuah website/blog, saya rasa trik ini sangatlah penting untuk dicoba. tidak jauh-jauh, sebagai contohnya blog saya ini, yang saya rasakan makin lama makin berat saja, hehehe :D dan kebanyakan blogger, bila koneksi lagi down pasti rada maleez tuh untuk mem-visite blog yang lumayan berat. hihihi :p
Karena itulah saya berusaha memaksimalkan, semaksimal mungkin mengompres dan mengurangi berat blog saya ini. kali ini saya akan membahas Cara Agar Loading Blog Lebih Cepat Dengan CSS External , Maksudnya adalah bagaimana kita menyimpan CSS (Cascading Style Sheet) ke tempat hosting agar blog sedikit ringan karena file CSS terpisah dengan file XML-nya.

sreenshot

Kecepatan loading blog, selain dipengaruhi oleh kecepatan koneksi, juga dipengaruhi oleh berat/ringannya blog itu sendiri. ada banyak cara untuk mengurangi berat blog yaitu dengan mengurangi jumlah widget/pernak-pernik blog yang tidak begitu penting, dengan cara mengkompres kode baik CSS maupun HTML, ataupun juga bisa dengan membuat CSS External, yang diupload/disimpan di webhosting. Dan yang akan saya bahas kali ini adalah membuat CSS External.

Sebelumnya cobalah sobat cek berat loading blog sobat Disini

1. Seperti biasa, Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget" ataupun tidak, tidak masalah.

Perhatikan kode CSS dibawah ini, kode tersebut terletak diantara kode
<b:skin><![CDATA[/* sampai dengan sebelum kode ]]></b:skin>

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Minima
Date:     26 Feb 2004
Updated by: Blogger Team
----------------------------------------------- */
#navbar-iframe{
display:none !important}
body{
background:#f5fffa;
width:980px;
color:#333;
font-size:12px;
font-family:Arial,Tahoma,Verdana;
margin:0 auto 0;
padding:0}
Potong atau Cut semua kode CSS-nya mulai dari sini sampai dengan diatas atau sebelum kode:
]]></b:skin>

6. Simpan di Notepad dengan ekstensi.css caranya: klik File, pilih Save As, beri nama file tersebut misal: Blogku.css lalu Save.
7. nah sampai disini kita sudah mempunyai file.css. Selanjutnya kita tinggal mengUpload/menyimpannya di WebHosting, misal yang saya pakai yaitu Google Site.
Bila belum mempunyai webhosting sendiri, silahkan lihat disini cara membuatnya.
8. Jika sudah meng-Uploadnya, misal:

http://sites.google.com/site/kodeblogger/JavaScript/blogku.css

Penulisan untuk scriptnya menjadi seperti dibawah ini:

<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>

Letakan kode script diatas di antara kode: ]]></b:skin> dan </head> , lihat contohnya seperti ini :

]]></b:skin>
<link href='http://sites.google.com/site/kodeblogger/JavaScript/blogku.css' rel='StyleSheet' type='text/css'/>
</head>

9. Sebelum menyimpannya, harap di Preview terlebih dahulu, bila tampilan blog tetap pada aslinya, berarti sobat berhasil mempraktekannya. dan terakhir Save Template Sobat. Sippppp Selesaiiiii.


Catatan:
Setelah mengetahui cara diatas, pasti kita akan direpotkan saat kita akan menambah kode CSS pada template blog kita, yah... mau tidak mau kita harus mengedit dan meng-Upload kembali ke webhosting sobat.
Saya rasa cukup sekian dari saya, bila sobat blogger ada yang mengalammi kesulitan, silahkan berkomentarlah disini, dan semoga saja, saya bisa membantu.