Cara membuat robots.txt untuk mengatasi duplicate content pada wordpress

Berdasarkan pengalaman saya sendiri,blog wordpress sangat rentan sekali untuk  timbul duplicat content.Duplicate content yang saya maksud adalah seperti duplicat metatag atau duplicate titletag.Hal ini hanya bisa diketahui jika kita mengecek  di www.google.com/webmaster > Optimization >HTML Improvements.
Jika memang ada terjadi duplicat content,maka akan dilaporkan secara mendetail disana.Dan jika tidak ada masalah dengan duplicate content,akan ada pesan seperti ini:

Last updated May 28, 2012
We didn't detect any content issues with your site. As we crawl your site, we check it to detect any potential issues with content on your pages, including duplicate, missing, or problematic title tags or meta descriptions. These issues won't prevent your site from appearing in Google search results, but paying attention to them can provide Google with more information and even help drive traffic to your site. For example, title and meta description text can appear in search results, and useful, descriptive text is more likely to be clicked on by users.

Duplicate content terjadi karena ada satu halaman blog dengan dua alamat URL yang berbeda.Atau banyak halaman yang berbeda,tetapi memilkiki title yang sama.
Saran saya supaya Selalu rajin memantau kesehatan  blog kamu diwebmaster tool agar segera bisa tertangani dan tidak sampai menumpuk hingga puluhan bahkan ratusan.
Banyaknya duplicate content pada blog akan menjadi kurang baik blog dimata mesin pencari google ,karena kontent blog akan dianggap tidak berkualitas dan bahkan menyesatkan pembaca.
Tentu hal Ini tidak baik bagi pemeringkatan blog di result mesing pencari google,karena algoritma mesin pencari google lebih menyukai kontent yang unik untuk menempati urutan result atas.
Kesimpulan saya, hindari terjadinya duplikat content ini seminimal mungkin.Seperti yang saya katakan diawal paragraf ini bahwa wordpress(self hosting) lebih rentan terjadi duplicate content,namun jangan khawatir,karena ada masalah pasti ada jalan keluar.
Untuk mengatasi agar tidak terjadi duplicate content diblog  WP,kamu bisa memasang plugin gratis yang bernama All in One SEO Pack , atau sekaligus juga memasang file robots.txt.
Dalam postingan ini ,saya akan share pengalaman saya yaitu bagaimana cara membuat  robot.txt.

Cara mengatasi duplicate content dengan membatasi halaman dengan robots.txt pada blog wordpress.

Pada intinya ,file robots.txt ini berisi perintah khusus untuk membatasi crawl mesin pencari agar mengindex ataupun tidak kepada dokumen html tertentu .
Pada saat crawl mengunjungi sebuah situs/blog,maka yang dicari pertamakali adalah file robots.txt sebelum mengcrawl dokumen index/halaman index blog.

Contoh penulisan perintah robots.txt
Perintah Disallow adalah perintah untuk tidak mengindex page tersebut

Disallow: /author/admin/page/*/

Perintah Allow adalah untuk memerintahkan mengindex page tersebut

Allow: /*

Cara pemasangan file robots.txt dan isi perintahnya secara umum jika untuk blog wordpress.
(berikut ini bukan sekedar contoh,namun ini juga yang saat ini saya pakai di blog WP saya)

User-agent: Googlebot
Disallow: /wp-content/
Disallow: /wp-admin/
Disallow: /info/
Disallow: /author/admin/page/*/
Disallow: /*/page/
Disallow: /page/*/
Disallow: /*/*/page/*/
Disallow: /wp-includes/
Disallow: /wp-
Disallow: /*/feed/
Disallow: /trackback/
Disallow: /plugins/
Disallow: /cgi-bin/
Disallow: /?random/
Disallow: /author/
Disallow: /tv/
Disallow: /css/
Disallow: /img/
Disallow: /*/comment-page-*
Allow: /wp-content/uploads/

User-agent: *
Disallow: /wp-content/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-
Disallow: /*/feed/
Disallow: /trackback/
Disallow: /plugins/
Disallow: /adlogger/
Disallow: /cgi-bin/
Disallow: /?random/
Disallow: /author/
Disallow: /author/admin/page/*/
Disallow: /*/page/
Disallow: /page/*/
Disallow: /*/*/page/*/
Disallow: /tv/
Disallow: /css/
Disallow: /img/
Disallow: /*/comment-page-*


# Google Image
User-agent: Googlebot-Image
Allow: /*

# Google AdSense
User-agent: Mediapartners-Google*
Disallow:
Allow: /*

# digg mirror
User-agent: duggmirror
Disallow: /

Sitemap: http://www.namablogmu.com/sitemap.xml
Copy dan paste code robots.txt diatas kedalam notepad dengan nama robots.txt lalu upload kedalam direktori hosting dimana CMS wordpress kamu terinstall.Sehingga nantinya file robots.txt itu berada sama sama didalam folder www bersama dengan file file wordpress lainnya.
Cara lain untuk membuat file robots.txt bisa juga langsung melalui c-Panel hosting, direktori > created new file > kasih nama dengan robots.txt > edit > masukkan code diatas > Save.
Untuk memastikan apakah robots.txt sudah terpasang dengan baik atau tidak,cobalah dipastikan dengan cara mengakses alamat  URLnya yaitu http://www.namablogmu.com/robots.txt.Jika memang sudah benar maka code robots.txt diatas akan tampil di browser kamu.

Hanya Untuk melengkapi biar afdol (jika belum),install lah plugin google sitemap xml ,cari saja melalui add new plugin di admin area wp kamu.Plugin ini berguna untuk membuat file sitemap.xml secara otomatis.Jangan lupa jika sudah selesai menginstal plugin ini untuk meng add sitemap blog kedalam www.google.com/webmaster.

Cara memasang related post wordpress tanpa plugin

Memasang related posts pada blog WordPress akan sangat mudah dilakukan jika pakai plugin,istilahnya tinggal colok saja maka sudah selesai.Namun tahukah kamu bahwa semakin banyak plugin maka resource yang dibutuhkan blog kamu ketika diakses akan semakin besar.Terutama plugin related post ini,banyak jasa shared hosting  menghimbau untuk menggunakan cara selain plugin.Mungkin tidak begitu terasa jika lalulintas blog kamu masih rendah,akan tetapi tujuan kebanyakan blogger seperti kita adalah target lalulintas yang tinggi.
Namanya saja shared hosting atau hosting berbagi (kalau tidak salah) :D yaitu satu server yang dipecah pecah untuk banyak domain.Jadi wajar saja jika sang pengusaha teriak terik jika blog kamu terlalu banyak memakan resource dan mengalahkan yang lain.Lainlagi jika blog kamu menggunakan dedicated sserver atau VPS pribadi khusus untuk sendirian.

Baiklah,jika blog wordpress kamu masih nitip server kepada shared hosting ada baiknya mengganti plugin related post ini dengan yang bukan plugin.Caranya sebenarnya juga sama mudahnya,hanya tinggal copas codenya selesai.
Diharapkan akses blog menjadi lebih ringan lagi dengan memasang related post tanpa plugin.

Caranya ,login kedalam admin area blog kamu > Appearance > Editor

Setelah kamu sudah berada didalam halaman  Editor ,kamu akan melihat barisan code didalam sebuah text area,code tersebut adalah style.css.Pada bagian bawah sendiri didalam barisan code css tersebut,pastekan code berikut;

#relatedpost a{font-size: normal;}
#related_posts ul li:hover{background : #f1f1f1 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzwh9rTOxa84tZIom9C2heWL5NCcCX3j95aSjLkaakUwN7OKeMTEk37D2NWqeXjSw2JeokmXs4BVurID9oHR0nucsJsXReLxUqbXoQdpj3Rnnpe2R6S0bFRAHYHPKzmzhIBf7ye1PfD8/") no-repeat center left;}
#related_posts h4{font-size: 15px;font-weight: bold;color: darkred;border-top: 1px solid #aaa;}
#relatedcontent { overflow:auto; margin:0px 0px;}
#relatedthumb img{ width:60px;height: 60px;}
#related_posts ul li{list-style: none;background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzwh9rTOxa84tZIom9C2heWL5NCcCX3j95aSjLkaakUwN7OKeMTEk37D2NWqeXjSw2JeokmXs4BVurID9oHR0nucsJsXReLxUqbXoQdpj3Rnnpe2R6S0bFRAHYHPKzmzhIBf7ye1PfD8/") no-repeat center left;margin:0;padding:5px 20px;border-bottom: 1px dotted #ccc;}
#related_posts ul li a{text-decoration:none;display:block;}

Simpan dengan klik button update file!

Jika sudah berhasil diupdate,sekarang perhatikan pada navigasi disamping kanan.Temukan tautan Single Post /single.php.Single.php adalah barisan code yang berfungsi untuk menampilan konten blog pada halaman postingan.Tepatnya buka single.php dengan tujuan untuk meletakkan code related post wordpress tanpa plugin ini tepat dibawah artikel.

Setelah berada di halaman editor single.php,cari code berikut atau semacamnya

<?php the_content('Read more...'); ?>

Kemudian pastekan code PHP berikut tepat dibawah/setelah nya.

<!-- start related post -->
    <?php $orig_post = $post;
    global $post;
    $categories = get_the_category($post->ID);
    if ($categories) {
    $category_ids = array();
    foreach($categories as $individual_category) $category_ids[] = $individual_category->term_id;
    $args=array(
    'category__in' => $category_ids,
    'post__not_in' => array($post->ID),
    'posts_per_page'=> 15, // Number of related posts that will be shown.
    'caller_get_posts'=>1
    );
    $my_query = new wp_query( $args );
    if( $my_query->have_posts() ) {
    echo '<div id="related_posts"><h4>Baca juga artikel yang terkait:</h4><ul>';
    while( $my_query->have_posts() ) {
    $my_query->the_post();?>
    <div id="relatedpost">
    <li>
<a href="<? the_permalink()?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    </li>
    </div>
    <?
    }
    echo '</ul></div>';
    }
    }
    $post = $orig_post;
    wp_reset_query(); ?>
<!-- end related post -->

Update file single.php!
Keterangan: Lihat pada sourcecode related post diatas,perhatikan angka 15 yang berwarna merah,itu adalah jumlah artikel terkait yang ditampilkan.Ubahlah jika kamu menginginkan lebih banyak atau sedikit.
Selesai!

Cara membuat smooth scrolling blogspot

Smooth scrolling adalah suatu fitur navigasi blog yang berguna untuk kembali ke atas dengan sekali tekan tombol pada halaman blog dengan lembut (smooth).Untuk fungsi kembali keatas "smooth" ini akan menggunakan javascript yang cukup sederhana dan sangat mudah diterapkan.
Dengan fungsi smooth scrolling,maka blog anda akan semakin kelihatan prof layaknya situs situs yang sudah ternama.

Kamu tertarik?.......ikuti lagkah langkahnya berikut:

Cara pemasangan smooth scrolling untuk template blog blogger

Pertama,masuk kedalam edit HTML template blogspot kamu lalu paste code CSS berikut sebelum tag  ]]</b:skin>
#go-to-top {
padding:1px;
position:fixed;
bottom:0px;right:0px;
cursor:pointer;
}
#go-to-top img
{
height:40px;
width:35px;
border:none;
padding-right:5px;
}

Kemudian pastekan javascriptnya berikut sebelum tag </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'></script>
<script language='javascript' type='text/javascript'>
$(document).ready(function(){
    // hide
    $(&quot;#go-to-top&quot;).hide();
      // fade in
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() &gt; 100) {
                $(&#39;#go-to-top&#39;).fadeIn();
            } else {
                $(&#39;#go-to-top&#39;).fadeOut();
            }
        });

        // scroll to top
        $(&#39;#go-to-top img&#39;).click(function () {
            $(&#39;body,html&#39;).animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});
</script>

Catatan: jika code <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js' type='text/javascript'></script> sudah ada pada template kamu,maka tak perlu dipakai.

Masih pada edit HTML,sekarang temukan tag </body> dan pastekan code berikut ini sebelum </body>

<a href='#' id='go-to-top'><img alt='Back to Top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDVZ0EMSlDibRQlBUkW0-loi-CICRMb8PS6ufOa3FhVQU6FQoMUjpWL-rYj4JkFIF6ad_w-aMivcqwgURV1bv3VYU0x0biLZxoG_pRismtj5SOtNHr2mjyknI5GYFOqOP8EP5M-0d04iJ/'/></a>

Simpan template kamu!

Linkwithin hanya tampil dihalaman postingan

Linkwithin adalah sebuah situs pihak ketiga penyedia fungsi random related post dengan thumbnail untuk sebuah blog.

Related post dengan thumbnail dari linkwithin ini banyak diminati para blogger untuk melengkapi navigasi blog mereka.Keistimewaan dari linkwithin ini selain ringan dan tidak terlalu ngasih beban loading blog,artikel terkait yang ditampilkan adalah acak(random) setiap kali direload.
Dengan fungsi random ini ,kesempatan postingan yang sudah lama untuk dikunjungi orang semakin besar.

Navigasi semacam ini sangat dibutuhkan oleh blog, karena sangat penting untuk meningkatkan pageviews tiap halaman blog yang ada.
Kamu tertarik,jika iya silahkan teruskan membaca.Sebab ini special tips untuk menampilkan widget random related post dari linkwithin di blog kamu.

Cara pemasangannya sangat mudah,hanya tinggal registrasi dan melalui beberapa step step yg ada.Setelah kamu melakukan wizard instalasinya ,maka related post linkwithin  akan otomatis muncul dibawah setiap artikel.
Jika kamu tertarik dan belum pernah menggunakan fasilitas ini,silahkan registrasi gratis dan follow step di http://www.linkwithin.com/

Namun,terkadang sebagian blogger tidak suka related random thumbnail linkwithin ini muncul juga dimana mana selain dihalaman postingan.Walaupun menggunakan autoreadmore,related post tetap otomatis muncul dibawah semua artikel.Efek sampingnya halaman homepage blog akan menjadi sangat berat,apalagi jika jumlah postingan yang ditampilkan semakin banyak.

Bagi kamu yang menginginkan linkwithin hanya muncul dihalaman postingan saja,maka beginilah caranya (untuk blogspot).Hal inilah yang saya sebut tadi dengan "Special".

Pertama dasboard > masuk halaman Rancangan > lalu cari widget linkwithin yang terinstal otomatis didalam HTML/javascript widget blogspot.

Klik edit pada widget HTML/javascript dimana script linkwithin itu berada > copy dan pastekan kedalam notepad dan simpan dulu.

Code dari linkwithin tersebut seperti ini;

<script>
var linkwithin_site_id = 1221271;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>


Setelah script tersebut kamu simpan pada notepad,hapuslah widget linkwithin tadi.Kemudian langsung masuk ke halaman Edit HTML dan centang expand template widget.

Sekarang cari tag </body> lalu pastekan code linkwithin tadi yang kamu simpan didalam notepad tepat diatas tag </body> tersebut.Eitt,,,,masih belum selesai,jangan disimpan dulu sebelum kamu menambahkan tag kondisional dari blogger.

Jika sudah ditambahkan maka lengkapnya akan seperti dibawah ini,code warna merah itulah tag kondisional yang perlu ditambahkan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
var linkwithin_site_id = 1221261;
</script>
<script src="http://www.linkwithin.com/widget.js"></script>
<a href="http://www.linkwithin.com/"><img src="http://www.linkwithin.com/pixel.png" alt="Related Posts Plugin for WordPress, Blogger..." style="border: 0" /></a>
</b:if>


Simpan template kamu!
DONE!

Keterangan: Code yang berwarna merah itulah yang berfungsi agar related random posts linkwithin hanya tampil dihalaman postingan saja.Tahukah apa code tersebut?,,,Namanya adalah conditional tag dari blogger yang berguna untuk mengkondisikan elemen elemen tertentu untuk ditampilkan.

Cara paling jitu agar artikel tidak bisa dicopypaste

Budaya copas atau copypaste blog sudah ada sejak mulai maraknya dunia ngeblog.Sebagian blogger banyak yang tidak senang tindakan seperti ini,apalagi copas mentah mentah bahkan tanpa memberikan sumbernya.Lebih kesal lagi jika blog yang copas justru mendapat posisi bagus di mesin pencari,sedangkan yang dicopas justru ada di belakangnya.
Sekedar himbauan saja bagi yang masih mencari artikel dengan copas mentah mentah,lebih baik diedit ulang atau disusun dengan bahasa sendiri agar menjadi lebih unik.Dengan cara demikian,blog anda masih mendapat nilai dimata mesin pencari agar tidak kena sensor.
Berikut bagi kamu yang tidak suka blognya dicopas,ada cara yang lumayan aman sehingga kemungkinan dicopas sangat kecil.Pendek kata tidak bisa dicopas lagi baik dengan ctrl +c + ctrl+V ,matikan javascript browser.
Agar blog benar benar tidak bisa dicopas,harus memiliki 3 perlindungan khusus terhadap bagian khusus pula kwakkwakkwak...
Langkah pertama
Cari tag <body> didalam template HTML blog kamu,setelah ketemu maka ganti dengan code berikut.

<body oncontextmenu='return false;' onkeydown='return true;' onmousedown='return true;'>
Dengan code diatas blog kamu sudah tidak bisa diklik kanan agar computer  mendapat opsion. Namun jika javascript browser dimatikan,ternyata klik kanan bisa berfungsi artinya blog masih bisa dicopas.Maka dari itu kamu perlu melanjutkan kepada langkah kedua berikut.
Langkah kedua
Cari tag </body> didalam template blog kamu kemudian pastekan code berikut tepat diatasnya:

<noscript>
    <div id="js-message">Anda harus mengaktifkan JavaScript browser untuk melihat halaman ini,aktifkan dulu lalu <a expr:href='data:blog.postUrl'>Klik disini untuk melanjutkan!</a></div>
</noscript>
Paste code CSS berikut sebelum tag ]]</b:skin>

#js-message {position:fixed !important;position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:999;background-color:black;padding-top:120px;font:bold 40px Arial,Sans-Serif;color:red;text-align:center;
}

Sekarang skenarionya apabila javascript browser dimatikan,maka akan muncul sebuah pesan "Anda harus mengaktifkan JavaScript browser untuk melihat halaman ini,aktifkan dulu lalu Klik disini untuk melanjutkan!" jadi yang muncul bukan halaman postingan.
Dengan cara tadi otomatis artikel tetap  tidak akan bisa dicopas,lha wong yang muncul halaman yang berisi peringatan saja.

Simpan template kamu!

Sampai disini ternyata artikel masih bisa dicopas,jika si tukang copas tadi masih belum puas yaitu dengan cara melalui feed blog.

Langkah ketiga
Lalu,setel feed blogspot kamu dengan cara masuk setelan > feed situs > izinkan feed blog > pada pilihan dropdown pilih "singkat" lalu simpan.

Saya kira sekarang si tukang copas sudah malas untuk mencari cara lain untuk copas blog kamu lagi.
Benarkah sudah benar benar tidak bisa di copy paste?,,,,,,
Jawabannya: MASIH BISA!..........
Lho kok,,katanya sudah sangat aman?.........

Tidak ada cara yang benar benar aman,ada saja jalan lain.Disini kita hanya berusaha untuk meminimalisir penggunaan caranya saja.Walaupun masih bisa,kemungkinan para copaster malas untuk menembus  4 lapisan tersebut.
Dengan Ctrl+U ternyata masih bisa melihat sumber code halaman blog,kemudian menyeleksi sebagian yang ingin dicopas.

Jika kamu membaca artikel sampai dibagian ini,saya yakin kamu adalah orang yang sangat antusias untuk selalu rajin belajar menambah wawasan.

Jadi,sekarang kamu bukan saja bisa meminimalisir kemungkinan artikel blog kamu dicopas,namun juga bisa dengan mudah memasuki sumber artikel untuk dicopas walaupun sudah dilindungi sampai tujuh lapis.
Sebenarnya kalu copaster mau sadar,artikel copas sangat sulit untuk bersaing memperebutkan serp untuk blog baru.Dan untuk blog yang sudah banyak pengunjung ,artikel copas justru akan memperpuruk blog tsb keposisi bawah.

Ingat!,,jangan copas..........lebih baik menulis ulang dengan bahasa sendiri (rewrite) masih bisa menjadi lebih baik.

Okelah,sampai disini dulu tips tentang melindungi artikel hingga tujuh lapis.

Happy Blogging!

Cara memasang related post dibawah postingan

Setelah postingan kemarin yaitu Cara memasang related post di sidebar,kali ini saya share bagaimana jika ingin menerapkan related post pada blogger ini seperti pada umumnya yaitu dibawah postingan.
Sebenarnya source code yang digunakan sama,hanya saja peletakan generatornya saja yang berbeda.Artikel terkait berikut saya jamin pasti keren,simple dan tidak terlalu membebani loading blog.

Cara pemasangan script related post ini kamu bisa ikuti langkah mudah berikut.

Login > Rancangan >edit HTML > centang expand template widget (tampilan blogger lama),jika memakai tampilan blogger baru pilih option > Template > edit HTML >centang expand template widget.

Paste source code javascript berikut sebelum tag </head>
<script src='http://artikel-luarbiasa.googlecode.com/files/RLPproject.js' type='text/javascript'/>


Langkah berikutnya atau yang kedua,paste code CSS berikut sebelum code ]]</b:skin>
#related-posts {
overflow: hidden;
width : 550px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
margin-bottom:10px;
}
#related-posts h3 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts ul { border : medium none;
margin : 10px;
padding : 0;
}
#related-posts a:hover{
text-decoration: underline
}
#related-posts ul li { display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMzwh9rTOxa84tZIom9C2heWL5NCcCX3j95aSjLkaakUwN7OKeMTEk37D2NWqeXjSw2JeokmXs4BVurID9oHR0nucsJsXReLxUqbXoQdpj3Rnnpe2R6S0bFRAHYHPKzmzhIBf7ye1PfD8/) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}

Sebelumnya kamu cari dulu tag <data:post.body> urutan yang kedua,maksudnya biasanya tag tersebut ada 2 di dalam template.Jadi cari yang kedua,atau bisa juga kamu paste setelah <p class='post-footer-line post-footer-line-1'>.Gunakan CTRL+F untuk mencari tag tag diatas.
Kalau sudah ketemu,paste code related post berikut persis setelahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<h3>Artikel terkait: </h3>
<b:loop values='data:post.labels' var='label'><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Keterangan: Lihat angka 5 yang saya kasih warna merah,itu adalah jumlah artikel terkait yang ditampilkan.Rubah sesuai dengan keinginan kamu.

Simpan template Kamu!

DONE!

Cara memasang related post di sidebar

Pada umumnya related post (artikel terkait) itu dipasang setelah artikel,namun kadang kurang disukai karena page blog akan terlalu memanjang kebawah.Jika kamu memiliki selera menampilkan related post pada sidebar blog kamu ,boleh memakai cara yang sederhana dan mudah berikut ini.
Ingat aplikasi related post ini untuk blogspot/blogger lho,kalau di wordpress mungkin ada caranya tersendiri.
Demo gak usah jauh jauh,saya pakai juga diblog ini kok,lihat disebelah! :p

Berikut langkah langkahnya memasang artikel terkait di sidebar blog blogspot.

Buka rancangan > edit HTML > Cari kode </head> lalu paste source code javascript berikut diatasnya.

<script src='http://artikel-luarbiasa.googlecode.com/files/RLPproject.js' type='text/javascript'/>

Lalu cari code berikut ini dengan CTRL+F agar cepat dan mudah

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>

Jika sudah ketemu seperti diatas Lalu cari angka 15 atau yang saya kasih warna merah,itu adalah jumlah list artikel terkait yang ingin kamu tampilkan.Ubah lah sesuai dengan keinginan kamu.

Simpan template!

Masih ada lagi yang terakhir,kalau template sudah disimpan lalu masuklah kedalam Design/Rancangan > Add new widget > HTML/javascript > pastekan code berikut dan kasih judul artikel terkait atau apalah..

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

Simpan widget!

DONE!

Cara mudah membuat navbar menu dropdown

Navbar atau alat navigasi pada sebuah blog, ada beberapa jenis dan sistem yang bisa dipakai.Jenis navigasi yang umumnya banyak  dipakai adalah jenis daftar horisontal biasa,horisontal dropdown,horisontal dropdown bertingkat,vertical biasa ataupun vertical bertingkat.


System dari codenya bisa menggunakan CSS murni dan bisa juga ditambahin fungsi javascript untuk mendapatkan efek tertentu seperti fade out,smooth dan lainnya.
Banyak sekali model menu bar ini yang bisa dikreasikan dengan javascript,namun pakailah metode sesuai dengan kebutuhan pokok blog anda.
Sesuaikan dengan desain dari template,misalnya template anda berukuran lebih sempit namun ingin menambahkan daftar menu yang lebih banyak maka anda bisa memilih menudropdown atau menu dropdown bertingkat.

Baiklah,disini saya akan menambahkan satu masukkan untuk anda yaitu cara membuat menu dropdown horizontal dengan jQuery (metode baru dalam pemakaian javaScript).
Cara ini tergolong cara yang paling sederhana dan mudah,namun terkesan elegan untuk hasil akhirnya.

Syarat untuk memakai system jQuery ini salah satunya adalah dengan menambahkan suatu framework yang dikembangkan oleh jQuery.

Cara menambahkan menubar dropdown ala jQuery
Pertama  tambahkan dulu source jquery berikut kedalam template blogspot anda sebelum tag </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">

Catatan: Jika template anda sudah terdapat source jQuery ini,maka tidak perlu ditambahkan lagi.Itulah salah satu keistimewaan jQuery,jika ingin menambahkan fungsi yang lain tinggal menambahkan sedikit code saja (plugin jQuery).

Langkah yang kedua adalah menambahkan plugin  jQuery yang berfungsi sebagai fungsi dropdownnya.

Paste plugin jQuery  berikut sebelum tag </head> atau sebelum tag </body>

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function () {
    $('.menudd li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(200);
    }, function() {
        $(this).children('ul').slideUp(200);
    });
});
//]]>
</script>

Langkah yang ketiga tambahkan style dari menu dropdownnya sebelum code ]]</b:skin>

.menudd{font:normal 14px;line-height:normal;text-transform:none;margin:0;padding:0px 0px;color:white;text-decoration:none;text-align:left}
.menudd ul{border:1px solid #536FA7;background-color:#3057A5;height:30px;line-height:30px;margin:0;padding:0px 0px}
.menudd li{list-style:none;margin:0px 0px;padding:0px 0px;color:white;float:left;display:inline;position:relative}
.menudd li a{display:block;margin:0px 0px;padding:0px 15px;color:white;text-decoration:none;font-weight:bold;line-height:30px;outline:none;border-left:1px solid #536FA7;border-right:1px solid #3B4D72}
.menudd li a:hover{background:#394F7B}
.menudd li ul{position:absolute;z-index:10;left:0px;top:100%;height:auto;margin:0px 0px;padding:0px 0px;width:200px;display:none}
.menudd li ul a{border-left:none;border-right:none;border-bottom:1px dotted #6F80A1;display:block}
.menudd ul li a:hover{background:#394F7B}
.menudd li ul li{float:none;display:block;width:auto}
.menudd li ul ul{top:0px;left:100%}
.menudd li a:focus{background-color:#4B67A1;border-left-color:#777;border-right-color:#555}
.menudd ul li a:focus{background-color:#4B67A1;border-top-color:#777;border-bottom-color:#555}
.menudd li a:hover,.menudd li:hover > a{background-color:#4B67A1}


Catatan: Anda bisa merubah style dengan warna atau gaya CSS kesukaan anda.

Langkah Yang terakhir pasang kerangka menu navigasi dropdown berikut kedalam template anda.
Anda bisa menempatkan kerangka menu navigasi dropdown ini sesuai dengan keinginan,misalnya dibawah header.Berikut kerangkanya;

<div class='menudd'>
    <ul>
        <li><a href='#'>HOME</a></li>

        <li><a href='#'>MENU1</a>
            <ul>
                <li><a href='#'>SubMENU1 Satu</a></li>
                <li><a href='#'>SubMENU1 Dua</a></li>
                <li><a href='#'>SubMENU1 Tiga</a></li>
                <li><a href='#'>SubMENU1 Empat</a></li>
                <li><a href='#'>SubMENU1 Lima</a></li>
            </ul>
        </li>
        <li><a href='#'>MENU 2</a>
            <ul>
                <li><a href='#'>subMenu Satu</a></li>
                <li><a href='#'>subMenu Dua</a></li>
                <li><a href='#'>subMenu Tiga</a>
                    <ul>
                        <li><a href='#'>submenu Tiga Satu</a></li>
                        <li><a href='#'>submenu Tiga Dua</a></li>
                        <li><a href='#'>submenu Tiga Tiga</a></li>
                        <li><a href='#'>submenu TIga Empat</a></li>
                        <li><a href='#'>submenu Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>MENU 3</a></li>
                <li><a href='#'>MENU 4</a></li>
            </ul>
        </li>
        <li><a href='#'>MENU 5</a>
            <ul>
                <li><a href='#'>Submenu 5 Satu</a></li>
                <li><a href='#'>Submenu 5 Dua</a></li>
                <li><a href='#'>Submenu 5 Tiga</a></li>
                <li><a href='#'>Submenu 5 Empat</a></li>
                <li><a href='#'>Submenu 5 Lima</a></li>
            </ul>
        </li>
    </ul>
</div>


Kemudian masukkan link link yang anda inginkan  kedalam kerangka tersebut.

Terakhir simpan template anda!
Catatan: disaat mengedit kerangka menu,jangan sampai ada code yang terhapus karena template akan error dan tidak akan diterima oleh blogger.

Cara menghilangkan beranda diblog

Menghilangkan beranda diblog yang saya maksud adalah link dibawah artikel dengan achor text "Beranda".Banyak alasan kenapa kita harus menghapus link beranda pada bagian bawah halaman postingan blog blogger ini.

Jika kamu menginginkan link beranda tersebut ditiadakan,begini caranya:

Masuk ke edit HTML > centang expand template widget dan jangan lupa backup template dulu.
Lalu temukan sebaris code seperti dibawah ini,gunakan CTRL+F supaya lebih mudah.

<b:if cond='data:blog.homepageUrl != data:blog.url'>
      <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      <b:else/>
      <b:if cond='data:newerPageUrl'>
        <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
      </b:if>
    </b:if>
Lihat pada code yang saya kasih warna merah,hapuslah code yang berwarna merah tersebut. Sekarang simpan template kamu,lalu coba buka halaman postingan dan lihat  bagian bawah. Pastikan bahwa link beranda pada halaman blog kamu sudah tidak ada,semoga berhasil!

Cara membuat blog wordpress

Blog wordpress disini adalah wordpress versi self hosting yaitu yang menggunakan CMS (Content Management System) open source yang dikembangkan oleh wordpress.org.

Versi lainnya dari blog  wordpress adalah blog wordpress gratis dari wordpress.com,dan ini sangat mudah sehingga tidak perlu dibahas lagi.Jika kamu marasa malas menghosting blog sendiri kamu bisa bikin di wordpress.com,namun kamu harus membayar agar mendapat fitur yang lebih banyak.

Menggunakan CMS wordpress hosting sendiri bisa menjadi pilihan jika kamu ada dana untuk blog kamu.Dana untuk membayar sewa hosting sekaligus dana untuk sewa domain yang harus diperpanjang setahun sekali.Saya tidak menganjurkan hosting gratisan,namun tidak masalah jika hanya untuk pembelajaran saja.

Banyak keistimewaan jika kamu bikin blog wordpress self hosting,diantaranya;

• Wordpress adalah CMS yang paling banyak digunakan dan paling mudah.
• Wordpress adalah CMS opensource sehingga kamu bebas bereksplorasi dengan blog kamu.
• Banyak aplikasi buatan pihak ke 3 mendukung Wordpress yang disebut dengan plugin.
• Mendukung PHP karena selain bisa menggantikan javascript,dengan PHP kamu bebas bereksplorasi dengan aplikasi blog.PHP bekerja pada server sehingga blog lebih ringan daripada yang menggunakan aplikasi javascript.
• Blog lebih aman dari banned karena memang berada dalam kuasa penuh kamu,namun dari sisi celah keamanan harus lebih diperhatikan agar tidak diretas orang.

Langkah langkah membuat blog wordpress hosting sendiri.

• Sewa hosting dan domain (1paket) melalui jasa hosting atau menyewa dedicated server sendiri.
• Tentu saja lebih baik menyewa hosting dan domain melalui jasa hosting dulu jika masih pemula,karena memakai dedicated server selain lebih mahal,kamu harus memiliki pengetahuan tentang ini.
• Jika sudah merasa butuh untuk menyewa server,kamu bisa upgrade lain waktu apabila diperlukan.
• Jika kamu menyewa hosting,biasanya jasa hosting sudah menyediakan fitur yang dikenal dengan softaculous.Softaculous adalah  fitur yang menyediakan autoinstaller /fantastico untuk banyak sekali CMS website.Dengan autoinstaller kamu hanya tinggal melakukan one click install untuk blog wordpress kamu,maka blog sudah jadi.Hal lebih lanjut bisa berkonsultasi kepada penyedia hosting,bahkan mereka ada yang mau sekaligus menginstallkan blog WP kamu.
• Bog sekarang sudah jadi,tinggal kamu memilih template sesuai dengan tema kesukaan melalui admin area dan mulailah posting.Beragam plugin yang dibutuhkan juga tersedia dan bisa langsung diinstall melalui admin area.

Hal lain untuk cara tips dan trik blog wordpress,kita bahas pada posting selanjutnya.

Cara membuat autoreadmore blogspot terbaru tanpa javascript

Auto readmore untuk blogspot model yang ini paling banyak diminati karena kesadaran akan pentingnya sebuah blog yang memiliki akses loading yang ringan.Loading blog ringan dimana disukai oleh visitor serta mesing pencari seperti google.
Kebanyakan template yang menggunakan auto readmore masih menggunakan javascript sehingga menambah beban loading halaman index blog.Artinya,loading blog sama beratnya jika tanpa menggunakan auto readmore.
Autoreadmore tanpa javascript ternyata jauh lebih ringan sehingga tidak percuma jika blog menggunakan fitur ini.Semua gambar thumbnail dan potongan artikel yang ditampilkan autoreadmore ini adalah benar benar ukuran yang dikompresi,itulah alasan kenapa menjadi lebih ringan.

Tag/script  autoreadmore ini memanfaatkan tag dari blogger sendiri.Dan salah satu keistimewan adalah tambahan  thumbnail default.Maksudnya yaitu jika postingan blog tidak ada foto(img) nya, maka thumbnal pengganti akan  muncul sebagai thumbnail default.Mirip sama wordpress gituloooh,,,,,.

Kerenkan?,,,,,,,,Kenapa tidak dicoba?,,,,,,,

Berikut langkah memasang autoreadmore tanpa javascript :

1.Login dasboard > Template > Edit HTML > Expand template widget,
backup dulu template kamu.

Jika template blogger kamu masih standard dan belum menggunakan autoreadmore,maka temukan dulu tag <data:post.body/> pada urutan yang pertama sendiri.Gunakan CTRL+F.

Jika template kamu sudah menggunakan autoreadmore yang versi javascript,maka cari code yang kira kira seperti berikut;


<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span id='showlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'> Readmore &#187;</a></span>
</b:if>

2.Jika code diatas sudah ketemu,maka replace dengan code berikut;

<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.thumbnailUrl'>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
    <a expr:href='data:post.url' expr:title='data:post.title'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjMZrGQ8Ed2d0Pi1jMA_RsQ5-MGikzx2H9ETyV6y6tyjffImBkzaTTkLaF72tXCzB1XYT-M4bXUIfzq4l5sDY6ckmeEb5so2kEmZDY4KY5gm-pDVOR-GXw_2syb0b-CRys6S7znZOb60L/'/></a>
</b:if>
<div class='post-snippet'><data:post.snippet/></div>
<a expr:href='data:post.url' expr:title='data:post.title'> Readmore &#187;</a>
</b:if>


 Jika sebelumnya template kamu menggunakan autoreadmore versi javascript maka temukan dan hapus script javascript yang terletak diatas code </head> berikut.Kira kira script JS nya seperti ini;

<script type='text/javascript'>var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 385;
summary_img = 285;
img_thumb_height = 150;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
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>

3.Pasang code CSS berikut ini diatas code  ]]></b:skin>

.post-thumbnail{width:100px;height:90px;float:left;overflow:hidden;margin:5px 10px 5px 5px}
.post-snippet:before{content:attr(data-snippet)}

4.Simpan template Kamu

You Are Done!

Cara membuat fungsi scrool pada widget

Fungsi scrool pada widget blogspot berikut saya contohkan jika digunakan untuk widget Popular Post atau Entri Populer.Jika kamu ingin menghemat tempat disidebar kamu yang full widget sehingga tidak memanjang banget maka kamu perlu cara ini.


Pada dasarnya sama jika anda ingin menambahkan fungsi scroll ini untuk widget blogspot yang lain,misalnya arsip,recent posts,label dll.Yang berbeda mungkin hanya tempat menyisipkannya saja.Baca :Bagaimana cara membuat CSS scrollbar

Baiklah,begini langkah untuk membuat fungsi scrool popular post;
Widget Popular Post harus sudah dibikin dulu dan beri Nama pada widget nya,misalnya disini kamu beri nama Popular posts.
lalu masuk Dasbor > Template > Edit  HTML > Expand template widget.
Cari Nama widget popular posts yang kamu bikin tadi yaitu Popular posts,biar mudah pergunakan CTRL+F.

Berikut ini code widget Popular Posts lengkapnya jika tadi sudah ketemu;

<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' style='overflow:auto; height:250px'>
  <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>  </div>
</b:includable>
</b:widget>

Code yang berwarna merah adalah code CSS scroolbar yang perlu kamu sisipkan.Untuk mengatur tingginya bisa kamu sesuaikan dengan kebutuhan Kamu yaitu height: 250px;

Cobalah bereksplorasi untuk widget yang lain,caranya sama walaupun tempat menyisipkannya yang mungkin berbeda.
Jika widget adalah HTML/Javascript (Contoh: memasang recent post terbaru) kamu cukup menambahkan code yang berwarna merah diatas cukup didalam widget HTML/Javascript nya saja.

Bagaimana cara membuat CSS scrollbar

Scroolbar adalah bagian elemen yang bisa digeser naik atau turun dengan menggunakan mouse.
Apakah gunanya scroolbar?....
Scroolbar biasanya dipakai jika seorang webmaster bermaksud untuk menghemat tempat dihalaman situsnya yang dirasa  terbatas.Ya,,maksudnya untuk menghemat tempat,terutama untuk widget pada blog.
Jika blog kamu memiliki tempat pada sidebar yang terbatas,agar tidak terlalu memanjang kebawah kamu bisa memanfaatkan css scrollbar ini untuk widget blog.

Cara memasang CSS scrollbar

<div style="width: 190px; height: 190px; overflow: auto; padding: 5px">
Konten berada disini...
</div>


Demo

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam erat volutpat. Praesent tempus rutrum wisi. Proin dui libero, tempor non, mattis nec, imperdiet a, nulla. Nunc hendrerit, metus eget sodales interdum, ipsum felis lacinia elit, vel bibendum nunc ligula ac wisi. Donec vitae neque. Nam quis ante ut est viverra aliquet. Vestibulum dui. Phasellus ultricies elit nec nibh. Sed pede tortor, tincidunt a, vestibulum id, posuere quis, eros. Vestibulum quam. Nullam augue. Nullam eleifend turpis a augue. Aenean vestibulum. Quisque et velit eu diam consequat nonummy. Nullam volutpat enim et pede.
Fusce pretium. Sed sodales arcu eu nulla. Nunc dapibus dui nec tortor. Ut hendrerit dolor sit amet pede. Proin sit amet lorem. Vestibulum quis ligula. Quisque leo libero, pharetra at, porttitor at, mollis imperdiet, magna. Donec venenatis neque quis arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut enim nibh, euismod et, gravida id, euismod et, lacus. Praesent consectetuer velit non neque. Nulla vehicula, arcu tincidunt vehicula ullamcorper, neque sapien iaculis ipsum, sit amet suscipit mi pede vitae augue. Cras tempor, arcu molestie porta pharetra, pede ipsum faucibus nisl, sit amet eleifend urna ante vel nibh. Cras egestas bibendum mauris. Etiam sit amet risus a magna sagittis faucibus.
In ante. Nunc aliquet tincidunt sem. Morbi vestibulum lectus eget tortor. Integer volutpat. Mauris vitae erat quis neque tempor faucibus. Duis mattis. Duis nec magna. Aliquam tristique mattis lorem. Morbi gravida. Nunc malesuada velit id enim. Nullam sit amet dolor eget orci dignissim imperdiet. Morbi viverra neque vitae magna. Sed nonummy. Sed nunc risus, dignissim consectetuer, hendrerit vel, dapibus at, risus. Mauris id neque sit amet augue pretium blandit. Sed sit amet nunc. Sed fermentum tristique nibh. Proin pellentesque tincidunt risus. Aenean erat. In blandit aliquam massa.

Recent post thumbnail blogspot terbaru

Recent post thumbnail berikut bisa kamu coba terapkan untuk blog Kamu.Selain code yang lebih disederhanakan,thumbnail yang ditampilkan adalah versi gambar kompresi dari album gambar postingan.Itulah kenapa kita sebut sebagai recent post thumbnail blogger yang memiliki loading ringan.

Cara pemasangan code Recent post thumbnail:

1.Login ke dasboard blogger Kamu -> Add new widget HTML/Javascript dan paste code berikut;

<style type="text/css">
#recent-posts img{float:left;overflow:hidden;margin-right:10px;background:#FFF;width:40px;height:40px;padding:3px}
#recent-posts li a{font-weight:bold}
</style>
<div id='recent-posts'>
<script type='text/javaScript'>
var rcp_numposts=6;
var rcp_snippet_length=80;
var rcp_info='yes';
var rcp_comment='Comment';
var rcp_disable='';
function recent_posts(json){var dw='';a=location.href;y=a.indexOf('?m=0');dw+='<ul>';for(var i=0;i<rcp_numposts;i++){var entry=json.feed.entry[i];var rcp_posttitle=entry.title.$t;if('content'in entry){var rcp_get_snippet=entry.content.$t}else{if('summary'in entry){var rcp_get_snippet=entry.summary.$t}else{var rcp_get_snippet="";}};rcp_get_snippet=rcp_get_snippet.replace(/<[^>]*>/g,"");if(rcp_get_snippet.length<rcp_snippet_length){var rcp_snippet=rcp_get_snippet}else{rcp_get_snippet=rcp_get_snippet.substring(0,rcp_snippet_length);var space=rcp_get_snippet.lastIndexOf(" ");rcp_snippet=rcp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rcp_commentsNum=entry.thr$total.$t+' '+rcp_comment}else{rcp_commentsNum=rcp_disable};if(entry.link[j].rel=='alternate'){var rcp_posturl=entry.link[j].href;if(y!=-1){rcp_posturl=rcp_posturl+'?m=0'}var rcp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rcp_thumb=entry.media$thumbnail.url}else{rcp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqjMZrGQ8Ed2d0Pi1jMA_RsQ5-MGikzx2H9ETyV6y6tyjffImBkzaTTkLaF72tXCzB1XYT-M4bXUIfzq4l5sDY6ckmeEb5so2kEmZDY4KY5gm-pDVOR-GXw_2syb0b-CRys6S7znZOb60L/"};}};dw+='<li>';
dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_posttitle+'"><img alt="'+rcp_posttitle+'" src="'+rcp_thumb+'"/></a></div>';
dw+='<div><a href="'+rcp_posturl+'" rel="nofollow" title="'+rcp_snippet+'">'+rcp_posttitle+'</a></div>';if(rcp_info=='yes'){dw+='<span>'+rcp_postdate.substring(8,10)+'/'+rcp_postdate.substring(5,7)+'/'+rcp_postdate.substring(0,4)+' - '+rcp_commentsNum+'</span>';};dw+='<div style="clear:both"></div></li>';};dw+='</ul>';document.getElementById('recent-posts').innerHTML=dw;};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results='+rcp_numposts+'&callback=recent_posts\"><\/script>');
</script>
</div>
Setting:
var rcp_numposts=6; 6 adalah jumlah judul yang ditampilkan.Tamabah atau kurangi jika menginginkan
var rcp_snippet_length=80; 80 adalah jumlah karakter dari title,dalam hal ini adalah cuplikan artikel.Ganti 80 dengan jumlah karakter sesuai dengan keinginan kamu.
var rcp_info='yes'; 'Yes' adalah jika ingin menampilkan Tanggal dan comments,jika tidak ingin maka ganti dengan 'no'
width:40px;height:40px; adalah ukuran panjang kali lebar thumbnail,ubah sesuai dengan keinginan.Defaultnya adalah 40px.
2.Simpan widget,dan lihat hasilnya.

Cara Membuat blog gratis

Salah satu mesin blog gratis paling mudah dan sekaligus juga mendapatkan banyak keuntungan lainnya adalah menfaatkan fasilitas dari blogger.com.
Gratis sepenuhnya ,tanpa ada versi trial ataupun versi berbayar,semua pemilik blog diblogger mendapatkan  fasilitas fitur yang sama.
Blogger dot com atau lebih dikenal dengan blogspot adalah platform blog/penyedia layanan khusus untuk membikin blog milik google.

Apa saja sih keuntungan bikin blog di blogspot

• Antarmuka yang relatif lebih mudah ,walaupun untuk orang yang baru saja menjejak pengalaman ini.
• Relatif lebih canggih dan lengkap dalam urusan  fitur.
• Dengan satu akun google,kita akan mendapatkan banyak fasilitas gratis lain sebagai penunjang,misalnya google webmaster tool dan google analistic.Google webmaster tool dan google analistic berguna untuk memonitor blog dan sebagai macam acuan untuk upaya optimasi perangkingan blog pada search engine.Anda juga akan mendapatkan fasilitas email gratis ,dimana hal ini adalah langkah awal untuk bisa menikmati fasilitas lain dari account google.
• Karena milik google,banyak rumor bilang bahwa blogspot prioritas pada hasil pencarian google.
• Lebih mudah jika ingin mendaftarkan blog monetise dalam program adsense milik google.
• Relatif lebih aman dari gangguan para hacker jahil.
• Blogger jarang sekali menonaktifkan account blog,kecuali pelanggaran yang dinilai sangat keras (baca TOS) .Jika anda hanya mengikuti program affiliasi dan promosi bisnis yang "wajar",akun blog saya kira akan ama- aman saja.Toh jika seandainya kena suspend,kitapun masih bisa menghadirkan kembali blog seperti sediakala,dg catatan jika Anda mengcustom domain blogspot.
• Kapan saja anda ingin melakukan customisasi domain,misalnya berubah menjadi namaanda.com sangat mudah.Customisasi domain blogspot tidak akan meninggalkan pengunjung blog Anda yang lama  karena otomatis redirect ke domain baru.
• Bebas mendesain template buatan sendiri sesuai selera.Semua penggunaan code HTML dan javascript di support .

Mungkin masih banyak keuntungan lainnya,namun beberapa pengalaman diatas saya kira sudah sangat menguntungkan sekali

Langkah dan Cara membuat blog di blogspot

1.Mendaftar kan email di google atau lebih dikenal dengan gmail,buka halaman google.com atau google.co.id
Lihat gambar:

Syarat mendaftar @gmail.com,sediakan nomer hp GSM anda,karena kode aktifasi biasanya akan dikirim melalui handphone.

2.Masuk ke situs www.blogger.com

Ada tiga langkah registrasi untuk memiliki akun blogger/blogspot yaitu; ciptakan akun > beri nama blog > pilih template.

a.Ciptakan akun
Berisi perintah untuk memasukkan data login anda ,dimana alamat @gmail yang sudah anda bikin tadi akan dipakai sebagai ID login.(Jika belum punya @gmail,tentunya bikin dulu)
b.Beri nama Blog
Berisi perintah untuk memilih nama blog yang anda kehendaki,hanya nama yang unik (tidak ada kembarannya) saja yang disetujui.Disetujui atau tidak nama blog yang akan anda pakai,akan langsung anda diketahui untuk kemudian mencari nama yang lainnya untuk blog Anda.
c.Pilih template
Berisi perintah untuk memilih template blog yang pertama kali,disana sudah ada daftar template yang bisa untuk anda pakai gratis.Untuk urusan template berikutnya,anda bisa mengganti dengan template blogspot sesuai keinginan.

Horee!!...........Blog anda sudah jadi!!

3.Setelah itu anda sudah bisa untuk memulai ngeblog,posting,mengatur tata letak (widget) ,mendesain blog sendiri,custom domain blog dan semua aktifitas ngeblog lainnya.

Dengan satu akun blogger tadi, selanjutnya Anda bisa membuat beberapa blog lagi dengan hanya melewati proses kedua dan proses ketiga saja.

Tutorial blogger selanjutnya bisa anda ikuti diblog ini,termasuk dasar dasar edit template HTML,widget dll.

Thx,may be usefull!!