Beberapa Fungsi Kode b:if cond= Untuk Pengaturan Tampilan Blog

Salah satu ciri template gaya Magazine Style adalah adanya widget yang muncul lalu menghilang atau awalnya menghilang lalu muncul pada suatu halaman atau postingan blog. Kode b:if cond= inilah yang berfungsi untuk melakukan hal tersebut, salah satunya adalah untuk kotak komentar atau fungsi readmore. Jika sobat perhatikan, template ini jika dalam keadaan homepage akan memiliki tiga kolom, tapi jika pada content hanya akan terlihat 2 kolom.

Berikut ini adalah jenis dan fungsi kode untuk mengatur tampilan content blog dari muncul lalu menghilang dan menghilang kemudian muncul. Yang bisa sobat terapkan untuk pengaturan pada blog sobat.

1. Hanya pada Halaman Utama Blog

<b:if cond='data:blog.url == data:blog.homepageUrl'> . . . </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada halaman utama blog saja alias akan menghilang ketika sobat mengklik Label Post atau membaca postingan secara keseluruhan.
Contoh penggunaan kode ini bisa sobat lihat pada widget archive pada blog ini. Jika sobat membaca artikel secara keseluruhan atau mengklik kategori post, kolom archive dan yang dibawahnya akan menghilang.


2. Kategori Post dan Single Post

<b:if cond='data:blog.url == data:blog.homepageUrl'> . . . </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada kategori post dan single post (membaca postingan secara keseluruhan).


3. Halaman Utama Blog

<b:if cond='data:blog.pageType != &quot;item&quot;'> . . . </b:if>

Kode ini berfungsi untuk menampilkan widget blog pada main post atau hanya pada halaman utama saja, jika sobat mengklik sebuah postingan (membaca keseluruhan) maka widget ini akan hilang.
Contoh penggunaan kode ini adalah readmore. Dia akan hilang ketika kita masuk pada single post (artikel).


4. Single Post atau halaman isi artikel

<b:if cond='data:blog.pageType == &quot;item&quot;'> . . . </b:if>

Kode ini berfungsi untuk menampilkan widget blog hanya pada single post saja atau ketika sobat membaca postingan secara keseluruhan dan tidak akan muncul pada main post atau kategori post.
Contoh penggunaan kode ini adalah kolom komentar, yang hanya akan muncul pada single post dan tidak akan muncul pada home page atau bagian lain.


5. Halaman Utama Blog

<b:if cond='data:blog.pageType == &quot;index&quot;'> . . . </b:if>

Fungsi kode ini sama dengan fungsi kode pada nomer 3.


6. Menampilkan Widget Blog Pada Postingan Tertentu Saja

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

Kode ini berfungsi untuk menampilkan suatu widget blog hanya pada suatu postingan tertentu atau pada artikel tertentu saja.


7. Menyembunyikan Widget Blog Pada Postingan Tertentu Saja

<b:if cond='data:blog.url != &quot;URL Post Tertentu&quot;'> . . . </b:if>

Kode ini merupakan kebalikan dari kode no 6 dimana widget blog akan menghilang dari suatu postingan tertentu dan baru muncul pada postingan yang lain.

Mungkin itu saja yang saya tahu tentang cara membuat widget blog dari muncul menjadi menghilang atau menghilang kemudian muncul. Tutorial ini saya dapatkan dari salah satu sobat blogger saya. Awalnya saya juga bingung mau buat bagaimana dengan widget-widget tersebut, beruntung karena saya memiliki sahabat yang sangat jeli dan teliti dengan template dan kode html. Semoga artikel singkat ini bermanfaat buat sobat blogger.

sumber : http://www.wakrizki.net/2011/06/beberapa-fungsi-kode-bif-cond-untuk.html#ixzz1OBGC2Bd7

FacePad - Download Album Foto Facebook Sekaligus

FacePAD, better known as the Facebook Photo Album Downloader will allow you to download your friends’ facebook albums, events albums, and group Albums, en masse, with the click of a button. Di atas adalah deskripsi singkat tentang plugin FacePad yang sederhananya adalah FacePad adalah sebuah plugin yang dapat mendownload seluruh isi foto dalam album facebook dengan satu langkah mudah.

Dalam keadaan normal Anda direpotkan ketika ingin mendownload foto-foto facebook sebanyak 1 album atau lebih karena harus mengikuti beberapa langkah seperti ini:

• Membuka Album Foto Facebook yang ingin di download
• Membuka Foto didalam album satu per satu
• Mendownloadnya ke komputer dan setiap kali mendownload Anda di suguhkan kepada lokasi folder tempat penyimpanan.

Dengan adanya Plugin FacePad ini maka langkah di atas bisa dihilangkan karena Anda cukup klik kanan pada link Album Facebook yang ingin di download dan mendownloadnya dengan FacePad setelah itu semua foto dalam 1 album tersebut bisa Anda download (Lihat gambar).

Plugin ini bisa Anda gunakan jika menggunakan browser Mozila Firefox dan untuk mendownloadnya silahkan kunjungi halaman ini:

 

http://www.softpedia.com/get/Internet/Internet-Applications-Addons/Mozilla-Extensions/FacePAD.shtml

Cara Meningkatkan Kecepatan Loading Blog Hingga 80%

 Setiap blogger dan webmaster pasti ingin mempunyai blog/website yang cepat ketika loading. Begitu juga dengan Ane yang selalu mencoba untuk memperbaiki kualitas blog termasuk dari sisi kecepatan loading. Tetapi hal ini dapat terhambat jika suatu blog memiliki total ukuran atau size yang besar yang didalamnya mengandung bermacam-macam komponen, baik dari segi template itu sendiri, gambar, banner, flash grafik ataupun widget yang dipasang dalam blog untuk mempercantik blog. Memang ukuran kecepatan loading suatu blog/website tidak hanya tergantung dari komponen-komponen diatas, tetapi juga dari kemampuan dan kecepatan akses internet yang kita gunakan.

Pengaruh di atas dapat membuat kecepatan blog menjadi berkurang atau menjadi lambat ketika orang lain mencoba untuk mengaksesnya. Dengan pengaruh negatif ini, tentunya blog kita akan ditinggalkan oleh blogger lain karena membutuhkan waktu yang lama untuk bisa masuk ke dalam blog, apalagi bagi pengguna internet yang memakai akses dial-up tentu sangat terasa pengaruhnya. Untuk itu Ane coba membuat beberapa cara untuk meringankan dan mempercepat loading blog. Sebagai berikut:

1. Test kecepatan loading blog
Hal pertama yang perlu dilakukan oleh teman-teman yaitu mengecek kecepatan loading blog dalam beberapa website penyedia tool tersebut. Kita bisa menggunakan jasa ini dengan mencarinya di search engine Google atau bisa dengan mengunjungi iwebtool speed test.

2. Menggunakan kompresor GZIP dan Ob_gzhandler
Setelah mengetahui kecepatan loading blog, langkah selanjutnya untuk menambah kecepatan blog yaitu dengan mengkompress HTML size dengan menggunakan kode GZIP dan ob_gzhandler. Cara ini bisa mengurangi ukuran blog hingga 80% dari ukuran sebenarnya ketika blog diakses, karena sistem kerjanya adalah dengan mengkompress data yang masuk ke server provider blog baru kemudian di arahkan ke browser. Teman-teman hanya perlu mengcopy kode dibawah ini ke dalam kode template:

<?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

Atau kode dibawah ini

<?php
ob_start("ob_gzhandler");
?>

Kemudian paste/letakkan kode tersebut di atas kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1

dipaling atas template blog dan di save.

3. Convert/kompress ukuran gambar
Gambar yang di upload dalam blog juga bisa mempengaruhi lama tidaknya loading suatu blog, karena gambar apalagi yang ukurannya besar akan memakan bandwith yang cukup besar, sehingga untuk menampilkannya dibutuhkan beberapa waktu. Untuk itu sebelum upload gambar ( atau jika sudah diupload juga tidak masalah) ke dalam blog, kita bisa mengkompress atau convert ukuran file tersebut ke ukuran yang lebih kecil. Teman-teman bisa menggunakan jasa image optimizer secara gratis untuk merubah ukuran file tanpa mengurangi kualitas gambar tersebut. Setelah mengupload gambar ke dalam situs ini, kita bisa memilih jenis kompresi dalam bentuk JPEG, GIF dan PNG. Setelah itu tool image optimizer ini akan menampilkan hasil gambar dari kualitas gambar 90% sampai kualitas gambar paling rendah yaitu 10%.

4. Gunakan CSS compressor
Untuk lebih memaksimalkannya kita juga bisa mengkompress kode CSS dalam template blog dengan cara manual atau dengan bantuan online tool. Cara ini bertujuan untuk merampingkan ukuran kode CSS dalam blog dengan menghilangkan kode yang tidak perlu dan memadatkannya (contohnya: menghilangkan jarak spasi yang tidak diperlukan dan menghapus komentar). Untuk melakukannya teman-teman dapat mengcopy kode CSS dalam template blog kemudian kunjungi situs CSS drive compressor. Ada 3 pilihan jenis kompresi yaitu:

• light
• normal
• super compact.

Sebaiknya pilih yang normal saja untuk hasil yang relevan. Sedangkan untuk komentar juga ada 3 pilihan:

• don’t strip any comment
• strip all comment
• strip comment at least (...) characters long (not counting line breaks within comment)

Teman-teman dapat memilih apakah komentar tidak perlu dihapus, dihapus semua atau dihapus sebagian (menghapus komentar yang memiliki panjang beberapa karakter sesuai keinginan masing-masing). Jika ingin menggunakan custom setting sobat juga bisa memilih sendiri jenis kompresi yang diinginkan dengan merubahnya ke “advanced mode”. Layanan ini dapat mengkompress ukuran CSS antara 10%-20%.

5. Javascript compressor
Jika blog masih terasa berat, maka langkah selanjutnya adalah dengan mengkompress kode widget (javascript) dalam blog. Caranya mirip dengan CSS compressor, yaitu dengan memadatkan kode javascript yang panjang sehingga lebih ramping tanpa mengurangi atau merubah fungsi widget tersebut. Untuk menggunakannya bisa mengunjungi situs JS minifier dan memilih 3 tingkatan kompresi yaitu, minimal, conservative dan aggressive. Ane sendiri bisa mengkompress 5%-10% untuk masing-masing widget yang ada dalam blog. Tapi kalau untuk kode iklan sebaiknya jangan dikompress karena nanti bisa-bisa menimbulkan masalah.

6. Software HTML Compressor
Untuk alternatif lain, sobat bisa menggunakan software freeware “absolute html compressor” untuk mengkompress kode HTML baik secara default setting atau custom setting tanpa memerlukan koneksi internet. Software ini memiliki kemampuan yang sama dengan online tool CSS compressor dan javascript compressor. HTML compressor dapat didownload secara gratis di alentum.com


Jadi, dengan cara ini mudah-mudahan kecepatan loading blog teman-teman bisa lebih dimaksimalkan lagi khususnya bagi ane pribadi. Sehingga blog menjadi ringan dan pengunjung/blogger lain bisa betah mengunjungi blog dan berpengaruh pada tingkat pageviews artikel dan juga meningkatnya trafik. Terima kasih

Tips Mengedit HTML Blogspot

Jika kita mengotak-atik atau mengedit HTML blog kadang2 akan mengalami kesulitan, apalagi bagi yang masih agak pemula. Entah itu gak bisa nemu kode yang mau diedit lah, gak bisa disimpan karena error lah, Ada pesen error yang gak jelas lah, dan lah-lah yang lain, ya to...??? Nha trik dan tips kali ini akan mencoba gimana cara untuk mengatasi atau setidaknya mengurangi masalah "lah-lah" yang kadang2 atau sering terjadi tersebut.

Berikut ini beberapa tips untuk edit HTML bogger:

1. Backup Template

Membackup template ini penting karena jika terjadi hal-hal yang tidak dinginkan, misalnya blog jadi rusak maka kita bisa membuatnya seperti sediakala (sebelum rusak) jika kita sebelumnya sudah membackup template. Cara membackup template ini mudah. Cukup klik pada link "Download Full Template" lalu simpan file template di komputer kita. Kalo terjadi kesalahan yang tidak bisa kita atasi, kita tinggal upload aja file template tersebut.

2. Memberi Tanda Centang pada Kotak "Expand Widget Template"

Ini yang kadang2 dilupakan para "editor". Kalau kotak "Expand Widget Templates" tidak dicentang maka kode2 yang dicari kemungkinan tidak ditemukan. Tapi kadang2 hal ini tidak perlu dilakukan tergantung dari petunjuk tutorialnya. Makanya perhatikan baik2 tutorialnya kalo mau Edit HTML blog.

3. Tips Mempermudah Pencarian

Untuk mempermudah pencarian kode yaitu dengan meng-copy dulu kode yang mau dicari kemudian tekan "Ctrl+f" lalu masukkan kode yang dicopy tadi kedalam kotak yg muncul. Kalo misalkan kode yang dicari tidak muncul maka cobalah mencari sebagian dari kode tersebut. Misal mau mencari kode jika tidak ketemu maka cb carilah sebagiannya atau seperti ini data:post.body kalau sudah ketemu maka klik tombol next untuk melihat apakah ada kode lain yang sama untuk memastikan kode yang dikehendaki. Tapi tips ini sepertinya sulit dilakakukan jika menggunakan browser "Chrome" paling mudah jika menggunakan "Mozilla Firefox".

4. Tips Menghadapi Error Yang Muncul

Jika saat menyimpan hasil editan kemudian muncul pesan error, misal seperti ini:
We were unable to save your template
Please correct the error below, and submit your template again.
Your template could not be parsed as it is not well-formed. Please make sure.....
Maka hal yang harus kita lakukan adalah berusaha memahami pesan error tersebut. Kemudian kita cek kembali tutorial yang kita baca apakah langkah-langkah yang sudah kita lakukan bener2 sesuai dengan tutorialnya. kalau tidak yakin maka kita bisa mengulangi lagi tutorialnya dari awal dengan mengklik tombol "Clear Edit" terlebih dahulu.

Mungkin untuk masalah mengahadapi berbagai pesan error ini akan kita bahas lebih lanjut diepisode yang lainnya yang lebih spesifik.

Yak mungkin itu aja dulu tips-tips dalam pembahasan kali ini. Kita jumpa lagi di tips-tips berkutnya.

Cara Pasang Komentar Facebook Di Blog Terbaru | Ada Feature Like & Reply

Selamat malam sobat blogger semua, kita jumpa lagi di blog kebanggaan warga Mojokerto ini (kayak penyiar radio aja ya, hehehe...). Lagi-lagi dapat perkembangan terbaru tentang cara pasang kotak komentar facebook di blog kita. Setelah tempo hari saya posting tentang pasang komentar facebook V1 tapi kelemahannya adalah semua komentar muncul di setiap postingan, jadi kita tidak tahu postingan mana yang terkomentari. Kemudian dilanjutkan dengan pasang komentar facebook V2. Cara ini juga banyak yang berhasil tapi ada juga yang gagal, entah kenapa. Tapi kelemahan V2 tidak ada fitur reply di komentarnya tidak seperti yang V1, dan juga jika ada yang mengomentari artikel kita, kita tidak tahu karena tidak ada notifikasi jadi harus cek manual di setiap artikel.

Nah yang V3 ini yang lebih sempurna ada fitur reply dan notifikasi, jd kita bisa tahu kalau ada yang berkomentar menggunakan komentar facebook karena ada pemberitahuan di akun facebook kita, jadi kita bisa me-manage komentar tersebut (ngomong opo kuwi...??). Tuh diatas udah ada gambarnya. Oke deh cukup untuk kata sambutannya, sekarang kita langsung saja ke kali nyemplung bareng (maksudnya langsung mulai tutorialnya hehehe..). Jangan terlalu tegang gitu dong bacanya santai aja sob, ntar jadi botak loh kayak saya (ups keceplosan).

Yang pertama harus dilakukan adalah membuat aplikasi komentar facebook. Saya rasa point ini tidak perlu saya jelaskan lagi karena sudah saya tulis, silahkan baca dulu disini  untuk cara membuat aplikasinya. Jika sudah ada yang memasang komentar facebook lewat tutorial blog ini sebalumnya atau blog lain yang berbeda dengan cara ini, maka silahkan di ganti dengan kode yang saya berikan nanti. Oke kita lanjutkan lagi yuk. Setelah selesai membuat aplikasinya dan mendapatkan APP ID dari facebook, sekarang tinggal pemasangan pada blog. Pasang kode berikut DI BAWAH <data:post.body/>.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#appId=APP ID&amp;xfbml=1'/><fb:comments expr:href='data:post.url' numposts='5' width='615'/>
    </b:if>

Jika scrip di atas tidak berguna, maka sebagai gantinya gunakan scrip ini :

<div id='fb-root'/><script>window.fbAsyncInit = function() {
FB.init({appId  : &#39;APP ID&#39;,
status : true,
cookie : true,
xfbml  : true});};
(function() {var e = document.createElement(&#39;script&#39;);e.src = document.location.protocol + &#39;//connect.facebook.net/en_US/all.js&#39;;e.async = true;document.getElementById(&#39;fb-root&#39;).appendChild(e);}());</script><fb:comments expr:href='data:post.url' expr:title='data:post.title' migrated='1'/>

Ganti APP ID berwarna hijau dengan APP ID yang di dapat dari facebook. Untuk angka 615, adalah lebar kotak komentar, sesuaikan dengan template sobat. Kemudian agar dapat terintegrasi dengan akun facebook kita, pasang kode berikut DI BAWAH <head> atau DI ATAS <b:skin><![CDATA[/*

    <meta content='ID FACEBOOK' property='fb:admins'/>
    <meta content='APP ID' property='fb:app_id'/>

Ganti APP ID dengan ID yang di dapat dari facebook tadi, dan ganti ID Facebook dengan ID sobat, misalnya id facebook saya adalah http://www.facebook.com/fery.interisti (jangan lupa di add ya hehehe), ganti ID FACEBOOK dengan yang berwarna merah. Setelah itu yang wajib harus dilakukan adalah save template. Kalau ada yang kurang jelas silahkan tanya ya.

sumber + http://terperosok.blogspot.com/

Rahasia Top 1 google tanpa Backlink

Mengungkap Rahasia Top 1 google tanpa satupun Backlink

Setelah Mempelajari Tekhnik Ebook Google Sniper yang di buat Oleh sang Master SEO George Brown, Membuat saya Takjub dan Kebingungan. Dimana selama ini rata-rata Web-blog bisa Masuk Top 1 di Search Engine karena harus dan wajib memiliki Backlink. Sobat pecinta SEO juga pasti sudah tahu semua tentang hal tersebut, Jangan Harap bisa masuk halaman depan jika tidak ada Satupun Backlink yang mengarah ke Blog kita. Waduh Metode yang diterapkan George Brown Cukup Unik dan Terbalik dengan Tekhnik SEO yang selama ini ada.

Bagaimana Pendapat Sobat? Percayakah dengan Metode Seo Ala George Brown ini?
Percaya atau Tidak tapi inilah Kenyataan dan mesti di Coba, Asik bukan jika mendominasi Google tanpa Capai nyari Backlink?. Tekhnik ini Kebanyakan Main pada Onpage Seo dan Malah tidak Menggunakan Offpage Seo sama sekali.
Bagi sobat Pemula yang belum Mengeerti Apa itu Onpage Seo dan Offpage seo Baiklah Kita Bahas sedikit Agar Mengerti maksud dari Ebook ini Nantinya

Onpage Seo :
Tekhnik Seo yang digunakan untuk Optimasi Web/blog pada Blog tersebut secara Langsung Seperti penekanan Tags. Pemasangan H1, H2, H3 tags, Pemasangan Anchor, Title dan alt pada Gambar dan Konten yang Unik, dan beberapa Tekhnik lainnya yg nanti sobat bisa temukan pada Ebook ini.
Offpage Seo :
Tekhnik Seo yang digunakan di Luar web/blog kita, seperti Mencari Backlink sebanyak-banyaknya yang mengarah ke Blog tersebut.

Seperti Itulah Keterangan Singkat Mengenai Onpage Seo dan Off Page Seo.

Sekarang Kembali Ketopik Cara Rahasia Top 1 google tanpa Backlink satupun Ke Blog kita,atau Tanpa Melakukan Tekhnik SEO Off Page.

Aneh dan Nampak Mustahil Bukan?, Nah inilah yang akan kita Pelajari dalam Isi ebook ini Yang sedang Ramai di Perbincangkan Oleh Para Master SEO dunia, dan Rata-rata Mereka Bilang " Apa Mungkin? ", tapi tidak menutup kemungkinan Bisa Bukan?.
Tidak ada yang mustahil di dunia ini apalagi masalah SEO dan Semuanya telah Dibuktikan Oleh George Brown, Inilah yang membuat Ebook Buatan Beliau menjadi Fenomena dan Mendapat Penjualan yang Cukup Tinggi dan harganyapun Lumayan mahal Buat kantong kita.
Sudah hampir dua tahun sejak versi pertama kursus SEO Oleh George Berhasil Kini George merilis Google Sniper 2.0 pada bulan Pebruari 2011 14.

Kini Saat nya Para SEOer Dalam Negeri Khususnya Sobat Pecinta SEO dan Penggemar Kumpulancara.com Untuk Mencobanya.
Mungkin yang ada di Benak sobat, APakah ini diJual? ataukah Harus Bayar pada Admint Kumpulancara.com?.
Tenang Sobat, Saya Persembahkan Lagi Ebook SEO Google Sniper 2.0 Secara Gratis atau Bahasa Jirannya di Bagi secara Cuma-cuma.

Jika Sudah tidak Sabar Silahkan Download disini : Google Sniper 2.0 Exposed
Supaya Sobat Tidak Ketinggalan Info SEO Terbaru dan Serba Gratis Silahkan Follow Blog ini.
Terakhir " Semoga Kita semua Sukses dalam Ngeblog dan Semoga Bermanfaat "

Auto Read More v2 | Post Thumbnails

Auto read more - Pada posting sebelumnya cara membuat auto read more pada blogger, nah pada postingan kali ini merupakan auto read more blogger juga tapi sedikit perubahan dan tampilan yang semankin menarik. mau tau bagaimana cara pasang auto read more kali ini?? langsung aja yuk ke TKP.

Cara pasang auto read more:
1. Log in di Blogger.com
2. pilih Edit HTML, click Expand Widget Templates
3. carilah kode </ head> dan copy kode di bawah ini letakkan sebelum kode </ head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 300; img_thumb_height = 100; img_thumb_width = 120; </script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)
(C)2008 by Anhvo
visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

 4. cari kode <data:post.body/> atau <p><data:post.body/></ p>, ganti kode tersebut dengan kode di bawah ini :

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><br/><b>Read More</b></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

5. kemudian Save Template.
6. selesai...

Shoutbox Melayang Dengan Light Effect jQuery

untuk yang ini adalah shoutbox melayang dengan jquery namun tampilannya berbeda dengan adanya light effect, dalam artian, saat button buku tamu di KLIK maka seluruh halaman akan gelap kecuali shoutbox atau buku tamunya. Untuk lebih jelasnya silahkan perhatikan gambar dibawah ini :

Membuat Tooltip Untuk Setiap Link Blogger

Bagi yang belum membaca artikel sebelumnya silahkan klik aja link diatas. Untuk tooltip kali ini sungguh mempunyai kelebihan yaitu secara otomatis akan muncul pada setiap link yang ada pada blog kita. Namun tooltip ini hanya menampilkan Alamat URL dari suatu link. Untuk contoh, silahkan lihat gambarnya dibawah ini :

Make Back To Top Button With Scroll Smooth Jquery

Untuk kali ini saya akan menjelaskan cara membuat tombol back to top dengan dengan jQuery namun dengan adanya Effect Smoot Scroll. Artinya Ketika tombol back to top ini di KLIK, maka ketika Posisi Scroll halaman kembali keatas dengan lembut. Selain itu, proses pemasangan Back To

Simple Slide Panel with jquery

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]>
# Dan Simpan kode berikut diatasnya : 

Kwicks menu with jquery

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# Dan Simpan kode berikut diatasnya :

/* Kwicks menu with jQuery
----------------------------------------------- */
.kwicks {
     list-style: none;
     position: relative;
     margin: 0;
     padding: 0;
     background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2ErUuXfVYlLqhR1So0RhfX7hm00p95mGFHm8vrnTAXFIWyZI97nxXfGAneJZ8SzOk6QlWX0ubK6yNJZthnVqIy9Pl45eq_9ncXiX9tZ5RZav2aOdLaOLLyr-3x8lpyCMYPKeVlOiKWvU/s1600/no_flicker.jpg); /*some browsers are to slow when aligning the menu items via jQuery and so the background shines through, this prevents this flickering*/

 }
 .kwicks li{
    display: block;
    overflow: hidden;
    padding: 0;
    cursor: pointer;
    float: left;
    width: 125px;
    height: 40px;
    margin-right: 0px;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVoMaWv-Fp9JWXPcpL-KgtGWMtZRM6cIa6AVAdgdYOdjZPAaPjovGWQxJn5I8FWhwZIWZcRKNmjVagkLhFRKrMMlG7OzdOpDQ7xWtkVJLne6KEVCtWQSlQOcwahASs8pDBlmbsFHPtcNg/s1600/kwicks_sprite.jpg);
    background-repeat:no-repeat;
}
.kwicks a{
    display:block;
    height:40px;
    text-indent:-9999px;
    outline:none;
}

#kwick1 {
    background-position:0px 0px;
}
#kwick2 {
    background-position:-200px 0px;
}
#kwick3 {
    background-position:-400px 0px;
}
#kwick4 {
    background-position:-600px 0px;
}

#kwick1.active, #kwick1:hover {
    background-position: 0 bottom;
}
#kwick2.active, #kwick2:hover{
    background-position: -200px bottom;
}
#kwick3.active, #kwick3:hover {
    background-position: -400px bottom;
}
#kwick4.active, #kwick4:hover {
    background-position: -600px bottom;
}

#kwick1 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: left 0px;
}

#kwick1 a:hover{
    background-position: left -80px;
}

#kwick4 a{
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNsT_dm9Sg4qrks-6nHB6vsrv0LzePJvsrsZig_S36eQe13dEjJ5T-Eh5E20mN_IPDZcz6TJ_58Ji7SRNROlqH8w8eTEircKPuD-7DWU5KeJksFjr6M5F4HsqXV4vMODjHm213W4OgD0w/s1600/end.jpg);
    background-repeat:no-repeat;
    background-position: right -40px;
}
#kwick4 a:hover{
    background-position: right -120px;
}

selanjutnya simpan script berikut diatas :

<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery-1.2.6.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/kwicks.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/custom1.js'></script>

Terakhir simpan kode berikut di tempat yang sesuai dan diinginkan :

<ul class="kwicks">
     <li id="kwick1"><a href="#">Home</a></li>
     <li id="kwick2"><a href="#">Contact</a></li>
     <li id="kwick3"><a href="#">Downloads</a></li>
     <li id="kwick4"><a href="#">Search</a></li>
 </ul>

simpan template....

Sebagai catatan karena menu ini menggunakan jQuery, jadi terkadang ada bentrok Java script jquery yang satu dengan yang lainnya, jika jquery nya sudah ada kawan-kawan tidak perlu lagi menambahkan script jquery nya...

dan untuk lebih jelasnya bisa dilihat disini agar lebih mengerti: DEMO Kwicks menu with jquery

selamat mencoba,, dan semoga kawan-kawan bisa mengembangkannya.... 

Image zoom effect with jquery

  

# Cara membuatnya : Login blogger
# Rancangan, Edit Html, Cari kode ]]></b:skin>
# Dan Simpan kode berikut diatasnya :

Cara membuat breadcrumbs

1. Log in blogger
2. Masuk ke menu Rancangan, Edit Html,
3. Centang Menu Expand Template Widget
4. Simpan kode berikut Diatas kode ]]></b:skin> :

Cara membuat blockquote

Membuat menu area untuk script agar  terlihat lebih menarik dan enak di pandang.... dan memperjelas kode atau script yang di postingkan pada blog kita, contoh tampilannya adalah di bawah ini :

Adding QueryLoader (‘LazyLoad’) Script For Blogger And Customize It.

 

Hi all hear visitors, It’s been a long time since i wrote my latest tutorial here, and sure this is because working on our new version, which released last week, i wish you liked it all,
Today we are going to learn a new tutorial about how to apply the QueryLoader (LazyLoad) script for your blogspot blog.

What is the QueryLoader (LazyLoad).

QueryLoader is a blank black ( can be changed ) screen that covers your blog till all content loaded, which means that your visitors won’t see the actual loading of your blog, instead of that, they will see a loading page with a bar and percentage of the overall blog loading, it’s build using j-query and css. easy to apply to your blogger blog, and customize able.

Step 1, adding the jave files.

In this step we will add a scripts files to your blogger template.
Please navigate to your dashboard >> Design >> edit html , and please find the following code,

</head>

And exactly before it add the following code

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/>

Step 2, adding the jave Codes.

And on the same page, please find the following code,

</body>

And before it add the next code,

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>

Step 3, adding the Css Codes.

now on the same page too, find this code,

]]></b:skin>

And before it , add this code,

.QOverlay {
 background-color: #000000;
 z-index: 9999;
}

.QLoader {
 background-color: #CCCCCC;
 height: 1px;
}

.QAmt {
 color:#FF530D;
 font-size:50px;
 font-weight:bold;
 line-height:50px;
 height:50px;
 width:100px;
 margin:-60px 0 0 -50px;
}

now Click Save Template

And your blog now have the script installed and ready, click preview or view your blog to see the script in action.

Additional Step, Customize the colors.

Now this is an extra step and you can do it or not, as you like,
If you want to change the colors, you have to change values in the css code, “step 3″
Please look at the following image to know what what you should change to get your own style.

If you wondering about how to get your own color codes, i think you should have a look at our amazing color codes tool here.

Demo, Credits, And files.

This script originally coded by gayadesign.com and customized for blogger by me , For a demo for this script please click here,
In case you wanted to host the file in step 2 on your own server or any where else, you can download it here, Download ( 40 hits )

Sumber : http://www.allblogtools.com/tricks-and-hacks/adding-queryloader-lazyload-script-for-blogger-and-customize-it/

Membuat Navigasi Breadcrumb di Blog

Navigasi breadcrumb adalah membuat navigasi sejajar (horizontal) berdasarkan label yang kita buat di tulisan yang publikasikan. Saat kita buka sebuah postingan maka kita akan mengetahui postingan yang kita buka itu termasuk dalam kategori (label) apa. Navigasi breadcrumb ada di atas halaman post yang kita buka.

cara memasang file.swf pada posting blog

Kamu pernah mengalami error ketika Pasang file ini di blog kamu..??
sebenarnya tidak terlalu sulit untuk menghiasi blog dengan file animasi seperti .gif, .swf, atau lainnya hanya saja kita harus mempunyai file yang sudah berbentuk .swf, cara membuat terserah yang pasti kalo saya sie pake Flash, meski masih belajar tapi untuk sekedar animasi yang biasa2 sie bisa hehe