Memasang Emoticon Pada Kotak Komentar di Blog Memasang Emoticon Pada Kotak Komentar di Blog

Temen-temen tahu nggak apa itu Emoticon ? Emoticon adalah ikon kecil yang berbentuk wajah dan memiliki arti. Kali ini saya akan memberikan tutorial cara memasang emoticon pada kotak komentar. Dengan memasang emoticon di kotak komentar maka para komentator akan lebih mudah untuk mengekspresikan perasaannya. Selain itu, juga akan membuat blog kita lebih ekspresif bukan?

Nah untuk memasang emoticon dikotak komentar. Anda harus men-setting kotak komentar agar muncul dibawah postingan terlebih dahulu. Bagi anda yang kotak komentarnya berada pada halaman pop-up. Silahkan diatur dulu agar kotak komentarnya muncul di bawah postingan. Jika temen-temen tertarik ikuti saja langkah-langkah pembuatannya di bawah ini :

1. Pertama harus login dengan akun blogger anda
2. Klik rancangan
3. Edit HTML
4. centang expand widget templates pada kotak kecil
5. Cari kode </body>
6. Lalu letakkan script dibawah ini diatas kode </body>

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

7. Terus 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>

8. Kalau tidak sama, cari yang paling mendekati. Kemudian letakkan kode berikut ini dibawah <p class='comment-footer'>
   

   <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>

9. Klik Save Template.
10. Selesai. 

Jika sudah selesai semua coba temen-temen lihat hasilnya, apa sudah terpasang emoticonnya. Kalau belum coba ulangi sekali lagi mungkin masih ada kode yang masih terlewat. Sekian tutorial kali ini selamat mencoba dan semoga bermanfaat.

Read More --►

Membuat Blog Di WordPress.com Membuat Blog Di WordPress.com

Jika temen-temen blogger sudah bosan dengan tampilan blogspot, dan ingin membuat blog/web di wordpress.com. Kali ini saya akan berikan tutorial cara membuat blog di wordpress.com. Membuat blog di wordpress.com sangatlah mudah, hampir sama seperti kalau kita buat blog di blogspot. Kita tinggal isi formulir yang sudah disediakan, isi semua jangan sampai ada yang kelewatan, jadi deh blognya......

Oke, daripada berlama-lama langsung saja pada langkah-langkahnya :

1. Anda harus ke www.WordPress.com.
2. Bila anda sudah masuk halaman WordPress.com, klik tombol [Sign Up Now].
   
   
3. Kemudian proses pendaftaran dimulai dengan mengisikan :
   
   
   » Username:
   Isikan nama anda (min 4 karakter).
   » Password:
   Isikan kata sandi/password anda.
   » Confirm:
   Tulis kembali kata sandi/password yang telah anda tulis tadi.
   » Email Address:
   Isikan alamat email anda.
4. Pada ‘Legal flotsame’ anda wajib memberi centang ( √ ) opsi [I have read and agree to the fascinating terms of service] yang menandakan anda setuju dengan ketentuan dari WordPress.
   
   
5. Kemudian karena anda akan membuat blog, anda harus memilih opsi [Gimme a blog] dengan memberi tanda tik Θ. Kemudian tekan tombol [Next >>].
   
   
6. Kemudian pada halaman kedua pada proses pendaftaran :
   
   
   » Blog Domain:
   Isikan nama yang nantinya akan menjadi alamat blog anda Contoh : bootingskodos.wordpress. com
   
   
   » Blog Title:
   Isikan judul blog anda.
   
   
   » Language:
   Pilih bahasa apa yang ingin anda gunakan (lebih baik pilih English).
7. Beri tanda centang ( √ ) pada opsi [Privacy], agar blog anda dapat dicari oleh mesin pencari seperti Google dan Technorati. Ini memudahkan anda tanpa harus bersusah payah mendaftarkan alamat blog anda pada mesin pencari Google. Kemudian klik tombol [Signup >>].
   
   
8. Bila pada halaman berikutnya muncul teks ‘Your account is now active’, segeralah buka email anda untuk mengaktifkannya.
   
   
9. Di dalam email anda, buka email yang diberikan WordPress.com dan klik salah satu link menuju WordPress.com untuk mengaktifkan account anda . Bila belum ada, tunggu ± 5 menit.
   
   
10. Bila berhasil akan muncul halaman login, masukkan username dan password yang telah anda buat pada halaman pendaftaran tadi.
    
    

Semua proses untuk membuat blog di wordpress.com sudah selesai. Untuk pengenalan Nama dan Fungsi Tombol-Tombol Fasilitas Penyuntingan Text Di Area Penulisan Posts dan Pages di wordpress akan saya bahas pada postingan berikutnya.

Read More --►

Cara Install Joomla Via Fantastico Cara Install Joomla Via Fantastico

Kembali saya akan memberikan tutorial untuk menginstal Joomla, tapi kali ini kita akan belajar cara meng-install Joomla melalui fantastico auto installer.  Untuk menginstall Joomla sebenarnya terdapat dua cara yang bisa anda lakukan. yang pertama Via Fantastico yang akan di bahas pada artikel kali ini dan yang ke-dua bisa dilakukan secara manual sebagai alternatif jika dalam web hosting anda tidak terdapat Fantastico auto installer, caranya bisa anda lihat di artikel saya yang membahas bagaimana cara menginstall Joomla secara Manual.

Untuk memulai installasi-nya, tentunya anda harus masuk terlebih dahulu ke Cpanel anda, setelah itu ikuti cara lebih lanjutnya seperti di bawah ini :

1. Pada bagian Software / Service  pilih Fantastico De Luxe.
2. Pada halaman baru pilih Joomla 1.5 (versi Joomla yang akan kita install) seperti pada gambar di bawah ini :
   
   
   
   
3. Kemudian Klik New Installation.
   
   
   
   
   
4. Pada halaman selanjutnya, anda harus mengisi beberapa informasi untuk Situs Joomla anda
   
   
   
   

Kemudian anda harus mengisi specify informasi berikut :

• Install in Directory – Ini menentukan URL atau alamat website anda yang nantinya akan di akses lewat browser. jika anda ingin Joomla halaman utama anda (www.namawebsite.com) sebaiknya bagian ini di kosongkan saja.
• Admin Access data – Memberikan username dan Password untuk mengakses panel administrasi Joomla anda.
• Admin Email -  Masukkan alamat email anda.
• Admin Fullname – Masukkan Nama Lengkap Anda.
• Site Name – Nama Situs anda
• Install sample data – Sampel data apakah yang harus di install ke anda data sampel meliputi item menu sampel dan artikel. jika anda baru mengenal Joomla saya sarankan agar anda menginstall sampel data.

Setelah anda  mengisi formulir tersebut, lanjutkan dengan meng-klik tombol Install Joomla 1.5, dihalaman berikutnya anda akan diminta untuk mengkonfirmasi installasi. Pada akhir installasi anda akan dikasih informasi bagaimana cara login ke panel administrasi anda. yang harus dilakukan klik alamat URL nya Misal, (www.namawebanda.com/administrator) dan ingat data login anda.

Nah, bagaimana lebih mudah install secara manual atau lewat Fantastico? Anda tinggal pilih yang menurut anda paling gampang. Selamat mencoba dan semoga bermanfaat.

Read More --►

Cara Install Joomla Manual Cara Install Joomla Manual

Kali ini saya akan berbagi pengetahuan saya yang masih sedikit mengenai Tutorial Joomla. Tutorial Joomla kali ini akan memandu temen-temen langkah demi langkah tentang cara  Installasi Joomla secara Manual, Installasi Joomla akan lebih mudah lagi dikerjakan  dengan menggunakan software  auto-installer seperti fantastico, anda dapat melihat panduannya di artikel saya yang lain mengenai Cara Install Joomla Via Fantastico. Namun tidak semua hosting menyediakan fasilitas auto installer maka dari itu digunakan jalan alternatif lain dengan cara menginstall Joomla secara manual.

Untuk menginstall joomla secara manual ikuti langkah-langkah berikut ini :

1. Buat database MySQL untuk instalasi Joomla anda dan menambahkan user baru . Hal ini dapat dilakukan dengan mudah dengan cPanel dengan mengikuti tutorial database MySQL .  Jika Anda tidak menggunakan cPanel Anda bisa merujuk ke manual MySQL tentang cara membuat database dan cara menambahkan pengguna(user) untuk hal ini.
2. Buat folder bernama upload pada komputer Anda.
3. Download file. Zip dengan versi terbaru ke folder upload dan ekstrak di sana.
4. Upload semua isi dari folder upload ke direktori pada server di mana Joomla 1.5 akan diinstal.  Saya  rekomendasikan agar menggunakan FTP untuk meng-uploadnya.
5. Ini akan baik http://your_domain_name.com atau subdirektori seperti http://your_domain_name. com/ example.
6. Anda akan diarahkan ke halaman instalasi Joomla. Pada halaman pertama installasi anda di haruskan untuk memilih bahasa installasi.
Note: bahasa yang dipilih hanya berlaku selama proses installasi. setelah Joomla di install akan kembali ke bahasa inggris.
7. Joomla akan melakukan pemeriksaan system. apabila gagal memenuhi persyaratan atau rekomendasi fungsional akan menyebabkan masalah keamanan nantinya.
Maka dari itu cermati persyaratannya terlebih dahulu, berikut screenshot persyaratan Joomla 1.5 yang harus dipenuhi :
8. Setelah anda yakin bahwa semua persyaratan sudah terpenuhi, selanjutnya klik [Next] yang terdapat di pojok kanan atas.
9. Berikutnya anda harus menerima lisensi dari joomla itu, dan klik [Next ] untuk melanjutkannya.
10. Pada halaman berikutnya anda akan di minta untuk memasukkan rincian data MySQL anda, apabila anda kesulitan di bagian ini, Berikut adalah gambar yang memberikan contoh apa yang harus dimasukkan, ini hanyalah contoh semuanya sesuaikan dengan data mySQL anda.
11. Berikutnya anda harus mengkonfigurasi FTP. pilih saja ke pengaturan default, dan klik [next] yang terdapat pada menu sebelah kanan di bagian atas.
12. Halaman yang muncul selanjutnya merupakan langkah terakhir untuk menyelesaikan installasi Joomla, yang akan meminta alamat email dan password admin, klik [Next] untuk melanjutkan.
Note: dalam contoh di atas kita tidak menggunakan opsi install sampel data karena dapat menyebabkan kebingungan dan membutuhkan waktu untuk menghapus semua data
13. Di halaman terakhir dari instalasi wizard Anda akan menerima konfirmasi bahwa Joomla telah berhasil diinstal. sebelum anda dapat mengakses Joomla 1.5 anda harus menghapus direktori installasi terlebih dahulu

Proses instalasi Joomla sudah selesai dan anda bisa langsung tulis artikel pertama anda. Demikian tadi langkah-langkah cara install Joomla secara manual. Jika ada temen-temen yang lebih mendalami tentang Joomla saya mohon diajari. Semoga bermanfaat

Read More --►

Membuat Tombol Share Post Melayang di Blog Membuat Tombol Share Post Melayang di Blog

Tahukah temen-temen apa itu tombol share post? Tombol share post atau yang lebih dikenal sebagai tombol-tombol social bookmark sedikit banyak memang membantu meningkatkan pengunjung dari social bookmark yang bersangkutan. Contoh saja twitter, dengan mengintegrasikan feedburner dan twitter ketika ada artikel baru dari sebuah blog, maka secara otomatis akan langsung terupdate di twitter. Dengan begitu para follower yang penasaran dengan artikel tersebut akan langsung melihat artikelnya. Nah, untuk kali ini saya akan memberikan tips untuk memasang tombol share post melayang, untuk anda yang penasaran bisa dilihat contohnya disini.  

Membuat tombol share post melayang ini sangat mudah karena kita tidak perlu pusing mengutak-atik HTML template kita. Kita tinggal memasukkan ke dalam widget sidebar. Untuk lebih jelasnya berikut ini adalah langkah-langkah pemasangannya :

1.  Login dengan akun blogger anda.
2.  Pilih Rancangan >> Elemen Halaman
3.  Klik tambah gadget
4.  Pilih HTML/Java Script
5.  Silahkan Copy kode berikut dan paste didalam konten HTML/Java script nya

<style  type="text/css">
*{margin:0;padding:0;}

* html #z33sHare{ 
position:  absolute;
} 

#z33sHare{
right:1%;width:  70px;background:transparant;border:0px solid  #E7E7E7;-moz-border-radius:3px;-webkit-border-radius:3px;
position:fixed;
top:  20%; 
}

#z33sHare div{
padding:6px 6px 6px 5px;
}

#stw{
margin-left:-2px;
}

#sfs{
margin-left:-5px;
}

</style>
<div  id="z33sHare">
<div id="ssl-box">
<div id="stw">
<a  href="http://twitter.com/share" class="twitter-share-button"  data-count="vertical">Tweet</a><script  type="text/javascript"  src="http://platform.twitter.com/widgets.js"></script>
</div>
<div><a  title="Post to Google Buzz" class="google-buzz-button"  href="http://www.google.com/buzz/post"  data-button-style="normal-count"></a><script  type="text/javascript"  src="http://www.google.com/buzz/api/button.js"></script>
</div>
<div>
<script  type="text/javascript">
(function() {
var s =  document.createElement('SCRIPT'), s1 =  document.getElementsByTagName('SCRIPT')[0];
s.type =  'text/javascript';
s.async = true;
s.src =  'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s,  s1);
})();
</script>
<a class="DiggThisButton  DiggMedium"></a>
</div>
</div>
<div><a  name="fb_share" type="box_count"  href="http://www.facebook.com/sharer.php">Share</a><script  src="http://static.ak.fbcdn.net/connect.php/js/FB.Share"  type="text/javascript"></script></div><div  style="clear:both;"></div></div>

5.  Yang terakhir tentu saja anda harus simpan.

Jika sudah selesai anda dapat lihat di sebelah kiri blog anda sekarang ada tombol share post yang melayang. Gampang bukan? Demikian tadi sedikit tutorial dari saya, selamat mencoba dan semoga bermanfaat.

Read More --►

Membuat Syntax Highlighter di Blog Membuat Syntax Highlighter di Blog

Syntax Highlighter adalah suatu fitur biasanya dari text editor khususnya editor source code bahasa pemrograman tertentu untuk menampilkan text tersebut dalam berbagai warna agar dapat memudahkan programmer dalam membaca dan menganalisa source code tersebut. Bagi Anda yang sering posting source code pada Web/Blog tentu fitur Syntax Highlighter akan sangat membantu agar source code yang kita posting mudah dibedakan sebagai source code dan tentunya lebih menarik bagi pengunjung. Nah, sekarang masalahnya bagaimana cara kita menggunakan Syntax Highlighter ini pada blog khususnya di Blogger.com?

Jika di blogspot kita biasa menampilkan kode supaya lebih menarik dengan adanya Blockquote. Sebenarnya hampir sama dengan Blockquote, Syntax Highlighter ini tampilannya membedakan dari tulisan yang lainnya, namuan Syntax Highlighter ini mempunyai kelebihan yaitu dengan adanya fitur-fitur yang didukung oleh jQuery. kode untuk Syntax Highlighter ini sendiri dibuat oleh Alex Gorbatchev (2004-2008). Adapun fitur yang ada dalam Syntax Highlighter ini yaitu:

1. Adanya fasilitas print untuk kode
2. Adanya fasilitas View Plain yaitu membuka barisan kode dalam popup windows
3. Adanya fasilitas Help untuk melihat bantuan.

Untuk contoh Syntax Highlighter temen-temen bisa lihat kode javascript yang saya pasang pada postingan ini. Jika anda tertarik berikut ini akan saya jelaskan langkah pembuatannya satu persatu :

1.  Login dengan akun blogger anda kemudian pilih Rancangan
2.  Klik EDIT HTML (centang expand template widget)
3.  Simpan kode berikut Setelah kode <head> atau sebelum kode </head>

<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js'  type='text/javascript'></script>
<script  src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'  type='text/javascript'></script>

4.  Selanjutnya scroll mouse kalian kebawah dan cari kode ]]></b:skin>
5.  Simpan CSS berikut diatas kode ]]></b:skin> (Klik Buka untuk melihat kode CSSnya)

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Anda juga bisa lihat kode CSS ini dengan membuka link ini :
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

6.  Sekarang lanjut ke bagian paling bawah dan cari kode </body>
7.  Simpan kode berikut diatas kode </body> tadi

<!-- Add-in Script for syntax highlighting  -->
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

8.  Simpan template anda.

Pemasangan kode HTML untuk membuat Syntax Highlighter pada template sudah selesai tinggal kita terapkan pada postingan yang memakai kode CSS atau javascript.

Untuk pemasangan script Kode JS gunakan kode berikut

<pre name="code" class="JScript">

SIMPAN SCRIPT YANG AKAN DIPASANG DISINI

</pre>

Untuk pemasangan kode CSS gunakan kode berikut :

<pre name="code" class="Css">

SIMPAN CSS YANG AKAN DIPASANG DISINI

</pre>

Itu tadi tutorial hari ini, mungkin agak terlalu banyak kode-kode yang mesti kita pasang. Tapi saya yakin temen-temen semua bisa membuatnya. Jika ada yang masih bingung kasih komentar, siapa tahu saya bisa bantu.

Read More --►

Membuat Rounded Corner dengan CSS di Blog Membuat Rounded Corner dengan CSS di Blog

Satu lagi cara untuk modifikasi blog yang akan saya bahas disini adalah dengan menggunakan Rounded Corners. Rounded corners atau sudut melengkung adalah lengkungan atau belokan pada sudut dari suatu bentuk bangunan persegi. Sudut melengkung ini biasa digunakan dalam pembuatan design template agar template menjadi tampak lebih menarik dan tidak terlihat terlalu kaku dan monoton. Pada umumnya code css yang digunakan untuk membuat rounded corners adalah :

1. -moz-border-radius: 3px; >> berasal dari Mozilla dan digunakan pada Firefox 
2. -khtml-border-radius: 3px; >> berasal dari Linux dan digunakan pada Konqueror 
3. -webkit-border-radius: 3px; >> berasal dari Safari dan digunakan pada untuk mac dan windows 
4. border-radius: 3px; >> hanya merupakan spesifikasi dari standart CSS3. 

Penerapan Rounded Corners di Postingan

1.  Rounded corners pada seluruh sudut

<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius: 10px; width: auto;">Rounded corners seluruh sudut</div>

Rounded corners seluruh sudut

2.  Rounded corners hanya pada sudut atas

<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; width: auto;">Rounded corners hanya pada sudut atas</div>

Rounded corners hanya pada sudut atas

3.  Rounded corner hanya pada sudut bawah

<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; width: auto;">Rounded corners hanya pada sudut bawah</div>

Rounded corners hanya pada sudut bawah

Penerapan Rounded Corner di Sidebar

Jika temen-temen ingin membuat rounded corners itu pada sidebar tinggal menambahkan kode yang berwarna merah pada kode #sidebar .widget { contohnya seperti ini :

#sidebar .widget {
.......................
.......................
.......................
-moz-border-radius: 10px;
}

Kode yang berwarna kuning adalah kode sidebar pada template anda, karena setiap template mempunyai kode sidebar yang berbeda-beda di bawah kode #sidebar .widget { saya kasih titik-titik. Anda bisa ganti 10px sesuai dengan selera masing-masing. Sama halnya jika anda ingin membuat rounded corner di main-wrapper, content-wrapper, outer-wraper anda tinggal menambahkan kode yang berwarna merah seperti contoh diatas.

Penerapan rounded corners diatas hanya beberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius. Silahkan anda kreasikan sendiri dan semoga berhasil.

Read More --►

Membuat Tombol Back To Top Di Blogger Membuat Tombol Back To Top Di Blogger

Membuat tombol Back to top kira-kira seperti itu judul tutorial blog kali ini. Tapi ngomong-ngomong temen-temen sudah tahu belum seperti apa sih tombol back to top itu? Kalau diuraikan dengan kalimat tombol back to top itu adalah tombol yang digunakan untuk kembali ke halaman atas. Biasanya tombol ini berada di bagian bawah halaman dan kebanyakan dibagian pojok halaman bawah. Kalau temen-temen mau lihat contohnya disini. 

Di samping itu tombol Back to top memudahkan kita khususnya para pengunjung blog untuk kembali ke halaman atas, jadi kita tidak perlu men-scroll secara manual menggunakan mouse untuk kembali keatas, cukup dengan mengklik tombol itu. Dalam tutorial pembuatan back to top kali ini saya menggunakan jquery. Perbedaan dengan yang biasa adalah ketika kita berada di halaman atas tombol back to top ini tidak terlihat dan ketika kita scroll mouse ke halaman bawah tombol ini baru ada.  

Nah, jika anda tertarik untuk membuat tombol itu, di bawah ini akan saya uraikan langkah-langkah pembuatannya.

1.  Pertama login ke blogger dengan akun anda
2.  Pilih Rancangan >> EDIT HTML (centang expand template widget)
3.  Simpan kode berikut sebelum kode ]]></b:skin>

#top-link{display:none; font-weight:bold; font-family:tahoma; font-size:10px; width:70px; background:#000; color:#fff; text-shadow:1px 1px 1px #666; font-size:11px; position:fixed; right:-20px; bottom:150px; padding:5px; -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px}

Keterangan :

• background:#000; ---> Latar belakang/background berwarna hitam 
• color:#fff; ---> tulisan back to top berwarna putih 
• right:-20px; bottom:150px; ---> Posisi berada dibawah sebelah kanan 
• -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px ---> sudut Tombol melengkung

Untuk melihat kode HTML warna silahkan lihat disini

4.  Sekarang simpan kode berikut diatas kode </head>

<script  src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js'  type='text/javascript'/>
<script  src='http://z33s.googlecode.com/files/kaluhur.js'  type='text/javascript'/>
<script type='text/javascript'>
jQuery.fn.topLink  = function(settings) {
settings = jQuery.extend({
min: 1,
fadeSpeed:  200
}, settings);
return this.each(function() {
var el =  $(this);
el.hide();
$(window).scroll(function() {
if($(window).scrollTop()  &gt;= settings.min)
{
el.fadeIn(settings.fadeSpeed);
}
else
{
el.fadeOut(settings.fadeSpeed);
}
});
});
};

$(document).ready(function()  {
$(&#39;#top-link&#39;).topLink({
min: 300,
fadeSpeed:  500
});
$(&#39;#top-link&#39;).click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

5.  Tahap selanjutnya adalah pemanggilan dan pembuatan tombol back to topnya. Anda simpan kode berikut tepat diatas kode </body>

<a class="no-click no-print" href="#top" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

Catatan :

Jika ketika di-klik tombol back top tidak bekerja (tidak mau kembali ke atas) anda ganti kode #top dengan # sehingga hasilnya seperti ini :

<a class="no-click no-print" href="#" id="top-link" rel="nofollow" title="Back to Top Page">Back To Top</a>

6.  Simpan template anda, dan bisa dilihat hasilnya

Bagaimana, sulit atau gampang? Kalau sulit tanya saja sama kotak komentar di bawah. Kalau gampang tanya sama rumput yang bergoyang. Selamat mencoba dan semoga bermanfaat.

Read More --►

Memasang Tooltip Pada Link di Blog Memasang Tooltip Pada Link di Blog

Pada postingan sebelumnya saya sudah menjelaskan bagaimana kita memasang baloon tooltip pada kata atau kalimat tertentu. Bagaimana untuk memasangnya pada setiap link? Nah, itu pembahasan kali ini yaitu cara memasang tooltip pada link di blog. Jadi setiap link yang ada di dalam postingan jika cursor kita arahkan ke link tersebut akan muncul tooltip di bawahnya. Untuk pengertian tooltip sendiri sudah saya jelaskan pada postingan sebelumnya, jadi saya tidak perlu mengulangi lagi, bagi temen-temen yang belum membaca bisa dibuka dulu itu artikelnya.

Untuk membuat tooltip ini anda bisa ikuti langkah-langkah berikut :

1.  Login ke Blogger anda
2.  Pilih Rancangan
3.  Pilih EDIT HTML (centang Expand template widget)
4.  Sekarang simpan CSS berikut diatas kode ]]></b:skin>

/* start Tooltip blogger maskolis*/
body div#toolTip {
position:absolute;
z-index:1000;
min-width:150px;
background:#000000;
border:2px double #E80101;
text-align:left;
padding:5px;
min-height:1em;
-moz-border-radius:5px;
}
body div#toolTip p {
margin:0;
padding:0;
color:#ccc;
font:11px/12px trebuchet MS,arial,sans-serif;
font-weight:bold;
}
body div#toolTip p em {
display:block;
margin-top:3px;
color:#fff;
font-style:normal;
font-weight:normal;
}
body div#toolTip p em span {
font-weight:bold;
color:#fff;
}
/* End Tooltip blogger maskolis*/

4.  Sekarang simpan script berikut diatas kode </head>

<script src='http://milikazis.googlecode.com/files/tooltipURL.js' type='text/javascript'/>
<script src='http://milikazis.googlecode.com/files/Tooltipz33s.js' type='text/javascript'/>

5.  Simpan template dan anda bisa lihat hasilnya.

Cukup itu dulu penjelasannya, jika ada yang kesulitan temen-temen bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat.

Read More --►

Memasang Baloon Tooltip Dengan Kode CSS di Blog Memasang Baloon Tooltip Dengan Kode CSS di Blog

Tutorial blog kali ini saya akan membahas tentang memasang Tooltip di blog. Bagi temen-temen yang belum tahu saya akan jelaskan Tooltip adalah tampilan informasi dalam bentuk teks (bisa juga gambar) yang muncul ketika kita melakukan mouse over ke dalam suatu item di website. Biasanya Tooltip berbentuk kotak kecil yang melayang di atas item tersebut. Jika temen-temen penasaran dapat dilihat disini. Klik pada tulisan Norah Jones maka akan muncul tooltip.

Jika temen-temen tertarik untuk membuatnya, berikut ini langkah-langkahnya :
1.  Login ke Blogger Kalian
2.  Masuk ke rancangan / tata letak
3.  Pilih Edit HTML ( Back Up template dulu )
4.  Cari kode ]]></b:skin>
5.  Lalu sisipkan kode berikut diatas kode tadi

/*---------- bubble tooltip -----------*/
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyJEOhd_oBujW1ZTrzwtjv4nAPU-ABryEkrZBqlxx7Zco7v4ydspHjzZAOlUUZpcKOY_aM5nc4iB-aZraeEqEqUI-txrV8z_o2CLAZbEbSJbX9OApzjF4XbdFdERDczw6P7GeNitichQ/) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2DqIkEDKaB6sciehoFvB_ybAPBdW0l94ZNIx42meDc85fsxVFp6k5KaoTlNgIspsFor4Vb_PFT11tlZAf4d5HpqCG3liwcIsIJ15kLs4luHWWJsISjT1aPnNJIXvpKaP1ARM8Gw-9t4g/) repeat bottom;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVyJEOhd_oBujW1ZTrzwtjv4nAPU-ABryEkrZBqlxx7Zco7v4ydspHjzZAOlUUZpcKOY_aM5nc4iB-aZraeEqEqUI-txrV8z_o2CLAZbEbSJbX9OApzjF4XbdFdERDczw6P7GeNitichQ/) no-repeat bottom;
}

6.  SIMPAN template.

Jika anda ingin menampilkan Balloon tooltipnya contohnya seperti kode di bawah ini :

<a href="Link yang akan dituju" class="tt">Teks Baloon Tooltip<span class="tooltip"><span class="top"></span><span class="middle">Isi dari Baloon Tooltip</span><span class="bottom"></a>

Keterangan :

• Kode warna merah : text yang kalian tulis
• Kode warna biru : Link yang akan diberi tooltip
• Kode warna Hijau : keterangan didalam balloon tooltip
• Kode warna pink : Link tujuan

Gampang sekali kan? Itu tadi tutorial hari ini mengenai cara memasang Baloon Tooltip di blog. Jika ada yang mau copy paste silahkan saja, blog saya ini bebas kalau mau di copy di blog temen-temen. Selamat mencoba dan semoga bermanfaat.

Read More --►

Mengatur General Settings di Wordpress Mengatur General Settings di Wordpress

Kembali pada tutorial Wordpress, kali ini saya akan memberikan pengetahuan dasar tentang cara mengatur general setting pada Wordpress. Seperti kita ketahui melakukan setting pada blog kita sangat penting demi berlangsungnya blog itu sendiri. Apalagi pengaturan bawaan yang diberikan WordPress kadangkala tidak sesuai dengan keinginan kita serta secara default tidak sesuai dengan lokasi atau negara dimana kita sekarang melakukan kegiatan blogging.bootingskoBlog

Saya akan memberikan contoh pengaturan yang user friendly pada ‘General Settings’, anda bisa menggantinya bila tidak sesuai dengan keinginan anda. Berikut ini langkah-langkahnya :

1. Pertama anda harus login ke Admin WordPress anda.
2. Pada sisi kiri halaman  klik menu [Settings] >> [General].
   
3. Kemudian akan muncul halaman ‘General Settings’.
4. Isikan sebagai berikut :
   Site Title : isikan judul dari blog anda.
   
   
   Tagline : isikan keterangan singkat tentang blog anda.
   
   
   E-mail address : isikan alamat email anda (contoh : emailanda@gmail.com).
   
   
   Time Zone : karna kita berada di Indonesia, pilih [UTC +7].
   
   Date Format : beri tanda tik [ • ] pada [Custom] dan ganti kode disebelah kanan dengan kode ini [j F Y] .
   
   
   Time Format : pilih format waktu sesuai keinginan anda.
   
   
   Week Starts On : pilih [Monday].
   
   Language: pilih [en - English].
   
   
5. Kemudian klik tombol [Save Changes].

Demikian tadi cara mengatur General Setting di Wordpress versi Creating Website. Semoga tidak ada yang mengalami kesulitan dan semoga bermanfaat.

Read More --►

Cara Daftar dan Menghasilkan Uang di Neobux Cara Daftar dan Menghasilkan Uang di Neobux

Di samping membuat blog saya yakin temen-temen juga pengin menperoleh penghasilan bukan? Nah, salah satu affiliasi bisnis online untuk menambah penghasilan  adalah Paid To Click. Pada postingan sebelumnya saya sudah menjelaskan apa itu bisnis online? Dan salah satunya adalah Paid To Click, cara kerja dari bisnis online ini  setelah kita mendaftar, kita diberi script oleh perusahaan periklanan tersebut yang nantinya kita pasang di blog/website kita. Nah, dari setiap pengunjung blog/web kita yang mengklik iklan itulah komisi kita dapatkan.

Salah satu situs penyelenggara program PTC adalah NeoBux yang sudah tidak diragukan lagi kredibilitas, bahkan begitu dipercayanya reputasi NeoBux sampai mendapatkan gelar PTC Terbaik Dunia. Jika Anda ingin bergabung dengan jutaan member NeoBux lainnya, silahkan ikuti Cara Menghasilkan Uang dari PTC Neobux, sebagai berikut:

CARA DAFTAR DI NEOBUX

1. Silahkan Klik Disini atau pada Banner di atas untuk membuka halaman situsnya seperti contoh gambar di bawah ini:
   
2. Selanjutnya klik REGISTER NOW untuk membuka halaman pendaftaran seperti contoh di bawah ini:
   
3. Isi kolom-kolom formulir pendaftaran di atas secara benar seperti penjelasan di bawah ini:
   • Username: Isi dengan username Anda;
   • Password: Isi dengan password Anda;
   • Password confirmation: Ketik ulang password Anda;
   • Email: Masukan email Anda yang masih aktif;
   • AlertPay/PayPal Email: Isi dengan email Alertpay atau Paypal anda, namun jika masih belum punya silahkan isi dulu dengan alamat email seperti di atas, tetapi nantinya Anda harus tetap memiliki AlertPay/PayPal untuk penarikan komisi Anda. Untuk membuat PayPal silahkan ikuti panduan ini: Cara Membuat Rekening PayPal-100% Gratis;
   • Kolom Referral sebaiknya dikosongkan dulu. Birth Year anda isi dengan tahun lahir Anda, misalnya ”1985”
   • Image Verification: Ketik kode yang ada disampingnya;
   • Centang tulisan I declare to have read, understood, and accepted the terms of service.
4. Setelah seluruh kolom diisi, lanjutkan dengan klik CONTINUE dan akan muncul halaman konfismasi email.
5. Kemudian anda harus masuk ke email, buka email yang dikirim dari Neobux disitu terdapat kode validasi yang kemudian harus anda isikan pada kolom validation email setelah itu anda akan berada di halaman congratulation.
   
6. Dengan demikian pendaftaran Anda sudah berhasil dan selesai.

CARA MEMPEROLEH UANG DARI NEOBUX

1. Anda harus login dulu di Neobux,  maka akan terbuka halaman seperti di bawah ini:
   
2. Masukan Username dan Password yang Anda daftarkan sebelumnya, sedangkan untuk Secondary Password dikosongkan, serta masukan angka/huruf Verification Code ke kotak disampingnya, lalu klik Submit dan akan terbuka halaman seperti gambar di bawah ini:
   
3. Untuk mulai menghasilkan uang dari klik/lihat iklan, silahkan klik pada menu yang bertuliskan View Advertisements untuk membuka Daftar Iklan.
4. Klik tepat pada icon bintang, lalu akan berubah menjadi icon bulat seperti contoh gambar di bawah ini:
   
5. Klik lagi tepat pada icon bulat, maka akan terbuka halaman iklan yang sedang loading seperti gambar di bawah
   

   
6. Tunggulah beberapa detik (sambil menunggu proses selesai, Anda boleh membuka halaman baru atau browsing lainnya) dan jika proses sudah selesai, maka akan muncul tulisan Advertisement validated!
7. Dengan demikian klik iklan telah sah dan account balance Anda bertambah.
8. Selanjutnya kembalilah ke halaman Daftar Iklan Anda, lalu klik kembali pada icon bintang yang belum diklik (iklan yang sudah diklik jangan diklik lagi karena Anda tidak akan mendapat apa-apa) dan langkah-langkahnya sama dengan di atas;
9. Untuk melipatgandakan penghasilan Anda, carilah anggota baru (biasa disebut referral) untuk mendaftar melalui Link Referral Anda, maka Anda akan mendapatkan komisi setiap kali Referral Anda tersebut melakukan aktifitas klik iklan, tanpa mengurangi bayaran yang diterima oleh Downline/Referral Anda;
10. Cara memperoleh atau menemukan Link Referral, pada halaman pojok atas terdapat tulisan Username Anda, klik pada tulisan tersebut lalu akan terbuka halaman seperti gambar di bawah ini:
    
11. Pada pojok kanan halaman, klik pada tulisan Banners, lalu akan terbuka halaman seperti pada gambar di bawah ini:
    
12. Itulah Link Referral Anda. Jika Anda ingin menautkan link referral tersebut pada sebuah teks/kalimat dalam posting, gunakan Link Text dan jika ingin memasang dalam bentuk banner, maka gunakan Link Banner Anda;
13. Rekrutlah sebanyak mungkin orang untuk bergabung melalui link referral Anda, caranya cukup mudah diantaranya dengan membuat posting seperti ini (bagi yang sudah punya blog/website) atau pasang iklan ke situs-situs pemasangan iklan yang berbayar atau gratisan.

Catatan Penting : 
Anda harus setiap hari melakukan aktifitas klik iklan, karena sebanyak apapun mempunyai Referral/Downline jika Anda tidak melakukan klik iklan, maka Anda tidak akan mendapatkan bayaran dari klik iklan yang dilakukan oleh referral Anda.

Itu tadi tutorial mengenai cara daftar dan menghasilkan uang dari PTC NeoBux ini, semoga bermanfaat. Untuk informasi yang lebih lengkap silahkan kunjungi halaman Forum yang disediakan oleh NeoBux, selamat mencoba dan semoga sukses.

Read More --►

Membuat Widget Hanya Tampil di Halaman Tertentu Membuat Widget Hanya Tampil di Halaman Tertentu

Terkadang karena terlalu asyik nge-blog kita jadi lupa jika space atau ruang untuk tempat widget sudah penuh. Nah, untuk temen-temen blogger yang mengalami masalah seperti itu, kali ini saya akan memberikan tips kepada anda semua tentang cara menampilkan widget hanya pada halaman tertentu. Ini seperti template buatan Kang Rohman yang ada sebagian widgetnya hanya muncul pada homepage, sedangkan saat di klik postinganya widgetnya hilang. Agar lebih jelas anda dapat melihat di blog ini dimana widget artikel terbaru dengan thumbnail tidak terlihat di halaman posting tapi jika anda klik homepage saya widget tersebut akan nongol. Jika anda tertarik, di bawah ini adalah cara-cara membuatnya :

1. Login dengan account blogger anda.
2. Kemudian menuju  layout >> Edit HTML
3. Jangan lupa centang expand widget template nya, karena kalau tidak kode di bawah nanti tidak akan keluar. Sebenarnya kita hanya perlu menambah kan 2 tag kode saja, lihat kode dibawah ini:

<b:widget id='HTML1' locked='false' title='Artikel Terbaru' 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 != ""'>
<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>

Anda perhatikan kode yang berwarna merah tadi, itu adalah selipan kedua tag kode tadi, dan warna kuning yang Artikel Terbaru itu adalah judul wiget anda. Temen-temen bisa sesuaikan dengan judul widget yang anda ingin widget tersebut hanya tampil hanya pada homepage, sebagai contoh anda bisa klik pada home page blog ini.

Jika temen-temen menginginkan widget itu tampil hanya pada halaman psotingan, tinggal merubah kode yang berwarna merah dengan kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan </b:if> seperti dibawah ini.

<b:widget id='HTML1' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<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>

Pada tulisan berkedip warna kuning sebagai contoh Artikel Terkait, karena widget itu hanya tampil pada halaman postingan di blog ini. Cukup mudah bukan? Selamat mencoba dan semoga bermanfaat.

Read More --►

Membuat Scroll Pada Kotak Komentar Blogger Membuat Scroll Pada Kotak Komentar Blogger

Sebuah komentar sangat diperlukan untuk sebuah blog, karena dengan adanya komentar kita jadi tahu seberapa sering blog kita dikunjungi orang. Komentar yang datang ke blog kita bisa berupa pujian ataupun kritikan. Tapi apabila blog anda mempunyai komentar yang cukup banyak, maka akan banyak space yang tersita. Nah, untuk menghemat space di blog temen-temen mungkin anda ingin menggunakan scroll pada daftar komentar di blog anda. Jika temen-temen tertarik berikut ini adalah langkah-langkah pembuatannya :

1. Login ke account blogger anda
2. Kemudian klik Tata Letak,
3. Lalu klik Edit HTML. jangan lupa centang  expand widget template
4. Cari kode yang mirip seperti ini:
   
   <dl id='comments-block'>
   <b:loop values='data:post.comments' var='comment'>
   <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
   <a expr:name='&quot;comment-&quot; + 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>
   <data:commentPostedByMsg/>
   </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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
   <data:comment.timestamp/>
   </a>
   <b:include data='comment' name='commentDeleteIcon'/>
   </span>
   </dd>
   
   </b:loop>
   </dl>
   Nah, kalau sudah memperhatikan kode di atas, sekarang tambahkan kode berwarna merah,yang akhirnya menjadi seperti berikut:
   
   <div style='overflow:auto; width:ancho; height:300px;'>

   <dl id='comments-block'>

   <b:loop values='data:post.comments' var='comment'>

   <dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>

   <a expr:name='&quot;comment-&quot; + 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>

   <data:commentPostedByMsg/>

   <</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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>

   <data:comment.timestamp/>

   </a>

   <b:include data='comment' name='commentDeleteIcon'/>

   </span>

   </dd>

   
   

   </b:loop>

   </dl>

   </div>
5. Klik simpan template

Teman-teman juga bisa mengatur panjang letak kotak komentar yang sudah diberi scroll itu dengan cara mengatur nilai pada kode <div style='overflow:auto; width:ancho; height:300px;'>, perhatikan pada bagian : 300px. Angka tersebut dapat anda atur sesuai keinginan, tapi lihat dulu hasilnya  pada kolom komentar postingannya, apakah sudah sesuai dengan ukuran kotak komentar yang anda inginkan.

Itu tadi tutorial hari ini mengenai cara membuat scroll pada kotak komentar, jika ada yang kesulitan bisa tanya sama kotak komentar dibawah, selamat mencoba dan semoga bermanfaat.

Read More --►

Memasang Google CSE di Bawah Posting Blog Memasang Google CSE di Bawah Posting Blog

Temen-temen blogger tentunya sudah tidak asing lagi dengan Google CSE yang merupakan tempat pencarian berdasarkan keyword yang diinginkan untuk menghasilkan pencarian yang Optimal yang sesuai dengan kata kunci yang ditargetkan. Pada postingan ini akan membahas cara pemasangan Google CSE yang di tampilkan di bawah postingan, yang hasilnya nanti akan seperti gambar di bawah ini :

Jadi ketika kita membuka judul posting maka Google CSE ini akan tampil dibawah label dan menampilkan hasil pencarian dari keyword yang sesuai dengan label pada postingan. Seperti itulah kira kira, untuk contoh hasilnya yang telah di pasang Autofill Google CSE ini bisa lihat disini, Silahkan klik salah satu postingannya dan anda lihat pada bagian atas komentar atau dibawah label. Anda akan melihat tampilan Google CSE di bawah posting, ya karena ini memang blog demo jadi saya pasang berbagai macam kode HTML untuk praktik termasuk AutoFill Google CSE.

Script yang digunakan ini merupakan Script Autofill Google AJAX Search API CSE yang setelah saya coba coba akhirnya bisa juga di pasang. langsung saja pada proses pemasangannya :

1. Masuk Dashboard >> Rancangan >> Edit HTML >> Expand Widget Templates
2. Cari kode seperti ini <b:includable id='comments' var='post'>
3. Masukan Script di bawah ini tepat dibawah kode di atas.
   
   <script src='http://www.google.com/jsapi'/>
   <script type='text/javascript'>
   google.load(&#39;search&#39;, &#39;1&#39;);
   function OnLoad() {
   var customSearchControl = new google.search.CustomSearchControl(&#39;ID-CSE-bloganda&#39;);
   customSearchControl.draw(&#39;content&#39;);
   customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}
   google.setOnLoadCallback(OnLoad);
   </script>
   <div id='content'>Loading...</div>
4. Ganti ID-CSE-bloganda dengan ID Google CSE Blogger kanmu. Pastikan blogger sudah mendaftar terlebih dahulu di google Cost0m Search Engine untuk bisa mendapatkan ID dari google CSE. 
5. Jika sudah silahkan di save.
   

Pemasangan Google CSE di bawah postingan sudah selesai, jika anda mau autofill berdasarkan title postigan blog, anda tinggal ganti kode:

<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>

dengan kode berikut (untuk autofill CSE berdasarkan title postingan):

<b:if cond='data:post.title'><data:post.title/></b:if>

Selamat mencoba semoga berhasil.

Read More --►

Membuat Teks Berkedip (Blink Text) di Blog Membuat Teks Berkedip (Blink Text) di Blog

Satu lagi tutorial blog yang gampang sekali untuk  teman-teman praktikkan di blog masing-masing. Yaitu membuat tulisan berkedip atau blink text. Ini bukan sulap atau trik yang luar biasa, tapi saya sangat tertarik dengan blog yang ada tulisan berkedip-kedip di dalamnya. Setelah mempelajari triknya, saya pun posting artikel cara membuat teks berkedip atau bahasa inggris bilang blink text. Sebenarnya ada gunanya juga membuat blink text ini. Yang pasti, pengunjung blog akan terbawa dan terpancing untuk mengklik teks tersebut. Atau paling tidak semakin terfokus ke arah tulisan yang berkedip itu. Di bawah ini adalah contoh dari blink text :

"Jangan diklik, karena ini sangat berbahaya bagi kesehatan anda"

Jika temen-temen tertarik ingin membuatnya, atau mungkin ada yang sudah tahu malah. Baiklah bagi teman-teman yang belum tahu dapat mengikuti cara ini. Saya bilang ini sangat gampang tidak perlu edit HTML

<blink>Tulis kalimat temen-temen di sini</blink>

Nanti hasilnya akan seperti di bawah ini :

Tulis kalimat temen-temen di sini

Nah, cuma begitu aja kan? Gampang sekali, anda bisa ganti tulisan sesuai dengan keinginan tinggal tambah kode <blink> dan tutup dengan </blink>. Itu dulu tutorial kali ini semoga bermanfaat.

Read More --►

Membuat Background Gambar di Postingan Blog Membuat Background Gambar di Postingan Blog

Menampilkan Background gambar atau image background pada postingan blog akan membuat lebih menarik tampilan posting. Setelah artikel saya sebelumnya membuat bingkai tulisan di postingan, kali ini saya akan menjelaskan cara membuat background gambar pada tulisan yang akan kita posting. Untuk membuat latar belakang gambar posting, harus dilakukan pada bagian Edit HTML saat membuat postingan karena di sana akan ditambahkan beberapa kode latar belakang (image background).

Membuat backgroud gambar pada postingan

Seperti pada tutorial blog yang lain langkah pertama ya mesti login ke account blogger dulu. Kemudian masuk ke posting, pilih new post dan pilih Edit HTML. Berikut ini adalah kalimat yang akan diberi latar belakang gambar:

Saya secara pribadi memperbolehkankan blog saya ini dikopi paste atau disalin ke blog teman-teman yang lain. Nggak mencantumkan link sumbernya juga nggak pa-pa. Saya nggak bakal lapor ke Bos Google (serius),  tapi saya nggak bisa tanggung akibat yang lain (kreativitas teman-teman sendiri nanti yang akan tidak berkembang). Saya sendiri pun nggak yakin sama blog saya ini blog spam atau bukan. Bisa jadi besok saya udah nggak bisa posting lagi karena udah kena banned sama Bos Google karena tulisannya nggak karuan atau dilaporkan sama orang lain.

Kalau sudah, di bawah ini contoh kode untuk membuat background gambar :

<div style="background:url(image url address) no-repeat;">

Di sini Anda dapat ketik kalimat yang akan dibuat. Contohnya sudah saya siapkan di atas. Tutup posting dengan kode berikut

</div>

Kemudian ganti image url address dengan alamat gambar yang sudah disiapkan. Kalau saya biasa hosting image di blogger atau pakai photobucket image hosting Tergantung situasi dan kondisi bandwidth. Misalnya saya mengambil image url address untuk contoh di bawah adalah seperti ini:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKi6nd2MwJlPy0y_U1SdJnbKqEsUFdXdo_brO7QcQHCFnufQ-1sQGvbzmxraiK9BkJ6A5US7CFC_lZdssEQTxayZHdoM0bCswC6ITD-w-tNO1fzYyazMhr3lAe8Uon5nBuAO0uKA3uveA/s1600/mirror+maskolis.jpg

Sehingga secara lengkap penulisan kode background dan kalimat di posting menjadi seperti di bawah ini:

<div style="background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKi6nd2MwJlPy0y_U1SdJnbKqEsUFdXdo_brO7QcQHCFnufQ-1sQGvbzmxraiK9BkJ6A5US7CFC_lZdssEQTxayZHdoM0bCswC6ITD-w-tNO1fzYyazMhr3lAe8Uon5nBuAO0uKA3uveA/s1600/mirror+maskolis.jpg) no-repeat;">

Saya secara pribadi memperbolehkankan blog saya ini dikopi paste atau disalin ke blog teman-teman yang lain. Nggak mencantumkan link sumbernya juga nggak pa-pa. Saya nggak bakal lapor ke Bos Google (serius),  tapi saya nggak bisa tanggung akibat yang lain (kreativitas teman-teman sendiri nanti yang akan tidak berkembang). Saya sendiri pun nggak yakin sama blog saya ini blog spam atau bukan. Bisa jadi besok saya udah nggak bisa posting lagi karena udah kena banned sama Bos Google karena tulisannya nggak karuan atau dilaporkan sama orang lain.
</div>

Dan ini adalah hasil lengkap posting dengan image backgroud:

Saya secara pribadi memperbolehkankan blog saya ini dikopi paste atau disalin ke blog teman-teman yang lain. Nggak mencantumkan link sumbernya juga nggak pa-pa. Saya nggak bakal lapor ke Bos Google (serius), tapi saya nggak bisa tanggung akibat yang lain (kreativitas teman-teman sendiri nanti yang akan tidak berkembang). Saya sendiri pun nggak yakin sama blog saya ini blog spam atau bukan. Bisa jadi besok saya udah nggak bisa posting lagi karena udah kena banned sama Bos Google karena tulisannya nggak karuan atau dilaporkan sama orang lain.

Bagaimana, sangat sederhana bukan? Kode di atas masih bisa ditambah lagi atau dimodifikasi seperti misalnya mengatur jarak ke tepi posting, besar huruf, dan perataan kalimat, tergantung selera saja. Semoga temen-temen tidak kesulitan dan selamat mencoba...

Read More --►

Update Mengaktifkan Plugin Akismet di Wordpress Update Mengaktifkan Plugin Akismet di Wordpress

Jika temen-temen  pengguna Wordpress sudah membaca artikel saya tentang Blog SPAM, pasti anda akan butuh plugin yang satu ini. Pada artikel itu saya menjelaskan bagaimana kita harus mewaspadai aktivitas spammer yang dapat merugikan kita. Bagi pengguna wordpress tentunya tidak asing dengan Plugin Akismet.  Plugin wordpress ini harus anda aktifkan, karena dengan plugin ini bisa menyelamatkan blog anda dari komentar SPAM. Komentar SPAM ini biasanya dilakukan olah orang menggunakan program yang dianggap robot oleh akismet, sehingga komentar yang tidak layak untuk blog anda akan di blokir oleh plugin ini. 

Bagi temen-temen yang belum punya plugin tersebut dapat anda download disini. Untuk mengaktifkan plugin ini anda harus mempunyai kode API. Kode API bisa dengan mudah anda dapatkan, caranya dengan membuat akun di wordpress.com. Jika anda belum mempunyai akun di wordpress.com, silahkan anda mendaftar di wordpress dan membuat 1 blog gratisan. Kemudian anda masuk ke dashboard Wordpress.com dan lihat di profile anda, atau bisa juga di menu "edit profile". Disana akan terlihat kode API yang bisa anda gunakan untuk aktivasi plugin akismet, kode API ini juga bisa di gunakan untuk blog anda yang lain. Berikut ini adalah tampilan kode API di profile worpress.com:

Untuk mengaktifkan plugin akismet, silahkan anda login ke Wp-Admin blog anda, kemudian klik pada plugin seperti gambar di bawah ini:

Kemudian klik "Activate" pada plugin ini, dan anda akan diarahkan untuk memasukkan kode API seperti gambar di bawah ini:

Anda juga bisa memasukkan kode API dengan melakukan klik pada "Akismet configuration" di bawah menu Plugins di samping kiri. Selanjutnya klik pada "enter your wordpress API key" untuk memasukkan kode API yang telah anda simpan tadi.

Jika anda sudah memasukkan kode API, jangan lupa untuk menyimpannya dengan melakukan klik pada "update option". Sampai disini anda telah selesai mengaktifkan plugin akismet untuk wordpress anda. Dengan plugin akismet ini, anda akan bisa melihat berapa jumlah komentar SPAM pada blog anda, dan anda juga bisa menampilkannya di sidebar blog anda.

Semoga bermanfaat

Read More --►