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>