Cara Memasang Meta Tag

Menyisipkan si Meta di Template, itukan nama orang, maksudnya Meta Tag. Konon dengan memasang Meta Tag ini bisa mengoptimalkan SEO, percaya tidak?, saya percaya dan terbukti Blog ini pernah muncul di halaman satu SERP Google pada beberapa Keyword. Anda bisa mengikuti Trik ini seperti saya, asal jangan Keyword yang aneh-aneh.

Perhatian! Backup dulu Template-nya, takutnya salah Utak-Atik kodenya, kan bisa dikembalikan seperti semula.

Caranya:
1. Login ke Blogger terus pilih menu "Layout" atau "Edit HTML"
2. Kemudian cari kode <title><data:blog.title/></title> kode tersebut ada kok dan udah keliatan.

Kalau Title Blog kamu sudah di edit cari kode </title> belakangnya, lalu tekan Enter setelah > pada akhir </title>

Masukan Script dibawah ini

<meta content='ini deskripsinya blog kamu' name='description'/>
<meta content='keyword, keyword, seterusnya' name='keywords'/>

Jadi entar kaya gini,

<title><data:blog.title/></title>
<meta content='ini deskripsinya blog kamu' name='description'/>
<meta content='keyword, keyword, seterusnya' name='keywords'/>

Keyword ini bisa sampe banyak, bisa sampai puluhan. Contohnya,
<meta content='seo, iyoyinside, utak-atik' name='keywords'/>

Kalo mau tambah Keyword pake koma setelah keyword, kecuali keyword terakhir tidak usah.

Kalo udah semuanya Pratayang dulu aja sebelum Save, kalo lancar langsung SAVE!!!

Cara Membuat Recent Comment

Recent Comment atau Komentar Terbaru dari Blog kamu, jadi pengunjung tau siapa yang mengomentari Komentar Posting Blog anda, ini tak perlu lagi Upload segala, jadi sama seperti membuat Recent Post, jadi bisa mempercepat membuka Blog anda, karena Script ini yang penting di Blog, karena kita bisa juga memonitor siapa saja yang baru komentar, layaknya pertamax.

Caranya,
1. Pertama Download dulu Scriptnya disini (ukuran 2KB)
2. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
3. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
4. Lalu pilih "HTML/Javascript"
5. Kemudian masukkan script dari hasil Download kamu kedalamnya.

6a. Ubah url iyoyinside dengan url Blog kamu.

<script>var numcomments = 10;var showcommentdate = true;var showposttitle = true;var numchars = 100;var standardstyling = true;</script>
<script src="http://iyoyinside.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

6b. Ubah angka 10 untuk Komentar Terbaru yang akan dimunculkan.
6c. Ubah true / false untuk menampilakan tanggal Komentar Terbaru.

7. Simpan dengan Judul Recent Comments atau Komentar Terbaru atau apalah, dan selesai.

Cara Membuat Recent Post

Recent Post atau Posting Terbaru, jadi pengunjung tau Posting-Posting terbaru Blog kamu, tapi banyaknya Java Script sampai satu Java Script dipakai ramai-ramai itu membuat Script tersebut kehabisan Bandwith, kebanyakan orang meng-Upload file *.js atau Java Script di Ripway, Boxstr, Google Page dll, sehingga situs Uploader tersebut mengalami kehabisan Bandwith jadi satu file Java Script itu saling rebut oleh yang memakainya. Trik ini tanpa perlu Upload segala, serta Trik disini bisa mempercepat buka Blog anda karena tidak perlu men-Download *.js di situs Upload Script tersebut, Blogger kebanyakan memakai file Java Script hingga banyak yang menjadikan membuka Blognya lama.

Caranya,
1. Pertama Download dulu Scriptnya disini (ukuran 2KB)
2. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
3. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
4. Lalu pilih "HTML/Javascript"
5. Kemudian masukkan script dari hasil Download kamu kedalamnya.


6a. Ubah url iyoyinside dengan url Blog kamu.

<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://iyoyinside.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp"></script>

6b. Ubah angka 10 untuk Posting Terbaru yang akan dimunculkan.
6c. Ubah false / true untuk menampilakan tanggal Posting Terbaru.

7. Simpan dengan Judul Recent Post atau Posting Terbaru atau apalah, dan selesai.

Cara Membuat Read More

Posting dengan banyaknya kalimat, pastinya menghabiskan halaman penuh, mungkin juga satu Posting satu halaman penuh, pada beberapa Template ada yang sudah terintegrasi Script Read More atau Baca Selengkapnya, ada juga yang belum tersisipkan Script Read More seperti Blog teman saya Dichun, dengan Script ini Blog anda akan lebih menghemat halaman Blog kamu, sehingga pengunjung lebih nyaman jalan-jalan pada Postingan Blog kamu.

Perhatian! Untuk tidak merusak Template kamu, silahkan Backup dulu, jadi entar kalo rusak bisa dipulihkan pada kondisi sebelumnya.

Caranya;
1. Buka menu "Layout" kemudian pilih "Edit HTML"
2. Centang pada cekbox "Expand Widget Template"
3. Cari kode berikut dengan menggunakan Ctrl+F pada Firefox;

<p><data:post.body></p>

Kode diatas tersebut bisa berbeda-beda, umumnya kodenya seperti itu, biasanya ada kalimat post.body

4. Jika sudah ditemukan, ganti kode <p><data:post.body></p> dengan dibawah ini

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>

<a expr:href='data:post.url'>Read More</a>
</b:if>

5. Ubah Read More dengan kata anda sendiri, misalnya Baca Yuk seperti Blog ini.
6. Simpan hasil Utak-Atik kamu.


Saya tidak mensarankan untuk merubah Setting > Formatting, karena dengan mengubah Post Template sering error, sehingga kode <span class="fullpost"> sering muncul banyak, jadinya tampilan Posting-nya malah keluar semua. Jadi cara Postingnya, pertama anda susun dulu semua ketika mau di Publish jangan di Publish dulu, sisipkan kode dibawah, perlu di ingat saat kamu menyisipkan kode dibawah ini pada mode "Edit Html" di Posting > Edit Posts, bukan Compose melainkan sebelahnya Compose.

<span class="fullpost">

Dan sisipkan kode dibawah ini di akhir kalimat,

</span>

Jadi,

Isi Postingan yang dimunculkan
<span class="fullpost">
Isi Postingan yang disembunyikan
</span>

Contohnya seperti ini,

Traffic Alexaku 1.8 Juta menjadi 1.7 Juta, akankah terus menigkat lagi atau semakin kecil.
<span class="fullpost">
Sebagian orang terheran-heran dan juga ada yang sampai memuji blog ini, Blog ini bagus, Blog ini apalah, dll. Tapi nyatanya Blog ini biasa saja, tak ada yang istimewa.
</span>

Ketika di-Publish entar seperti ini di halaman utama Blog kamu,

JUDUL
Traffic Alexaku 1.8 Juta menjadi 1.7 Juta, akankah terus menigkat lagi atau semakin kecil.

Baca Yuk


7. Selesai

Cara Memasang Banner

Memasang Banner ada kode-kodenya, Trik ini bisa mengoptimalkan Banner juga Link anda, mungkin juga dengan Trik ini Banner anda di klik. Dengan mengoptimalkan judulnya, seperti "klik disini dapet duit mau" atau apalah.

Caranya:
Copy kode dibawah ini,

<a href="http://urlkamu.com/" target="_blank" title="Judul"><img border="0" alt="Alternate Text" width="125" src="http://urlgambarkamu.gif" height="125"/></a>

Ubah http://urlkamu.com/ dengan Blog kamu misalkan seperti http://iyoyinside.blogspot.com/

Ubah Judul dengan Judul yang kamu inginkan seperti Utak-Atik Blog dan Komputer.

Ubah Alternate Text sama dengan Judul kamu atau beda juga tidak apa-apa.

Ubah http://urlgambarkamu.gif dengan url gambar kamu contoh http://i39.tinypic.com/8wk0ld.gif . Anda bisa upload gambar GIF, JPEG, BMP dll di Tinypic.

Untuk ukurannya anda bisa ubah (hanya ubah angkanya saja)
width="125" Lebarnya
height="125" Tingginya

Kode Banner ini otomatis membuka Tab baru jika anda ingin membuka dengan jendela yang sama hilangkan kode
target="_blank" jadi kodenya jadi seperti ini

<a href="http://urlkamu.com/" title="Judul"><img border="0" alt="Alternate Text" width="125" src="http://urlgambarkamu.gif" height="125"/></a>

Untuk Banner anda jadi ditengah anda bisa basukan kode <center>
sebelum kode <a href="http://urlkamu.com/"
Serta masukan kode </center> di akhir kode </a>

Jadi seperti ini contohnya;

<center><a href="http://urlkamu.com/" target="_blank" title="Judul"><img border="0" alt="Alternate Text" width="125" src="http://urlgambarkamu.gif" height="125"/></a></center>

Contoh Banner.

Cara Membuat Navigasi Halaman

Tombol Navigasi Halaman emang perlu, karena memudahkan pengunjung untuk jalan-jalan atau baca Postingan Blog kamu, apalagi Blog kamu mempunyai Posting yang banyak, kamu harus pasang Gadget/Widget ini. Widget ini hanya untuk Blogger/Blogspot.

Contohnya seperti ini.

Caranya:
1. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
3. Lalu pilih "HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<style>
.showpageArea a {
text-decoration:underline;
}

.showpageNum a {
text-decoration:none;
border: 1px solid #bbb;
margin:0 3px;
padding:3px;
}

.showpageNum a:hover {
border: 1px solid #bbb;
background-color:#bbb;
}
.showpagePoint {
color:#fff;
text-decoration:none;
border: 1px solid #fff;
background: #000;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #bbb;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

</style>



<script type="text/javascript">

function showpageCount(json) {
var thisUrl = location.href;
var htmlMap = new Array();
var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
var isPage = thisUrl.indexOf("/search?updated")!=-1;
var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
var thisNum = 1;
var postNum=1;
var itemCount = 0;
var fFlag = 0;
var eFlag = 0;
var html= '';
var upPageHtml ='';
var downPageHtml ='';


var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';



var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

for(var i=0, post; post = json.feed.entry[i]; i++) {
var timestamp = post.published.$t.substr(0,10);
var title = post.title.$t;
if(isLablePage){
if(title!=''){
if(post.category){
for(var c=0, post_category; post_category = post.category[c]; c++) {
if(encodeURIComponent(post_category.term)==thisLable){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

postNum++;
htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
}
}//end if(post.category){

itemCount++;
}

}else{
if(title!=''){
if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
if(thisUrl.indexOf(timestamp)!=-1 ){
thisNum = postNum;
}

if(title!='') postNum++;
htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
}
}
itemCount++;
}
}

for(var p =0;p< htmlMap.length;p++){
if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
if(fFlag ==0 && p == thisNum-2){
if(thisNum==2){
if(isLablePage){
upPageHtml = labelHtml + upPageWord +'</a></span>';
}else{
upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
}
}else{
upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
}

fFlag++;
}

if(p==(thisNum-1)){
html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';
}else{
if(p==0){
if(isLablePage){
html = labelHtml+'1</a></span>';
}else{
html += '<span class="showpageNum"><a href="/">1</a></span>';
}
}else{
html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
}
}

if(eFlag ==0 && p == thisNum){
downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
eFlag++;
}
}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
}//end for(var p =0;p< htmlMap.length;p++){

if(thisNum>1){
if(!isLablePage){
html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}else{
html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
}
}

html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Page '+thisNum+' of '+(postNum-1)+': </span>'+html;

if(thisNum<(postNum-1)){
html += downPageHtml;
html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
}

if(postNum==1) postNum++;
html += '</div>';

if(isPage || isFirstPage || isLablePage){
var pageArea = document.getElementsByName("pageArea");
var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){
html ='';
}

for(var p =0;p< pageArea.length;p++){
pageArea[p].innerHTML = html;
}

if(pageArea&&pageArea.length>0){
html ='';
}

if(blogPager){
blogPager.innerHTML = html;
}
}

}
</script>

<script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
<div style="text-align:right;font-size:10px;color:000000;margin-top:15px;display:none;">

5. Kalo udah COPAS Script tersebut simpan (Judulnya dikosongkan), lalu sisipkan dibawah Posting.


6. Selesai deh.

Membuat Link Exchange

Tuker link emang banyak cara-caranya, saya akan menulisnya lagi agar tidak lupa. Tuker Link dengan banner atau gambar kecil emang sedang ramai. Yuk kita buat. Cara-cara ini Special untuk Dichun.

Contohnya seperti ini;



<center><a href="http://dichun.blogspot.com/" target="_blank"><img src="http://i567.photobucket.com/albums/ss115/Sidik_Thea/Label.gif" title="Dichun" /></a><center/>

Dengan kotak tersebut, orang tinggal COPAS ke Blog-nya.

Caranya:
1. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
3. Lalu pilih "HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<a href="http://dichun.blogspot.com/" target="_blank"><img src="http://i567.photobucket.com/albums/ss115/Sidik_Thea/Label.gif" title="Dichun" /></a>

<textarea name="code" rows="2" cols="20" onclick="this.focus();this.select();"><center><a href="http://dichun.blogspot.com/" target="_blank"><img src="http://i567.photobucket.com/albums/ss115/Sidik_Thea/Label.gif" title="Dichun" /></a><center/></textarea>

5a. Ubah dichun dengan Blog kamu.

5b. Ubah URL http://i567.photobucket.com/albums/ss115/Sidik_Thea/Label.gif dengan URL gambar kamu.

5c. Ubah Dichun dengan Title Blog kamu.

6. Jika semua telah selesai simpan deh.


Ntar jadinya kaya gini



<center><a href="http://dichun.blogspot.com/" target="_blank"><img src="http://i567.photobucket.com/albums/ss115/Sidik_Thea/Label.gif" title="Dichun" /></a><center/>

Jadi orang kalo copas kode di Text Area tersebut ntar kaya gini di Blog-nya

Memasang Status YM

Waktu kemarin ada teman saya yang nanya "eta kumaha masang status YM euy, kabita urang". Nah ini temanku untuk memasang status YM (Yahoo! Messengger) diBlog atau situs. Mungkin cara memasang Widget seperti ini emang banyak dipasaran, eh diBlog-Blog lain, tapi beda sedikit Script-nya. Contohnya seperti ini nih,




Caranya:
1. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
3. Lalu pilih "HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

<center><a href="ymsgr:sendIM?iyoyinside"><img src="http://opi.yahoo.com/online?u=iyoyinside&m=g&t=14&l=us" /></a></center>

<center><a href="ymsgr:sendIM?iyoyinside"><img src="http://opi.yahoo.com/online?u=iyoyinside&m=g&t=14&l=us" />

5a. Ubah kode iyoyinside dengan ID YM kamu misalnya iyoy, ingat harus 2 kode merah yang diubah.

5b. Ubah kode 14 untuk mengubah tampilan status YM kamu misalkan 1 atau juga 2 dan seterusnya.

6. Kemudian simpan.

Membuat Text Area

Membuat Text Area dengan ditambah auto select all yang berfungsi tidak usah cape-cape Blok semua kode buktinya, coba saja klik kiri script dibawah ini lalu klik kanan lalu Copy di Posting atau edit HTML, semua ke-Blok otomatiskan. Jadikan enak Copy-Paste Scriptnya. Script ini modifikasi dari Kang Rohman.

<p align="left"><textarea name="code" rows="3" cols="50" onclick="this.focus();this.select();">isi script</textarea></p>

Kalo kamu Copy di Script diatas ntar munculnya kaya gini.

isi script

Text Area ini bisa anda ubah ukurannya

rows="3" untuk barisnya.
cols="50" untuk kolomnya.

Kalo mau masukan kode Sript HTML cukup ubah >isi script< di mode HTML, tanda >< jangan dihilangkan.
Jika memasukan kode HTML biar ga error anda harus memasuka kode Notasi yang dibuat oleh Kang Rohman, dengan merubah kode < dengan Notasi.
Misalkan < dengan Notasi(Lalu img> jadi Notasi_img (Ga pake _ ).

Karakter	Notasi	Keterangan
<	&lt;	Kurung runcing terbuka
>	&gt;	Kurung runcing tutup
&	&amp;	Tanda Dan
"	&quot;	Tanda petik ganda
±	&plusmn;	Tanda plus minus
Spasi	&nbsp;	Tanda Spasi
©	&copy;	Tanda hak cipta (copyright)
®	&reg;	Tanda terdaftar (Registered)

Table dibuat Kang Rohman.

Pasang Kode HTML di Postingan

Memunculkan kode HTML di Posting ada cara lain, yaitu dengan cara saya, kode ini saya Utak-Atik pake Notepad++ dengan bahasa HTML lalu saya copy serta Utak-Atik di mode Compose Posting di Blog, eh ternyata bisa tidak perlu merubah Template segala, Ok! saya akan kasih tau cara-caranya.

Pada saat membuat Posting (Buat), anda Copy kode berikut pada Edit HTML.

<p style="border: 1px solid rgb(204, 204, 204); margin: 5px 20px 15px 15px; padding: 7px; background-color: rgb(238, 238, 238);" class="small">isi script</p>

Lalu akan keluar seperti dibawah ini, tentunya mode saat "Tulis"

isi script

Dengan Script ini anda akan mudah memasukan kode HTML untuk tutorial-tutorial misalnya atau lainnya. Cukup Copy HTML dan Blok isi script lalu Paste. Contohnya seperti ini.

.alert
{
background: #A4A4A4;
text-align: left;
padding: 5px 5px 5px 5px;
border-top: 1px dotted #223344;
border-bottom: 1px dotted #223344;
border-left: 1px dotted #223344;
border-right: 1px dotted #223344;
}

Untuk mewarnai Hurufnya tinggal di Blok di mode "Tulis" lalu Warna Teks. Gampangkan.

Mengganti Icon Blog

Icon pada Blogger emang bagus, mungkin ada juga yang ingin beda dari yang lain contohnya Blog saya ini, sebelum anda mengubah kode HTML tersebut, jangan lupa meng-Backup Template anda. Jika sudah ini cara-caranya.

1. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
2. Lalu klik pada "Edit HTML".
3. Cari kode </head> dengan menggunakan fitur Find atau Ctrl+F pada Firefox

Copy-kan kode dibawah sebelum kode </head>

<link href="http://i729.photobucket.com/albums/ww294/iyoyinside/II.gif" rel="SHORTCUT ICON">

Jadi entar seperti begini

<link href="http://i729.photobucket.com/albums/ww294/iyoyinside/II.gif" rel="SHORTCUT ICON">
</head>

Pada http://i729.photobucket.com/albums/ww294/iyoyinside/II.gif itu dimana icon Blog kamu, kamu bisa Upload gambar atau icon di Tinypic, Photobucket dll. Usakan gambar atau icon-nya berukuran 32x32 atau anda bisa gunakan ukuran 24x24. Gunakanlah ukuran 24x24 karena agar membuka Blog-nya lebih cepat.

4. Setelah semuanya selesai Simpan.

Kode-Kode Warna HTML

Emang udah binggung kalo nyari kode-kode warna dalam bentuk kode HTML, jangan pusing lagi sekarang ada kode-kode dari berbagai warna, saya sediakan dari mas Kendhin. Cara kerjanya cukup mudah anda tinggal klik pada warna yang di inginkan, lalu anda Copy kode tersebut.

Thanks 2 Kendhin

Pasang Widget IP-Address

Pasang Widget IP-Address diBlog kamu supaya kamu bisa lihat IP-Address yang kamu gunakan. Seperti gambar dibawah ini.

Ukuran 486x60


Ukuran 125x125


Caranya:
1. Login ke Blogger terus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "Tambah Gadget".
3. Lalu pilih "HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.

Untuk ukuran 125x125

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/" alt="IP" border="0" width="125" height="125" /></a>

Untuk ukuran 468x60

<a href="http://www.wieistmeineip.de/cometo/?en"><img src="http://www.wieistmeineip.de/ip-address/?size=468x60" alt="IP" border="0" width="468" height="60" /></a>

5. Kemudian simpan.