Membuat widget chatbox

Ada beberapa kotak chat yang sering digunakan seperti : Shoutmix.com,Oggix.com dan Chatbox.com dll
diantara ketiga penyedia layanan kotak chat itu yang paling sering digunakan di blog - blog adalah shoutmix karena memiliki kelebihan daripada yang lain
Cara membuatnya sapeti ini
Masuklah dulu pada Shoutmix.com
lalu klik tombol yang seperti ini

Cara membuat Dropcap

Fasilitas ini digunakan untuk memperbesar huruf di awal kalimat
contohnya seperti:langsung saja caranya:

Dasar-dasar pembuatan link1

Link adalah bagian yang sangat penting dalam sebuah blog,misalnya link download ataupun
link teman
pada dasarnya susunannya sebagai berikut:
<a href="http://URL">TEXT</a>
kode yang berwarna orange adalah alamat situs
kode yang berwarna hijau adalah teks yang akan ditampilkan

sebagai contoh:
One piece
maka kode yang saya gunakan adalah
<a href="http://rian-hizrian.blogspot.com/">One piece</a>

Cara membuat tombol balas tanggapan di

Dah lama gak post hehheheh
oh iya saya ada trik blog baru!
baru aja belajar sama franco caranya
tapi saya buat tombolnya beda
-->ngikutin karya k-blogger

Cara membuat select all pada textarea

Sebelummnya saya pernah ngebahas tentang Cara membuat textarea
sekarang saya akan membahas cara membuat select all pada text area
contoh hasilnya sepeti ini

Cara membuat select all otomatis

Sebelumnya saya pernah ngebahas tentang Cara membuat select all pada textarea
namun itu belum otomatis yang otomatis seperti ini:
hanya tinggal diklik text areanya langsung ter select semua

Text>>

Cara supaya artikel blog tidak bisa di copy

Bingung ni mau post apa
tapi muncul juga ide untuk buat post ini
ya sudah sekarang kita mulai ke pembicaraan
pasti anda kesalkan jika salah satu artikel anda di copy
ataupun semua artikel anda di copy
ini beberapa tangggapan teman saya

Cara membuat widget change font this

Trik blog ,Post ini terinspirasi dari blognya rizky2009
disana saya melihat widget seperti ini
saya coba tes tes tapi gak berhasil
lalu saya ngutak-ngatik blog percobaan saya dan akhirnya berhasil
pasti ada yang bertanya apa itu widget change font this blog?
widget change font this blog adalah widget yang digunakan untuk mengubah font blog kita(sederhana banget jawabannya)hehehe
mau tau gak caranya???

Dasar-dasar pembuatan link2

Trik blog,Link adalah bagian yang sangat penting dalam sebuah blog,misalnya link download ataupun
link teman Baca --> Dasar-dasar pembuatan link(1)

<a href="http://URL">TEXT</a>
kode yang berwarna orange adalah alamat situs
kode yang berwarna hijau adalah teks yang akan ditampilkan
sebagai contoh:
One piece

Cara manipulasi tanggal html

Trik blog ,kita sering melihat blog yang pada halaman awalnya selalu saja menampilkan post yang itu - itu saja.
padahalkan setiap minggukan pasti diupdate
sebenarnya ini bisa kita lakukan dengan memanipulasi tanggal
contoh:

Membuat tools parse html

Trik blog, Kali ini kita akan membahas tentang "Membuat tools parse html"

Biasanya anda memarse kode html di http://centricle.com/tools/html-entities/
Tapi sekarang anda bisa memasang dan menggunakannya di blog anda sendiri

Cara membuat logo unik dengan html

Trik blog,Sebenarnya http://funnylogo.info/ digunakan untuk membuat search engine sendiri. tapi saya akal-akalin aja buat logo
contoh logonya seperti ini:

Dasar-dasar pembuatan option

Trik blog ,Option digunakan untuk mendefinisikan suatu elemen yang bisa dipilih dalam suatu daftar pilihan.
Fungsi Option pun sering digunakan dalam widget-widget
Pada dasarnya codenya sebagai berikut:

Cara mengubah rotation gambar

Blogger, Sering melihat gambar seperti yang dibawah ini?

Pasti seringkan?
Agar terbentuk seperti itu kita hanya perlu mengubah rotationnya
Caranya seperti ini:

Cara mengelola blog lebih dari satu

Cara ini digunakan bagi anda yang sering kehabisan ide ataupun untuk membagi tugas dengan orang yang kita percayai untuk mengelola blog.
Apakah anda tertarik?
Oke jika anda tertarik begini langkahnya:
1.Masuk dasbor-->pilih pengaturan
2.Lalu pilih izin

Menambah efek pelangi pada link

Trik blog , Kali ini saya akan membahas cara "Menambah efek pelangi pada link"

cara ini untuk kamu yang bosan dengan tampilan link yang gitu-gitu saja


sebagai contoh coba arahkan mouse anda pada link berikut:

>>PUNDI-PUNDI ONLINE<<

Cara menambah scroll pada kotak

Trik blog ,Bagi anda yang tidak ingin kotak komentarnya terlihat terlalu memanjang saya punya triknya.
Berikut caranya:

1.Masuk ke blogger
2.Pilih Rancangan (Dulu tata letak)
3.Klik edit html
4.Beri tanda centang pada Expand Template Widget
5.Cari kode berikut:

Membuat menu vertikal cantik

Sebelum anda mencoba membuatnya ada baiknya anda melihat screenshot contoh widgetnya:

Apakah anda tertarik?

Macam macam border

Border digunakan untuk mempercantik tampilan post atau konten Anda.
Pada dasarnya kodenya diapit oleh kode berikut:

<div>...</div>

berikut tampilan dan codenya:

Cara membuat komentar ada bordernya

Pada post Cara menambah scroll pada kotak komentar ada yang bertanya
"bagaimana cara membuat komentar ada bordernya?"
sekarang saya akan menjawab pertanyaan itu
caranya begini:
1. Masuk dasbor
2. Pilih Rancangan ---> edit html
3. Cari kode berikut:

.comment-form {

Mempercantik tampilan post

Border digunakan untuk mempercantik tampilan post atau konten Anda.
Baca Macam macam border 1

Berikut tampilan dan codenya:

<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px">Coba coba</p>

Rounded Corner

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?
Itu namanya Rounded Corner
Sebagai contoh:

menentukan geographic target

Pasti banyak yang bertanya mengapa blognya sering masuk di google.com tapi di google.co.id tidak? Sedangkan blog kita berbahasa indonesia pasti pengunjung yang kita butuhkan berasal dari indonesia.
Maka kita harus set target geografis ke indonesia.
Berikut caranya:
1.Masuk Google webmaster

Mempercantik textarea

Setelah menulis post Cara membuat textarea,Cara membuat select all pada textarea, Dan Cara membuat select all otomatis pada textarea sekarang saya akan membahas cara "Mempercantik textarea"


Berikut contoh dan kodenya:

Membuat File JavaScript

Menurut buku seo yang saya baca JavaScipt tidak SEO-friendly. Jika kita menggunakan JavaScript terlalu banyak kemungkinan posisi di search engine menurun.
Untuk mengurangi efek masalah ini adalah dengan "Membuat File JavaScript"
Cara membuatnya seperti ini:

1. Buka notepad
2. Tentukan kode JavaScript yang akan dibuat menjadi File
3. Jika sebelumnya kodenya seperti ini:
   <script type="text/javascript">
   Isi dari javascript...
   </script>
4. Maka hapus kode warna merah dan copy isi dari code JavaScript dan pastekan ke Notepad
5. Lalu save dengan membuat Filename : NamaFile.js dan Save as type: All files
6. Upload file JavaScript tersebut
7. Setelah diupload,Cara menggunakannya seperti ini:
   <script type="text/javascript" src="URL_File_JS_Yang_Sudah_Di_Upload.js"></script>
8. Selesai deh

Mengganti background blockquote

Fungsi blockquote adalah mempercantik tulisan ataupun untuk background kode atau sebagainya.
sebagai contoh:

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Membuat textarea seperti google

Untuk sementara saya tidak melanjutkan Dasar dasar html.
Maaf ya tapi saya akan membahas tentang Membuat textarea seperti google sebagai contoh bisa anda lihat disini Contoh textarea.
Jika anda tertarik ikuti caranya sebagai berikut: ()
1. Buka Dasbor
2. Pilih rancangan -> edit html
3. Cari kode ]]></b:skin> Lalu paste kode berikut diatasnya

ZOOM TEMPLATE

Pernahkah kamu melihat menu bar pada blog? mungkin ada yang bilang pernah ataupun belum pernah,bagi yang belum lihat bisa anda lihat di ZOOMTEMPLATE ataupun di Zona bebas
Inilah screenshot
Menu yang dimaksud adalah menu yang diatas



Setelah melihat screenshot bagi anda yang tertarik dapat mengikuti tutorial berikut:
 

1. Masuk ke blogger
2. Pilih rancangan --> edit html
3. Cari kode <body> lalu paste kode dibawah ini dibawahnya

<div id='mta_bar'>
<div class='mta_bar bar_logo'>
<a href='http://k-blogger1.blogspot.com/'>K-blogger</a>
</div>
</div>
<style>
#mta_bar{position:absolute}
#mta_bar{ background:#6D0290 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYGVTKK_6werfEHn_wM8fHaUcBFa8fpWID39rcRPCNCyV2w6-U9p-05_Draqu8jBULC9M7yyyVaMkBdhpYFjlL2-WvjASWGJPz3xYiIryDisGnUOU5VXxNKxCbviwqzl0Qkfz8fomV4ZWS/s400/nav-hover.jpg) top left repeat-x; border-bottom:1px solid #8704B3; z-index:100; padding-top:6px; width:100%; top:0; left:0; overflow:auto; height:25px; overflow:hidden }
#mta_bar .bar_logo{float:left; padding-left:7px; text-align:left; font-family:Arial; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:150px; padding-top:3px}
#mta_bar .bar_logo a{background:url(http://www.blogger.com/favicon.ico) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_logo a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_search{float:left; padding:0; margin:0px; text-align:left; font-family:tahoma; font-size:14px; font-weight:bold; font-style:normal; color:#fff; width:165px}
#mta_bar .bar_search a{text-decoration:none; color:#fff; padding-left:21px; padding:0}
#mta_bar .bar_search a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_GoogleAds{float:right; text-align:left; font-family:tahoma; font-size:13px; font-weight:normal; font-style:normal; color:#999; width:468; padding:3px 1px}
#mta_bar .bar_share{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:normal; font-style:normal; color:#fff; padding:3px 0px; width:140px}
#mta_bar .bar_share a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKNBVQUQlfT7754BqO5Ch-7bcWfzNQDCKV__WqnQzlssJFX1R0GLG6WeF13NRWmJFlQZWWZjqImKGTkG2GTzOhlyWHlfCfqXxY0r9qZhwOEEbVMBKNS1N3XWpD5eCzTDETXHE2RjCX3Ob/s400/submit.png) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_share a:hover{text-decoration:underline; color:#fff}
#mta_bar .bar_hide{float:left; text-align:left; font-family:arial; font-size:13px; font-weight:bold; font-style:normal; color:#fff; padding:3px 0px; width:50px}
#mta_bar .bar_hide a{background:url(http://js-kit.com/images/stars/gold.png) 0px no-repeat; text-decoration:none; color:#fff; padding-left:21px; }
#mta_bar .bar_hide a:hover{text-decoration:underline; color:#fff}
</style>

4. Lalu simpan template :)

Macam macam button

Setelah menulis Macam macam border1 dan Macam macam border 2 saya akan menulis Macam macam button.
Button adalah tombol.Mw jelasin apa ya??? :)
Kegunaan button ada banyak seperti tombol download,follow,submit,spoiler dll.
Berikut Macam macam button:

Memberi background pada sidebar heading

Assalamu'alaikum, apa kabar semua? semoga sehat semua ya, amin
Sekarang saya akan membahas "Memberi background pada sidebar heading". Apa itu sidebar heading? sidebar heading adalah kepala dari heading(memangnya sidebar juga punya kepala wkwkw...) yang dimaksud adalah dimana judul widget berada.

Gambar disamping adalah contoh sidebar heading yang telah diberikan background. ^_^
Berikut cara Memberi background pada sidebar heading:

Cara menambah fungsi box pada post

Bismillah, Selama ini saya merasa sulit menulis code dalam textarea,lho mengapa? karena hasilnya akan seperti ini:
<center><div id="menu"><br /><ul><br /><li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li><br /><li><a href="http://about.com">about us</a></li><br /><li><a href="http://google.com">Google</a></li><br /><li><a href="http://wikipedia.com">Wikipedia</a></li><br /><li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li><br /></ul><br /></div></center><br /><style><br /><br />/* --------------------------<br />AUTHOR : STYLED MENUS<br />URL : http://www.styledmenus.com<br />Copyrights by STYLED MENUS<br />Widget From http://www.ardi33.web.id/<br />----------------------------*/<br />*{<br />margin:0;<br />padding:0;<br /><br />}<br />#menu{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrmv6Mp98pW9qkeiHlx_YusFERBTBZZxEdbp_H-bPh4KT30WsbEmpITVPnF0kxD2f5FG8ZkeiHPCw493YVgEQBSDOth7vIsI5-nDmCVa2j0Fi1dkgKqEOPV4i0tN5SgV9cJQZcvoTaj4/s1600/menu_026_bg.jpg) no-repeat;<br />width:172px;<br />height:191px;<br />padding:15px;<br />}<br />#menu ul{<br /><br />list-style:none;<br />padding:0 0 0 8px;<br />}<br />#menu li{<br />list-style:none;<br />display:block;<br />padding:10px 0;<br />}<br />#menu li a{<br /><br />list-style:none;<br />display:block;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvVDybdsD5T99-uo-5mJ03bQe_FrYM4qU13I0iS_4GhPVRx7B2DWfcTPfFqN5wKXR3dk6IAs0wi0n-8PEx-I3N7-kHVEtwNRgEExlRFEUXjTjTpRzYLJC2zGniQfVoeUOy43Yh0ec6FmI/s1600/menu_026_b.gif) no-repeat left center;<br />color:#ffe991;<br />font-weight:bold;<br />text-transform:uppercase;<br />font-size:11px;<br /><br />line-height:1.2em;<br />text-decoration:none;<br />padding:0 5px 0 25px;<br />}<br />#menu li a:hover{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;<br />color:#fff;<br />text-decoration:none;<br /><br />}<br />#menu li .current{<br />list-style:none;<br />display:block;<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;<br />color:#fff;<br />font-weight:bold;<br />text-transform:uppercase;<br /><br />font-size:11px;<br />text-decoration:none;<br />padding:0 5px 0 25px;<br />}<br />#menu li a.current, #menu li a:hover.current{<br />background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;<br />color:#fff;<br />text-decoration:none;<br /><br />}<br /></style><br />
Dimana setiap baris ada <br />, Coba lihat contoh code yang dimasukkan kedalam box yang sering saya gunakan sebagai pengganti textarea dalam memasukkan code:

Membuat Widget Diatas Posting. Widget diatas posting

Trik blog kali ini membahas cara Membuat Widget Diatas Posting. Widget diatas posting bisa kita gunakan untuk ucapan selamat lebaran, informasi dll, Contohnya seperti ini:

Yang bertuliskan:

Kata telah terucap, tangan telah tergerak, prasangka telah terungkap, Tiada kata, Kecuali “saling maaf” jalin ukhuwah dan kasih sayang raih indahnya kemenangan hakiki, Selamat Hari Raya Idul Adha 1431H

Membuat dua sidebar (Kiri dan Kanan)

Selamat Hari Raya Idul Adha  1431H, Setelah absen 2 minggu nulis tutorial blog, saya akan memberi tutor cara Membuat dua sidebar (Kiri dan Kanan). Itu judul hasil 2 hari mikir judul yang tepat hehehe, Contoh sidebarnya adalah gambar disamping. Hasilnya mungkin sederhana tapi bisa dipercantik sendiri :
Langsung saja ya ke caranya:
1. Masuk ke dasbor ->> rancangan ->> pilih edit html
2. Cari kode ]]></b:skin> lalu pastekan kode berikut dibawahnya

Memberi background pada sidebar heading

Assalamu'alaikum, apa kabar semua? semoga sehat semua ya, amin
Sekarang saya akan membahas "Memberi background pada sidebar heading". Apa itu sidebar heading? sidebar heading adalah kepala dari heading(memangnya sidebar juga punya kepala wkwkw...) yang dimaksud adalah dimana judul widget berada.

Gambar disamping adalah contoh sidebar heading yang telah diberikan background. ^_^
Berikut cara Memberi background pada sidebar heading:

Cara Membuat Navigasi Breadcrumb

Kali ini saya akan membahas tentang "Membuat Navigasi Breadcrumb"
Navigasi Breadcrumb berguna untuk memudahkan pengunjung untuk kembali kehalaman sebelumnya.

Contoh hasilnya:

Ada 2 jenis navigasi website, yaitu navigasi internal dan navigasi eksternal.

1. Navigasi internal adalah link yang akan menavigasi pengunjung dari satu halaman ke halaman lain tapi masih didalam website/blog yang sama contohnya seperti Navigasi Breadcrumb atau Navigation Breadcrumb
2. Navigasi eksternal adalah link yang digunakan untuk menavigasi pengunjung keluar dari halaman website/blog sekaligus keluar dari website/blog

Sekarang cara membuatnya:

Membuat tag html baru

Bismillah, Ketemu lagi dengan penulis misterius alias gak serius (wkwkwkk) yang selalu memberi trik blog hangat sekaligus basi .
Saatnya masuk ke tentang Membuat tag html baru.
Apa itu tag?
Saat membuat halaman web kita membutuhkan fungsi tag. Dengan tag lah kita bisa membuat web
Format menulis tag sepeti berikut:
<tag>Isi dengan Teks atau Gambar</tag>