Cara Memasang jQuery Image Preloader

Loading Gambar

  jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada situs-situs profesional. Jika di tilik dari fungsinya, sebenarnya plugin ini hanyalah tambahan untuk mempercantik penampilan gambar.

Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay (lambat) pada saat proses pemanggilan (load) gambar pada halaman situs, selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut akan di gantikan dengan animasi loading. 

Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang lembut. Plugin ini akan memberikan kesan profesional pada blog dan menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat diperhatikan sang pemilik blog. Bagaimana Cara Memasang jQuery Image Preloader ini di Blog?

Untuk Cara Memasang jQuery Image Preloader di blogspot, kita cukup menambahkan kode script dan CSS berikut ini kedalam template blog kita.

• Langkah pertama adalah cari kode: </head>
• Kemudian letakkan kode script berikut ke atasnya

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src='http://bloggeracsessories.googlecode.com/files/jquery.preloader.min.js' type='text/javascript'/><script type='text/javascript'>$(function(){$(&quot;body&quot;).preloader();});</script>

• Kemudian cari kode: </b:skin> dan tambahkan kode CSS berikut di atasnya.

.preloader {
background:url(http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif) center center no-repeat;
} 

• Simpan template sobat dan dan lihat hasilnya.

Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna biru yang tadi anda letakkan di atas kode </head>

Semoga berhasil sobat :)

Selengkapnya → Cara Memasang jQuery Image Preloader

Cara Membuat Rating Bintang di Pencarian Google

                    Sebenarnya sudah lama sekali kepingin posting cara menampilkan rating bintang di hasil pencarian google ini, tapi saya belum berani sebelum saya sendiri berhasil mempraktekkannya. Jujur saja saya juga sempat pusing karena beberapa kali mencoba gagal terus(saya sring marah" sendiri gan). Namun berkat kesabaran akhirnya sukses juga membuat rating bintang di blog R_G ini. Belajar dari pengalaman, saya ingin berbagi tips cara membuat rating bintang rich snippet ini untuk sobat blogger sekalian, termasuk beberapa trik tambahan yang mungkin bisa sobat lakukan jika mengalami kegagalan seperti yang pernah saya rasakan oke langsung ja gan ni dia caranya:

Cara Membuat Rating Bintang Di Blogspot

1.    Pertama anda harus memiliki akun di Google Plus. Akun google plus anda harus sudah terhubung ke blog anda dimana dalam setting profil anda menjadi kontributor. Jika belum edit dulu profil google plus anda dan masukkan URL homepage sebagai blog yang di kelola.

2.    Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand Template Widget.

3.    Jika akun Google Plus anda sudah dihubungkan dengan blogger, selanjutnya buat meta tag seperti contoh punya saya dibawah ini dengan menggunakan URL id profil google plus anda. Letakkan meta tag ini dalam susunan meta tag yang telah ada di template anda atau diatas kode <b:skin><![CDATA[/* .

<meta content='general' name='rating'/>
<link href='https://plus.google.com/111920945046633594364' rel='publisher'/>

4.    Selanjutnya letakkan kode dibawah ini tepat dibawah kode <body>  pada template.

<div itemscope='' itemtype='http://data-vocabulary.org/Review'>

5.    Kemudian letakkan tag penutup </div>  diatas kode </body>  pada template. Dengan demikian kita sudah memberikan markup (penanda) area posting yang diberi rating yaitu diantara tag <body>  dan  </body>.

6.    Lanjutkan perburuan (:D) dengan mencari kode HTML judul posting seperti dibawah ini.

<h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3>

Catatan Penting :

Kode heading (h3) pada setiap template berbeda-beda, seperti pada template saya judul posting menggunakan heading (h1). Jadi pastikan dulu keberadaan tag judul posting pada template anda. Bagi yang menggunakan breadcrumbs lebih gampang, kode judul posting biasanya ada dibawah susunan kode breadcrumbs. Trik mudah menemukannya adalah dengan melihat page source halaman posting anda.

7.    Jika sudah ketemu, tambahkan kode HTML yang berwarna merah sehingga susunan kode HTML lengkapnya menjadi seperti dibawah ini.

<span itemprop='itemreviewed'><span itemprop='description'><h3 class='post-title entry-title'><b:if cond='data:post.link'><a expr:href='data:post.link'><data:post.title/></a><b:else/><b:if cond='data:post.url'><b:if cond='data:blog.url != data:post.url'><a expr:href='data:post.url'><data:post.title/></a><b:else/><data:post.title/></b:if><b:else/><data:post.title/></b:if></b:if></h3></span></span>

8.    Lanjut terus bro dengan mencari kode seperti dibawah ini.

<span class='fn'><data:post.author/></span>

9.    Tambahkan dengan kode yang berwarna merah sehingga menjadi seperti dibawah ini.

<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span>

10.    Langkah terakhir adalah memberikan nilai rating pada bintang sehingga hasil tampilan di pencarian google bintangnya kelihatan bersinar he he. Tambahkan kode yang berwarna biru pada susunan kode diatas, sehingga menjadi seperti dibawah ini.

<span class='fn'><span itemprop='reviewer'><data:post.author/></span></span></b:if></span><span itemprop="rating">4.5</span>

11.    Step by step langkah pembuatan rating bintang rich snippets telah selesai, selanjutnya anda harus melihat preview dari hasil rating bintang yang anda buat melalui Google Rich Snippets Testing Tool. Jika hasil preview terlihat seperti gambar dibawah ini berarti anda telah SUKSES membuat rating bintang ini.

Jika akun google plus anda berhasil terverifikasi, maka pada bagian bawah  hasil preview akan terlihat keterangan Verified Publisher dan Verified Author seperti gambar dibawah ini.

  

     

               Demikian tutorial blog langkah-langkah Cara Membuat / Menampilkan Rating Bintang di Google. And buat yang hoby copas 100% di blog ini saya mohon dengan hormat untuk memberikan link aktif ke artikel ini.

Selengkapnya → Cara Membuat Rating Bintang di Pencarian Google

Pasang Jam Animasi Pelangi Dengan CSS & jQuery

Cara membuatnya :
1. Login blogger
2. Rancangan, Elemen Laman, Tambah Gadget,
3. Pilih HTML/Java script Dan Simpan kode berikut  :

<style> /*---------------------- Colorful Clock With CSS & jQuery --------------------------------------------*/ .clock{     /* The .clock div. Created dynamically by jQuery */     background-color:#252525;     height:100px;     width:100px;     position:relative;     overflow:hidden;     float:left; }
.clock .rotate{     /* There are two .rotate divs - one for each half of the background */     position:absolute;     width:100px;     height:100px;     top:0;     left:0; }
.rotate.right{     display:none;     z-index:11; }
.clock .bg, .clock .front{     width:50px;     height:100px;     background-color:#252525;     position:absolute;     top:0; }
.clock .display{     /* Holds the number of seconds, minutes or hours respectfully */     position:absolute;     width:100px;     font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;     z-index:20;     color:#F5F5F5;     font-size:30px;     text-align:center;     top:37px; /* sesuaikan agar letak angkanya pas di tengah */     left:0;        /* CSS3 text shadow: */     text-shadow:4px 4px 5px #333333; }
/* The left part of the background: */
.clock .bg.left{      left:0; }
/* Individual styles for each color: */ .orange .bg.left{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCn9Z0kXeHNiK609nhDt9Ayd1JsPtSAlFLvViWdSX9JfY8_FkYeoqj9IUynb0F_NT2VEGLNWXJCcHuNpde3Vx7YBbQi0ow9Vgw6mdpr90FJVFsopAdkgoH3bkLOl0j4i6wVKFjyQC8NQ/s1600/orange.png) no-repeat left top; } .green .bg.left{      background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVg4SwAzA8roGHoGVpgnlL4giC49H7kaTtBcHO652tQgH4xxdrT6vAe2WL8IZlrhWQ3ka_rjhAhqhs7HBakbNfHReYCBjtv0zbEHvJ7bLKnG6hGPh1uZN7jp404Dj_WQ2LWkcoSo2IWuM/s1600/green.png) no-repeat left top;      } .blue .bg.left{         background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcsnm0qTXV9AOtZSmAAhFchbQsIni52bWUIB7P5ihlaXTTQYBotPbkTKyZRcCYSE1fA_qmS3bMbuDfxe9cypqSxCjcwbW7mNjluLuXrzMz8K5gyqo33mOO6-yzqpeDX_laSg2V9TCJqg/s1600/blue.png) no-repeat left top;         }
/* The right part of the background: */ .clock .bg.right{ left:50px; }
.orange .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHCn9Z0kXeHNiK609nhDt9Ayd1JsPtSAlFLvViWdSX9JfY8_FkYeoqj9IUynb0F_NT2VEGLNWXJCcHuNpde3Vx7YBbQi0ow9Vgw6mdpr90FJVFsopAdkgoH3bkLOl0j4i6wVKFjyQC8NQ/s1600/orange.png)no-repeat right top;      } .green .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVg4SwAzA8roGHoGVpgnlL4giC49H7kaTtBcHO652tQgH4xxdrT6vAe2WL8IZlrhWQ3ka_rjhAhqhs7HBakbNfHReYCBjtv0zbEHvJ7bLKnG6hGPh1uZN7jp404Dj_WQ2LWkcoSo2IWuM/s1600/green.png) no-repeat right top;      } .blue .bg.right{      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqcsnm0qTXV9AOtZSmAAhFchbQsIni52bWUIB7P5ihlaXTTQYBotPbkTKyZRcCYSE1fA_qmS3bMbuDfxe9cypqSxCjcwbW7mNjluLuXrzMz8K5gyqo33mOO6-yzqpeDX_laSg2V9TCJqg/s1600/blue.png) no-repeat right top;      }

.clock .front.left{     left:0;     z-index:10; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="http://kangdadang.googlecode.com/files/jquery.tzineClock.js"></script> <script type="text/javascript" src="http://kangdadang.googlecode.com/files/script.js"></script>

<div id="fancyClock"></div>

4. Simpan, dan selesai....

Selengkapnya → Pasang Jam Animasi Pelangi Dengan CSS & jQuery

Cara Membuat Sitemap di Google Webmaster Tools

Cara Membuat Sitemap di Google Webmaster Tools-Selamat Malam sobat,maaf saya telat membuat postingan karena Kegiatan Saya semakin padat (sok sibuk). hehehe.. :D ,tapi ga apa lah yang penting tetap semangat ngeblog.malam ini saya akan berbagi tips Cara Membuat Sitemap di Google Webmaster Tools.Tapi,sitemap yang saya maksud bukanlah sitemap yang berada di web/blog yang memuat daftar isi blog,melainkan sitemap yang akan membantu blog dan postingan-postinganya agar lebih mudah terindex oleh google.Sebenarnya masih banyak sekali pengertian-pengerian tentang sitemap tapi intinya sama dan saya telah mengambil pengertian sitemap dari wikipedia seperti berikut.

Sitemap adalah salah satu alat bantu untuk para webmaster yang mempermudah dalam pengenalan peta situs di dalam website. Dengan begitu, mesin google dengan mudah menjelajah dan meraih halaman-halaman yang ada di dalamnya. Sama halnya dengan webiste pada umumnya, blog juga memerlukan sitemap agar mesin pencari dengan mudah mendeteksi konten di dalamnya.[1]. Dalam sistem sitemap ini pengguna dapat melakukan submit peta web berbasis XML langsung ke Google yang akan membantu Google mengindeks halaman web dengan mudah(Wikipedia)

Cara Membuat Sitemap di Google Webmaster Tools sangatlah mudah.Sobat hanya perlu membuat url sitemap karena untuk blogspot harus menggunakan url khusus,berbeda dengan wordpress yang bisa langsung mengsubmit url feed tanpa harus melakukan perubahan.Mari kita langsung saja ketahap awal.

1. Login Ke Google Webmaster Tools
2. Pilh>>Kelola situs>>Tambahkan atau hapus pengguna,pada bagian sidebar left pilih>>Pengoptimalan>>Peta situs,kemudian pada bagian kanan agak keatas,klik>>TAMBAHKAN/UJI PETA SITUS.
3. Untuk membuat sitemapnya anda Bisa buat disini /anda Bisa masukkan Alamt URL ini:

• http://yangwedinar.blogspot.com/atom.xml?redirect=false&amp;start-index=1&amp;max-results=500
• http://yangwedinar.blogspot.com/feeds/posts/default?max-results=9999&amp;amp;alt=json-in-script&amp;amp;callback=loadtoc

            url yang saya beri tanda warna merah itulah yang akan sobat tambahkan  pada langkah kedua tadi.Tambahkan kedua sitemap itu agar blog cepat terindex oleh google.Namun,jika sobat ingin menambahkan sitemap pada bing WMT,maka url blog juga harus ditambahkan(pembahasanya pada postingan berikutnya).Sampe disini artikel Cara Membuat Sitemap di Google Webmaster Tools,semoga dapat membantu blog sobat agar cepat terindex oleh google :).Semangat blogging :)

Selengkapnya → Cara Membuat Sitemap di Google Webmaster Tools

Download 3 Software untuk memperbanyak pengunjung Dan Alexa Rank,

    Kali ini R_G akan membuat postingan tentang cara memperbanyakVISITOR BLOG,setelah kemarin Sya menshare Tentang Cara Meningkatkan Traffic Blog dengan Autosurf sekarang saya akan memberikan software yang dijamin 100% pasti berhasil oke langsung aja ni dia:

                                                           DOWNLOAD
                                                                    (4,8 Mb)

                                   PassWinrar:yangwedinar.blogspot.com                     

Supaya anda semua tidak bingung saya akan memberi penjelasanya:

    1.Alexa Booster

• Instal Alexa Booster
• Jalankan Alexa Booster
• Pada kotak URL to Send to isi dengan blog kamu, centang send to all, lalu klik next step

• Pilih Default Proxy, lalu klik next step

• Klik start dan tunggu sampai menurut kamu cukup

2.Backling Booster 

• Buka AdminSpotBacklinkBooster
• Masukkan link blog kamu tanpa http://

• Klik Boost, lalu tunggu sampai kamu rasa cukup

 3.Jingling (Visitor Booster)

•  Buka jingling
• Masukkan link blog kamu (bisa sampai 4 link)

• Lihat petunjuk pada gambar berikut:

Cara Menghentikan Jingling Booster : 

  di karenakan Jingling berbahasa Taiwan (klo ga salah) nah pasti'nya anda kebingungan bagaimana menghentikan Software ini 

• lihat gambar dibawah, klik pada yang saya beri lingkaran warna merah

• cari ikon jingling pada taskbar, klik kanan pada ikonnya lalu tutup, lihat gambar berikut

 Jika masih ada yang membingungkan silahkan isi form komentar di bawah ini ! terima kasih 

Selengkapnya → Download 3 Software untuk memperbanyak pengunjung Dan Alexa Rank,

Cara Memperepat Pendapatan PPC(Khusus KUMPULBLOGGER.COM)

          Sekarang bLog R_G BAKAL ngeshare tentang cara meningkatkan pendapatan dari KUMPULBLOGGER.COM,Kadang klo kita masang sebuah iklan PPC pasti sangat sulit untuk bisa mendapatkan sebuah Klikan dari pengunjung dan dengan cara ini insyallah bisa membantu anda Langsung aja:

1. Pertama Anda Harus Punya Account KB dulu Untuk Daftar Silahkan Kilik Disini
2. Masuk ke Tata Letak
3. Lalu tekan"add new gadget"
4. Pilih HTML/JAVA SCRIPT
5. Lalu masukkan Kode ini

<center><style type="text/css">
#gb{
opacity:0.0;
overflow:hidden;
position:fixed;
top:0px;
z-index:+1000;
}
* html #gb{position:relative;}




.gbcontent{
float:right;
border:0px solid #000000;
background:#000000;
padding:0px;
}
</style></center>


<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 10-w) : moveGB(10-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.top = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}


</script>


<div id="gb">


<div class="gbtab" onclick="showHideGB()"> </div>


<div class="gbcontent">


<div style="text-align: right;">
<a href="javascript:showHideGB()">
.:[Close][Click 2x]:.
</a>
</div>
<script src="http://kumpulblogger.com/dam.php?b=198205" type="text/javascript"></script><script src="http://kumpulblogger.com/dam.php?b=198205" type="text/javascript"></script>
<script src="http://kumpulblogger.com/dam.php?b=198205" type="text/javascript"></script><script src="http://kumpulblogger.com/dam.php?b=198205" type="text/javascript"></script><script laguage='javascript' src='http://slideshowborneosporty.googlecode.com/files/js.js' type='text/javascript'/>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.center = (10-gb.offsetWidth).toString() + "px";
</script></div></div>

5.Ok sekarang anda tinggal meihat hasinya
            KET:-Ganti kode yang berwarna merah dengan kode ikan anda
                    -Iklan tdak kelihatan

Semoga bermanfaat ea.........

Selengkapnya → Cara Memperepat Pendapatan PPC(Khusus KUMPULBLOGGER.COM)