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

Mempercantik efek hover pada link

Pengertian hover:

Secara sederhana pengertian fungsi hover adalah merubah beberapa variable dalam blog/template ketika cursor berada di atas bagian tersebut. Variabel yang biasanya diterapkan sebagai hover adalah : background (baik background color ataupun background image), border, warna font, jenis font dan tebal font serta fungsi text decoration (pada link). Sumber : http://gubhugreyot.blogspot.com

Nah yang sekarang kita bahas adalah efek hover pada link, Berikut:
Sebelumnya buka dasbor > rancangan > edit html
Ingat! kode yang kita edit adalah:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

- Mengubah warna font pada link saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Lalu ubah kode yang berwarna merah menjadi: color:Kode warna;
Contoh: color:#999;
Contoh hasilnya bisa anda liat dilink menu diatas blog ini

- Membuat tulisan link menjadi kelap kelip saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Kode yang berwarna merah diganti dengan kode ini: text-decoration:blink;
Contoh: tes

- Membuat link menjadi berubah rotate saat hover
Lihat kode ini:

a:hover {
color:$titlecolor;
text-decoration:underline;
}

Lalu tambahkan kode berikut sebelum tutup kurung (})

-moz-transform:rotate(7deg);
-o-transform:rotate(7deg);
-webkit-transform:rotate(7deg)

Hasilnya dapat dilihat pada blog saya yang pertama >> TOP
Link akan miring saat cursor mouse diarahkan ke link

7deg adalah derajat rotate

Sampai disini dulu sebenarnya masih banyak efek hovernya tapi karena terlalu panjang saya stop sampai disini dulu! semoga berhasil

Readmore..

CSS3 : Multi-column Layout

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Contoh:

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Bukan hanya 2 dan 3 kolom tapi juga bisa 4 atau lebih.
Contoh:

Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.

Kode yang saya gunakanan:
<style>.MCL {-moz-column-count: 3;-moz-column-gap: 1em;-moz-column-rule: 1px solid black;-webkit-column-count: 3;-webkit-column-gap: 1em;-webkit-column-rule: 1px solid black;}</style>
<div class="MCL"><p>Akhirnya bisa post lagi tentang css3 . Sesuai dengan judulnya kita akan membahas tentang Multi-column Layout yaitu membuat beberapa kolom layout. Tapi sayangnya Multi-column Layout hanya didukung oleh browser Mozilla dan Safari 3.</p></div>

Catatan:
1.Kode yang berwarna merah adalah jumlah kolom
2.Kode yang berwarna orange adalah tulisan yang ingin dimunculkan

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

CSS3 : Transform rotate (mengatur rotation tulisan dan gambar)

Bismillah, Lagi lagi saya membahas tentang CSS3, yang kita bahas adalah Transform rotate yang digunakan untuk mengatur rotation tulisan dan gambar. Efek ini bisa membuat tulisan atau gambar terbalik dan miring. Didalam efek ini kita menggunakan satuan deg atau degree yang artinya derajat.

Screenshot :
K-blogger

Kode Css yang saya gunakan:

-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);

Sebagai contoh saya akan membuat Transform rotate pada post:
1. 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;
}

2. Lalu tambahkan code berikut dibawahnya

.post rotate {
-moz-transform:rotate(180deg);
-webkit-transform:(180deg);
-o-transform:(180deg);
-icab-transform:(180deg);
-khtml-transform:(180deg);
}

3. Lalu save

Cara menggunakannya : <rotate>K-blogger</rotate>
Catatan: code yang berwarna merah adalah derajat rotatenya :)

Selamat mencoba!!!

Readmore..