Salah Bantal

Teknik Canggih SEO Terbaru, Tutorial Blogging, Tugas Softskill Gunadarma

Cara Membuat Kotak Blogroll dan Marquee




Kali ini aku mau ngejelasin trik kali dengan gaya puisi, biar nggak bosen, tapi jangan diketawain ya, soalnya lom pernah buat puisi nih.

Tatkala link-link jumlahnya sudah berjuta-juta
Maka semakin sesaklah dada blog ini
Jikalau hal ini tidak diatasi dengan bijaksana
Maka blognya dikau akan penuh sesak dengan link-link itu

Udah bagus nggak puisinya? ancur ya? :r Ok lanjuuut.

Oleh karena itulah
hamba memberanikan diri untuk menawarkan obat sesak tersebut
Melalui secuil ilmu berikut
Daku berharap dapat membantu kisanak supaya blognya tidak sesak


Kira-kira pada mudeng nggak ya penjelasan tadi, ah biarin deh :z
:r udah ah, udah mual2 nih pake gaya puici, sekarang ganti gaya biasa aja.

Untuk trik kali ini, ada dua macam kotak blogroll yang akan kita buat, terserah kamu mo pilih yang mana. Kotak blogroll-nya yaitu:

1. Kotak Blogroll Model Textarea

Contohnya seperti kotak blog roll seperti punyaku itu, itu lho yg atasnya ada tulisanya "Friend links"
Nha begini cara membuatnya :
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<div style="border: 1px solid rgb(153, 153, 153); 
overflow: auto; 
width: 200px; 
height: 200px; 
text-align: center; ">

#link1 <br />
#link2 <br />
#link3 <br />
#link...

</div>

keterangan:
- Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu bisa merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Ganti tulisan "#link1,#link2, #link3 dst" dengan daftar link-link kamu, oh ya itu juga bisa diisi dengan banner link.
- Jika kamu pingin daftar link-linknya berjajar kayak punyaku, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah itu lho). Link-link ato isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Nah gini nih cara buatnya:
Pasang code berikut ini di kedalam element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

<MARQUEE align="center" direction="up" height="100" scrollamount= "2" onmouseover='this.stop()' onmouseout='this.start()' width="95%" >

#link1 <br />
#link2 <br />
#link3 <br />
#link...<br />

</marquee>

Keterangan :
- Kode "up" itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
- Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
- Angka "100" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA
[Read More...]


Menambah Emoticon di Shoutbox



Apa kamu bosan dengan emoticon yang ada di shoutbox kamu? Nha biar nggak bosan kamu bisa menambahkan sendiri icon-icon (emoticon) kesayangan kamu kedalam shoutbox blog kamu. Mau tahu caranya? begini nih cara nya...
Oh ya, trik yang ini hanya untuk yang menggunakan shoutbox dari shoutmix.

Ikuti langkah-langkah berikut ini :
1. Login ke shoutmix.com
2. Trus di daerah menu "Display", klik link "Smileys"
3. Nha nanti kamu akan menjumpai tampilan seperti ini :




4. Untuk manambahkannya masukkan alamt icon kamu kedalam kotak "Smile image URL", kalo kamu tidak punya iconnya atau alamatnya kamu bisa gunakan alamat icon2 dibawah ini.
5. Trus masukkan "kode" (shorcut) kedalam kotak disebelahnya trus klik tombol "ADD"
6. Lakukan terus seperti itu sampai semua icon smile yang kamu inginkan masuk dalam daftar.
7. Kalo sudah klik tombol "Save Setting"

Nha coba kamu lihat blog kamu, trus lihat dishoutboxnya maka kamu sudah punya tambahan emoticon dalm shoutbox kamu.

Berikut ini daftar emoticon beserta alamat URL-nya :
Icon
URL
senanghttp://kendhin.890m.com/smile/senang.gif
yahoo_angryhttp://kendhin.890m.com/smile/yahoo_angry.gif
yahoo_bigsmilehttp://kendhin.890m.com/smile/yahoo_bigsmile.gif
yahoo_blushhttp://kendhin.890m.com/smile/yahoo_blush.gif
yahoo_cryhttp://kendhin.890m.com/smile/yahoo_cry.gif
yahoo_devilhttp://kendhin.890m.com/smile/yahoo_devil.gif
yahoo_kisshttp://kendhin.890m.com/smile/yahoo_kiss.gif
yahoo_laughloudhttp://kendhin.890m.com/smile/yahoo_laughloud.gif
yahoo_lovehttp://kendhin.890m.com/smile/yahoo_love.gif
yahoo_winkhttp://kendhin.890m.com/smile/yahoo_wink.gif
yahoo_partyhttp://kendhin.890m.com/smile/yahoo_party.gif
yahoo_prayhttp://kendhin.890m.com/smile/yahoo_pray.gif
yahoo_rotflhttp://kendhin.890m.com/smile/yahoo_rotfl.gif
yahoo_sadhttp://kendhin.890m.com/smile/yahoo_sad.gif
yahoo_sleephttp://kendhin.890m.com/smile/yahoo_sleep.gif
yahoo_smileyhttp://kendhin.890m.com/smile/yahoo_smiley.gif
yahoo_sweatinghttp://kendhin.890m.com/smile/yahoo_sweating.gif
yahoo_thinkhttp://kendhin.890m.com/smile/yahoo_think.gif
yahoo_tonguehttp://kendhin.890m.com/smile/yahoo_tongue.gif
yahoo_witsendhttp://kendhin.890m.com/smile/yahoo_witsend.gif

Oh ya lupa, maksimal icon smile yg dapat kita tambahkan adalah 10 biji, ini buat yg gratisan, kalo buat yg premium bisa nyampe 500 biji.
[Read More...]


Cara Menampilkan Status Off/Online Yahoo Messenger




Dalam trik kali ini kita akan coba membahas tentang "Bagaimana Caranya Menampilkan Status Offline/Online Yahoo Messenger". Trus fungsinya apa nih? gini, kalo ada misalnya ada penandanya seperti itu kan nanti pengunjung blogmu akan bisa langsung berinteraksi langsung denganmu, nha kalo gitu kan nanti pengunjung blogmu jadi tambah sayang ma kamu :p
Ok Langsung aja, Contohnya akan seperti ini, jika status kamu offline maka gambarnya akan seperti ini :



trus jika kamu online maka iconya akan berubah seperti ini:



Cara buatnya sangat gampang kamu tinggal copy script berikut ini trus kamu pasang di sidebar kamu, udah tahu kan cara pasanganya, itu lho seperti kalo km masang "page element", Masuk ke "Page Element" trus "Add a Gadget --> HTML/Javascript".

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


Ganti text yang warna merah (paijo) dengan id YM kamu.
perhatikan angka "2", itu bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda.
[Read More...]


Cara Menuliskan Script/Kode Dalam Artikel Blog




Untuk menuliskan script/kode kedalam artikel blog memang ada tekniknya sendiri, karena jika kita menuliskannya dengan cara yang biasa maka yang akan muncul kemudian di blog tidaklah seperti dengan apa yang kita tuliskan. Misalnya gini, jika kita menuliskan kode <head> dengan cara yang biasa maka hasilnya tidak akan muncul dalam postingan karena kode tersebut langsung diterjemahkan kedalam bahasa HTML. Jadi untuk menuliskan kode<head>, maka yang seharusnya dituliskan supaya bisa muncul kode tersebut adalah ini &lt;head&gt;. Nah terus bagaimana kalau ada banyak kode yang harus kita posting?
Mau tahu bagaimana caranya menuliskan kode2/script2 tersebut ke dalam blog?

Ada beberapa cara untuk menuliskan kode-kode tersebut kedalam blog, diantaranya yaitu:

Cara Pertama :
- Gunakan software-software web design, misalnya Macromedia Dreamwaver, Microsoft Frontpage, Namao Web Editor. Atau bisa juga dengan software-software blogtools seperti post2blog dll.
- Trus tuliskan semua kode pada area design, kemudian copy kode-kode tersebut dari area HTML Code. Nha kode-kode dalam area HTML Code tersebut lah yang harus diposting.

Cara Kedua :
- Tuliskan semua kode/script ke dalam notepad
- Kemudian ganti/replace kode-kode berikut
Kode
Kode Pengganti
<
&lt;
>
&gt;
"
&quot;

- Udah tahu kan caranya mereplace di notepad? itu lho dengan memilih menu edit --> replace kemudian pada kotak yang muncul masukkan kode yg akan direplace pada kolom "Find what" trus masukkan kode pengantinya pada kolom "Replace with"trus tekan tombol Replace All.
- Nha kalo udah semua baru kamu copy semua kode yang udah direplace all tadi, trus kamu masukkan kedalam postingan kamu.

Cara Ketiga :
- Buka situs ini http://centricle.com/tools/html-entities, trus isikan kode-kode kamu kedalam kotak yang disediakan, nha kalo sudah tekan tombol "Encode", nha maka kamu akan mendapatkan script baru untuk diposting di blog kamu.
[Read More...]


Membuat tittle blog dengan postingan



salahbantal kali ini akan membuat posting tentang tips dan trik ngeblog mengganti title/judul blog dengan title postingan?
Title blog biasanya berada didepan title postingan. Seperti yang dulu saya bilang, mengoptimalkan title itu akan mempengaruhi dalam membuat blog kita berada dalam top rank hasil pencarian search engine. Nha jika kamu menggunakan trik mengganti title blog kamu dengan title postingan maka hal itu akan lebih bagus lagi buat masuk ke jajaran depan search engine.

Bener gak sih?

Dulu ketika saya belum pake trik ini, ketika saya mencari di google dengan keyword "Cara Membuat Search Engine" maka hasilnya adalah sepeti ini:

tips dan trik ngeblog membuat title dengan postingan

Tapi sekarang ketika saya terapkan trik ini maka hasilnya menjadi seperti ini :

tips dan trik ngeblog membuat title dengan postingan

Nah tentunya orang akan lebih suka untuk memilih mengklik hasil seperti pada gambar yang kedua daripada gambar yang pertama, ya kan? dan kalo menurut yang ahli dalam SEO (Search Engine Optimization) katanya cara ini akan membuat blog kita menjadi lebihSearch Engine Friendly. OK bagi yang pingin mencobanya silahkan ikuti langkah-langkah berikut ini:

1. Masuk ke "Layout-->>Edit HTML
2. Cari kode ini ;

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

( letaknya dibagian atas)

3. Kalo sudah ketemu ganti dengan kode berikut ini :

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

4. Trus simpan.

Untuk halaman utama titlenya akan tetap title blog. tapi jika km coba buka salah satu postinganmu maka nanti title postingmu akan menjadi title blogmu.

terimakasih sudah membaca postingan tentang tips dan trik ngeblog dari salahbantal, terimakasih :)
[Read More...]


Tips Supaya Blog Muncul di Search Engine



Untuk membuat supaya blog kita bisa muncul di search engine, apa lagi munculnya dihalaman depan dan bagian atas, merupakan keinginan hampir semua bloger. Namun tidaklah mudah untuk membuat blog kita nangkring di top rank result search engine. Ada banyak cara yang dilakukan supaya hal tersebut terwujud, mulai dari yang otak-atik script dan meta tag sampai membayar jasa SEO Service. Nha berikut ini akan aku berikan sedikit tips atau hal-hal yang mempengaruhi kenapa blog kita bisa nangkring di urutan atas hasil pencarian search engine, atau setidaknya masuk dalam deretan hasil pencarian walopun berada diurutan buncit :D

Berikut ini tipsnya (untuk Google) :
1. Coba ketikkan alamat URL blog kamu di google search kemudian tekan Enter. Jika blogmu muncul berarti sudah ke indes di google tapi mungkin masih kalah bersaing dengan yang lain. Dan jika blogmu tidak muncul berarti belum keindex di google. Coba daftarkan blog km di http://google.com/addurl. Hasil tidak langsung jadi lho, jadi perlu waktu supaya blog kita terindex oleh google.

2. "Title Blog", jika membuat blog tentunya kita disuruh untuk membuat title blog. Title blog ini sangat penting dan sangat berpengaruh terhadap hasil pencarian di search engine, jadi pintar-pintarlah untuk memilih title blog km. Buatlah title blog yang menggambarkan isi dari blog km. Jangan terlalu panjang dan jangan terlalu pendek.

3. "Title Postingan". Title postingan ini juga hampir sama pentingnya dengan title blog. Dalam membuat title postingan atau judul postingan hendaknya dipikirkan betul, bayangkan kira2 judul apa yang paling cocok untuk postinganmu. Juga bayangkan kira2 jika km mencari artikel tentang postingan mu tersebut, keyword apa yang akan km ketikkan di dalam search engine. Bayangkan seperti itu.

4. "Update Blog", sering-seringlah mengupdate blog km setidaknya dalam satu minggu itu sekali ato dua kali. Hal ini pernah aku rasakan efeknya di salah satu blogku. Blogku yang pada awalnya memiliki pengunjung dari search engine sekitar 30-40% tiba-tiba menurun drastis menjadi hanya sekitar 3%. Itu terjadi karena blog tersebut sudah lama tidak aku update, dan ketika aku update lagi, kemudian blogku kembali bisa memasuki jajaran top rank di search engine result.

5. "Promosikan blogmu", promosikan blogmu ke banyak web/blog, forum, situs2 promosi gratis, dll. Karena semakin banyak link blogmu tersebar maka akan semakin sering pula spider searh engine mengunjungi blogmu.

6. Gitu aja deh tipsnya....

NB: perhatian tips-tips diatas tidak menjamin blogmu akan langsung terangkat di hasil pencarian search engine, karena metode sebenarnya dari pencarian itu yang mengetahui hanyalah dari pemilik search engine itu sendiri. Tapi setidaknya dengan mengikuti tips diatas web/blogmu bisa masuk kedalam hasil pencarian search engine .
[Read More...]


Kode-kode warna



Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalo kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Nha oleh karena itulah dibawah ini telah saya buat Chart HTML Kode Warna bagi yang tidak tahu atau bagi yg pingin tahu kode-kode warna. Cara penggunaannya cukup mudah, km tinggal klik warna yang kamu pilih, maka kode warnanya akan tampil di kotak "kode warna:". Ok silahkan dicoba.







































































































































































































Kode warna yang terpilih : 

[Read More...]


Cara mudah membuat banner




Untuk membuat banner (Link Baner) tentunya merupakan hal yang mudah bagi yang mengerti software2 desain seperti Adobe Photoshop, Image Ready, Corel Draw dll. Tapi bagi yang tidak tahu dengan software2 tersebut pastilah merasa sulit. Tapi jangan kawatir dan jangan berkecil hati, berikut ini akan aku tunjukkan cara yang mudah untuk membuat link banner tanpa harus mengerti software2 desain. Hanya dengan memilih dan sedikit otak-atik maka kamu nantinya bisa memiliki link banner yang cukup menarik. Mau tahu caranya?

Cara membuatnya sangat mudah, yaitu:
1. Buka situs http://cooltext.com
2. Disana nanti akan langsung terpampang macam-macam banner yang disediakan. Kamu tinggal pilih baner yang kamu suka.
3. Setelah itu akan muncul fomr untuk menstting banner yang telah km pilih tadi. Kamu bisa mensetting textnya, warna text, warna background, ukuran, effect, dll.
4. Kalo sudah merasa cocok lalu klik tombol "Rander Logo"
5. Tunggu sebentar sampai proses rendering selesai.
6. Maka bannermu akan langsung jadi, km bisa mengambilnya dengan mengklik link "Download Image". dan simpan banner kamu.
7. Biasanya file bannernya akan berupa file gif.


Setelah km mendapatkan bannernya maka langkah selanjutnya supaya bannernya bisa kamu pasang yaitu dengan menguyplaod file tadi ke webhosting. Kamu bisa menguplaodnya di photobucket.com. disanan nanti kamu akan mendapat link untuk banner kamu.

Trus untuk memasang supaya bisa menjadi seperti yang ada dibawah ini, maka ikutilah langkah TUTORIAL INI
[Read More...]


Mengganti Kotak Komentar Haloscan menjadi Commentbox Blogspot






Dulu sebelum kotak komentar blogger/blogspot bisa muncul dibawah postingan, banyak yang menganti kotak komentarnya dengan commentbox dari pihak ketiga, misalnya dari haloscan. Namun setelah blogger merilis kotak komentar yg dibawah postingan maka kini banyak yg berbondong beralih ke kotak komentar original dari blogspot ini. Tapi bagi yg sudah terlanjur memakai haloscan dan sudah terlanjur mengobrak-abrik templatenya tentu akan sayang jika harus mengganti templatenya demi mendapatkan kotak original blogspot ini. Nha berikut ini akan aku ulas bagaimana cara mengembalikan kotak komentar haloscan menjadi kotak komentar original dari blogger.

Ikuti tutorial berikut:


1. Login ke blogger, kemudian pilih menu"Layout--> Edit HTML"
2. Beri tanda centang pada kotak "Expand widget template"
3. Kemudian cari kode berikut :
<!-- start haloscan (part 1) -->
<script src='http://www.haloscan.com/load/kendhin' type='text/javascript'> </script>
<span class='post-comment-link'>
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/comments/kendhin/&quot;+ data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScan(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCount(&#39;<data:post.id/>&#39;);</script>
</a> | 
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/tb/kendhin/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScanTB(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCountTB(&#39;<data:post.id/>&#39;);</script>
</a>
</span>
<!-- end haloscan -->




4. Kalo sudah ketemu maka gantilah dengan kode dibawah ini :

<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>




5. Kemudian cari kode berikut ini :

<!-- start haloscan (part 2 - post) -->
<script src='http://www.haloscan.com/load/kendhin' type='text/javascript'> </script>
<span class='post-comment-link'>
<p><a class='comment-link' expr:href='&quot;http://www.haloscan.com/comments/kendhin/&quot;+ data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScan(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCount(&#39;<data:post.id/>&#39;);</script>
</a> | 
<a class='comment-link' expr:href='&quot;http://www.haloscan.com/tb/kendhin/&quot; + data:post.id + &quot;/&quot;' expr:onclick='&quot;HaloScanTB(&quot; + &quot;\&quot;&quot;+ data:post.id + &quot;\&quot;&quot; + &quot;);return false;&quot;'>
<script type='text/javascript'>postCountTB(&#39;<data:post.id/>&#39;);</script>
</a></p>
<script expr:src='&quot;http://www.haloscan.com/comments/kendhin/&quot;+ data:post.id + &quot;/?m=1&quot;' type='text/javascript'/>
<noscript><a expr:href='&quot;http://www.haloscan.com/comments/kendhin/&quot;+ data:post.id + &quot;/&quot;'>Comments</a> | <a expr:href='&quot;http://www.haloscan.com/tb/kendhin/&quot; + data:post.id + &quot;/&quot;'>Trackback</a></noscript><br/>
</span>
<!-- end haloscan -->




6. Kalo sudah ketemu trus ganti dengan kode dibawah ini:

<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>




7. Trus simpan template kamu.

8. Jika inging menampilkan kotak komentar blogger/blogspot dibawah postingan maka ikutilah Tulisan Disini
[Read More...]


Membuat Kotak Komentar Blogger di Bawah Postingan





Begini nih cara membuat kotak komentar blogger yang berada dibawah postingan.


1. Login ke http://draft.blogger.com, Ingat yanghttp://draft.blogger.com bukan blogger.com.
2. Trus ke menu Setting-->Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post" (lihat gambar dibawah)



3. Kemudian klik "Save Setting"

Sekarang coba kamu lihat blogmu dan coba di klik salah satu postinganmu kemudian lihat hasilnya, apakah sudah ada kotak komentarnya yg dibawah postingan atau belum. kalau sudah berarti langkahnya cukup disini. Kalau belum ikuti langkah berikut ini.
(ini karena kode HTML tiap2 template itu berbeda. Untuk template default dari blogger yang baru, kode HTMLnya sudah berubah, sedangkan template yg lama atau ambil dari luar ada yg belum dan ada juga yg sudah).

4. Selanjutnya pergi ke menu "Layout-->Edit HTML"
5. Beri tanda centang kotak "Expand widget templates".
6. Trus cari kode berikut ini :
<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a>
</p>
</b:if>




7. Kemudian ganti kode tersebut dengan kode dibawah 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> </b:if>


8. Lalu simpan template kamu.
[Read More...]


Membuat menu vertikal di bog






Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :


1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]></b:skin> atau sebelum kode </style> . Pokoknya ditaruh di dalam Barisan kode CSS deh.
.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }


Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif');


Pilihan Warna menu vertikal :



blue1.gif


blue2.gif


green1.gif


green2.gif


red1.gif


red2.gif


pink1.gif


pink2.gif


black1.gif


black2.gif




3. Kemudian di save.

4. Lalu pergi ke menu "Page Elements"

5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:
<ul id="verticalmenu" class="glossymenu">
<li><a href="/">Home</a></li>
<li><a href="http://trik-tips.blogspot.com">Trik Blog</a></li>
<li><a href="http://x-template.blogspot.com" >Free Template</a></li>
<li><a href="http://getebook.co.cc">Free Ebook</a></li>
</li>
</ul>

Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
[Read More...]


Highlight author comment






Highlight Author Comment fungsinya adalah supaya komentar author (pemilik blog) berbeda dengan komentar orang lain . Contohnya bisa dilihat di blog ini. Untuk komentar pemilik blog akan ada bordernya dan ada efek lainnya. Nha berikut ini akan aku beberkan cara untuk membuat Highlight Author Comment ini. Dah siap semuanya ? OK lets dance togather :D


1. Login ke blogger trus ke menu "Layout --> Edit HTML"
2. Beri tanda centang pada kotak "Expand Widget Templates"
3. Copy script berikut ini sebelum kode ]]></b:skin> atau copy ke dalam kode CSS.
.comment-body-author {
background: #E6E6E6; /* Warna Background */
border-top: 1px dotted #223344;border-bottom: 1px dotted #223344;border-left: 1px dotted #223344;border-right: 1px dotted #223344;
margin:0;
padding:0 0 0 20px;
}
4. Kemudian cari kode2 seperti berikut. Mungkin kode yg ada di HTML kamu akan beda, tp walaupun beda usahakan semirip mungkin dengan kode berikut ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
said...
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/> 


<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

5. Kode yang berwarna merah adalah kode yang harus kamu tambahkan di HTML kamu. Posisinya harus benar, ingat itu.
6. Kalo sudah terus disave template kamu.
[Read More...]


Pasang Widget Translator









Memasang widget translator atau "Penerjemah" pada blog banyak sekali gunanya. Translator ini berguna apabila ada pengunjung dari negara lain yang secara sengaja maupun tidak yang melihat blog kita dan tidak tahu bahasa kita maka mereka bisa menggunakan widget ini untuk menterjemahkannya kedalam bahasa yang mereka inginkan (tentunya yang sudah ada di widget ini). Widget ini sudah support untuk bahasa Indonesia. Dan kalo kamu mau, translator ini bisa juga untuk menterjemahkan tugas dari sekolah/kampus secara mudah. Dan hasilnya bisa lebih bagus daripada software transtool lho. Gimana? mau membuatnya? caranya mudah lho. Gini nih...


1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget=".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.


5. Kemudian simpan.

Coba sekarang lihat blogmu maka ada tampilan seperti ini :

Gadgets powered by Google
[Read More...]


Menampilkan / Pasang Emoticon di Kotak Komentar









Dengan adanya emoticon di kotak komentar tentunya akan membuat blog menjadi lebih hidup. Para komentator menjadi lebih bisa mengekspresikan perasaannya melalui icon2 (emoticon). Kalau di wordpress mungkin feature ini sudah tersedia. Tapi untuk blogspot kita harus mengotak-atik dan mengakalinya supaya bisa menampilkan emoticon di area komentar. Gimana? kamu mau memasang emoticon ini?


Seperti biasanya, di trik ini akan diberikan dua macam emoticon, yaitu emoticon kucing (seperti punyaku ini) dan emoticon yahoo. Kamu tinggal pilih mana yang kamu suka.

Emoticon Yahoo :


Gini nih cara membuatnya :
1. Pertama login ke blogger, trus ke "Layout (Tataletak) --> Edit HTML "
2. Beri tanda centang pada kotak "expand widget template"
3. Lalu letakkan script berikut sebelum kode </body>

Untuk Emoticon Yahoo :
<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>
Untuk Emoticon Kucing :
<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

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. Kalo sudah ketemu letakkan kode2 berikut setelah kode <p class='comment-footer'>

Ini untuk Yahoo emoticon :

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)] 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;)) 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/> 
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/> 
:D 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/> 
;) 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:(( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/> 
:) 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/> 
:( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/> 
:X 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=(( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/> 
:-/ 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-* 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:| 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-} 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x( 
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>


Kalo mo yang emoticon kucing pake yang ini :


<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>

6. Kalo sudah trus di "save" dan coba lihat hasilnya

Tambahan
* Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.
[Read More...]


 
Return to top of page Copyright © 2010 | salahbantal Converted into Blogger Template by Denih Edogawa