Cara Pasang Emotion Soldier di Kotak Komentar

Cara Pasang Emotion Soldier di Kotak Komentar - Memasang emotion pada kotak komentar sangat memberikan nilai tersendiri untuk pengunjung dalam berkomentar, mungkin akan lebih menarik, dan membuat nyaman pengunjung yang ingin berkomentar. Ternyata pemasangan emotion soldier di blog zoel ini membuat salah satu sahabat zoel menginginkan untuk memasang emotion ini di blognya.
Oke deh kalau begitu tidak akan berlama-lama lagi saya akan memberikan cara pemasangan emotion soldier di kotak komentar blogspot.

Screen shoot :


1. Masuk ke Account Blog anda
2. Pilih tata letak
3. Pilih Edit HTML
4. Beri centang pada "expand Widget template"
5. Setelah itu cari kode </body> pada template
6. Letakkan Kode HTML dibawah ini sebelum kode </body>

<script src='http://zoel.googlecode.com/files/soldier.js' type='text/javascript'/>

7. Setelah selesai dengan Script diatas cari kode berikut :

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

8. Setelah itu silahkan Copy-paste kode Script dibawah ini sebelum Kode Script di atas :

<b><img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81H087PQqI/AAAAAAAAA1Q/XJwK7ZX_OWI/s800/th_toel2.gif' width='50'/>
:a:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81H0-7Ic_I/AAAAAAAAA1M/4elLiuOvxAE/s800/th_sinar_penghancur.gif' width='50'/>
:b:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtryEUoI/AAAAAAAAA1I/P_DjCdY63ss/s800/th_rokok_dulu_bos.gif' width='50'/>
:c:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtSx5JkI/AAAAAAAAA1E/rFy1OtLdpfk/s800/th_nyanyi_dolo.gif' width='50'/>
:d:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81HtAkZLWI/AAAAAAAAA1A/MtxAiF2noLs/s800/th_ngupil.gif' width='50'/>
:e:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtB260HI/AAAAAAAAA08/s4FrKbVSiqE/s800/th_ngantuk.gif' width='50'/>
:f:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HtDrG9GI/AAAAAAAAA04/iD3Qgl_HiMk/s800/th_nangis_bawang.gif' width='50'/>
:g:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HjGJfEAI/AAAAAAAAA00/M_2hdkO1jrc/s800/th_mboh_gajelas.gif' width='50'/>
:h:
<img height='50' src='http://lh4.ggpht.com/_UEOySJCSmVg/S81HjLDGxSI/AAAAAAAAA0w/cNyFhVZ0eow/s800/th_hoeekzz.gif' width='50'/>
:i:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81Hi1DwTFI/AAAAAAAAA0s/PpjN6pC6Yvg/s800/th_cloud_ngeDJ_wkaaka.gif' width='50'/>
:j:
<img height='50' src='http://lh5.ggpht.com/_UEOySJCSmVg/S81HiytkCuI/AAAAAAAAA0o/pyVM3hcKHUI/s800/th_bye.gif' width='50'/>
:k:
<img height='50' src='http://lh3.ggpht.com/_UEOySJCSmVg/S81Hi-RW5AI/AAAAAAAAA0k/TuBPNUsIun0/s800/th_boom_boom.gif' width='50'/>
:l:
</b>
<br/><small><div style='float:right;margin-bottom:5px'><a href='http://zoelf.blogspot.com/'><strong>zoelf</strong></a></div></small>

Nah setelah itu silahkan cek halaman sobat.. Sudah terpasang emotion soldier di kotak komentar sobat..

Menghindari Duplicate Title tags blogspot

Menghindari Duplicate Title merupakan salah hal yang perlu diperhatikan dalam optimasi SEO. Karena yang namanya duplicate, google sangat tidak menyukainya. Oleh karena itu usahakan untuk menjauhlah dari yang namanya duplikat content baik duplicate title, maupun duplicate description.
Namun untuk saat ini zoel akan sedikit memberi informasi agar blog sobat tidak mengalami duplicate title.

Cara mengececknya sobat cukup :

1. Login ke webmaster tools
2. Klik nama blog Anda
3. Pilih Diagnostics pada sidebar kiri, kemudian pilih HTML Suggestions. Halaman ini memberikan tahu kepada Anda tentang masalah-masalah yang menyangkut coding di blog Anda. Berikut contoh duplicat content, dalam hal ini duplicat title tags yang ditangkap google dan dilaporkan ke webmaster tools. Maslah ini timbul karena link utama postingan dan link komentar salah satu artikel di blog sama-sama terindeks Google. Tentunya jika pengunjung klik kedua link tersebut mengarah ke halaman yang sama.

Sedikit screen shoot dari duplicate title milik zoel:



Nah bisa dilihat terdapat duplicate title pada posting yang berjudul "Banner Friends". Hal ini disebabkan duplicate title yang muncul karena terindeksnya 2 alamat berbeda namun mengarah pada 1 artikel yang sama. Duplicate content di atas diakibatkan terindeksnya Link komentar yang mengarah pada 1 halaman yang sama dengan alamat aslinya. Jelas ini membuat 2 alamat berbeda menjadi 1 halaman.
Solusinya : karena link komentar tersebut secara default bersifat dofollow (dirayapi robots.txt) maka kita hanya tinggal memberikan perintah pada robots.txt untuk tidak merayapi link tersebut (nofollow).

Caranya seperti ini :

1. Login blogger
2. Tata Letak
3. Edit HTML
4. Centang Expand Templates Widget
5. Cari kode di bawah ini

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

rubah menjadi

<a expr:href='data:comment.url' title='comment permalink' rel='nofollow'>
<data:comment.timestamp/>
</a>

6. save

Selain merubah perintah menjadi nofollow, sobat juga bisa merubah kode di atas :

<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>

menjadi

 <b:if cond='data:post.commentPagingRequired'>
<a expr:href='data:comment.url' title='comment permalink'> <data.comment.timestamp/> </a>
<b:else/>
<a expr:href='data:blog.url + &quot;#&quot; + data:comment.anchorName' title='comment permalink'> <data:comment.timestamp/> </a>
</b:if>

selamat mencoba sob..
Inilah Alasan Kenapa Anda Harus Bergabung Dengan Oriflame

Membuat navigasi breadcrumb di blogger

Seperti janji zoel kemarin, hari ini zoel akan memberikan trik cara membuat navigasi breadcrumb di blogger, seperti yang sudah saya posting sebelumnya (baca : manfaat breadcrumb) bahwa baik sekali manfaat breadcrumb di mata google. Breadcrumb merupakan suatu petunjuk / jejak pengunjung sampai pada halaman artikel yang dia datangi.

Coba perhatikan tampilan breadcrumb seperti ini :

Browse » Home » tutorial blog » Domain .co.cc bisa diakses tanpa WWW

@ tutorial blog = ini merupakan nama label dari postingan tersebut
@ Domain .co.cc bisa diakses tanpa WWW = ini adalah judul postingan dimana pengunjung sedang berada.

Biasanya letak breadcrumb berada di atas judul postingan (bukan dihalaman utama).

Untuk yang belum pasang breadcrumb, langkah pembuatan breadcrumb :

1. login blogger
2. Design - edit HTML
3. centang kotak kecil (checkbox) bertuliskan expand widget template (tunggu beberapa detik)

4. Sekarang cari kode <div class='post hentry uncustomized-post-template'> (untuk memudahkan pencarian gunakan ctrl+f dan masukkan kode tersebut)

5. pastekan kode dibawah ini, tepat dibawahnya kode tadi :

<b:if cond='data:blog.pageType == "item"'>
<a href='http://namablog.blogspot.com/'>Home</a> &#187;
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
&#187;
</b:if>
<data:post.title/>
</b:if>

Save template dan selamat sobat sudah punya tampilan breadcrumb.

Domain .co.cc bisa diakses tanpa WWW

Cukup lama zoel tidak posting di blog ini, ada rasa kangen ingin nulis artikel namun ada juga rasa malasnya. hehe.. langsung saja deh..

Domain .co.cc bisa diakses tanpa WWW

Sebelumnya zoel telah posting (baca: bagaimana cara pasang domain .co.cc di blogspot) dan (baca juga: cara memperpanjang masa aktifnya), cara tersebut jika sobat telah selesai memasang domain .co.cc di blogspot, maka hasilnya akan menjadi "http://www.domainsobat.co.cc/". Hal tersebut mungkin membuat sobat risih karena harus menambahkan WWW di depan domain.



Kenapa Anda Terapkan Trik Ini?

Pertama... Seringkali orang saat ketikkan alamat di adress bar cenderung ia ketikkan tanpa www. Jadi, jika blog Anda tidak bisa diakses tanpa www itu sangat merugikan. Kedua.... saat bertukar link beberapa blogger memasang link Anda tanpa www, alhasil jika blog Anda tak bisa diakses tanpa www akan rugi lagi.

Dapatkan IP
1. Ping blog untuk mengetahui IP Address. Klik Start - Run. Ketikkan pada kolom CMD dan Enter untuk membuka Command Prompt.

2. Masuk jendela command prompt, silahkan Anda ketikkan ping www.domainsobat.co.cc

3. Tekan enter dan Anda akan mengetahui IP Address blog Anda.

Add Record

4. Login ke akun .co.cc Anda
5. Masuk ke bagian zona record. Dan masukkan data sebagai berikut
Host isi dengan alamat blog Anda tanpa www, misal: zoel.co.cc
TTL biarkan default
Type, pilih A
Value, isi dengan IP yang telah Anda dapatkan

6. Klik tombol Setup

Atur Redirect

Login blogger. Masuk ke pengaturan. Klik Publikasikan. Centang checklist redirect/mengarahkan namablogsobat.co.cc to/ke www.namablogsobat.co.cc

Sekarang Anda memiliki 2 list pada zona record, yakni pengaturan awal dengan CNAME dan juga pengaturan di atas agar penulisan tanpa www di redirect menjadi dengan www. Dengan begini, kemungkinan orang salah alamat saat menuju blog Anda semakin kecil. Tunggu hingga 48 jam untuk penyesuaian... Semoga berhasil....

Jadi Anda mempunyai dua record, yang pertama dgn Zone record CNAME value ghs.google.com seperti pada tutorial "bagaimana cara pasang domain .co.cc di blogspot", dan yang kedua adalah zone record (A) dgn value IP Address seperti tutor ini.

Mengenal perintah iframe

Untuk tutorial kali ini zoel ingin sedikit mengulas tentang salah satu fungsi kode HTML yakni perintah <iframe>. Dengan perintah iframe kita dapat menampilkan isi dari situs ataupun blog milik orang lain pada blog milik kita, namun walaupun demikian kita tidak boleh sembarangan tentunya harus mendapatkan izin terlebih dahulu dari pemilik blog yang ingin di tampilkan.
Perintah dasar dari iframe adalah sebagai berikut :

<iframe> .... isi dari iframe .... </iframe>

Beberapa atribut yang sering di pasang dalam iframe adalah :

ALIGN="left/right" --> Untuk mengatur posisi iframe

WIDTH="lebar" -->: Mengatur lebar IFRAME dalam pixel atau persen  

HEIGHT="tinggi" --> Untuk mengatur tinggi dari iframe dalam pixel atau persen

FRAMEBORDER="garis pembatas" --> Untuk memberi garis pembatas

SCROLLING="auto/yes/no" --> Untuk memberi atau tidak memberi scrolling pada iframe

SRC="url yg ingin di tampilkan" --> alamat sumber yang ingin di tampilkan pada iframe


Agar lebih mudah untuk di pahami, maka zoel akan memberikan dua contoh dari fungsi perintah iframe. Lebar yang ingin zoel gunakan adalah sebesar 500 pixel, dan tinggi sebesar 300 pixel.

IFRAME yang tidak mempunyai garis pembatas dan tidak mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="0" src="http://unique-r1-8.blogspot.com/" width="500" height="300" scrolling="no"> </iframe> 

IFRAME yang mempunyai garis pembatas dan mempunyai fasilitas scrolling

contoh kode yang di pasang seperti ini :

<iframe align="left" frameborder="10" src="http://unique-r1-8.blogspot.com/" width="500" height="300" scrolling="auto"> </iframe> 

Sumber : http://kolom-tutorial.blogspot.com/2007/10/mengenal-perintah-iframe.html

Menyembunyikan kotak komentar dengan spoiler

Sebelumnya zoel sudah pernah posting tentang cara membuat spoiler, sekarang pembuatan spoiler ditujukan khusus untuk menyembunyikan kotak komentar, kotak komentar ini terletak pada bagian bawah, atau mudahnya yaitu suatu tempat jika Sobat mau komentar, nah kotak itu yang zoel maksudkan.
Pembuatan ini dilakukan dengan tujuan agar halaman pada tiap postingan tidak terlalu panjang, dan menghemat pula tempat pada halaman posting.

• Pertama Sobat simpan code CSS di bawah ini di atas code ]]></b:skin

CSS

/*-----Toggle Spoiler-----*/
.widgethidden {display:none}
.widgetshown {
display:inline
overflow:auto;
}

• Kedua Sobat masukkan code javascript ini di bawah code ]]></b:skin

Java script

<script type='text/Javascript'>
function togglespoiler (postid){
var whichpost = document.getElementById(postid);
if (whichpost.className=="widgetshown"){
whichpost.className="widgethidden";
}
else{
whichpost.className="widgetshown";
}
}
</script>

• Cari code warna merah dan letakkan code warna biru di atas code warna merah, seperti terlihat di bawah:

<div style='text-align:center; margin:10px 0px; font-size:15px; font-weight:bold;'>

<a href='javascript:togglespoiler ("hide-form")' title='Click for comments'>Klik disini untuk berkomentar</a>

</div>
<dl class='widgethidden' id='hide-form'>

<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>

</dl>

Ket:

Warna biru merupakan code yang perlu ditambahkan di atas code warna merah. warna hijau bisa sobat ganti sesuai dengan keinginan sobat, kalimat tersebut yang nantinya akan tampil jika kotak komentar ter-hidden.


Save pekerjaan sobat, mudah-mudahan bermanfaat..

Membuat related post / artikel terkait

Related post / artikel terkait sangat dibutuhkan bagi suatu blog, karena dengan menampilkan related post/ artikel terkait, pengunjung akan lebih mudah untuk mencari artikel lainnya di blog Sobat. Ada syarat yang perlu diketahui dalam pembuatan related post / artikel terkait. Related post ini akan muncul berdasarkan label artikel yang sama, jadi jika artikel yang tidak diberi label, tidak akan muncul related postnya. Oia sebelumnya zoel juga sudah membuat artikel tentang related post selain link within (dengan gambar/thumbnail).

Langkah membuat related post/artikel terkait sebagai berikut

:
1. Login blogger
2. Layout
3. Edit HTML
4. download template dulu sebagai backup
5. Centang expand widget template
6.  Letakkan code di bawah ini di atas code </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>

7. kemudian cari code berikut

<b:if cond='data:post.labels'>
  <data:postLabelsLabel/>
  <b:loop values='data:post.labels' var='label'>
  <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  </b:loop>
  </b:if>

ganti dengan

<b:if cond='data:post.labels'><data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada yang berwarna merah max-result menunjukkan maksimal artikel terkait yang akan ditampilkan per label.

8. save

Yang terakhir tinggal pilih untuk penyimpanan related post.
Zoel kasih contoh kalau Sobat ingin menyimpannya di sidebar:
Sobat tinggal masuk ke layout-page elements-add gadget-selanjutnya pilih HTML/javascript seperti gambar di bawah:

Setelah tampil halaman HTML/javascript, copi paste code di bawah:

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

Happy blogging...

Membuat widget hanya tampil di halaman homepage

Trik-trik mempercepat suatu blog pada dasarnya bisa mempengaruhi posisi search engine, banyak cara yang bisa dilakukan untuk mempercepat sebuah blog, seperti yang terdahulu zoel pernah memposting "optimalkan kecepatan blog". Trik-trik dalam postingan "optimalkan kecepatan blog", lebih banyak untuk menyingkat ataupun menyederhanakan sebuah kode sehingga meringankan sebuah blog dalam loadingnya. Banyak kejadian teman-teman blogger yang mempunyai banyak widget, tapi sayang untuk di hapus. Sebenarnya sah-sah saja jika menginginkan cantumkan widget-widget tersebut pada sebuah blog, dan Sobat pun sekarang tidak usah khawatir dalam masalah posisi di search engine dalam hal lemotnya loading blog. Karena sobat bisa memasang widget-widget tersebut hanya pada homepage saja. Paling tidak dengan ini blog Sobat akan terlihat lebih dinamis, dan lebih seger untuk dilihat.



Membuat widget hanya tampil di halaman homepage
triknya seperti ini:

1. Mencari kode Widget

• Login ke blogger

• Klik Tata Letak

• Pilih Edit HTML

• Centang atau cek " Expand Widget Template".

Cari kode widget, contoh kode widget "Recent Comment" (ini hanya sekedar contoh, sobat bisa lakukan dengan widget yang lain)

<b:widget id='HTML5' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

• Jadi cara mencarinya adalah dengan nama widget. Apabila nama widgetnya "Recent Comment", cari kode widget dengan nama tersebut. Gunakan F3 untuk mempermudah pencarian.

2. Menambahkan kode

* Tambahkan kode hingga menjadi seperti dibawah ini. tulisan yang berwarna hijau adalah kode yang ditambahkan.

<b:widget id='HTML5' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

Save. Silahkan lihat hsilnya..
Semoga bermanfaat..

Mengatur Panjang dan Lebar Kotak komentar

Sedikit membahas tentang mengatur panjang dan lebar kotak komentar. Kotak komentar sudah tidak asing lagi bagi para blogger, dan kerap kali kotak komentar disajikan dengan berbagai gaya dan warna biar terlihat indah dan menarik, sehingga diharapkan para pengunjung mau berkomentar.

Ada kejadian dulu zoel melihat blog seseorang yang jika kita comment akan keluar word verification, dan word verification tersebut tertutup karena kotak komentar yang terlalu sempit, dan perintah "scroll" pun tidak ada, jadi akhirnya ga bisa comment kan disitu, akhirnya rugi juga kan ga ada yang comment di blognya. Mungkin jika keadaannya seperti itu kita bisa mengakalinya yaitu dengan mengatur panjang dan lebarnya kotak komentar tersebut, tapi mungkin sobat cuma ingin mengatur panjang lebarnya agar terlihat menarik silahkan dicoba deh.

Ya langsung saja deh..
1. Login
2. Layout
3. Edit HTML
4. Centang ceck box yang ada di kanan atas "expand widget templates'
5. Kurang lebih codenya akan seperti ini:

 <iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
  </div>

 Nah dari code di atas untuk mengatur panjang atau lebarnya terletak pada nilai dari "width (lebar)" dan "height (tinggi)".

Sobat bisa cari code seperti di atas di halaman "edit HTML" dengan menekan tombol f3 (untuk memudahkan pencariannya)


Selamat mencoba!!

Menolak klik kanan

Haduwh sudah lama ga buat postingan, jadi kangen juga, bukannya males atau ga mau posting, tapi emang kesibukan di dunia ofline yang buat zoel jadi ga sempet buat artikel, maklum kemarin ada UTS jadi harus agak ekstra fokus ke Ujian, walaupun kadang suka nyuri-nyuri waktu buat liat-liat blog, atau sekedar balas komen, udah ah curhatnya,,hehe..

Oke deh sekarang kembali ke maksud dari judul postingan ini, "menolak klik kanan" jadi maksudnya bisa terlihat gambar di atas, kalau kita ingin klik kanan di halaman web tampilannya akan seperti gambar tersebut: back, forward, reload, blablablabla...



Kita akan coba meniadakan klik kanan tersebut, atau menolak klik kanan.
Ada beberapa manfaat dengan trik seperti ini, yaitu bisa meminimalisir orang-orang yang copas di blog sobat. Walaupun ctrl+C masih bisa dilakukan.. wkwk...

Tanpa panjang lebar seperti ini cara pemasangannya:
1. Login dulu di blog
2. Pilih layout,
3. edit HTML
4. masukkan code di bawah ini setelah code <body>

<script language=JavaScript>
<!--

//By Maximus ( maximus@nsimail.com This e-mail address is being protected from spambots. You need JavaScript enabled to view it ) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com

var message="TULIS PERINGATAN DISINI YA!!!"; //

///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}

document.oncontextmenu=new Function("alert(message);return false")

// -->

</script>

Jangan lupa disparse dulu, caranya : kalo zoel lebih suka dengan tools ini, http://centricle.com/tools/html-entities/, setelah tampil halamannya tinggal copas saja codenya,, baru deh di masukkan ke edit html.

Selanjutnya tinggal di save.

Moga bermanfaat posting menolak klik kanan.

Membuat judul blog berjalan

Sobat pernah melihat judul blog yang berjalan? bergerak?? biasanya dari kiri ke kanan ya,,, Dan memang hal itu membuat menarik perhatian, nah sekarang zoel akan membahas tentang hal tersebut. Sebenarnya membuat tulisan judul bergerak seperti itu sangatlah mudah, karena hanya sedikit menambahkan javascript di bagian "data blog titlenya".



Lebih jelasnya seperti ini:
1. Login di blog sobat terlebih dulu
2. Pilih layout
3. edit HTML
4. Centang kotak kecil bertuliskan "expand template widget"

5. Cari code ini <title><data:blog.pageTitle/></title> (gunakan ctrl+f)
6. Sudah ketemukan?? kemudian code diatas ganti dengan code di bawah ini:

<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var kecepatan=300;var segarkan=null;function bergerak() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
</script>

Nb: Code warna biru adalah angka dari nilai kecepatan judul tersebut bergerak. Jadi jika kita kurangi misal jadi 200 atau 100, maka kecepatannya akan bertambah, namun sebaliknya jika menambah nilai angkanya misal 400 atau 500 jelas akan mengurangi kecepatan bergeraknya judul tersebut.

7. Sudah semuanya coba sobat Preview/pratinjau terlebih dahulu!!
8. Sudah berubahkan? Tinggal save.

Cara membuat spoiler di blog

Spoiler merupakan suatu widget atau aplikasi berbentuk tombol, yang bisa menyembunyikan sebagian ataupun seluruh dari isi konten kita. Spoiler selain memanfaatkan tempat dengan seminimal mungkin sehingga sedikit ruang yang terpakai, spoiler pun dapat mempengaruhi beratnya suatu blog, karena spoiler dapat menyembunyikan konten seperti gambar, ataupun aplikasi-aplikasi lainnya dengan sebuah tombol. Dan dapat terbuka apabila tombol tersebut diklik.



Gimana apakah tertarik dengan trik seperti ini, kurang lebih hasilnya akan seperti ini, coba sobat klik tombolnya!!

Tukeran Link yu!!

<br /> <a href="http://zoelf.blogspot.com" title="zoel's Blog" style="text-decoration:none;border:0;" target="_blank"><b><strong><blink>zoel's blog</blink></strong></b></a><br />



----banner----





<!-- Power banner --><br /> <a href="http://zoelf.blogspot.com"><img border="0" alt="tutorial blog" src="http://img63.imageshack.us/img63/8796/zoelfblog.gif" /></a><br /> <noscript><a href="”http://zoelf.blogspot.com”" software” title="”free" download><strong>free download software <br /> </strong></a></noscript><br /> <!-- end power banner --><br />
setelah sobat copas code ini di blog Sobat, beri komentar di Tab "tukeran link/banner atau di cbox"

Nah jika diklik tombolnya maka baru lah konten yang dituju akan keluar, seperti ini kodenya:

<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Tukeran link yu!! (hanya contoh) </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

isi spoiler...

</div></div></div></div>

Cara membuat spoiler di blog

1. Login di blog sobat
2. Pilih layout
3. Edit elemen
4. add a gadget--HTML/javascript
5. copas code di atas, dengan mengedit terlebih dahulu kata yang di beri warna
6. save.

Menu navigasi horizontal

Berbagai macam cara pengoptimalan pencarian artikel pada blog, kemarin-kemarin zoel sudah posting kotak pencarian "search engine" untuk memudahkan pengunjung menemukan artikel pada blog kita, selain search engine "menu navigasi" pun bisa jadi andalan dalam pencarian postingan blog kita. Kita bisa menyimpan link posting kita di navbar ini, namun navbar ini ada kelemahannya, yaitu navbar ini tidak support fungsi dropdown, namun keuntungannya pun ada yaitu praktis dalam memakainya, kenapa?? karena Navbar ini bisa kita edit tanpa melalui pengeditan HTML, jadi misal mau masukkin link tidak usah bingung-bingung pergi ke "edit HTML" untuk masukkin link, cukup dengan memasukkan link pada kotak tab "edit elements". jadi praktis sekali penggunaan navbar ini, hukum alam bahwa klo ada kelemahan pasti ada kelebihan. hehe...

Nah jika sobat tertarik dengan tutorialnya, maka sobat langsung saja Login dulu di blogger sobat-layout-edit HTML-klik expand template widget-masukkan code di bawah ini di atas code ]]></b:skin>:

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

 Kemudian letakkan code di bawah ini sesudah code <div id='outer-wrapper'><div id='wrap2'> (gunakan ctrl+f untuk memudahkan pencarian)

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Setelah itu sobat tinggal save dan sekarang coba lihat di Layout-edit elements, maka perhatikan ada gadget yang muncul di atas header.

Namun jika sobat ingin meletakkan navigasi tersebut di bawah header, maka langkah yang sobat lakukan adalah merubah letak dari <div id='outer-wrapper'><div id='wrap2'> , dan caranya rubah posisinya yang tadinya di bawah body, sekarang pindahkan tepat di atas code
<div id='content-wrapper'>
<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'/>
</div>

Maka sekarang lihat perubahannya.

Menampilkan hasil pencarian hanya judul postingan part.2

Melanjutkan Tutorial yang sebelumnya "Menampilkan hasil pencarian hanya judul postingan", maka judul yang sekarang costumasi dari tampilan judul postingan, karena ini ceritanya bersambung, jadi judulnya juga "Menampilkan hasil pencarian hanya judul postingan Part.2". Pada postingan yang pertama sudah di jelaskan manfaat dan maksudnya, dan sekarang untuk tampilan dari judul postingannya pun kita bisa obrak-abrik/costumasi dengan sedikit sentuhan agar enak dilihat..

Dan disini zoel punya 2 cara costumasi judulnya, dengan garis bawah, dan background. Atau mungkin setelah tahu dasarnya sobat juga bisa merubahnya sendiri sesuai kehendak dan sesuai kreativitas sobat.

Masih ingat bukan code ini, yang sebelumnya zoel posting disini kalau lupa coba lihat lagi biar nyambung.

<b:if cond='data:blog.homepageUrl !=
data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Nah code ini merupakan code dasar/standar.
Jika sobat ingin ada garis di bawah judul posting, codenya seperti ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

maka hasilnya:

Judul postingan mempunyai background, seperti kalimat di dalam kotak, Codenya seperti ini:

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
<a expr:href='data:post.url'>
<data:post.title/></a></div><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

maka hasilnya:

 Nb (warna biru): lebar/width bisa sobat sesuaikan dengan template sobat, background-color sesuaikan dengan keinginan sobat warna background apa yang dikehendaki bisa cari ratusan warna disini.

Mungkin itu saja Tutorial kali ini, posting ini hanya menyambung postingan yang sebelumnya sudah di publish.

Posisi iklan di bawah posting

Pengoptimalan posisi iklan dirasa begitu penting, pepatah bilang "posisi menentukan prestasi" (bukan berarti pepatah dalam ujian), jika posisi tepat maka sering dilihat pengunjung, dan akhirnya pengunjungpun mengklik iklan tersebut, jika iklan PPC maka menguntungkan jika banyak yang klik, atau mungkin iklan refferal/afiliasi dengan posisi yang menarik sehingga pengunjung sering membaca iklan tersebut, dan akhirnya pengunjung pun ikut dengan program iklan yang kita terbitkan di blog, itu juga bisa menguntungkan bukan?? Berbagai macam cara penempatan iklan bisa dilakukan, tapi untuk kali ini satu-satu dulu deh biar jelas, hehe... Sekarang iklan akan di tampilkan di bawah post.


Code dasar yang perlu sobat ketahui yaitu code posting blogger dengan code seperti ini  <data:post.body/>

Jadi logikanya jika kita ingin simpan sesuatu/katakanlah iklan, maka sobat tinggal tempatkan saja di bawahnya seperti ini:

<data:post.body/>
<simpan iklan disini>

Saya dulu bingung dengan penempatan iklan yang seperti ini, tapi setelah mengetahui caranya ternyata simpel. hehe..

Namun kondisi yang kurang nyaman apabila code yang telah kita masukkan tadi muncul di halaman setelah posting, dan tampil juga di halaman depan, maka sobat perlu menambahkan sedikit code:

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<simpan iklan disini>
</b:if>

Gimana sudah ngertikan cara meletakkan codenya??
Oia sedikit penjelasan untuk yang masih belum paham dengan penjelasan tadi masalah code <data:post.body/>, nantinya sebelum mencari code tersebut centang dulu tulisan "expand template widget".

Jadi keseluruhannya seperti ini:
1. Login blogger sobat
2. Layout
3. Edit HTML
4. klik "expand template widget" cari code <data:post.body/>
5. Masukkan code iklan sesuai penjelasan di atas.

Selamat mencoba...

Optimalkan penampilan feedburner dengan pageflip

Dengan gambar di samping apakah sobat sudah paham apa yang sekarang mau kita buat?? "Optimalkan penampilan feedburner dengan pageflip", ya itulah dia, coba sobat baca tulisan yang tercantum dibalik lipatan kertas tersebut: "Subscribe VIA RSS", ada kan.. Nah natinya pengunjung bisa mengklik gambar tersebut untuk berlangganan artikel sobat.

Tampilan awalnya akan seperti ini:

pageflip2

Setelah sobat arahkan pointer mouse pada lipatan kecil pojok kanan, maka tampilannya akan terbuka seperti lipatan kertas:

pageflip2

Dan lihat lipatan kertas terbuka, dan muncul tulisan "subscribe VIA RSS", seperti ini tutorialnya:

1. Login di blog,
2. dashboard-layout-edit HTML
3. Letakkan code CSS di bawah, di atas code ]]></b:skin> 

#pageflip { position: relative }
#pageflip img { border:none; width:50px; height:52px; z-index:99; position: absolute; right:0; top:0; -ms-interpolation-mode:bicubic }
#pageflip .msg_block { width:50px; height:50px; position:absolute; right:0; top:0;
background:url(http://lh5.ggpht.com/_7Y9pl24WpQY/S1sO-qUjmxI/AAAAAAAACwU/DrjPrO1XXaU/page%20flip_thumb%5B1%5D.png?imgmax=800) no-repeat right top; text-indent:-9999px }

4. Sisipkan code <script src='http://rizatea.googlecode.com/files/pageflip-zoel.js' type='text/javascript'/>, di bawah code ]]></b:skin>
5. Letakkan code di bawah setelah code body

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blog-zone' target='_blank'>
<img alt='' src='http://lh6.ggpht.com/_7Y9pl24WpQY/S1sO3NyCTSI/AAAAAAAACwM/6DxgJaTzsdc/page%20flip%20image_thumb%5B1%5D.png?imgmax=800'/>
<span class='msg_block'/>
</a>
</div>

6. save, selesai.

Keterangan : code yang berwarna merah menunjukan alamat si gambar, dan warna biru isi dengan ID feedburner sobat.

Gimana sudah jelaskan?? klo lom jelas kasih komen dong di bawah, klo uda jelas kasih komen juga deh,, he..

Cara membuat status YM di blog

Agar orang lain tahu kalau kita sedang Online di YM, dan pastinya untuk memudahkan kita berinteraksi langsung dengan pengunjung, kita bisa menampilkan beberapa icon yang memperlihatkan apakah lagi OL atau tidak, tapi tentunya sobat juga harus sudah punya account di YM (sudah wajib itu..), kalau ga punya mau nampilin account punya siapa?? engkong mu... haha..
Cara yang praktis, efisien dan mudah tentunya membuatnya, Sobat cukup
copas code di bawah di gadget yang letaknya bisa sobat utak-atik sendiri, sudah tahu kan?? lho belom??
Baik, caranya cukup dengan langkah, Login dulu di blogger sobat ya,- kemudian layout-page elements-add a gadget-pilih HTML/javascript.

Masukkan code di bawah:

<a href="ymsgr:sendIM?ID YM">  <img src="http://opi.yahoo.com/online?u=ID YM&amp;m=g&amp;t=2&amp;l=us"/>
</a

Keterangan: tulisan berwarna merah Sobat isi dengan ID YM sobat, ngertikan?? itu lho kalau sobat mau login di YM harus masukkin dulu ID+password, nah untuk ini ga usah pakai passwordnya, cukup ID sobat saja. Dan yang berwarna biru pada angka 2, itu menunjukkan code dari gambar status yang ingin sobat tampilkan dihalaman blog Sobat, Bisa dilihat gambar di atas, ada code plus gambarnya. Oke gimana??
Mudah bukan??

Kasih komennya dong..

Membuat tanda tangan di bawah posting

Dalam kehidupan sehari-hari, tanda tangan merupakan bagian identitas. Dengan menaruh tanda tangan atau signature, itu merupakan pertanda bahwa apa yang di buat atau sesuatu yang diberi tanda tangan itu dibuat oleh kita.
Blog pun bisa kita kasih tanda tangan ditiap akhir postingannya.
Dan caranya cukup mudah untuk membuat tanda tangan di bawah postingan, sobat tinggal kunjungi saja situsnya di mylivesignature.com.

Baik tahapannya seperti ini :



Setelah sobat kunjungi situsnya, maka tampilannya akan seperti di bawah ini, dan sobat klik saja "start now!",

Selanjutnya obat akan di beri 3 pilihan untuk membuat tanda tangan:
1. Apakah ingin membuat tanda tangan dengan format yang telah ada (Create a new signature using our wizard)
2. menggambar dengan menggunakan mouse (Draw a new signature on your screen)
3. atau membuat tanda tangan yang dibuat sendiri dan di scan, sehingga nantinya harus di upload (Download a signature)

Untuk yang pemula (seperti saya) mendingan pakai yang no. 1 saja biar simple ga ribet,,he..
"buat apa cari yang susah kalau ada yang mudah" .

Kemudian sobat masukkan nama yang akan di bentuk menjadi tandatangan, oke sudah ya??
Selanjutnya sobat tinggal pilih saja tuh model dan ukuran tanda tangannya. klik next step, sesuaikan sendiri deh model yang sobat suka.

Kalau ga salah ada 5 step, jika sudah akan tampil gambar seperti ini:

Pilih yang paling bawah, want to use this signature?
Terakhir "generate HTML code", nah sudah dapat HTML-nya kan??
Selanjutnya tinggal penempatannya.

Login di blogger sobat-setting/pengaturan-formatting-cari dibawah: post template-copas code yang telah sobat dapat tadi di mylivesignature.com.

Save kemudian lihat hasilnya..

Jangan lupa komen dan follow sekalian ya...

Thanx kunjungannya sobat...