Membuat dua sidebar (Kiri dan Kanan)

Selamat Hari Raya Idul Fitri 1 syawal 1431H, Setelah absen 2 hari 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 :D
Langsung saja ya ke caranya:
1. Masuk ke dasbor ->> rancangan ->> pilih edit html
2. Cari kode ]]></b:skin> lalu pastekan kode berikut dibawahnya

.sidebar-kiri{
width:149px;
float:left;
padding:0 10px 0 0;
}
.sidebar-kanan{
width:149px;
float:right;
}

3. Lalu cari kode berikut:

<div id="sidebar-wrapper">
.....
</div>

4. Lalu pastekan kode berikut sebelum </div>

5.Simpan template

Untuk widthnya dapat diatur sendiri sesuai template blog

Happy blogging!!!

Readmore..

Membuat 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 Fitri 1431H

Untuk membuatnya ikuti tutor berikut:
1. Masuk Dasbor -> Rancangan -> Edit html
2. Centang Expand Template Widget
3. Cari kode berikut: ]]>
4. Tambahkan kode dibawah ini diatasnya:

.ataspost{
padding:10px;
margin:10px 0px;
background:#e1f2ff;
border:1px dotted #ddd;
line-height:1.6em;
}

5. Cari kode berikut: <div class='post-header-line-1'/>
6. Lalu tambahkan kode dibawah ini dibawahnya:

<b:if cond="'data:blog.pageType">
<div class="'ataspost'">
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 Fitri 1431H
</div></b:if>

7. Save template
Kalau kurang bagus bisa anda modif sendiri . Jika blog ini bermanfaat bagi anda silahkan pasang link blog ini di blog anda

Readmore..

Menutup kotak komentar pada postingan tertentu

alhamdulillah bisa posting lagi . Yang saya bahas kali ini adalah "Menutup kotak komentar pada postingan tertentu". Maksudnya menutup tempat komeng dan menghilangkan semua komentar di postingan tertentu bukan semua... Sebagai contoh dapat anda lihat di Contact me.
Cara menghilangkannya berikut:
1. Masuk Dasbor
2. Buat entri baru atau edit entri yang ingin anda tutup kolom komentarnya
3. Lihat bagian bawah

4. Pilih opsi entri
5. Pada bagian Komentar Pembaca pilih Jangan diizinkan

6. Dan terbitkan entri

Demikian tutorial singkat ini jika blog ini bermanfaat bagi anda silahkan pasang link blog ini di blog anda

Readmore..

Membuat tag html baru

Bismillah, Ketemu lagi dengan penulis misterius alias gak serius (wkwkwkk) yang selalu memberi trik blog hangat sekaligus basi Emoticon Ketawa

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

Pernahkah anda berpikir dapat menulis tulisan ke kanan hanya dengan mengetik <kanan>Tes</kanan> sehingga tulisan berada dikiri seperti ini:
Tes.

Mungkin ada! Tetapi sedikit oleh karena itu saya menulisnya.
Sebagai contoh saya akan membuat tag html <kanan>
Caranya seperti ini:
1. Masuk Dasbor --> rancangan --> edit html
2. Cari code berikut:

.post {
font: 13px trebuchet ms;
margin-bottom:15px;
text-align:justify;
color: #000000;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

3. Lalu pastekan code berikut dibawahnya:

.post kanan {
text-align: right;
float: right;
}

4. Save Template

Penjelasan:
1. code yang berwarna merah adalah nama tag html yang kita buat
2. code yang berwarna biru adalah perintahnya
Selamat mencoba!!

Readmore..

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:

<center><div id="menu">
<ul>
<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>
<li><a href="http://about.com">about us</a></li>
<li><a href="http://google.com">Google</a></li>
<li><a href="http://wikipedia.com">Wikipedia</a></li>
<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>
</ul>
</div></center>
<style>

/* --------------------------
AUTHOR : STYLED MENUS
URL : http://www.styledmenus.com
Copyrights by STYLED MENUS
Widget From http://www.ardi33.web.id/
----------------------------*/
*{
margin:0;
padding:0;

}
#menu{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrmv6Mp98pW9qkeiHlx_YusFERBTBZZxEdbp_H-bPh4KT30WsbEmpITVPnF0kxD2f5FG8ZkeiHPCw493YVgEQBSDOth7vIsI5-nDmCVa2j0Fi1dkgKqEOPV4i0tN5SgV9cJQZcvoTaj4/s1600/menu_026_bg.jpg) no-repeat;
width:172px;
height:191px;
padding:15px;
}
#menu ul{

list-style:none;
padding:0 0 0 8px;
}
#menu li{
list-style:none;
display:block;
padding:10px 0;
}
#menu li a{

list-style:none;
display:block;
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;
color:#ffe991;
font-weight:bold;
text-transform:uppercase;
font-size:11px;

line-height:1.2em;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
#menu li .current{
list-style:none;
display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
font-weight:bold;
text-transform:uppercase;

font-size:11px;
text-decoration:none;
padding:0 5px 0 25px;
}
#menu li a.current, #menu li a:hover.current{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;
color:#fff;
text-decoration:none;

}
</style>

Bagaimana? Tulisannya sangat teratur bukan?
Jika anda tertarik berikut codenya:

Semoga bermanfaat!

Readmore..

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:

1. Masuk dasbor
2. Pilih Rancangan --> edit html
3. Cari code berikut:

/* Sidebar Content
----------------------------------------------- */
.sidebar {

color: $sidebartextcolor;
line-height: 1.5em;

}

.sidebar ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar li {
margin:0;
padding-top:0;
padding-$endSide:0;
padding-bottom:.25em;
padding-$startSide:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar .widget, .main .widget {
border-bottom: 1px solid #99C9FF;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

4. Lalu paste code berikut setelah code diatas

/* sidebar heading */
#sidebar h2 {
padding: 6px 0 6px 7px;
text-align: justify;
color: #ffffff;
font: normal bold 98% Arial, sans-serif;
text-transform: uppercase;
text-decoration: none;
background-image:url("http://i45.tinypic.com/3320w06.gif");
background-repeat:repeat-x;
background-position:center right;
border-bottom: 1px solid #99C9FF;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
border:2px solid #E8EDFB;
}

5. Save/Simpan

Note:
*Code yang bewarna merah adalah url gambar background
*Code yang dicari kemungkinan berbeda jika tidak ada cari yang hampir mirip

Readmore..

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:

-Button biasa
Hasilnya:

Cara menggunakan:
<button type="button">Tombol atau button</button>

-Button seperti google
Hasilnya:

Cara menggunakan:
<span class="lsbb"><input onclick="this.checked=1" class="lsb" value="Google Search" name="btnG" type="submit"></span>
<style>.lsbb{background:#eee;border:solid 1px;border-color:#ccc #999 #999 #ccc;height:30px;display:block}.lsb{background:url(/images/srpr/nav_logo14.png) bottom;font:15px arial,sans-serif;border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;vertical-align:top}.lsb:active{background:#ccc}.lst:focus{outline:none}.ds{display:-moz-inline-box}.ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;display:inline-block;margin:3px 0 4px;margin-left:4px}</style>

-Button Download
Hasilnya:

Cara menggunakan:
<a href="alamat download" target="_blank"><img alt="Download here Pictures, Images and Photos" border="0" src="http://i233.photobucket.com/albums/ee5/jun23flrs/btndwn01.gif" /></a>

-Cara membuat Button:
Pada dasarnya button seperti
-->Button biasa
Tapi anda juga bisa mempercantiknya seperti ini:

Code:
<button type="button" style="-moz-background-clip: -moz-initial; -moz-background-inline-policy: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-size: auto auto; background-attachment: scroll; background-color: black; background-image: none; background-position: 0% 0%; background-repeat: repeat; color: white; font: bold 20px Verdana,Geneva,sans-serif; margin: 5px 0pt; padding: 0pt 10px;">Klik Disini !</button>

background-color adalah warna latar button.
color adalah warna tulisan/text.
font adalah huruf teks.
Klik Disini ! Tulisan yang akan ditampilkan
Semoga sukses tunggu macam-macam button selanjutnya!

Readmore..

Cara membuat menu bar pada blog

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(http://3.bp.blogspot.com/_C6KkooKXCEw/S_pAYyD7wvI/AAAAAAAAF0A/hwsUD_hlo_o/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(http://1.bp.blogspot.com/_C6KkooKXCEw/SiP-v5e8XPI/AAAAAAAAEUY/-xpJkShHdqA/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 :)

Readmore..

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: ( :kopi

)
1. Buka Dasbor
2. Pilih rancangan -> edit html
3. Cari kode ]]></b:skin> Lalu paste kode berikut diatasnya

.ds{display:-moz-inline-box}.ds{border-bottom:solid 1px #e7e7e7;border-right:solid 1px #e7e7e7;display:inline-block;margin:3px 0 4px;margin-left:4px}

4. Cara menggunakan:

Buatlah sebuah post
Lalu pastekan code berikut
<div style="height: 32px; margin: 4px 0pt;" class="ds"><input style="background: none repeat scroll 0% 0% rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(204, 204, 204) rgb(153, 153, 153) rgb(153, 153, 153) rgb(204, 204, 204); color: rgb(0, 0, 0); font: 18px arial,sans-serif bold; height: 25px; margin: 0pt; padding: 5px 8px 0pt 6px; vertical-align: top;" size="50" value="tes"></div>

5. Lihat contohnya di Contoh textarea
selesai juga deh :kopi

Readmore..

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

Sebelum saya menjelaskan tentang "Mengganti background blockquote" saya akan menjelaskan cara menggunakannya.
Berikut caranya:

Select tulisan yang akan anda tambahkan fungsi blockquote
lalu klik icon berikut ->
Selesai

Dan sekarang cara "Mengganti background blockquote"
Berikut caranya:

Siapkan url gambar
Login blogger
Pilih Rancangan -> Edit html
Cari kode berikut:

.post-body blockquote { background-position:-10px -7px; border: 1px dotted #FFC600; margin: 10px; padding: 10px; background: url("http://img516.imageshack.us/img516/1513/blackquotewe3.png") no-repeat #FFF8DD; text-align: justify; }

Lalu ganti kode warna merah dengan url gambar anda
Dan save template

Readmore..

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:

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

Readmore..

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:

Untuk belajar dasar dasar mempercantik textarea baca:

Rounded Corner (Sudut melengkung)

Macam macam border 1

Kode warna

Readmore..

Menentukan Geographic Target di Webmaster Tools

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
2.Lalu klik Site configuration --> Pilih settings

3.Pada Geographic Target pilih Indonesia

4.Klik save

Selesai deh

Readmore..

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.

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
Navigasi eksternal adalah link yang digunakan untuk menavigasi pengunjung keluar dari halaman website/blog sekaligus keluar dari website/blog

Sekarang cara membuatnya:

Masuk dasbor
Pilih rancangan
Edit html
Centang Expand Template Widget
Kemudian cari kode ]]></b:skin>
Letakkan kode dibawah ini diatas kode ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}
kemudian cari code <div class='post hentry uncustomized-post-template'> atau <div class='post hentry'> jika juga tidak ada cari yang mirip
Copy code berikut lalu paste dibawah kode tadi

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadcrumbs'>

Browse » <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
» <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadcrumbs'>
Browse » <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>
Simpan template

Readmore..

Rounded Corner (Sudut melengkung)

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?

Itu namanya Rounded Corner
Sebagai contoh:

Berikut cara membuatnya:

Tentukan bagian yang akan anda ubah menjadi melengkung
Misalnya bagian post maka cari kode cssnya
Edit seperti berikut:

Full rounded corner :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

-khtml-border-radius: 10px;

border-radius: 10px; }

Rounded corner di atas :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-webkit-border-radius-topleft: 10px;

-webkit-border-radius-topright: 10px;

-khtml-border-radius-topleft: 10px;

-khtml-border-radius-topright: 10px;

border-top-left-radius: 10px;

border-top-right-radius: 10px; }

Rounded corner di kiri atas :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

-moz-border-radius-topleft: 10px;

-webkit-border-radius-topleft: 10px;

-khtml-border-radius-topleft: 10px;

border-top-left-radius: 10px; }

Rounded corner di bawah :

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-webkit-border-radius-bottomleft: 10px;

-webkit-border-radius-bottomright: 10px;

-khtml-border-radius-bottomleft: 10px;

-khtml-border-radius-bottomright: 10px;

border-bottom-left-radius: 10px;

border-bottom-right-radius: 10px; }

Catatan:

Kode warna merah adalah Kode yang harus ditambahkan
Kode -moz-border-radius digunakan untuk FF, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.

Referensi:http://optimasi-blog.blogspot.com/
Ditulis : Sendiri

Readmore..

Macam macam border 2

Border digunakan untuk mempercantik tampilan post atau konten Anda.

Baca Macam macam border 1

Berikut tampilan dan codenya:

Sekarang cara mempercantik border

-Border yang berisikan text kelap kelip

-Border yang berisikan text berjalan

Selamat Datang Di K-blogger

ini dia kodenya:
<p style="border: dashed 5px #FF7F00; padding: 15px; margin: 0; text-align: justify; line-height: 23px; color: #000000; font-size: 18px"><marquee direction="left">Selamat Datang di K-blogger</marquee></p>

Kode yg berwarna merah adalah warna garis border
Baca Kode warna
Sudah dulu ya
tunggu seri ketiganya

Readmore..

Memberi warna dan border pada kotak komentar

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 {

4. Lalu paste kode berikut dibawah kode diatas

border:5px solid #8C748F;

dan simpan template

Catatan: kode yang berwarna merah adalah ketebalan border

Sekarang cara memberi warna pada kotak komentarnya
1.Cari kode:

.comment-form {

2.Lalu paste kode berikut dibawah kode diatas:

background:#191970;

Dan simpan template

Catatan: kode yang berwarna merah adalah kode warna
Untuk mengetahui kode warna baca ini

Readmore..

Macam macam border 1

Border digunakan untuk mempercantik tampilan post atau konten Anda.

Pada dasarnya kodenya diapit oleh kode berikut:

berikut tampilan dan codenya:

Catatan:
1.Code yang berwarna biru adalah bentuk bordernya
berikut bentuk-bentuk bordernya:
2.Code yang berwarna merah adalah warna border

Selamat mencoba!

Readmore..

Membuat Menu Vertikal Cantik

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

cara membuat memasang menampilkan Vertikal vertical tegak link bar Menu Cantik pada Blogspot blogger

Apakah anda tertarik?

berikut caranya:

1.Masuk dasbor

2.Pilih rancangan ->> elemen halaman

3.Klik tambahkan gadget ->> Kemudian pilih HTML/Javascript

4.Berikut codenya:

<center><div id="menu">

<ul>

<li><a class="current" href="http://k-blogger1.blogspot.com/">home</a></li>

<li><a href="http://about.com">about us</a></li>

<li><a href="http://google.com">Google</a></li>

<li><a href="http://wikipedia.com">Wikipedia</a></li>

<li><a href="http://k-blogger1.blogspot.com/2010/01/contact-me_14.html">contact us</a></li>

</ul>

</div></center>

<style>

/* --------------------------

AUTHOR : STYLED MENUS

URL : http://www.styledmenus.com

Copyrights by STYLED MENUS

Widget From http://www.ardi33.web.id/

----------------------------*/

*{

margin:0;

padding:0;

}

#menu{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKrmv6Mp98pW9qkeiHlx_YusFERBTBZZxEdbp_H-bPh4KT30WsbEmpITVPnF0kxD2f5FG8ZkeiHPCw493YVgEQBSDOth7vIsI5-nDmCVa2j0Fi1dkgKqEOPV4i0tN5SgV9cJQZcvoTaj4/s1600/menu_026_bg.jpg) no-repeat;

width:172px;

height:191px;

padding:15px;

}

#menu ul{

list-style:none;

padding:0 0 0 8px;

}

#menu li{

list-style:none;

display:block;

padding:10px 0;

}

#menu li a{

list-style:none;

display:block;

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;

color:#ffe991;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

line-height:1.2em;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

text-decoration:none;

}

#menu li .current{

list-style:none;

display:block;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

font-weight:bold;

text-transform:uppercase;

font-size:11px;

text-decoration:none;

padding:0 5px 0 25px;

}

#menu li a.current, #menu li a:hover.current{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqV8UFDwUCLg4ZzQj14ce12NXrOCr3FtL4DyWXhYz3wwhvBpZbKZn9E3KxF7Cqiq4_ucOXu2POeVL4rS8V_I2dt4RFg3ip7SwdU-OgiIGLcRaOhbZdmHTucfTmmTKSzv2PrhHliGpYl8/s1600/menu_026_h.gif) no-repeat left center;

color:#fff;

text-decoration:none;

}

</style>

Readmore..

Cara menambah scroll pada kotak komentar

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: