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 !!

Seragam Kerja Kantor Murah di Surewi

Informasi bagus bagi Anda yang membutuhkan seragam kerja kantor, yaitu Seragam Kerja Kantor Murah di Surewi. Apa dan bagaimana Surewi itu ?? Sekilas tentang Surewi Wardrobe, Surewi Wardrobe berdiri pada tahun 2007, Adalah sebuah manufaktur garment dan general trading yang bergerak di bidang pelayanan kebutuhan akan pakaian seragam kerja / uniforms dan juga melayani penyediaan aneka keperluan barang promosi / merchandise.

Di Surewi Wardrobe produknya bervariasi dan keren-keren tentunya, serta bisa dipesan secara online, antara lain:
Polo Shirt, T-Shirt, Kemeja Formal / Formal Shirt, Kemeja F1 / Racing Shirt, PDH, PDL, SPG Uniform, Celana formal / Formal Pants, Celana casual / Casual Pants, Jacket, Jas / Formal Suit, Jasket, Blazer, Rompi / Vest, Topi / Cap, Apron, Hairnet, Dasi, Other promotional items.

Soal kualitas jangan diragukan lagi, entah itu Kuaalitas Produk, Kuaalitas Pengiriman Barang, Ataupun Kuaalitas Pelayannya. Kabar bagusnya lagi Anda juga bisa secara langsung mendesign sendiri, mulai dari bahan yang digunakan ataupun design untuk seragam kantornya.

Biar tambah lengkap berikut contoh design gambar seragamnya:
Seragam kerja untuk laki-laki dengan design elegan yaitu Kemeja Formula

Seragam kerja untuk wanita dengan design elegan pula yaitu Segaram Kerja kantor, dengan warna pink yg imut bila dipakai seorang wanita. ^^

Tentunya masih banyak lagi design-design yang lainnya dan hanya ada di  Surewi Wardrobe.
Segera saja pesan dan kunjungi websitenya "www.surewi-seragam.com". Atau berikut Informasi Pemesananananya:

Surewi Wardrobe
Jl. Tanah Seratus No.15 RT 05 / RW 11
Sudimara Jaya, Ciledug
Tangerang - 15151
Indonesia

PIN BB Telephone 1 Telephone 2 Layanan SMS Fax

: 228204D4 : 021 - 83662219 : 021 - 94484494 : 0813 - 16500561 : 021 - 7333240

Tertarik...?? Segeralah kunjungi websitenya dan mulai memesannya. Seragam Kerja Kantor Murah di Surewi.

Postingan Blog Deindex di SE (Search Engine) Google

Bingung juga kenapa ada beberapa dari postingan kode-blogger bisa hilang (De-Index) di pencarian google. Seperti yang sedang saya alami sendiri beberapa hari ini, khususnya untuk postingan Cara Mempercepat Loading Blog With Script Lazyload. Problemnya, kadang muncul kadang hilang di SE (Search Engine) Google. Padahal di PageOne.

Berikut adalah beberapa alasan dari pengalaman saya sendiri. Alasan kenapa postingan blog bisa hilang di SE (Search Engine) yaitu:

1. Update Algoritma, Maintenance dan Semacamnya
Seperti yang sudah sobat ketahui, dalam beberapa bulan ini ditahun 2012, Google sudah mengUpdate Sistem pencarian, lebih tepatnya soal Algoritma Google beberapa kali. Berikut ulasan update algoritmanya:

-Panda Update : 20 Sept. 27, 2012
-EMD Update : 1 Sept. 28, 2012
-Penguin Update : 3 Oct. 5, 2012
-Top Heavy : 2 Oct. 9, 2012

Bisa dilihat kan dalah 1tahun bisa berapa kali update ?? Mungkin faktor diatas jg berpengaruh pada posisi blog kita di SE (itu menurut persepsi saya sendiri loh).

2. Sifat Google yang suka berbagi Trafic
Gak jauh beda dengan efek algoritma google yang baru, bagi para blog/website baru yang sekarang sedikit lebih di tonjolkan khusunya di pencarian google. Blog baru yang sudah terindex, begitu juga dengan postingannya, sedikit banyak dari mereka pasti muncul di PageOne, walaupun cuman bertahan beberapa jam/hari saja. 
Dengan alasan inilah google memberikan kesempatan kepada semua website dan blog yang baru menjadi tumbuh dan berkembang, sehingga lebih memacu semangat dalam memuat berita.

3. Duplikat Konten
Ini neh yang kadang ribet diatasi, kalau dari blog saya sendiri mungkin jarang saya temuin duplikat konten karna kesalahan saya sendiri. Tapiiiiiii.... yang bikin repot and jengkel yaitu para Kopasser.. (Haha.. para pengKopas konten orang), yang dengan sengaja menjliplak habis isi konten blog kita. Dan inipun sudah saya alami dari dulu, Banyak sekali blog yang isi kontennya sama persis dengan postingan-postingan saya, dan tanpa diberi link sumber.
Ya memang sih google lebih pintar memilah-milah mana si Konten ORI (Asli), tp tetep aja gawe jengkel !! upssS.. curhar dikit :P
Dan sedikit banyak faktor diatas mempengaruhi hasil pencarian di Search Engine (SE).

Masih ada sebenarnya beberapa alasan yang membuat de index di SE, tapi beberapa alasan diatas yang sudah saya jelaskan itu menurut apa yang ada diotak saya, dan dari beberapa pengalaman saya sendiri.
Karena tujuan awalanya saya membuat postingan ini juga sebenarnya ingin BERTANYA kepada para sobat blogger ?? Jadi... semoga ada yang berkenan berbagi ilmu dan bisa membantu memberi solusi atau pemecahan masalah saya diatas.

Ditunggu tanggapannya Sob !! Sekian dari saya dan terimakasih.... \m/

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.

Tempat Bertanya, Kritik, Saran, Ataupun Request Seputar Tutorial Blogspot

Assalamu'alaikum - Langsung saja gan, disini adalah tempat bagi sobat kode-blogger untuk bertanya dan memberikan kritik dan saran. Ataupun bagi sobat yang ingin request tutorial, tips dan trik seputar blogspot bisa sobat req disini juga.





Caranya yaitu dengan berkomentar pada tread ini, atau bisa juga disini
Sekian dan terimakasih.

Regard - kode-blogger

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/

Cara Memasang Rating Bintang Rich Snippets Pada Blogspot

Tutorial Lengkap Cara Memasang Rating Bintang Rich Snippets Pada Blogspot, dan juga reviewer yang sering kita jumpai pada pencarian Search Engine Google yang pastinya sudah tidak asing lagi bagi kita. Emmm.. sebelum praktek, mungkin ada yang masih bingung dengan judul diatas ya ?? Yang akan saya bahas pada tutorial kali ini, bisa Sobata lihat hasilnya pada gambar dibawah ini:






Langkah-Langkah Memasang Rating Bintang Rich Snippets Pada Blogspot

1. Buatlah Akun Google Plus
Sebelumnya pastikan sobat harus sudah memiliki akun Google+, gunanya yaitu untuk mendapatkan ID google+ serta untuk menghubungkan google+ dengan blog. Bagi yang belum punya silahkan meluncur Kesini. Dan cara ini harus sobat praktekan terlebih dahulu.
Bila sobat sudah punya akun Google+, langsung saja ambil kode ID Google+, caranya pergi ke profil Google+, dan copy ID Google+'nya, lihat gambar dibawah ini:

Selanjutnya Merubah Profil Blogger ke Google+
Caranya:

• Login ke blogger
• Pada tombol setting di kanan atas, pilih Terhubung ke Google+

• Masuk ke halaman baru, centang persetujuan Anda menghubungkan Blog dengan Google+. Kemudian klik tombol Beralih Sekarang Juga.

• Pada bagian Kontributor Untuk, centang blog Anda. Kemudian klik tombol Tambahkan Blog.
• Sampai disini anda sukses menggunakan profil Google + untuk blog Anda.

2. Verifikasi Akun Google Plus Dengan Blog
Sebelum edit, bagi yang masih belum berhasil menerapkan cara ini, coba buatlah sebuah postingan "About me"yang didalamnya ada text yang melink ke goolge plus sobat. Dengan cara menambahkan atribut rel="me" pada link tersebut.
Bila masih bingung saya beri contohnya:

Masukan kode dibawah ini kedalam postingan "About Me" yang sobat buat. Jangan lupa "Viyan Pradita" diganti dengan nama autor blog sobat.
Dan lagi mode dalam postingan dengan mode "Edit HTML" jangan yang "Compose".

<a href="https://plus.google.com/102285791405845958439"rel="me">Viyan Pradita</a>

Dan text yang diberi rel="me" itu cukup satu saja.
Selanjutnya cara verifikasinya yaitu sama saja dengan menautkan akun google+ dengan blog.
Ikuti langkah-langkah berikut:

• Menuju ke profile google plus sobat
• Edit Profile
• Geser kebawah dan cari "Contributor to" Klik dan Add custom link.
• Masukan Link "About me" yang sudah sobat buat tadi, Lihat gambar dibawah ini:
  
  
  
  
  
• Lalu Save. 

3. Edit HTML Blog

• Login Blogger
• Pergi ke Design/Rancangan > Edit HTML, beri centang pada "Expand Widget Templates"
• Cari kode <head> dan letakan kode berikut dibawahnya
  
  

  <b:if cond='data:blog.url == data:blog.homepageUrl'><link href='https://plus.google.com/102285791405845958439' rel='publisher'/></b:if>

  
  
• Ganti yang berwarna Merah dengan ID Google Plus Sobat masing-masing, dan Perhatikan kode berwarna Biru (biasanya sudah ada) bila sudah ada tinggal disisipkan saja kode yg berwarna Hijau seperti pada kode diatas.
• Lanjut cari kode <body> , dan letakan kode berikut tepat dibawahnya
  
  

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

  
  
• Cari lagi kode </body> dan letakan kode berikut tepat diatasnya
  
  

  </div></div>

  
  
• Selanjutnya carilah kode HTML judul postingan sobat, Ini yang rada ribet, tapi kalo dicermati yo gampang sebenernya. Karena setiap template blog memiliki kode judul postingan yang berbeda-beda seperti h1, h2, h3 . Dan rata-rata yang judul posting mempunyai tag heading h3. Kalo di blog saya sendiri kode judul postinganya ada di tag heading h2. LIhat gambar dibawah ini biar jelas:
  
  
  
  
  
• Lebih mudah lagi bagi sobat yang sudah memasang breadcrumbs, biasanya kodenya ada dibawah kode breadcrumbs navigasi blog. Perhatikan gambar diatas, tambahkan kode yang di block warna hitam. Hasilnya bila ditampilkan dengan kode akan seperti dibawah ini:
  
  

  <span itemprop='itemreviewed'><span itemprop='description'> 
  <h2 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'> 
  <a expr:href='data:post.url'><data:post.title/></a> 
  <b:else/> 
  <data:post.title/> 
  </b:if> 
  </b:if> 
  </h2>
  </span>
  </span> 
  

  
  
• Tambahkan kode yang diberi warna merah.
• Lanjut lagi cari kode <span class='fn'><data:post.author/></span> dan tambahkan kode yang berwarna merah, maka hasilnya akan seperti ini:
  
  

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

  
  
• Masih ada lagi sob, hehehe... yang baca aja capek, apalagi yang nulis yah ?? :)) 
• Langkah selanjutnya proses pemasangan Rating bintang Rich Snippetnya di Artikel blog sobat. Caranya cukup mudah tinggal sobat beri kode dibawah ini di setiap posting blog:
  
  

  Rating: <span itemprop="rating">4.5</span>

  
  Atau bisa dengan kode yang lebih lengkap:
  
  

  Rating: <span itemprop="rating">4.5</span>
  Description: <span itemprop="description">ISI JUDUL POSTING SOBAT</span>
  Reviewer: <span itemprop="reviewer">NAMA AUTHOR SOBAT</span> - Itemreviewed: <span itemprop="itemreviewed">ISI PENJELASAN DAI JUDUL POSTING SOBAT</span>

  
  
• Selesai... Dan cek hasil kerja sobat disini dengan memasukan link url blog sobat. Bila berhasil, hasilnya akan seperti ini:
  
  
  
  
  

Proses dan cara diatas sudah saya praktekan dan berhasil. Demikian ulasan saya tentang Cara Memasang Rating Bintang Rich Snippets Pada Blogspot. Selamat mencoba.

Article Information:
Description: Cara Memasang Rating Bintang Rich Snippets Pada Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Cara Memasang Rating Bintang Rich Snippets Pada Blogspot - Rating: 4.5

Tips Agar Label Langsung Terindex Di Search Engine Google

Setelah tadi posting tentang Modifikasi Widget Popular Post With Grid Layout, Sekarang lanjut lagi membahas tentang Label/Kategori, yaitu Tips Agar Label Langsung Terindex Di Search Engine Google. Label atau Kategori di blog befungsi untuk mengelompokkan artikel atau postingan yang berhubungan dengan masing-masing postingan kita, dan juga mempermudah visitor/pengunjung untuk mencari sebuah artikel di blog kita. Nah, yang ingin saya share disini, bukan cara membuat label/kategori blog, melainkan cara membuat label yang kita buat itu bisa langsung terindex di Search Engine. Aduh bingung juga jelasinnya, tapi ini pengalaman yang baru saya dapat tadi setelah membuat 2-3 postingan... Hehehe

Masalah ini tidak lepas dari yang namanya Breadcrumbs, Karna sebelum sobat membuat/memasangnya di blog,pastilah tidak mungkin label bisa terindek di SE.
Bagi Sobat yang label/kategori blognya sudah terindex di Search Engine bisa mempraktekan langsung cara ini, agar labelnya cepat nongol/langsung terindex di SE.
Tapi bagi Sobat yang label/kategori blognyanya belum terindex Search Engine, Sobat bisa memasang Breadcrumb terlebih dahulu, dan itu wajib, tujuannya agar label bisa terindex di SE. Tidak semua Breadcrumb yang kita buat itu bisa terindex oleh search engine, untuk itu sobat bisa melihat cara membuat Breadcrumb disini : Membuat Navigasi Breadcrumb Pada Postingan Blog.

Oke kembali ke laptop... :D
Untuk lebih jelas, dan lebih mempermudah saya dalam menjelaskan, silahkan lihat gambar dibawah ini:

1. Contoh Label/Kategori yang sudah terindex di SE (search engine) Google:

Label yang sudah terindex Search Engine

2. Contoh Label/Kategori yang belum terindex di SE (search engine) Google:

Label yang belum terindex Search Engine

Setelah melihat gambar diatas, pasti sobat bisa ngerti dan paham yang akan saya jelaskan kan ??
Perhatikan gambar No1 dan No2, pastilah sobat bisa melihat perbedaanya kan, Liaht juga untuk Jam/waktu postingan itu dibuat. Jelas Gambar No1 yang ingin saya share triknya. Tujuannya yaitu untuk mempercepat label/kategori terindex di Search Engine, terutama Google.

Cara agar label cepat terindex di Search Engine terutama Google:
1. Pastinya sobat membuat postingan dulu.
2. Setelah selesai membuat postingan, perhatikan bagian kotak bawah Label Show all.
3. Klik Show all, dan masukan langsung postingan yang sobat buat kedalam Label yg di inginkan.
4. Terakhir Publish Post.

Kesimpulan:
Biasanya saya memasukan postingan ke dalam label setelah postingan di publish, Tapi dengan cara diatas, hasil di search engine berbeda, yakni, label lebih cepat terbaca/terindex oleh search engine (ini kesimpulan dan pengalaman saya sendiri).

Mudah kan Sob, Cara Membaut Label Dalam Breadcrumbs Langsung Terindex Di Search Engine Google.
Walau mudah tapi jujur, cara ini saya baru tahu tadi, heheee
Untuk lebih jelasnya silahkan sobat blogger langsung saja mempraktekannya (ini ditujukan bagi sobat yang label blognya sudah terindex di Search Engine).
Cukup sekian yang bisa saya bagikan, mudah-mudahan bisa membantu dan bermanfaat. Terimakasih.

Article Information:
Description: Tips Agar Label Langsung Terindex Di Search Engine Google
Reviewer: Viyan Pradita - Itemreviewed: Tips Agar Label Langsung Terindex Di Search Engine Google - Rating: 4.5

Modifikasi Widget Popular Post With Grid Layout

Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang topik ini. Saya ulas lagi disini karena saya awalnya mendapat masalah dalam proses pemasangan kode scriptnya, jadi mungkin postingan saya ini bisa mempermudah sobat blogger yang mengalami masalah dalam menerapkan cara modifikasi popular post ini.
Biar makin jelas dan gamblang neh saya sediakan juga screenshotnya masbro :

Modifikasi Widget Popular Post

Oke, langsung saja kita praktek masbro
1. Login blogger pastinya
2. Pergi ke munu Design > Page Element > Add a Gadget
3. Pilih Widget "Popular Post"
4. Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.

Setting Configure Popular Post

4. Lalu Save.
5. Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates. Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
6. Cari kode (CTRL+F) ]]></b:skin>
Dan tambahkan kode CSS berikut diatasnya:

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);} 

7. Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.
Ini kode script lengkapnya:

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

8. Gantilah kode script diatas dengan kode script berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

9. Terakhir Simpan dan lihat hasilnya.

Tambahan:
Untuk kode CSS bisa sobat kreasikan sendiri, sesuai dengan kreativitas sobat masing-masing.
Sekian dari saya untuk topik pembahasan Cara Modifikasi Widget Popular Post With Grid Layout. Semoga bermanfaat.

Article Information:
Description: Modifikasi Widget Popular Post With Grid Layout
Reviewer: Viyan Pradita - Itemreviewed: Modifikasi Widget Popular Post With Grid Layout Agar Tampilan Makin Keren - Rating: 4.5

Cara Cepat Mendapatkan Sitelink Dari Google

Seperti janji saya kemarin, untuk sedikit berbagi informasi khusunya tentang Seach Engine dan SEO yaitu cara cepat mendapatkan sitelink google. SiteLink, Hadiah Dari Google, itulah yang kemarin sempat saya posting, karna pengalaman demi pengalaman, sedikit banyak saya bisa menulis tentang artikel ini. Sitelink atau taut situs merupakan link istimewa (lain dari yang lain) yang diberikan Google kepada situs web/blog kita. Langsung saja kita bahas satu demi satu tentang cara mendapatkan sitelink google.
Untuk mendapatkan Sitelink dari Google itu susah-susah gampang, banyak yang beranggapan untuk mendapatkan sitelink itu butuh waktu yang cukup lama, dengan kata lain untuk blog itu sendiri harus blog yang sudah lama atau sudah mempunyai banyak umur. Tapi menurut saya pribadi "itu salah" ya, saya bisa menyimpulkan itu karna saya punya bukti, yaitu pada blog saya yang satunya "viyanpradita.com" blog itu saya buat akhir thn 2011, sempat pending dan pindah hosting, termasuk ganti topik. saya mulai lanjut agi pada bulan februari kemarin, dengan hosting dan topik yang berbeda, awalnya blog itu belum mendapatkan sitelink, tapi selang 2bulan dapat sitelink juga dari google.

Lihat buktinya sendiri dengan search di google "viyanpradita", dan ini screenshotnya:

Sitelink Google

Cara Cepat Mendapatkan Sitelink Google:

1. Membuat Blog Lebih SEO Friendly
Sebisa mungkin kita membuat blog kita dipandang lebih oleh google, pastilah sobat sudah tahu apa itu SEO, banyak website-website yang sudah share cara membuat blog lebih SEO Friendly. Dengan mempertajam SEO di blog kita otomatis blog kita akan semakin berkualitas dan friendly dengan search engine google tentunya.

2. Daftarkan Blog Kita ke Google Webmaster Tools (wajib hukumnya).
Ini merupakan tahap yang wajib kita perhatikan, dengan google webmaster kita akan lebih mudah mengontrol perkembangan blog kita. Banyak fasilitas/tools yang tersedia disana, Misal :
Site configuration menyakup Sitemaps, Crawler Acces, Sitelink dll.
Usahakan jangan ada duplikat konten atau duplikat lainnya, karna itu berpengaruh untuk mendapatkan taut situs/sitelink.

3. Gunakan juga Google Analytics
Dengan Google Analytics, kita akan lebih terbantu untuk memonitoring perkembangan blog kita,kita akan lebih mudah melihat naik atau turunya trafik blog kita. karana trafik blog sangat berpengaruh dalam Google memberikan Sitelink. Dan tentunya trafik blog kita selalu dipantau oleh Google Analytics, jadi ini jelas mempermudah kita dalam mendapatkan sitelink dari google.

4. Tingkatkan Trafik Blog
Banyak yang bilang Trafik (jumlah pengunjung blog) merupakan hal yang sangat berpengaruh dalam mendapatkan sitelink. Tapi.. untuk saya tidak begitu percaya :D
Buktinya blog saya juga gak rame-rame amat, tapi tetap dapet sitelink, khususnya untuk blog saya yang satunya viyanpradita.com, jadi kenapa kalian tidak :)

5. Pertahankan Keyword Konten Blog
Minimal kita punya salah satu postingan yang berdiri tegak diatas (peringkat pertama di search engine). Dengan ini google tidak memandang sebelah mata blog kita, dan pastinya akan menarik banyak pengunjung/meningkatkan trafik. Bila perlu ikutilah kontes-kontes SEO (saran)

6. Keep Posting
Nah ini jg masalah saya sendiri, sekarang jarang posting :D
Blog ini "kode blogger" dulunya sering/rajin posting, mungkin karna hal itu jadi cepat mendapat sitelink. Tujuannya yaitu untuk menjaga kualitas SEO blog kita dan tentunya Google melihat blog kita itu rajin posting, pastinya lebih disayank oleh google dunk :D

7. Sabar dan tetap Berdoa
Hehehee... banyak anggapan dan persepti pastinya. Karna tidak diketahui secara pasti bagaimana cara tercepat mendapat sitelink dari google, (tapi para master-master SEO pasti ada yg bisa). Tapi paling tidak dengan pengalamanlah kita bisa lebih tahu dan bisa.

Tambahan :
Kurang lengkap rasanya kalo yang satu ini gak saya share jg, ini cara dan pengalaman saya sendiri,, yaitu usahakan di blog kita itu diperbanyak menu-menunya (menu konten blog). Misal seperti di blog saya ini "kode-blogger" terdapat banyak menu'nya, dan yang pasti mengarah ke link "postingan" yang ada di blog kita.
Saya beri contoh menu konten itu seperti apa, biar jelas tentunya.
Misal di blog ini ada beberapa menu pilihan seperti:
Jasa Pembuatan Adsense | Pasang Iklan | Tips SEO | Daftar Blog Dofollow | Buku Tamu, Dll...
Nah, sudah paham kan dengan maksud saya ??

Semoga bisa menjadi bahan referensi sobat blogger semua.
Sebenarnya masih ada lagi yang ingin saya tulis, tapi ragu masbro, jadi cukup sekian :))
Hanya seperti itu yang bisa saya bagikan untuk masalah Site Link Google , paling tidak dengan berbagi pengalaman dan bertukan wawasan kita akan lebih bisa dan tahu.
Tentunya postingan saya diatas jg dari pengalaman saya pribadi, jadi saya sangat berharap respon dan tanggapan dari sobat blogger dan para master blog untuk mengoreksi dan selebihnya memberi arahan, pastinya untuk membuat lebih baik kedepannya.
Demikian postingan saya tentang Cara Cepat Mendapatkan SItelink Dari Google. Semoga bermanfaat.

Article Information:
Description: Cara Cepat Mendapatkan Sitelink Dari Google
Reviewer: Viyan Pradita - Itemreviewed: Cara Cepat Mendapatkan Sitelink Dari Google - Rating: 4.5

SiteLink, Hadiah Dari Google

Alhamdulillah dapet Sitelink juga dari google. Sebenarnya sudah lama kepingin banget posting-posting again tentang Blogspot, sudah lama juga pingin share kabar ini. Penting gak penting cuman sekedar kabar, kalau kode-blogger.blospot.com dapat sitelink dari mbah google.
Memang agak lama blog ini mendapatkan sitelink, mungkin karna jarang update kali yah!! hehee

Ini neh bla sobat blogger masih ada yang belum tahu apa itu sitelink.




Sedikit tambahan buat baca-baca:

Apa itu SiteLink ??
Sitelink adalah kumpulan beberapa link dari situs atau blog. Sitelink sangat membantu memberi penjelasan lebih tentang suatu web/blog. Dan biasanya sitelink ini akan muncul kalau sobat searching di google dengan mengetikkan nama domain tanpa .(dot)com pada kotak browser sobat.
Sebagai contoh sobat ketik Kode Blogger, dikotak pencarian google, maka hasilnya akan seperti pada contoh gambar diatas.

Apa Kegunaan dari Sitelink itu ??

1. Dengan adanya sitelink, bisa memberi kita dominasi keyword tertentu, artinya posisi teratas kita dengan keyword tertentu akan sulit digeser.
2. Dengan adanya sitelink google menganggap kalau blog kita itu banyak konten-konten yang penting, dan juga termasuk dalam golongan blog yang rajin posting. Hahha.. padahal blog ane jg jarang update :P
3. Menandakan blog yang sudah mempunyai umur, rata2 blog yang mendapatkan sitelink, pasti blog sudah berumur.
4. Menurut para blogger, Sitelink merupakan sebuah gengsi tersendiri bagi para webmaster/blogger itu sendiri. Katanya sih gitu ?? :D
   
5. Dengan adanya sitelink, kita bisa melihat beberapa link konten yang lainnya. (tidak monoton hanya satu konten yang terlihat di search engin (pencarian google)
6. Masih banyak yang blm saya ketahui, coz persepsi masing2 pasti berbeda.. huhuhu

Emm.. apalagi yah, Oia, mungkin sobat blogger pingin tahu bagaimana cara cepat mendapatkan sitelink dari google?? caranya yaitu tunggu postingan saya selanjutnya yah.. Hehehe

Saya berharap semoga temen-temen blogger bisa mendapatkan sitelink juga (dan saya yakin sobat blogger pasti sudah banyak yang mendapatkannya). Coz saya sendiri khususnya untuk kode-blogger itu juga bisa dapat, padahal jarang update, jadi yaa telat deh dapet sitelink dari google.
Sekian dulu dari saya tentang sitelink kode-blogger. \m/

Article Information:
Description: SiteLink, Hadiah Dari Google
Reviewer: Viyan Pradita - Itemreviewed: SiteLink, Hadiah Dari Google - Rating: 4.5

Apa Kabar Blogger !!

Ehmm... Udah lama banget rasanya gak posting-posting neh. Gak tau kenapa semenjak banned masal adsense jadi males ngeblog lagi :))



Pastinya banyak berita ataupun info-info terbaru yang saya lewatkan khususnya di dunia Blog, banyak pula komentar-komentar yang terabaikan, alias belum sempat saya jawab satu per satu.
Sebelumnya saya admin [kode-blogger] meminta maaf buat temen semua yang sudah berkunjung dan meninggalkan jejak ataupun pertanyaan tapi belum sempat saya balas.
Maklum disamping lagi gak muT ngeblog, saya juga udah jarang online, jadi yo mohon dimaklumi masbro. :v

Postingan ini hanya sekedar coretan unek-unek dihati saya, berharap dengan menulis disini, MUT ngeblog saya bisa kembali lagi !! hahhaa...#lebay !!

Okee.. saya rasa cukup coretan saya malam ini, dan semoga saya bisa dapet MUT ngeblog lagi !!
Salam Blogger Indonesia !!

Article Information:
Description: Apa Kabar Blogger !!
Reviewer: Viyan Pradita - Itemreviewed: Apa Kabar Blogger !! - Rating: 4.5

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

Coba Antarmuka Blogger Yang Diperbarui

Asslamualaikum, Alhamdulillah masih bisa bertemu dengan lebaran lagi. Karna masih dalam suasana lebaran, tidak lupa saya atas nama kode blogger, mengucapkan minal aidin wal faidzin, mohon maaf lahir dan batin. Nah kali ini saya akan memposting sebuah artikel yaitu tentang tampilan terbaru dasbor blogspot. Inilah kemajuan blogger.com dalam hal tampilan barunya "Coba antarmuka Blogger yang diperbarui" sedikit saya kupas disini tentang tampilan baru dasbor blgger.com.

Tampilan baru dasbor blogger.com

Yang pasti banyak perubahan, dan saya kira lebih ringan diakses. Dan makin settingannya-pun makin lengkap dan mudah, sekilas hampir mirip seperti di Wordpress. Tapi masih ada beberapa filture yang masih dalam tahap penyelesaian dan pengembangan. Karena saya melihat masih banyak menu yang belum ada di tampilan baru tersebut.Nah...saya kira sobat blogger juga pastinya sudah banyak tahu, bahkan tahu lebih tentang hal ini.Bila penasaran silahkan langsung saja dicoba.
Saya jelaskan juga disini, bagaimana cara merubah tampilan dasbor blogger dengan tampilan yang baru.

cara merubah tampilan dasbor blogger dengan tampilan yang baru

Lihatlah gambar diatas, klik pada "Coba Antarmuka Blogger Yang Diperbarui" Atau bisa langsung login kesini: http://draft.blogger.com/home
Dan selamat, sobat sudah bisa menikmati filture tampilan dasbor terbaru dari blogspot. Saya kira cukup sekian yang saya sampaikan, silahkan beri tanggapaanya tentang filtur terbaru ini.Salam Kode Blogger.

Article Information:
Description: Coba Antarmuka Blogger Yang Diperbarui
Reviewer: Viyan Pradita - Itemreviewed: Coba Antarmuka Blogger Yang Diperbarui / Tampilan Blogger yang Baru - 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

Search Box Simpel dan Keren Untuk Blogspot

Search Box Simpel dan Keren Untuk Blogspot, dari judulnya saja sobat pasti sudah tahu apa yang kiranya akan saya share kali ini. Setelah kemarin saya posting tentang Cara Membuat Link Nudging Dengan jQuery, saya melanjutkan untuk melengkapi koleksi tips dan trik di blog saya ini. Search Box (kotak pencarian di blogspot) pastinya sobat sudah tidak asing lagi mendengarnya, jadi saya rasa tidak perlu panjang lebar saya menjelasakan kembali tentang apa dan fungsi dari Search Box/kotak pencarian di blogspot ini. Oia, dibilang simpel karena kita hanya menggunakan kode CSS saja dalam membuatnya, pastinya gak ribet deh.
Dan agar lebih jelasnya saya sertakan juga contoh demo/screenshot dibawah ini:

Search Box Simpel dan Keren Untuk Blogspot

Langsnung ke TKP, dan simak langkah-langkah cara membuat Search Box Simpel dan Keren Untuk Blogspot:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Page Element/Elemen Laman
4. Kemudian Add Gatget dan pilih HTML/Javascript, dan masukan kode search box dibawah ini:

Style 1

><style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb4atBhsWo6BKPTCzNyRwwjtWt-crimjXAp2BaBGUPlYizeLcYecrhtS8UwONbM_IpUXIQuSDmHd9wFQZeBoEI3EbLgLq9BfS4cTJSMKxRhWjVfC716pHbN3KUgywrqA7NWB9wD14S2sY/s320/kode-blogger_searchbox1.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 2

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZA_9AJO0fFrrBrYyY1s8vGWiESrBRmvLTP-UQczRNHbGHCEL0Ayd4P8BiUMshZojxNlT5MsiH17QBPYmqiuu_rDcv09cKAFWZg19UW9zFPrM4dCDwYWplkNH13NycegZAqCjXLy7kXdc/s1600/kode-blogger_searchbox2.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 3

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRp3JJZsImfufaPlRrtqxZSJ8j9vwv7_dNpgd-hAVMTIcXrrkBrB5DNBy7Fh35CO-NbMGdnWMys-FN_gfItvNNG0yRrmZE4ElWSxDuKQsf2ynRPzYCb70VHufl9R7bpJmUJhSzKJVcBxg/s1600/kode-blogger_searchbox3.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 4

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyAW_0gji-nlJiLGXP2PeddD20EOc0MxlMB6NGd4xOCtUk9D9OGKOcN0O911fq87cJTWayPxKY7gsoLT6ljailUcIvlotBaKEG3xemEQNDXhlgyAip5ZYH-4SZ_4L-aQ6HsvKc__epUg8/s1600/kode-blogger_searchbox4.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 5

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_nxyEOlzCsOqLjG0MKEC7AN4-d_iZTkwFzj-E_vMc10TsP0Icedl_L24zfbLSwuIiixuL-6rp1mtSw_tPprnoJyiU78LA79dL6FOfye2_ETJ91UOWKr0iRXDWlUdiQP7EI23eM1kvXjY/s1600/kode-blogger_searchbox5.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Style 6

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfi8mIwC1IM8hwSub_NUPgmYB5qBkgDcz4ULnQNyWo0_K2FIm02W4vVyu9FJV1bIPE3_W61gAetnODCVwZhxsBKhwe8Lam7ce5bFf35EsKoKwfJwCBJrIs0OniiutCxvVNcWjMksjw6Ec/s1600/kode-blogger_searchbox6.png) no-repeat scroll center center transparent;width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>


Sip... Search Box Simpel dan Keren Untuk Blogspot diatas hanyalah beberapa saja yang bisa saya share, pastinya ada lebih banyak lagi diluar sana.
Semoga Bermanfaat.

Description: Search Box Simpel dan Keren Untuk Blogspot
Reviewer: Viyan Pradita - Itemreviewed: Search Box Simpel dan Keren Untuk Blogspot - Rating: 4.5