Mengatasi Judul Widget / Gadget Yang Tidak Boleh Kosong

Pada zaman dahulu kala blogger mengijinkan widget dengan tanpa judul (title) namun sekarang kebebasan itu dikekang oleh blogger, jadi setiap widget/gadget harus ada title atau judulnya. Namun sering kali kita tidak menginginkan gadget/widget tanpa judul, dan jika dipaksa akan muncul pesan perintah error "Required field must not be blank" atau intinya judulnya harus ada dan tidak bisa dilanjutkan bila tanpa judul.

Nah bagaimana mengatasinya?

Caranya cukup mudah kita tinggal mengisi title atau judul gadget dengan code

<!--->

lihat contoh dibawah ini

Dan hanya cukup code diatas tidak perlu tambahan apa-apa lagi.

Sekian deh cukup semoga bermanfaat bagi Anda

Widget Attribution Dari Blogger

Apa ini ?

Wah ternyata ini adalah widget ketentuan dari blogger untuk "Copyright" platform blogger, widget ini tidak bisa pindahkan bahkan tidak bisa di hapus untuk template blogger yang baru widget ini ada, namun untuk template lama dalam artian dalam pembuatan blog dari blogger udah lama, widget ini belum muncul, entah mungkin kapan ada ketentuan widget ini ada untuk semua pengguna blogger.


Nah terlihat di atas adalah screenshotnya dan bisa kita lihat widget ini terkunci tidak bisa dihapus dan digeser untuk dipindahkan.

Nah Saya beri tips bagaimana memindahkan widget ini dan memberi style tersendiri.

1. Cara memindah

Biasanya Atribut Copyright seperti ini berada pada bawah halaman situs, nah defaultnya widget atribut ini berada pada sidebar. nah dibawah ini adalah cara memindahkanya dari sidebar ke footer (bagian bawah blog)

Masuk pada bagian "Design" kemudian masuk pada "Edit HTML" lihat kebawah dan temukan code seperti ini

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Lalu Cut code diatas dan taruh pada tag footer. Lihat code dibawah ini untuk lebih jelasnya

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>
</div>

Lalu SAVE dan selesai

2. Menambah Style CSS

Style CSS fungsinya untuk mengubah tampilan widget atribut ini supaya terkesan lebih cantik tidak monoton dengan cara :

tambah code css dibawah ini diatas code ]]></b:skin>
#Attribution1 {
color:red;
font-weight:bold;
text-transform:capitalize;
}

Style diatas hanya sebuah contoh untuk mengganti warna hurufnya, menebalkan huruf dan membuat capitalis pada textnya. Dengan CSS diatas Anda bisa menentukan tampilan dari widget tersebut mungkin dengan menambahkan background, border dsb.

Kemudian SAVE dan lihat hasilnya deh.

Nah mungkin informasi ini berguna bagi Anda untuk para blogger dan semoga bermanfaat Saja. terima kasih.

Kenapa Image di Template Blog tidak Muncul?

Pertanyaan senada kadang terucapkan, saat kita mengetahui ada gambar yang tidak muncul atau gambar yang seharusnya muncul diganti dengan gambar lain (penyedia layanan image hosting) khususnya terjadi pada template.  Terdapat beberapa kemungkinan yang menyebabkannya, antara lain ;  salah alamat, gambar telah berpindah atau dihapus, bandwidth di penyedia layanan telah habis dan sebagainya.

“Tapi OB aku sudah cek ke alamat penyimpanan gambar-nya dan hasilnya masih memunculkan gambar tersebut.”

Berarti kemungkinan salah alamat dan gambar telah berpindah atau dihapus dapat pula kita sisihkan. Mau tidak mau atau suka tidak suka kita mesti mencari alasan lain, mengapa gambar di template  tidak muncul.  Salah satu kemungkinan lain jatuh kepada bandwidth di penyedia layanan image hosting, seperti ;  Photobucket, ImageShack, TinyPic, de-el-el.

“Bandwidth sering digunakan sebagai suatu sinonim untuk data transfer rate yaitu jumlah data yang dapat dibawa dari sebuah titik ke titik lain dalam jangka waktu tertentu (pada umumnya dalam detik). Jenis Bandwidth ini biasanya diukur dalam bps (bits per second). Adakalanya juga dinyatakan dalam Bps (bytes per second). Dalam bahasa mudahnya, adalah sebuah takaran lalu lintas data yang masuk dan yang keluar.”

(wikipedia).

Bukan menjadi rahasia umum bahwa gambar merupakan salah satu elemen agar template lebih kelihatan asoy geboy aduhay (kata terakhir dipaksain tuh...) dan tidak berasa hambar, sehingga membutuhkan layanan image hosting.  Sekarang kamu menggunakan template dari anu bin anu yang memiliki tampilan menarik dan beberapa elemennya berupa gambar.

Karena saking menariknya, banyak para blogger yang menggunakan template tersebut. Sedangkan template langsung digunakan secara default. Akibatnya semua pengguna akan menggunakan sumber image hosting yang sama.; Ketika pengunjung menyambangi blog kamu, bukan tidak mungkin pengunjung lain juga sedang blog walking ke blog yang menggunakan template sama dengan kamu.

Coba bayangkan jika puluhan pengunjung mengunjungi blog yang memiliki template sama persis.  Oleh karena banyaknya aktivitas upload gambar menyebabkan jatah bandwidth dari penyedia layanan tersebut habis. Akhirnya kamu pasti tahu, yakni gambar dalam template tidak muncul atau diganti dengan gambar si penyedia layanan.

“Kalau begitu aku tidak akan menggunakan template pakai gambar, ah?”

Eit, itu bukan merupakan pemikiran yang bijak. Seperti kata OB di atas, gambar merupakan salah satu elemen agar template tidak berasa hambar.  Point pentingnya, kita hanya membutuhkan alternatif jitu untuk memecahkan "telur itu???" (*maksudnya memecahkan masalah itu).  Alternatif jitu tersebut berupa :

• Download gambar-gambar yang disertakan dalam template, kemudian upload gambar template tersebut ke hosting gambar yang biasa kamu pakai. Tidak jarang template yang kamu gunakan (download) telah disisipkan file gambar oleh sang empu-nya.  Jadi tinggal meluangkan waktu sebentar untuk mengupload gambar tersebut ke hosting gambar yang biasa kamu pakai.


• Setelah proses upload selesai, jangan lupa untuk mengganti alamat penyimpanan gambar dalam template tersebut.  Contoh kode yang diganti :

body {

background:#FFFFFF url(http://i647.photobucket.com/albums/uu191/OB//bintang_tujuh_keliling.gif) }



.sidebar h2 {

background:url(http://i46.tinypic.com/152ff2b.jpg) top left repeat-x; }

Catatan : Ganti kode yang berwarna merah dengan gambar yang sama/serupa sesuai dengan alamat penyimpanan file gambar kamu yang sebelumnya telah diupload.

• Cek dan ricek template, siapa tahu ada gambar yang tidak sesuai, seperti ; gambar yang seharusnya di header malah ngelayap ke sidebar, icon yang seharusnya untuk komentar malah jadi icon kecantikan (kagak nyambung...).

Udah cape rasanya megang tuts keyboard, ditambah lagi mata yang rada-rada mau tertutup (bilang aja ngantuk gitu! ha..ha..).  Badan pun udah pengen bertemu sang kekasih di pulau kapuk alias tempat tidur, Bobo yu...

Link Penulis Komentar (Comments Author) Terbuka di Tab Baru

Coba buka salah satu postingan di blog kamu yang ada komentarnya.  Kalau sudah klik salah satu link komentator (comments author).  What happen?  Tentu saja kamu akan dibawa ke halaman link komentator tersebut, namun terbuka pada tab yang sama. Kecuali kamu melakukan klik kanan dan pilih "Open link in New Tab".  Nah, trik blogger yang akan OB diskusikan kali ini adalah bagaimana jika kita meng-klik link penulis komentar, maka link itu akan langsung terbuka di tab baru.

Versi demonya silakan klik salah satu link comments author di blog OB.

• Sign-in ke akun blogger kamu.


• Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode seperti di bawah ini :

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Sisipkan target="_blank" (warna hijau) pada kode yang berwarna merah.

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a>

• Jangan lupa disimpan.

Sekarang buka kembali salah satu posting yang ada komentarnya di blog kamu dan klik link comments author.  Mudah-mudahan telah terbuka di tab baru, kalau ngga...  Maka OB akan pusing dan garuk-garuk kepala sendiri.

Update

Trik ini tidak direkomendasikan, silakan telusuri di Google tentang “Link Target” atau “Validitas Link Target”.

Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly

Sebenarnya judul di atas sangat berhubungan dengan 2 (dua) posting sebelumnya, yaitu : SEO | Optimasi Judul Blog dalam Title Tag dan Memasang Meta Tags dan Manfaatnya. Cuma mungkin karena uraiannya yang agak menggantung, sehingga kurang/tidak tercover di hati pembaca (wih.., puitis amat). Nah, agar semua terlihat terang benderang, seperti ungkapan dalam sebuah buku "Habis Gelap Terbitlah Terang", maka kembali dihadirkan dalam versi keduanya (emang buku ha..ha..). Pada posting kali ini sengaja dijadikan satu, karena kedua tags tersebut sangat erat sekali hubungannya dan langsung diuraikan melalui Edit HTML. Terutama agar blog kamu kelihatan lebih SEO friendly. Langsung saja kita ke TKP (Tempat Kerjaan Para blogger)...

• Masuk ke Edit HTML.


• Cari kode (letaknya di atas) berikut :

<head>

<b:include data='blog' name='all-head-content'/>

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

<b:skin><![CDATA[

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Ganti kode yang berwarna merah dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "index"'>

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

<b:else/>

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

</b:if>

Catatan :

Untuk menambah title, kamu bisa melakukan edit terhadap kode di atas (perhatikan kode yang berwarna biru), contoh :

<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.pageTitle/> | Tips SEO | Trik Blogger | Blogger Indonesia</title>

<b:else/>

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

</b:if>

atau

<b:if cond='data:blog.pageType == "index"'>

<title>Tips SEO | Trik Blogger | Blogger Indonesia | <data:blog.pageTitle/></title>

<b:else/>

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

</b:if>

• Setelah selesai mengganti title tag, sekarang tambahkan kode Meta Tags di bawahnya.

<meta content="...deskripsi tentang blog kamu..." name="description"/>

<meta content="keyword1,keyword2,keyword3,..." name="keywords"/>

<meta content="INDEX, FOLLOW" name="robots"/>

Catatan :

Ganti kode yang berwarna merah dengan deskripsi dan keyword blog kamu (perhatikan kode yang berwarna biru), contoh :

<meta content="Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya" name="description"/>

<meta content="source code,search engine,SEO,template,templates,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia" name="keywords"/>

<meta content="INDEX, FOLLOW" name="ROBOTS"/>

Jadi keseluruhan kodenya akan terlihat seperti ini (diambil dari Blog OB) :

<head>

<b:include data='blog' name='all-head-content'/>



<b:if cond='data:blog.pageType == "index"'>

<title><data:blog.pageTitle/> | Tips SEO | Trik Blogger | Blogger Indonesia</title>

<b:else/>

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

</b:if>



<meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/>

<meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/>

<meta content='INDEX, FOLLOW' name='ROBOTS'/>



<b:skin><![CDATA[

• Jangan lupa disimpan.

Sekarang coba klik "Lihat Blog" (dikurung kotak merah) dan perhatikan perubahan judul blog kamu di bagian paling atas browser.

Selamat memasang title dan meta tags...

Update :

Sesuai dengan komentar dari Saudara hans ganteng, OB sependapat bahwa <data:blog.pageTitle/> mengandung arti yang luas, sehingga menyebabkan penempatan keyword tidak optimal. Sekarang OB telah mengubah meta tags blog ini, seperti yang disarankan oleh Saudara hans ganteng.
Coba perhatikan meta tags di bawah ini :

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

<meta content="...deskripsi tentang blog kamu..." name="description"/>
<meta content="keyword1,keyword2,keyword3,..." name="keywords"/>
<meta content="INDEX, FOLLOW" name="robots"/>

Contoh penerapannya :

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.title/> | Trik Blogger | Tips SEO | Blogger Indonesia</title>
</b:if>

<meta content='Tips dan trik blog optimization melalui Tips SEO dan trik blogger serta berbagai jenis optimasi blog lainnya' name='description'/>
<meta content='source code,search engine,SEO,keyword,template,templates,keywords,ranking,blog optimization,kode HTML,backlink,widget,gadget,blogger stuff,tips seo,kata kunci,tips blogging,free directory,traffic,trafik,trik blogger,optimasi blog,promosi,untuk indonesia' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>

Terima kasih atas masukannya, untuk posting “Cara Pasang Title dan Meta Tags agar Blog lebih SEO Friendly”.

Trik Blogger | Mengatur Tataletak Link to This Post

Terkadang kita kurang memperhatikan keberadaan fitur Link to This Post (backlink). Yah, mungkin karena dalam penerapannya kurang diminati oleh sebagian blogger mania. Bahkan tidak jarang dengan mudahnya kita menonaktifkan fitur ini. Link to This Post dimaksudkan agar memudahkan pengunjung blog me-link posting yang dibaca dan diminatinya untuk dijadikan bahan referensi atau rujukan dari posting yang akan dia buat. Cara kerjanya sederhana saja, yaitu kamu cukup meng-klik "Buat sebuah Link", maka secara otomatis blogger akan mengarahkan kamu melalui jendela pop-up langsung ke halaman "Entry baru" (dengan syarat kamu telah login ke akun blogger). Selanjutnya kamu bisa mengedit atau disimpan dulu sebagai draft.



Secara default link fitur ini terletak di post-footer. Namun akan berpindah letak dan bentuknya ke bawah form komentar, setelah kita menampilkan seluruh isi posting. Nah, tataletak disinilah yang akan bersama-sama kita diskusikan. Apabila jaraknya dengan form komentar terlalu jauh, kamu dapat memperpendeknya dengan melakukan trik yang cukup simple. Eh..., ngomong-ngomong kode Link to This Post yang seperti apa yah? Kodenya setelah isi keseluruhan posting terbuka (jika melalui "Edit HTML", terlebih dulu centang "Expand Widget Templates") lebih kurang seperti di bawah ini :

<div id='backlinks-container'>

<div expr:id='data:widget.instanceId + "_backlinks-container"'>

<b:if cond='data:post.showBacklinks'>

<b:include data='post' name='backlinks'/>

</b:if>

</div>

</div>

Kembali ke pengaturan tataletak Link to This Post. Adapun step by step pengaturannya adalah sebagai berikut :

• Edit HTML --> Expand Widget Templates.

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode seperti di bawah ini :

<b:includable id='comment-form' var='post'>

<div class='comment-form'>

<a name='comment-form'/>

<h4 id='comment-post-message'><data:postCommentMsg/></h4>

<p><data:blogCommentMessage/></p>

<data:blogTeamBlogMessage/>

<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='210' id='comment-editor' name='comment-editor' src='' width='100%'/>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan muncul menu toolbar pencarian di bawah browser, sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Atur ketinggian pada kode yang ditandai dengan warna merah, kalau OB sendiri diatur dalam kisaran 240 - 260.


• Update : Setelah kamu mengaplikasikan trik ini — untuk komentar yang menggunakan verifikasi — pengunjung tidak bisa melakukan verifikasi. Dengan kata lain “pengunjung tidak akan bisa berkomentar”. So, agar bisa memasukkan kode verifikasi dalam form komentar, maka kita harus menambahkan fungsi ‘scroll’. Tambahkan CSS berikut di atas kode ]]></b:skin> :
  .comment-form {
  
  overflow:auto;
  
  }


• Jangan lupa disimpan.

Catatan :

Kamu pun bisa lebih banyak berkreasi dengan melakukan edit atau menambah kode backlinks-container dalam CSS. Contoh kodenya dalam CSS :

#backlinks-container {

margin: 10px auto 0;

padding: 5px 10px 10px;

border: 1px solid #E1D4C0; }

Selamat mengatur tataletak Link to This Post...

Rounded Corner | Membuat Sudut menjadi Tumpul

Pernah melihat di sudut-sudut blog kelihatan tumpul? Nah, itu dinamakan "rounded corner". Sebelum melangkah lebih jauh, kita perlu membatasi ruang lingkup kajian trik blogger kali ini. Rounded corner yang akan kita diskusikan bersama adalah membuat sudut menjadi tumpul tanpa gambar (rounded corner no image).

Kemudian bentukkan rounded corner dari kode CSS ini akan nampak, apabila kamu menggunakan browser Firefox, Chrome, dan Safari. Ngomong-ngomong soal tumpul, asal jangan dikaitkan dengan pikiran, lho. Ayo, kita keroyok trik blogger tentang membuat rounded corner :

Full rounded corner :

.kotak-rounded-corner {

background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }

Rounded corner di kiri atas :

.kotak-rounded-corner {

background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius-topleft: 10px;

-webkit-border-top-left-radius: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }

Rounded corner di atas :

.kotak-rounded-corner {

background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-khtml-border-radius-topleft: 10px;

-khtml-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px; }

Rounded corner di bawah :

.kotak-rounded-corner {

background-color:#FFFF00;

border:2px solid #FF0000;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

-khtml-border-radius-bottomleft: 10px;

-khtml-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px; }

Catatan :

1. Trik ini merupakan salah satu dari sekian banyak trik lainnya untuk membuat rounded corner.


2. Semakin besar nilai yang kamu masukkan (ex: 10px), maka semakin besar pula ketumpulan/belokan sudut.


3. Kode -moz-border-radius digunakan untuk firefox, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-radius untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.


4. Kode di atas merupakan contoh penerapan rounded corner dalam kode CSS.

Selamat membuat rounded corner...

Solusi Submit Sitemap di Webmaster Tools

Kok, feeds blogku ngga valid? Aduh, sitemap blogku ngga ter-indeks semua? Huh, gagal lagi submit sitemapnya? Dan masih banyak pertanyaan senada lainnya yang mungkin menghinggapi blogger mania ketika submit sitemap di Google Webmaster Tools. Terus bagaimana solusi agar sitemap blog kamu dapat maksimal diterima dan ter-indeks oleh Webmaster Tools? Caranya mudah bertanyalah kepada ahlinya. :) Kalau itu sih bukan solusi namanya, tapi salah satu upaya agar tidak “sesat di jalan”.

Nah, daripada cuap-cuap melulu langsung kita menuju TKP. salah satu cara untuk mengatasi masalah error dan indeks URLs tersebut adalah dengan menggunakan Blogger Sitemap Generator. Berikut adalah langkah-langkah membuat sitemap di Blogger Sitemap Generator:

• Klik link berikut Blogger Sitemap Generator.
• Masukkan alamat blog kamu lengkap dengan http://, contoh : http://optimasi-blog.blogspot.com/.
• Setelah yakin benar alamatnya, klik button “Create Blogger Sitemap”.
• Kemuadian akan muncul sitemap di bawah form.
• Jangan langsung copy sitemap tersebut (ntar meleduk, becanda).
  1. Klik link di bawah "For Bing", untuk men-submit sitemap tersebut ke Bing.
  
  
  2. Klik juga kunk di bawah "For Yahoo", untuk men-submit sitemap tersebut ke Yahoo.
• Sekarang baru copy sitemap di bawah "For Google".
• Sign-in ke Google Webmaster Tools dan pilih blog yang ingin kamu tambah sitemapnya.
• Kamu sekarang berada di halaman "Dashboard", kemudian klik tanda "+" Site Configuration.
• Pilih "Sitemaps".
• Pada halaman Sitemaps, klik button spoiler "Submit a Sitemap".
• Paste sitemap yang kamu dapat dari Blogger Sitemap Generator.
• Terakhir, klik button "Submit Sitemap".

Sumber : Blogger Sitemap Generator Solusi Submit Sitemap Blog Anda oleh Kang Rohman.

Catatan :
Biasanya agar sitemap baru kamu terindeks oleh google memerlukan waktu, tunggu dengan sabar sitemap tersebut diindeks oleh mbah Google. Lama..., OB? Daripada nunggu lama diiringi dengan wajah cemberut seperti jeruk purut yang berkerut-kerut (ha..ha..), lebih baik besoknya saja baru kamu cek. "Heh, coba bilang dari tadi, dasar OB".

Update — 15 September 2012

Sekarang untuk melakukan submit sitemap tidak perlu susah-susah lagi, cukup dengan mengkombinasikan alamat blog ditambah dengan sitemap.xml, contoh: h**p://namablog.blogspot.com/sitemap.xml dan cuplikan gambar interface Google Webmaster Tools di atas sudah ketinggalan zaman. :(

Selamat men-submit sitemap kamu di Blogger Sitemap Generator.

Widget Recent Post Animasi Dengan JQuery

 

Banyak versi widget recent post yang bisa anda gunakan untuk blog anda, mulai dari widget yang disediakan blogger sampai widget dari pihak ketiga. Diblog ini saja kira-kira terhitung sudah ada tiga versi widget recent post yang telah saya posting. Dan kali ini saya akan mengetengahkan cara menambahkan sebuah versi baru dari sekian jumlah widget recent post blogger yang ada. Widget recent post berikut selain memiliki effect animasi spy karena penggunaan script JQuery juga dilengkapi dengan thumbnail dan captions. Sebuah karya hasil pengembangan dari blogger Indonesia (Abu Farhan).

Nah seperti apa widget berikut silahkan lihat screenshoot disamping atau lihat live demo disini, jika anda tertarik tuk mencobanya, silahkan ikuti tutorial selanjutnya.

1. Setelah sig in pada blogger dengan account anda >>> pada dasbor klik rancangan >>> pada elemen laman >>> klik tambah gadget >>> HTML/JavaScript

2. Copy kode berikut dan paste pada kolom konten

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/post.jpg) repeat-x;
border:1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

-->
</style>

    <script language='JavaScript'>

imgr = new Array();

imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";

imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";
showRandomImg = true;

boxwidth = 255;

cellspacing = 6;

borderColor = "#232c35";

bgTD = "#000000";

thumbwidth = 70;

thumbheight = 70;

fntsize = 12;

acolor = "#666";

aBold = true;

icon = " ";

text = "comments";

showPostDate = true;

summaryPost = 40;

summaryFontsize = 10;

summaryColor = "#666";

icon2 = " ";

numposts = 10;

home_page = "http://amatullah83.blogspot.com/";

limitspy=4
intervalspy=4000

</script>

<div id="spylist">
    <script src='http://dl.getdropbox.com/u/708209/scriptabufarhan/recentspy/recentpostthumbspy-min.js' type='text/javascript'></script>
</div>

Catatan: ganti home page dengan URL blog anda, kode lainnya masih dapat anda modifikasi lagi seperti background image, lebar dan tinggi thumbnail, lebar caption dll.

3. Klik simpan, dan simpan lagi.

Selesai. Mudah bukan? Selamat mencoba, semoga berhasil dan manfaat!

Menambahkan Effect JQuery Link Nudging Pada Label

JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang. Seru juga jadinya, tertarik ingin menerapkan JQuery Link Nudging pada blog anda?

Silahkan ikuti tutorial menambahkan effect JQuery link nudging berikut ini:

1. Setelah sig in pada account blogger anda >>> pada dasbor>>> Klik Rancangan>>> Edit HTML
2. Tambahkan Script JQuery berikut diatas kode </head>

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

Catatan: abaikan langkah kedua bagi anda yang sudah menginstal script JQuery diatas pada template blogger anda.

3. Tambahkan lagi script berikut dibawah script JQuery tadi:

<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->

4. Simpan, dan lihat hasilnya pada blog anda.

Mudah bukan? Selamat mencoba, semoga berhasil dan bermanfaat.
Resource David Wals

Ingin mencoba effect lain pada link? Silahkan lihat disini cara membuat link hover berwarna pelangi atau disini link hover bertabur bintang

Menghilangkan Icon Pensil serta Obeng dan Kunci

Gegap gempita Piala Dunia AF-SEL 2010 ternyata sedikit banyak mempengaruhi aktivitas para blogger mania. Bagaimana tidak berpengaruh apabila siang disibukkan dengan urusan pekerjaan, sedangkan malamnya nonton bola. Terlepas dari itu semua, mungkin ada yang menyempatkan waktu untuk sekedar memposting di blog walaupun isinya singkat (namun padat, bro...). OB pun termasuk di dalamnya. Dari judul mungkin teman-teman sudah basi mendengarnya. Kok, yang itu-itu lagi sih? Tapi tidak ada salahnya kan, apabila kita kupas kembali.  Anggap saja sebagai penyebaran teknologi (Wih..., kaya MENRISTEK aja). Yuk, buruan kita review trik blogger "menghilangkan icon pensil serta Obeng dan Kunci".

• Icon Pensil atau yang diistilahkan dalam dunia blogger adalah "quickedit pencil" merupakan shortcut image yang disematkan dalam posting (umumnya di bawah posting)dan akan terlihat jika kamu telah login ke akun blogger kamu. Quickedit pencil berguna untuk mengedit postingan secara cepat dengan satu kali klik. Kadang-kadang ada saja dari para blogger yang kurang menikmati fasilitas tersebut karena alasan yang berbeda-beda, seperti ; merusak pemandangan, tidak biasa menggunakan, de-el-el. Nah, jika kamu mau, kamu bisa menghilangkan icon pensil tersebut. Caranya gampang dan cepat (itulah choki-choki), berikut "step"i wonder-nya :

1. Setelah sign in ke akun blogger kamu, pilih tab "Pengaturan" (Setting).


2. Di Halaman Pengaturan sub tab "Dasar" (Basic), temukan form pilihan "Tampilkan Editing Cepat di Blog Anda?" dan pilih "Ya" (Show Quick Editing on your Blog? dan pilih Yes).


3. Selesai.

• Icon Obeng dan Kunci (quickedit) kurang lebih sama pengertiannya dengan quickedit pencil, bedanya hanya dalam penggunaannya. quickedit pencil digunakan untuk edit posting, sedangkan icon obeng dan kunci (quickedit) digunakan untuk editing gadget atau widget dalam blog. Cara menghilangkan icon/image quickedit ini pun terbilang mudah, yakni menambahkan kode CSS di bawah ini dalam template blog kamu.

.quickedit { display: none; }

Kalau masih bingung dimana menempatkan kode di atas, berikut triknya :

1. Klik "Design" --> "Edit HTML".


2. Cari kode ]]></b:skin>.


3. Copas kodenya tepat di atas kode yang berwarna merah tersebut.


4. Selesai.

Mudah bukan? Kalau kamu termasuk yang ngga suka penampakkan icon-icon tersebut, cepet gih langsung diterapin (ngga usah pake malu-malu segala). Selamat menghilangkan icon pensil serta icon obeng dan kunci di blog kamu...

Ada Apa dengan "DoFollow"?

Blog saya "DoFollow" lho! Kalau saya "NoFollow"! Mungkin kedua istilah tersebut sudah tidak asing lagi bagi para blog mania. Banyak pro dan kontra mengenai kedua istilah tersebut. OB tidak akan berbicara mengenai siapa yang pro dan siapa yang kontra. Coba cari saja di search engine mengenai DoFollow dan NoFollow, banyak sekali postingan yang membuka wacana tentang hal tersebut. Namun postingan ini terlahir secara naluriah berdasarkan komentar yang masuk dan mungkin yang akan masuk tentang "mengapa optimasi-blog "DoFollow"?

Optimasi-Blog yang "DoFollow" dimaksudkan untuk berbagi backlink dengan para pengunjung sebagai rasa penghargaan atas semua komentar yang diberikan dalam postingan. Jadi setiap pengunjung yang berkomentar secara otomatis akan meninggalkan linkback untuk sedianya diindeks oleh mesin pencari. Semakin banyak kamu berkomentar (dengan memasukkan link tertentu) dalam blog "DoFollow", maka semakin besar peluang blog kamu untuk terindeks oleh mesin pencari. Pasti kamu sering mendengar para blog mania berburu blog yang ber-PR tinggi untuk sekedar mendapatkan backlink. Hmm... naga-naganya OB mau promosi "agar kamu sering berkomentar di blog ini".

Kalau begitu bagus "DoFollow" dong? Tergantung nafsi-nafsi yang menilai dan agar lebih tidak berat sebelah "DoFollow" ada kekurangannya juga. Apa-apa aja tuh? Begini ceritanya, pada dasarnya setiap blog (blogger, wordpress, dan lain-lain) menganut "NoFollow" dalam post untuk komentar. Hal ini tidak lain dan tidak bukan diperuntukkan agar mengeliminasi bertebarannya "SPAM". "SPAM" dalam komentar tersebut berupa link-link yang dimasukkan oleh komentator dan tidak/kurang berhubungan dengan isi posting serta isi komentar. Contoh :

Fulan bin fulan said ...

nice posting, bro. Kunjungi juga :

<a href="http://…">Mencari uang gratis</a>, <a href="http://…">Makan ngga makan asal ngumpul</a>;

Kalau "DoFollow" sudah jelas komen-komen seperti di atas akan diindeks oleh search engine (apa ngga berabe tuh). Imbasnya yang lain, peringkat blog kamu akan lambat naik. Bahkan jika blog kamu dianggap search engine sebagai penebar "SPAM", maka bersiap-siaplah untuk di "BANNED" (ampun kk).

Sekedar berbagi dengan para pengunjung yang berkomentar dalam blog "DoFollow" :

1. Link kamu cukup diletakkan satu saja, yaitu pada saat memasukkan identitas "beri komentar sebagai".


2. Untuk lebih optimal, identitas "beri komentar sebagai" dipilih "Name/URL". Kalau bisa yang berhubungan dengan isi posting (link yang berkualitas), minimal kamu masukkan nama dan alamat blog kamu.


3. Paling penting "jangan meninggalkan SPAM". Masa sudah diberi linkback gratis dibalas dengan "sampah".

Ngomong-ngomong, kamu pernah ngga membayangkan "jika blog-blog DoFollow punah"; "tidak ada link yang men-support blog kamu"; "tidak ada backlink gratis"; etc. Namun OB yakin yang berkomentar di blog ini (DoFollow yang OB jalani sampai sekarang) sudah pada tahu dan mengerti, sehingga kita akan sama-sama meneriakkan "NO SPAM TO MY COMMENTS".

Nah, kamu sudah tahukan? profit dan resikonya bagi blog yang menganut "DoFollow". Akhirnya pilihan ada di tangan kamu pribadi...

Update

Optimasi Blog sudah “tidak dofollow” lagi.

Highlight Post Dengan Tombol Select All

Salam blogger,

Sebelumnya pada postingan yang kemaren saya sudah membahas mengenai "Menonjolkan teks tertentu pada postingan" dengan background yang berbeda bahkan background image yang sudah saya tulis disitu. Pada kesempatan kali ini membahas lagi mengenai Highlight Post dengan tambahan tombol select all yang mempermudah pengunjung blog untuk memBlok text yang ditonjolkan, misalkan anda menuliskan tutorial dan Anda menyisipkan script yang harus dicopy maka tombol select all ini sangat berguna untuk blok text otomatis.

Seperti contoh dibawah ini

Ingatkah kau...
Waktu kamu berbohong kepadaku
dan aku memaafkanya..

Ingatkah kau
Akan perjuanganku terhadapmu
walau aku tak bisa tetap ku perjuangkan

Ingatkah kau akan perhatianku terhadapmu
yang setiap waktu datang menyelimutimu

Tapi kini kau membalasnya dengan senyum pahitmu...

Hehehe hanya sekedar contoh gak perlu di artikan ya..

Okelah kita beranjak ke cara pembuatanya

1. Masuk Edit HTML pada blog Anda lalu taruh code javascript dibawah ini dibawah code <head>

<script type="text/javascript">
function fnSelect(objId)
{
fnDeSelect();
if (document.selection)
{
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(objId));
range.select();
}
else if (window.getSelection)
{
var range = document.createRange();
range.selectNode(document.getElementById(objId));
window.getSelection().addRange(range);
}
}
function fnDeSelect()
{
if (document.selection)
document.selection.empty();
else if (window.getSelection)
window.getSelection().removeAllRanges();
}
</script>

4. Masih pada Edit HTML lalu masukkan code CSS berikut diatas code ]]></b:skin>

/*__Style_copy_area__*/
.copybox { /* -- Style Box dalam --*/
padding:5px;
border:1px solid #FFC71F;
background:#FFFFCC;
}
.kopiaer { /* -- Style Box Luar --*/
background:red;
padding:7px;
}
.cangkirkopi { /* -- Style Tombolnya --*/
background:#B88A00;
border:1px solid #FFC71F;
color:#FFD65C;
padding:2px;
font-weight:bold;
}

Anda bisa mengunah tampilan code CSS diatas sesuai selera Anda lalu SAVE

5. Setelah itu pada posting editor gunakan code dibawah ini untuk menonjolkan textnya

<div class="kopiaer">
<input class="cangkirkopi" type="button" value="Select All" onClick="fnSelect('kopihangat')"/>
<div class="copybox" id="kopihangat">

INI TEKS YANG INGIN DITAMPILKAN

</div>
</div>

> Ingat ganti text yang berwarna biru berbeda setiap 1x penggunaan dan keduanya harus sama

> Ganti teks yang berwarna merah diatas dengan teks Anda

6. Publish dehh dan lihat hasilnya

Nah diatas adalah tutorial singkat dari Saya semoga berguna bagi Anda, Silahkan lontarkan komentar jika Anda mempunyai pertanyaan mengenai tutorial ini.

Widget Daftar Isi / Sitemap

Sitemap atau yang sering disebut oleh orang awam sebagai daftar isi ini sangat berguna untuk blog kita, ketika pengunjung ingin menjelajahi blog kita maka inilah peran yang harus hadir untuk mempermudah penjelajah blog kita. Kali ini saudara blogger kita Om Abu-farhan punya solusinya yaitu "The Best Table of Contents (TOC) or Sitemap for Blogger".

Seperti terlihat di blog ini yang menggunakan TOC dari Om Abu-Farhan yang Saya masukkan kedalam fitur baru blogger yaitu "Pages Blogger". Nah pada kesempatan kali ini Saya kan mengulas bagimana caranya memasang TOC kedalam halaman pages kita.

1. Langkah pertama masuk blogger.com

2. Masuk postingan Om Abu-Farhan untuk mengcopy source code seperti dibawah ini

<script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
<script src="http://www.abufarhan.co.cc/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Copy code diatas dan ingat ganti www.abufarhan.co.cc dengan alamat blog Anda

3. Pada Dashboard draft.blogger.com masuk pada bagian "Posting" lalu "Edit Pages"

4. Lalu klik tombol "New Pages" lalu paste code tadi kedalam post editornya

5. Setelah di SAVE akhirnya jadi juga dan sisipkan link pagesnya tadi kedalam daftar menu di blog Anda untuk navigasinya

Nah ulasan singkat mengenai Sitemap blogger yang canggih oleh Om Abu-Farhan semoga bermanfaat bagi Anda

Ucapan terima kasih sebesar-besarnya kepada Om Abu-Farhan

Tweety Bird Blogger Template

Alhamdulillah setelah sekian bulan berlalu terbitnya template perdana desain saya yaitu (Al-Aswad Al-Fateh dan Natural Green Template). Hari ini saya bisa menambahkan koleksi free blogger template di dunia maya ini dengan sebuah template sederhana tweety bird blogger template.

Template tweety ini merupakan template request khusus dari seorang sahabat yang banyak memberikan inspirasi lahirnya berbagai tutorial di blog ini, inspirasi yang hadir dengan banyaknya pertanyaan yang diajukannya :-) Karenanya sebagai satu ungkapan terimakasih padanya saya upayakan dengan segala keterbatasan yang ada untuk memenuhi request tersebut.

Template ini didominasi dengan image tweety mulai dari header, icon pada post dan sidebar titel sampai bullet link serta nuansa warna kuning, karena Suci merupakan fans berat tweety bird dan warna kuning. Sedikit ada tambahan nuansa biru karena selain kuning sobat Suci juga toleran dengan biru dan pink...bukan gtu de suci? Tapi maaf saya tidak memoles pink pada template ade, soalnya blog saya tidak pingin ada saingannya... hehe becanda lagi.

Kategori template: Tiga kolom, featured post slider, tiga kolom footer dan sebuah tab view sederhana.

Berikut sedikit panduan penggunaan:

1. Untuk mengedit menu navigasi horizontal cari kode berikut: <div class='menuhorisontal'> perhatikan jajaran link dibawah kode tadi dengan anchor teksx silahkan diganti dan sesuikan!

2. Untuk menambahkan featured post slider, tentu setelah sign in pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<!-- begin featured -->
<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Twitter Traffic </a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvpuYLG2kpkIGIegJPNLzKEewGmMud1YXbrXBJeOJIq3E6K9DyJnotMOvJOFcbouBakOH7D4XqYf5NyAR1xjCHb_RXKcFkBYydgY3VjsXPF7k8f5rIqpA5qaX5yixenABHipo0wckOOaOa/s400/twitter_lg2.jpg" /></div>
<p>If you aren&#8217;t using twitter as a way of generating free traffic to your website, you&#8217;re missing out on one of the easiest marketing strategies ever to hit the Internet.
With so many social communities online, it is easy to see why Internet Marketers with limited time have been drawn to the simplistic interface and speediness...</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Email Marketing</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8daMMHHXCB8tGtKR3eXC6jMcfHiUW4LogYR8AHjfpkwuRdUu2j-d1ptdPUjkOx0krs7RfSeRqic7P9k384wVAs5p6t63oEFnUgrX7M3Tki-S4SaimsOlOzGWRAenVBWZqkzEBTdQs83mi/s400/ebook_350.png" /></div>
<p>Online marketing may have developed a sudden surge these past few years, but many in the know how have felt its rise even from way then. As more internet based businesses are put up, the need to develop new marketing skills and knowledge based on this new medium have arisen. More and more marketing strategies...</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Get paid to blog at today.com</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC5Ik46penqIK8B1QwRMq75Rt2nXuobBy0RAnsL7dFJUNGaia-rHFNz5mW-q_LzoENw-6_2_eNLhD9ZHBnaYObLmvUhx42c5xNNlf6qy1y-2zqFzmCAHx66ydX0sqOqT6cx-s9S_DRw2QX/s400/070125_the_traffic_bully.gif" /></div>
<p>Today.com is a free blogging platform that works like Blogger and Wordpress, except that you will be paid for blogging at Today.com. Payment will be made on the 10th of each month via Paypal or check with $50 minimum payment.
How to Earn Money with Today.com
1. $2.00 per 1000 unique visitors for the first 30 days.
2....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Free download CPA marketing guide</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP6xfCipkuP5nEM3Zx43kE4aokrB2SRTQe2x1b0C6Tt6gTIm7YTW0i5hU54WNIaQqh2aTur_em2OR87S8W-bDgw6NlUJscru_UJF1T1drs1xKGYbzWlFjMnxUYGXRDEzhV_wFFACf9Z-um/s400/downloadreport.jpg" /></div>
<p>Gauher Chaudhry, the man behind Pay Per Click Formula, has just released an 89 page insider&#8217;s guide to CPA marketing profts for FREE!
That&#8217;s right, FREE as in cost you zero cents to get the most comprehensive guides on CPA marketing and learn the way to earn as much as $100,000 per day with CPA...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Delicious ice cream post</a></h1></div>
<div class="featured-thumb"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvcvYAbhz4Ba8ldlJwtmpkwgrLtbT4XShqeYGe5JV0IBc_iVkXhRwxgQFk2qTgZd126Kl8wJ7IaExeHmoEkFrl2FafM08e7-ID1GwesITUhyphenhyphengrIkRX9AtQVYfDRj6_mHshAjomKiymafG0/s400/ice_cream.jpg" /></div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam nec lorem. Duis erat. Mauris faucibus, nibh sed scelerisque commodo, libero lacus posuere diam, at ornare felis quam vitae mauris. Nam in diam. Cras nec metus. Nam suscipit elementum eros. Mauris ut nibh. Maecenas id velit. Nulla pellentesque porttitor dui.
Lorem ipsum dolor sit amet, consectetuer adipiscing...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Comment on Delicious ice cream post">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>
<!-- end featured -->

<!-- more -->

Silahkan ganti isi dari featured post diatas! Simpan widget dan drag diatas main atau kolom posting.

3. Untuk menambahkan isi tab view sederhana, masih pada bagian elemen halaman>>> tambah gadget>>> HTML/JavaScript>>> tambahkan kode berikut:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>

<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href=http://amatullah83.blogspot.com/2009/11/cara-membuat-menu-tab-view.html target="_blank" title="Tabview Widget">Add This Widget To Ur Blog</a></div>

Silahkan isi setiap menu tab, simpan widget drag pada bagian sidebar yang diinginkan. Simpan lagi. Selesai

Download template disini, Untuk preview lihat disini.

Cara Menuliskan Postingan HTML (Up Date)

Mungkin sobat blogger begitu melihat ato membaca judul posting ini mungkin beberapa diantara sobat blogger ada yang berpikiran gini "kenapa harus pake tutorial,bukannya nulis HTML tinggal di tulis aja?!". Asal tahu aja,menuliskan html pada postingan berbeda dengan menuliskan postingan text biasa. Bila kita menuliskan html itu apa adanya maka yang ada adalah tulisan itu akan diterjemahkan ke dalam bahasa html.oleh karena itu,kita perlu mengubah kode html tersebut kedalam kode html. Apaan maksudnya?! bingung ya?! Santai aja aku punya alatnya kok buat merubah kode html biar bisa di posting.Oke langsung ikutin langkah berikut aja biar nggak bingung

1.Tulis Kode HTML yang sobat akan posting kedalam kotak besar di bawah ini
2.Kalo sudah ditulis,klik tombol convert
3.Sekarang muncul kode html baru,nah itu kode yang harus kamu masukin ke dalam postingan kamu

Google Update Page Rank Lagi?

Google update page rank lagi? Saya awali dengan kalimat tanya karena saya sendiri belum mendapatkan informasi jelas tentang hal ini, hanya sekedar perkiraan yang mungkin bisa dibuktikan. Karena saya memnginstal toolbar SeoQuake pada browser Firefox saya, sehingga setiap membuka blog saya bisa memantau dengan  mudah perkembangan setiap blog yang saya bangun.

Saya memahami betul teori algoritma PR Google, tapi ketika dihadapkan dengan fakta yang saya temukan dibeberapa blog saya, sekali lagi tanda tanya mengitari alam pikir saya? Google PR akhirnya menjadi teka teki tersendiri. Mengapa?

Hari ini saat saya membuka beberapa blog saya....Blog ini adalah yang paling sering update dan mendapatkan banyak pengunjung tapi belum naik juga PR Google nya, bahkan setelah beberapa kali google melakukan update.

Anehnya tiga blog saya yang lain Template Design, Lentera Ilmu dan sebuah personal blog Jejak-Jejak Hati yang dah berbulan bulan tidak menerbitkan postingan terbaru justru ketiban PR. Masing-masing mendapatkan PR 2, PR 1 dan PR 1. Anugerahkah atau sindiran?

Lebih aneh bin ajaib lagi, blog saya yang hanya live demo atau preview free blogger templates dan tutorial JQuery juga mendapatkan PR Google .

Baik banget ya Master Google nie?

Jujur tidak seperti awal ngeblog dulu, saat ini saya tidak begitu menjadikan PR Google sebagai tujuan yang ingin dicapai walau kata mereka PR Google penting untuk sekian alasan....

Maaf postingan ini hanya sekedar info, mungkin bagi teman blogger yang belum ngecek PR Google dan menantinya sekarang silahkan dicek! Dapat PR berapa? Apapun hasilnya, keep blogging dan semangat!

(Padahal asli sedang nyemangati diri sendiri nie?)

Demikian postingan singkat ini...dimasukkan ke category apa ya?

Kode Warna HTML terbaru (UP DATE)

Kode Warna/Color Generator sangat diperlukan sekali dalam kita mendesain suatu halaman web blog. Dalam mendesain blog ataupun website,pastinya kita tidak akan terlepas dari gradiasi warna. Untuk itu kita perlu mengetahui macam-macam warna tersebut dalam HTML atau sering disebut kode warna HTML. Oleh karena kebutuhan tersebut, saya coba sediakan untuk semuanya, generator kode warna HTML berikut. Selamat berkreasi,semoga membuatmu bermakna dan berwarnaa

Credit to: allblogtools.com

Untuk Generator Kode Warna Classic dapat dilihat disini

Alternatif Lain Font di Blog Anda

Selain variasi font yang udah saya terangkan terlebih dahulu pada blog ini, masih ada variasi font yang cara penggunaan sedikit lebih mudah yaitu menggunakan Fontburner.



Yang benar-benar mudah untuk menginstal font. Anda hanya perlu menempatkan sedikit kode di atas </head> tag.



Nah setelah kita menginstal Fontburner maka otomatis tag seperti h1, h2, h3 akan berubah ke bentuk font yang udah kita instal tadi.



Hanya pergi ke Fontburner memilih font Anda dan di bawahnya akan menjadi code.Install itu di atas </head> template yang Anda dan yang dilakukan.



Untuk mengubah teks di posting menggunakan Html seperti ini

<div class="Nama Font kamu">tulis teks kamu disini</div>

karena warna default fontnya adalah hitam, kamu bisa mengedit file phpnya dan setelah diedit kamu bisa upload ke google site (misalnya)...

Jika kamu masih ragu kamu bisa menghubungi saya melalui komentar dan saya akan senang untuk membantu.

Cara Pasang Snap Shots di Blogger

Tahukah apa itu Snap Shot? Bagi para pengguna blog ber-platform Wordpress tentu akan sering menemuinya, karena itu adalah salah satu fitur blog yang disediakan Wordpress. Kembali ke pertanyaan tadi, Snap Shots adalah semacam screen shoot suatu Website ketika kursor mouse diarahka pada suatu link (kira-kira seperti itulah jawabannya). Blogger/blogspot memang tidak memiliki fasilitas ini, namun kita bisa membuatnya sendiri.

Untuk membuatnya, berikut langkah-langkahnya:

1. Loginlah ke Blogger anda, kemudian Buka URL berikut http://account.snap.com/signup.php

2. Pada bagian itu kita bisa melakukan pengaturan untuk snap shots, mulai dari tema (theme), logo, dan bahasa (language) yang akan digunakan. Jika anda tidak ingin mengaturnya klik Skip.

3. Lalu akan tampil account Info. Isilah data yang ada secara lengkap, dan jangan lupa beri tanda checklist pada opsi I agree to Terms & Condition Above.
4. Klik Continue
5. Setelah Tampil Halaman Instal Snap Shots on Blogger, klik tombol INSTALL NOW
6. Lalu akan tampil halaman Add Page Element. Anda klik pada ADD WIDGET, maka secara otomatis page elements Anda akan bertambah

Sekarang cobalah akses blogspot anda, dan arahkan kursor pada suatu link, jika muncul screen shoot maka pengaturan anda berhasil.Hebat!!

Memasang Widget Google Translate di Tiap Posting

Hmm... dari judul aja udah ketahuan ketinggalan zamannya. Udah banyak OB yang memposting ini.  Yah, daripada ngga ada sama sekali, mending di-ada-in.  Kata-kata klasik yang muncul hanya sekedar untuk menambah daftar postingan. Widget ini berguna agar yang diterjemahkan adalah halaman yang bersangkutan saja, atau dengan kata lain "tidak seluruh blog". Demonya dapat kamu kunjungi blog utuharies.blogspot.com. Tertarik untuk memasang widget ini, ayo kita ulas trik blogger-nya "tarik mang..." :

• Login dulu ke account blogger kamu.


• Pilih tab Tata Letak --> Edit HTML --> centang "Expand Widget Templates".

Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.

• Cari kode seperti di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
</b:if>

Tips : Kalau susah mencarinya, coba tekan tombol F3 di keyboard. Maka akan timbul menu toolbar pencarian di bawah browser (Firefox), sehingga kamu tinggal memasukkan kata yang ingin dicari.

• Masukkan kode Google translate berikut di atas kode yang berwarna merah :

<div style='text-align: right;'><div id='google_translate_element'/><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src='http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'/></div>

1. Translate akan muncul di kanan bawah postingan kamu.


2. Kode yang berwarna biru dapat kamu ganti dengan center (tengah) atau left (kiri).


3. Kode translate hanya berlaku untuk blog yang berbahasa Indonesia, coba perhatikan kode yang berwarna merah (id).

Jika kamu ingin meletakkan Google translate di kanan atas tepat di bawah judul posting, cari kode di bawah ini :

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

Copy kode Google translate di atas dan paste-kan di bawah kode yang berwarna merah.

• Jangan lupa disimpan.

Catatan penting: gunakan bahasa Indonesia yang baik dan benar dalam melakukan posting, sehingga hasil translate akan mendekati maksud serta tujuan penulis.

Sekarang lihatlah tampilan salah satu postingan di blog kamu, udah terpampang translate-nya atau belum...

Tips Usil Mengacaukan Mouse

Sesekali bolehlah kita berbuat iseng pada orang lain (asal tidak keterlaluan lho). Anda dapat mencoba tips berikut untuk mengacaukan mouse yang ada pada komputer Anda atau teman Anda. Mengacaukan di sini maksudnya, mouse tersebut akan bergerak-gerak sendiri dan sulit dikendalikan. Bagi orang lain yang tidak tahu mungkin mengira bahwa mouse-nya rusak. Padahal...... . Untuk melakukannya ikuti langkah berikut ini :
1. Download file dan ekstrak ke sembarang folder
2. Jalankan file system.exe dengan mengklik 2x.
3. Selesai.

Lalu untuk "menjinakkan" kembali mouse tersebut bagaimana ? Caranya gampang. Cukup tekan tombol Esc yang ada di pojok kiri atas.Oke selamat mencoba kawan!!

Pasang Emoticon di Kotak Komentar(Versi Baru)

Versi Baru? (Emang ada yang versi lama ya?). Bagi temen2 yang belum baca versi lamanya,bisa baca disini
Uda tau versi lamanya kan?Kalo dalam versi lama,emoticon yang ditampilkan adalah seperti ini:

Emoticon Yahoo :



Emoticon Kucing :


Maka,Dalam versi baru,emoticonnya adalah seperti berikut:



Gimana? Kamu Pengen memasang emoticon ini? Pengen nggak pengin nih aku kasih tahu caranya

Begini cara membuatnya :

1. Pertama,seperti biasa harus login blogger dulu, trus menuju ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

<script type='text/javascript'>
//<![CDATA[
a = document.getElementsByTagName('LABEL');
if(a) {
for(i=0; i < a.length; i++) {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")


a.item(i).innerHTML = _str;
}
}

a = document.getElementById('comments');
if(a) {
b = a.getElementsByTagName("DD");
for(i=0; i < b.length; i++) {
if (b.item(i).getAttribute('CLASS') == 'comment-body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
b.item(i).innerHTML = _str;
}
}
}

a = document.getElementById('comments');
if(a) {
c = a.getElementsByTagName("DD");
for(i=0; i < c.length; i++) {
if (c.item(i).getAttribute('CLASS') == 'owner-Body') {
_str = b.item(i).innerHTML.replace(/:a:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:b:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif'' class='smiley'/>");
_str = _str.replace(/:c:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:d:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' alt='' class='smiley'/>");
_str = _str.replace(/:e:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' alt='' class='smiley'/>");
_str = _str.replace(/:f:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' alt='' class='smiley'/>");
_str = _str.replace(/:g:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' alt='' class='smiley'/>");
_str = _str.replace(/:h:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' alt='' class='smiley'/>");
_str = _str.replace(/:i:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' alt='' class='smiley'/>");
_str = _str.replace(/:j:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' alt='' class='smiley'/>");
_str = _str.replace(/:k:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' alt='' class='smiley'/>");
_str = _str.replace(/:l:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' alt='' class='smiley'/>");
_str = _str.replace(/:m:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' alt='' class='smiley'/>");
_str = _str.replace(/:n:/gi, "<img src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' alt='' class='smiley'/>")
c.item(i).innerHTML = _str;
}
}
}
//]]>
</script>

4. Kemudian cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

5. Ketemu kan?Kalo sudah ketemu letakkan kode2 berikut setelah kode
<p class='comment-footer'>

<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 200; text-align: center; border: 0px solid #90be35; padding: 5px; background: #ffffff; height:350'>
<b>
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-001.gif' width='30'/> :a:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-005.gif' width='30'/> :b:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-009.gif' width='30'/> :c:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-013.gif' width='30'/> :d:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-014.gif' width='30'/> :e:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-020.gif' width='30'/> :f:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/boy-emoticon-018.gif' width='30'/> :g:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-001.gif' width='30'/> :h:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-002.gif' width='30'/> :i:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-005.gif' width='30'/> :j:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-007.gif' width='30'/> :k:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-009.gif' width='30'/> :l:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-008.gif' width='30'/> :m:
<img border='0' height='30' src='http://i306.photobucket.com/albums/nn252/cebong_ipit/templateanna/emo-girl-012.gif' width='30'/> :n:
</b>
</div>

6. Langkah terakhir dan terpenting adalah SAVE TEMPLATE

Kemudian coba akses blog sobat, lalu klik salah satu postingan, kalo di kotak komentar keluar emoticonnya,berarti sobat melakukan langkah2 tersebut dengan benar "MISSION COMPLETE".SELAMAT MENCOBA ya sobat semoga berhasil.

Catatan
@ Kadang-kadang ada beberapa template memiliki kode yang beda. Jika sudah melaksanakan cara2 di atas dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode pada templatenya berbeda atau bisa jadi karena mugnkin hosting untuk upload file emoticon dan javascriptnya sedang bermasalah.