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

RGBA Effect

Bismillah, Sekarang kita akan membahas tentang RGBA Effect yang juga termasuk dalam css3.
RGBA pada versi css sebelumnya disebut RGB (Red, Green, Blue) lalu pada versi css3 ditambah alpha atau opacity.
Contoh hasil penggunaan RGBA Effect:
Awal:






Menjadi:






Code yang saya gunakan adalah "background: rgba(0, 100, 110, .3);"
Nilai 0 adalah Red (R)
Nilai 100 adalah Green (G)
Nilai 110 adalah Blue (B)
Nilai 3 adalah Alpha (A)

Contoh pembuatannya:
1. Upload 1 gambar ke post
2. Klik tab edit html pada post
Lihat code berikut:
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="Link gambar"><img style="float: left; margin: 0pt 10px 10px 0pt; cursor: pointer; width: 230px; height: 98px;" src="Url Gambar" alt="RGBA Effect" border="0" /></a>
3. Tambahkan code background: rgba(0, 100, 110, .3); disamping code yang berwarna merah
4. Terbitkan entri/simpan

Catatan :
Code RGBA adalah "rgba(Red, Green, Blue, Alpha)"
Jika belum jelas silahkan koment

Readmore..

Memberi efek shadow pada image/gambar

Bismillah, Merdeka! Merdeka! Merdeka!
Sebelumnya saya telah membahas tentang Memberi efek shadow pada text/tulisan karena menurut saya masih kurang jika hanya untuk text/tulisan saja. maka saya menulis post tentang Memberi efek shadow pada image/gambar (kayak mau pidato aja wkwkwkwk).
contoh hasilnya: (Sebenarnya juga bisa menggunakan MsWord 2007)

Logo google.co.id

Langsung saja caranya:
1. Masuk dasbor ->> Rancangan ->> Edit html
2. Cari kode berikut:

.post img {
margin: 0px;
padding:0px;
border:0px;
}

3. Lalu tambahkan kode berikut sebelum }

-webkit-box-shadow: 3px 3px 8px #777;
-moz-box-shadow: 3px 3px 8px #777;
box-shadow: 3px 3px 8px #777;

4. Maka setelah ditambahkan kodenya menjadi:

.post img {
margin: 0px;
padding:0px;
border:0px;
box-shadow: 3px 3px 8px #777;
-webkit-box-shadow: 3px 3px 8px #777;
-moz-box-shadow: 3px 3px 8px #777;
}

5. Save template
Ctt:
1.Setiap anda mengupload gambar atau memasukkan gambar ke post anda maka efek shadownya akan muncul.
2. Efek ini belum berfungsi di IE(Internet explorer)

Readmore..

Memberi efek shadow pada text/tulisan

Bismillah, Kali ini saya akan membahas tentang Memberi efek shadow pada tulisan dan gambar.  Shadow berarti bayangan. Jadi yang akan kita bahas adalah Memberi efek bayangan pada tulisan dan gambar. daripada lama-lama saatnya masuk dalam tutorialnya:

- Efek shadow pada text/tulisan
Contohnya seperti ini:
<< Contohnya >> , << Contohnya >>

Cara membuatnya:
1. Masuk dasbor ->> Rancangan ->> Edit html
2. Cari kode 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. Tambahkan kode berikut dibawah kode diatas

.post shadow {
text-shadow: #bcbcbc 0px 5px 5px;
}

4. Dan save

Cara menggunakan pada post: <shadow>Tulisan yang akan diberi efek</shadow>
*Catatan: kode yang berwarna merah adalah warna bayangan

Sampai disini dulu sebenarnya saya akan lanjutkan dengan box shadow tapi kapan kapan aja

Salam blogger!

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

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

.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

Readmore..

Dasar dasar html 4

Dalam Dasar dasar html 4 ini saya tidak membahas tag lagi karena telah saya bahas pada post:

Dasar dasar html 3

Dasar dasar html 2

Dasar dasar html 1

Sekarang saya akan membahas bagaimana cara menambah CSS dalam Bahasa HTML.
Sebagai contoh saya akan mempraktekkan cara membuat Bubble tooltips 100% menggunakan CSS.
Caranya seperti berikut:

1. Cari code <body>
2. Dibawah code tersebut tambahkan code dibawah ini
   

   <style type="text/css">
   ....
   </style>

3. Ganti code yang berwarna merah dengan code css berikut:
   /*---------- balon tips -----------*/
   a.bt{
   position:relative;
   z-index:24;
   color:#3CA3FF;
   font-weight:bold;
   text-decoration:none;
   }
   
   a.bt span{ display: none; }
   
   /*background:; ie hack, harus mengubah sesuatu untuk menampilkan di IE*/
   a.bt:hover{ z-index:25; color: #aaaaff; background:;}
   
   a.bt:hover span.balontips{
   display:block;
   position:absolute;
   top:0px; left:0;
   padding: 15px 0 0 0;
   width:200px;
   color: #993300;
   text-align: center;
   filter: alpha(opacity:90);
   KHTMLOpacity: 0.90;
   MozOpacity: 0.90;
   opacity: 0.90;
   }
   
   a.bt:hover span.atas{
   display: block;
   padding: 30px 8px 0;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat top;
   }
   
   a.bt:hover span.tengah{
   display: block;
   padding: 0 8px;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAuzrWOxtFDg3M3CmMAK4kv8iisTez1cFFSYy0Mq2ID4Y6aO-05KjmA-Dlxp7Lr8wORwrrzqPVVJl-4xd0KsbCaxGcBJE1mcV3s2HkrNJBVPNkkaN5s6J2149tAPl5QHUwAYl2M4SJZmQ/) repeat bottom;
   }
   
   a.bt:hover span.bawah{
   display: block;
   padding:3px 8px 10px;
   color: #548912;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIKCbbwlmycIzj5XXGE9BA4pHEh9YVgEfgifEEhfM_DfUPIbN5h1yB7sEKxxPr4y5mqTiyCI03GSukpPOF-pwKuz2vHW0U45J18X6VzB24Rx3pV5vz85APXMjheAY9E51Hy_vM-5jis0U/) no-repeat bottom;
   }
   
   /*---------- balon tips END-----------*/
4. Untuk menggunakan code css tesebut caranya seperti ini:
   

   Dibawah code </style> Pastekan code berikut:
   <a class='bt' href='#'>FAQ&#39;S<span class='balontips'>
   <span class='atas'>
   </span>
   <span class='tengah'>
   Tulis apa aja tentang FAQ&#39;S!
   </span>
   <span class='bawah'>
   </span>
   </span>
   </a>
   

   
   
5. Maka hasilnya seperti ini:
   

Readmore..