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 &#8220;saling maaf&#8221; 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
<a href="http://k-blogger1.blogspot.com/">K-blogger | Tutorial blog</a>

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
<a href="http://k-blogger1.blogspot.com/">K-blogger | Tutorial blog</a>

Readmore..

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>

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/AVvXsEgX724E8XfGzqETo5u2-rbtMgTamfosA4lUH9BshCR2cYdx8ZRVaft7CDpGq83IaB-ntyf4PWT2Eqf-BnpKESF5gMxyusCMCjIhI0xxQVO-iub6ze1vMpogjq03aCAPR50LO-xa9EbZFB4/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/AVvXsEjj_jcmcrIhMW_cuffgOja9mBB1wQc4FRBK7EOyMnku30fXq7YpYj89gx7OeiFLkXqTXy3mBtpZ-enYOe6KKn7_6iOgLfHunQKjwIJt3aajndOmlGCmTSlf7vw1BjAF1rDaX3XKJU4qy5Q/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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/AVvXsEgX724E8XfGzqETo5u2-rbtMgTamfosA4lUH9BshCR2cYdx8ZRVaft7CDpGq83IaB-ntyf4PWT2Eqf-BnpKESF5gMxyusCMCjIhI0xxQVO-iub6ze1vMpogjq03aCAPR50LO-xa9EbZFB4/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/AVvXsEjj_jcmcrIhMW_cuffgOja9mBB1wQc4FRBK7EOyMnku30fXq7YpYj89gx7OeiFLkXqTXy3mBtpZ-enYOe6KKn7_6iOgLfHunQKjwIJt3aajndOmlGCmTSlf7vw1BjAF1rDaX3XKJU4qy5Q/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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/AVvXsEi42RhSaxcTe6Hv0uGv652vH4q_2-H3KyKSwqwSJTSJTETuYiUVwcj7BMiWSDxu30-JUItL2VTTYiKtA78SPzNnjSeVjy3_XZC6ypMIRRk7p4XCHqj7D44y3Gum-eYxN_q7Zo2t27JLWJM/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:

<style>.boxA, .boxB {border-color:#CCCCCC;border-style:solid;border-width:5px 5px 10px;color:#000000;font-family:Arial;font-size:12px;margin:0 auto;overflow:scroll;padding:20px 6px;}.boxA {height:180px;.boxB {height:200</style>
<div class="boxA">
Code yang ingin ditampilkan
</div>

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