Membuat Paragraf Dua Kolom Dalam Postingan

Membuat Paragraf Dua Kolom Dalam Postingan - Untuk membuat paragraf dua kolom dalam postingan, caranya cukup mudah saja. Anda hanya perlu menggunakan selector CSS yaitu column-count dan column-gap kemudian anda padukan dengan tag HTML biasa seperti <div> atau <span>. Fungsi dari membuat paragraf dua kolom dalam postingan ini adalah membuat kesan indah dan rapi, selain itu juga untuk menghemat ruang teks yang ada supaya bisa di manfaatkan untuk menampung isi yang lainnya.

Cara membuat paragraf dua kolom dalam postingan ini sangat simple dan scriptnya pun menurut saya pribadi sangat mudah untuk di pahami, Berikut tutorial cara membuat paragraf dua kolom dalam postingan, silahkan simak dan perhatikan dengan baik!

1. Copy dan pastekan script berikut ini di dalam halaman menu posting/edit posting blog anda.

<div style="background-attachment: scroll; background: #f0f0f0;
-moz-column-count: 2; -moz-column-gap: 25px; -webkit-column-count: 2;
-webkit-column-gap: 25px; -o-column-count: 2; -o-column-gap: 25px;
column-count: 2; column-gap: 25px; height: auto;
width: auto; padding: 10px">

Masukkan teks anda di sini!

</div>

2. Ganti tulisan "Masukkan teks anda di sini!" dengan tulisan yang anda inginkan dan selesai.

Maka hasilnya kurang lebih akan terlihat seperti berikut ini :

Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Seputar Ketramilan mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Seputar Ketramilan mengucapkan terima kasih atas kunjungan anda. Ini adalah hasil dari script yang anda copy paste tadi. Hasilnya paragraf yang akan tampil menjadi dua kolom. Selamat mencoba dan semoga bisa membantu anda. Salm dari blogger Pekalongan. Senang bisa bertemu dengan anda, saya selaku admin Seputar Ketramilan mengucapkan terima kasih atas kunjungan anda.

Cukup sekian postingan tentang cara membuat paragraf dua kolom dalam postingan ini, semoga bermanfaat bagi anda semua. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Widget Blogger SImple Accordion by Seputar Ketramilan

Widget Blogger SImple Accordion by Seputar Ketramilan - Widget simple accordion ini saya buat menggunakan CSS & HTML, efek dari widget blogger simple accordion by Seputar Ketramilan ini memang masih agak kaku dan belum begitu sempurna karena masih dalam tahap pengembangan. Namun tidak ada salahnya jika anda ingin mencoba widget blogger simple accordion by Seputar Ketramilan ini, karena meskipun masih tergolong widget sederhana bukan berarti widget ini tidak ada manfaatnya. Widget simple accordion by Seputar Ketramilan ini sangat berguna sekali untuk menampung content yang panjang/cukup berat. Karena fungsi utama dari widget ini adalah untuk menghemat ruang/tempat.

Dan ini dia widget simple accordion by Seputar Ketramilan, penampakannya bisa anda lihat pada gambar di bawah ini!

Untuk membuat widget simple accordion by Seputar Ketramilan ini caranya cukup mudah saja. Silahkan bisa anda simak dan ikuti tutorial cara membuat widget blogger simple accordion by Seputar Ketramilan berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

/* Simple Accordion by Seputar Ketramilan */
#acc{
background: none;
font: 12px trebuchet ms;
line-height: 1.2em;
padding: 5px;
margin: 0;
}
#acc h3{
background: green;
padding: 5px;
margin: 0;
color: white;
}
#acc h3 a{
color: white;
}
#acc h3 a:hover{
color: black;
}
#acc .post{
background: #999999;
padding: 5px;
margin: 5px;
display: none;
}
#acc :target h3 + .post{
display: block;
height: 200px;
overflow: auto;
}
#acc :target h3 a{
color: white;
}

5. Setelah itu klik save/simpan template.

Sekarang anda tinggal memanggil script CSS accordion tersebut dengan menggunakan HTML, letakkan script HTML ini di tempat yang anda inginkan, misalnya di postingan, sidebar, dll. Berikut script HTML untuk memanggil dan menampilkan widget simple accordion by Seputar Ketramilan :

<div id="acc">
<div id="isi1">
<h3><a href="#isi1">Judul 1</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
<div id="isi2">
<h3><a href="#isi2">Judul 2</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
<div id="isi3">
<h3><a href="#isi3">Judul 3</a></h3>
<div class="post">Letakkan content yang ingin anda
tampilkan di sini! Bisa iklan, artikel populer, atau yg lainnya...
</div></div>
</div>

Jika sudah, tinggal simpan widgetnya dan lihat hasilnya... Selamat mencoba! Mungkin cukup sekian dulu postingan tentang widget blogger simple accordion by Seputar Ketramilan ini dan semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Cara Mengganti Background Teks Yang di Blok (Selected Text)

Cara Mengganti Background Teks Yang di Blok (Selected Text) - Teks yang di blog (selected text) maksudnya adalah tulisan/teks yang di tandai/dipilih ketika kita akan melakukan adegan paling menegangkan (menurut saya xD) yaitu adegan copy-paste. Artinya warna background teks yang di blok (selected text) pada saat akan melakukan adegan copy-paste tersebut bisa di ganti/di rubah sesuai dengan keinginan anda. Pada umunya, secara default (normal) warna background teks yang di blok (selected text) adalah biru (perhatikan gambar di atas).

Untuk mengganti background teks yang di blok (selected text) silahkan bisa anda ikuti dan simak tutorial tentang cara mengganti background teks yang di blok (selected text) berikut ini!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

::selection {background:#00FF00;color:#FFFFFF;}
::-moz-selection {background:#00FF00;color:#FFFFFF;}
::-webkit-selection {background:#00FF00;color:#FFFFFF;}
::-o-selection {background:#00FF00;color:#FFFFFF;}

5. Kemudian cari kode </head> dan letakkan script code di bawah ini tepat di atasnya!

<style type='text/css'>
::selection {background:#00FF00;color:#FFFFFF;}
::-moz-selection {background:#00FF00;color:#FFFFFF;}
::-webkit-selection {background:#00FF00;color:#FFFFFF;}
::-o-selection {background:#00FF00;color:#FFFFFF;}
</style>

6. Lalu klik save/simpan template, selesai dan lihat hasilnya...

Note :
#00FF00 merupakan kode warna background, silahkan bisa anda ganti sesuai keinginan. Sedangkan #FFFFFF adalah kode warna teks, bisa anda ganti dan sesuaikan sendiri.

Cukup sekian tutorial tentang cara mengganti background teks yang di blok (selected text) ini dan semoga bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Cara Membuat Efek Bayangan (Box Shadow)

Cara Membuat Efek Bayangan (Box Shadow) - Pada kesempatan kali ini saya akan share sebuah tutorial tentang cara membuat efek bayangan (box shadow) menggunakan CSS, tepatnya dengan CSS3. Sebenarnya CSS itu kaya akan keunikan dan keindahan jika kita pelajarai lebih dalam dan lebih detail lagi. Semakin dalam kita belajar CSS, akan semakin besar rasa ingin tahu kita tentang apa saja yang bisa di lakukan oleh CSS ini.

Efek bayangan (box shadow) ini memang sangat menarik dan pastinya memiliki daya pikat tersendiri bagi mata. Oke, langsung saja bagi anda yang ingin mencoba untuk membuat efek bayangan (box shadow) ini silahkan bisa anda simak dan perhatikan tutorial cara membuat efek bayangan (box shadow) berikut ini!

Syntax dasar untuk membuat efek bayangan (box shadow) dengan CSS3 :

box-shadow: x-point y-point blur spread color inset;

Keterangan :
1. x-point merupakan bayangan yang mengarah pada offset horizontal (horizontal shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke samping kiri dan sebaliknya, jika bernilai positif maka akan mengarah ke samping kanan.
2. y-point merupakan bayangan yang mengarah pada offset vertical (vertical shadow). Jika bernilai negatif, maka bayangan yang di hasilkan akan mengarah ke atas dan sebaliknya, jika bernilai positif maka akan mengarah ke bawah.
3. blur untuk mengatur jarak blur dari bayangan (menetukan besar kecilnya efek blur pada bayangan).
4. spread merupakan ukuran dari bayangan itu sendiri.
5. color untuk menetukan warna bayangan yang akan di hasilkan.
6. inset untuk menaruh bayangan di dalam box dan bersifat optional, artinya boleh ada dan boleh tidak.

Perhatikan gambar di bawah ini!

Dan berikut adalah script CSS untuk membuat efek bayangan (box shadow) seperti gambar di atas, mulai dari yang A-F.

Kotak A (tanpa menggunakan efek blur) :

#kotak_A{
-moz-box-shadow: -5px -5px #888;
-webkit-box-shadow: -5px -5px #888;
box-shadow: -5px -5px #888;
}

Kotak B (ada tambahan efek blur sebesar 5px) :

#kotak_B{
-moz-box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
box-shadow: -5px -5px 5px #888;
}

Kotak C (ada tambahan spread sebesar 5px) :

#kotak_C{
-moz-box-shadow: -5px -5px 0 5px #888;
-webkit-box-shadow: -5px -5px 0 5px#888;
box-shadow: -5px -5px 0 5px #888;
}

Kotak D (ada tambahan efek blur dan spread sebesar 5px) :

#kotak_D{
-moz-box-shadow: -5px -5px 5px 5px #888;
-webkit-box-shadow: -5px -5px 5px 5px#888;
box-shadow: -5px -5px 5px 5px #888;
}

Kotak E (tanpa x-point dan y-point dengan efek blur sebesar 5px) :

#kotak_E{
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
}

Kotak F (sama dengan kotak E dengan tambahan spread sebesar 5px) :

#kotak_F {
-moz-box-shadow: 0 0 5px 5px #888;
-webkit-box-shadow: 0 0 5px 5px #888;
box-shadow: 0 0 5px 5px #888;
}

Nahhh, cukup sekian dulu postingan saya pada kesempatan kali ini. Semoga postingan dengan judul cara membuat efek bayangan (box shadow) ini bermanfaat bagi anda, selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Table Menggunakan CSS + HTML

Membuat Table Menggunakan CSS + HTML - Alhamdulillah, sampai saat ini saya masih di berikan kesehatan dan kenikmatan menjalani hidup yang tiada tara. Puji syukur sudah semestinya saya panjatkan kehadirat Mu ya Allah... :) Pada kesempatan kali ini saya akan share sedikit tutorial mengenai cara membuat table menggunakan CSS + HTML. Sebenarnya untuk membuat sebuah table, baik yang sederhana atau yang kompleks sekalipun cukup menggunakan HTML saja sudah bisa. Namun dengan adanya penggunaan CSS ini maka tampilan dari table yang di hasilkan bisa kita maksimalkan lagi.

Tak perlu banyak kata lagi, mendingan langsung saja simak tutorial cara membuat table menggunakan CSS + HTML berikut ini dengan baik!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> (gunakan Ctrl+F untuk mencarinya) dan letakkan script CSS berikut ini tepat di atasnya!

/* CSS Table by Seputar Ketramilan */
table[border="1"]{
border-collapse:collapse;margin:0px;
}
table[border="1"],table[border="1"] th,table[border="1"] td{
border:1px solid #ccc;padding:2px 7px;
}
td{
vertical-align:top;
}
table[border="1"] th{
background-color:#fafafa;text-align:left;
}
.full,table.full{
width:99%;
}
table.config{
background-color:#FFF;
}
table.config td,table.config th{
border-color:#ccc;
}
table.config th{
background-color:#111;color:white;
}

5. Kemudian klik save/simpan template.

Script CSS di atas fungsinya untuk merapikan, memperindah, ataupun mengatur design tampilan dari table yang akan di buat. Nahhh, setelah itu tinggal kita buat struktur table yang kita inginkan menggunakan HTML. Perhatikan script HTML berikut ini!

Contoh 1 :

<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td>Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
<tr><td>Row 3, Column 1</td><td>Row 3, Column 2</td></tr>
<tr><td>Row 4, Column 1</td><td>Row 4, Column 2</td></tr>
<tr><td>Row 5, Column 1</td><td>Row 5, Column 2</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
Row 2, Column 1	Row 2, Column 2
Row 3, Column 1	Row 3, Column 2
Row 4, Column 1	Row 4, Column 2
Row 5, Column 1	Row 5, Column 2

Contoh 2 :

<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td rowspan="2">Row 1, Column 1</td><td>Row 1, Column 2</td></tr>
<tr><td>Row 1, Column 2.1</td></tr>
<tr><td rowspan="2">Row 2, Column 1</td><td>Row 2, Column 2</td></tr>
<tr><td>Row 2, Column 2.1</td></tr>
<tr><td rowspan="2">Row 3, Column 1</td><td>Row 3, Column 2</td></tr>
<tr><td>Row 3, Column 2.1</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
	Row 1, Column 2.1
Row 2, Column 1	Row 2, Column 2
	Row 2, Column 2.1
Row 3, Column 1	Row 3, Column 2
	Row 3, Column 2.1

Contoh 3 :

<table border="1" class="full config"><tbody>
<tr><th>Title/Header 1</th><th>Title/Header 2</th></tr>
<tr><td>Row 1, Column 1</td><td rowspan="2">Row 1, Column 2</td></tr>
<tr><td>Row 1, Column 1.1</td></tr>
<tr><td>Row 2, Column 1</td><td rowspan="2">Row 2, Column 2</td></tr>
<tr><td>Row 2, Column 1.1</td></tr>
<tr><td>Row 3, Column 1</td><td rowspan="2">Row 3, Column 2</td></tr>
<tr><td>Row 3, Column 1.1</td></tr>
</tbody></table>

Hasilnya :

Title/Header 1	Title/Header 2
Row 1, Column 1	Row 1, Column 2
Row 1, Column 1.1
Row 2, Column 1	Row 2, Column 2
Row 2, Column 1.1
Row 3, Column 1	Row 3, Column 2
Row 3, Column 1.1

Note :
Script CSS bisa anda sesuaikan sendiri, seperti background, padding, border, dll. Dan untuk script HTML silahkan perhatikan table di bawah ini :

Tag/Kode HTML	Fungsi/Kegunaan
<table> </table>	Untuk memulai dan mengakhiri pembuatan table
<tbody> </tbody>	Untuk menampung struktur table yang anda buat
<th> </th>	Untuk membuat title/judul di dalam baris/kolom table
<tr> </tr>	Untuk membuat row (baris) baru / ganti baris
<td> </td>	Untuk membuat column (kolom) baru / ganti kolom

Cukup sekian dulu postingan pada kesempatan kali ini, semoga postingan tentang cara membuat table menggunakan CSS + HTML ini bisa bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan/kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Widget Date and Time Ala Seputar Ketramilan (Stylus Version)

Membuat Widget Date and Time Ala Seputar Ketramilan (Stylus Version) - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat widget date and time ala Seputar Ketramilan (stylus version), sebenarnya pada postingan yang dulu saya juga sudah pernah membahas tutorial ini, namun pada postingan yang dulu tampilan widget date and time ala Seputar Ketramilan yang saya share sangat simple dan biasa saja. Sedangkan pada widget date and time ala Seputar Ketramilan yang akan saya share ini tampilannya lebih elegant / stylus.

Langsung saja simak cara membuat widget date and time ala Seputar Ketramilan (stylus version) di bawah ini dengan baik dan seksama!

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

<div style="background: lime; background:
-moz-linear-gradient(top, green, lime); background:
-webkit-linear-gradient(top, green, lime); background:
-o-linear-gradient(top, green, lime); background:
linear-gradient(top, green, lime); border-right: 1px solid #000;
border-bottom: 1px solid #000; color: white;
padding: 5px 5px 5px 10px; height: 16px; font-weight:
bold; text-shadow: 1px 1px #000; margin: 0 auto;
-moz-border-radius: 5px; -webkit-border-radius: 5px;
-o-border-radius: 5px; border-radius: 5px;">

<script type="text/javascript">
now = new Date();

if (now.getTimezoneOffset() == 0) (a=now.getTime() + (7*60*60*1000))

else (a=now.getTime());
now.setTime(a);
var tahun=now.getFullYear()
var hari=now.getDay()
var bulan=now.getMonth()
var tanggal=now.getDate()
var hariarray=new Array("Minggu","Senin","Selasa","Rabu",
"Kamis","Jum'at","Sabtu")
var bulanarray=new Array("Januari","Februari","Maret","April","Mei",
"Juni","Juli","Agustus","September","Oktober","November","Desember")

document.write(hariarray[hari]+", "+tanggal+" "+bulanarray[bulan]+" 
"+tahun)
</script> ?

<script type="text/javascript">
 window.setTimeout("jam()",1000);
 function jam() {
 var tanggal = new Date();
 setTimeout("jam()",1000);
 document.getElementById("Seputar Ketramilan").innerHTML = 
 tanggal.getHours()+":"+tanggal.getMinutes()+":"+tanggal.getSeconds();
 }
 </script>

<span id="Seputar Ketramilan"></span>

</div>

6. Setelah itu klik save/simpan, selesai dan lihat hasilnya...

Note :
Untuk previewnya bisa di lihat langsung pada gambar yang ada di atas, tampilan hasil jadinya kurang lebih seperti itu.

Cukup sekian dulu postingan tentang cara membuat widget date and time ala Seputar Ketramilan (stylus version) ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Terima kasih atas kunjungannya, salam sejahtera by Seputar Ketramilan...

Nama Bagus Bukan Jaminan Popularitas Blog Mulus

Popularitas Blog � Popularitas blog memang dipengaruhi oleh namanya. Akan tetapi, nama blog saja tidak cukup untuk menjamin kepopulerannya. Ada banyak faktor yang menjadi pertimbangan agar sebuah blog mencapai kepopuleran dan bertahan lama.

Nama blog yang bagus bukan jaminan bagi kepopuleran blog. Dua faktor utama yang menjadi penentu kepopuleran sebuah blog adalah isi atau materi dari blog itu sendiri dan cara mempromosikannya. Blog yang berisi materi yang update, bermutu, dan dikemas dalam tata bahasa yang baik akan menjadi pilar penting kebesaran sebuah blog. Dengan dukungan promosi blog yang gencar, kebesaran blog tersebut akan tersebar luas hingga menciptakan sebuah kepopuleran.

Nama bagus dari sebuah blog menjadi salah satu unsur promosi blog, karena dengan nama blog yang bagus akan mudah diingat oleh banyak orang. Selain itu, kesesuaian antara nama blog dengan materinya juga dapat menciptakan pemahaman yang baik bagi pembaca untuk menyimpulkan jenis blog yang kita miliki, misalnya blog yang bertemakan musik, transportasi, kuliner, wisata, hingga pribadi.

Kesalahan besar akan muncul apabila kita hanya mengandalkan nama blog kita yang bagus saja untuk mendongkrak popularitasnya. Itu salah, karena orang kebanyakan mengagumi kepopuleran blog kita setelah mereka mendapatkan materi bermanfaat yang kita bagikan dari blog kita, bukan sekadar mengetahui nama blog yang bagus saja. Orang tidak akan berkunjung ke blog kita untuk kesekiankalinya karena nama blog yang bagus dan mudah diingat saja. Akan tetapi, orang akan terkesan dan ingin berkunjung berulang kali ke blog kita jika mereka merasa mendapatkan manfaat berupa materi informasi dan lainnya setelah mereka mengunjungi blog kita.

Jadi, temukan nama blog yang bagus terlebih dahulu, kemudian isi blog kita tersebut dengan materi informasi yang ingin kita bagikan dengan komposisi yang bermutu dan dikemas dalam tata bahasa atau kemasan lain yang menurut kita menarik bagi orang banyak. Jangan lupa juga untuk mempromosikan blog kita agar kepopulerannya tersebar luas. Jangan hanya mengandalkan nama blog karena nama bukanlah segalanya.

Membuat Auto Drop Cap Pada Postingan di Blog

Membuat Auto Drop Cap Pada Postingan di Blog - Hello, kawan! Kali ini saya ingin share sebuah tutorial tentang cara membuat auto drop cap pada postingan di blog. Auto drop cap, maksudnya adalah membuat huruf pertama pada setiap postingan di blog anda menjadi kapital (besar) dan memiliki warna yang berbeda dengan yang lainnya sesuai dengan apa yang sudah di atur. Auto drop cap ini biasanya sering di gunakan untuk memperindah struktur tampilan dalam setiap paragraf yang ada supaya terlihat lebih rapi, unik, dan terkesan indah.

Untuk contoh dari auto drop cap ini kurang lebihnya bisa anda lihat pada gambar di bawah ini :

Nahhh, kira-kira begitu penampakannya... :D Dan bagi anda yang tertarik silahkan bisa langsung anda ikuti saja tutorial cara membuat auto drop cap pada postingan di blog berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script kode berikut ini tepat di atas kode ]]></b:skin>.

.capital:first-letter {
float: left;
display: block;
font-family: Times, serif, Georgia, Arial;
font-size: 50px;
color: green;
margin: 5px;
padding: 5px;
}

atau script kode yang ini juga bisa :

p:first-letter {
display: block;
float: left;
color: lime;
font-size: 50px;
font-family: Georgia, Times, Courier, Arial;
margin: 5px;
padding: 5px;
}

5. Pilih salah satu dari kedua script kode di atas, setelah itu klik save/simpan template. Selesai dan lihat hasilnya...

Selamat mencoba yaaa... :) Cukup sekian dulu postingan saya pada kesempatan kali ini, semoga postingan tentang cara membuat auto drop cap pada postingan di blog ini bisa bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Animasi Cloud (Awan) Dengan CSS3

Membuat Animasi Cloud (Awan) Dengan CSS3 - Pada kesempatan kali ini saya akan share sedikit tutorial tentang cara membuat animasi cloud (awan) dengan CSS3. Efek animasi ini sangat menarik dan unik... Selain itu, efek ini juga bisa membuat blog anda menjadi lebih menarik dan lebih bagus lagi dalam segi design tampilannya.

Cara membuatnya cuku simple sekali, kita hanya perlu membuat efek animasinya menggunakan CSS3 dan kemudian kita panggil dengan syntax html biasa. Untuk lebih jelasnya silahkan bisa anda simak tutorial tentang cara membuat animasi cloud (awan) dengan CSS3 berikut ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script CSS berikut di atas kode ]]></b:skin> dan script HTML berikut di bawah kode <body>.

Script CSS :

#cloud1-Seputar Ketramilan {position: absolute;
z-index: 0;
width:100%;
margin-top: 0px;
height: 0px;}
.cloud1-Seputar Ketramilan {
width: 200px; height: 60px;
background: #ddd;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud1-Seputar Ketramilan:before, .cloud1-Seputar Ketramilan:after {
content: '';
position: absolute;
background: #ddd;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud1-Seputar Ketramilan:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
.gray1 {
-webkit-animation: moveclouds1 15s linear infinite;
-moz-animation: moveclouds1 15s linear infinite;
-o-animation: moveclouds1 15s linear infinite;
}
.gray2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6;
-webkit-animation: moveclouds1 25s linear infinite;
-moz-animation: moveclouds1 25s linear infinite;
-o-animation: moveclouds1 25s linear infinite;
}
.gray3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
.gray4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75;
-webkit-animation: moveclouds1 18s linear infinite;
-moz-animation: moveclouds1 18s linear infinite;
-o-animation: moveclouds1 18s linear infinite;
}
.gray5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8;
-webkit-animation: moveclouds1 20s linear infinite;
-moz-animation: moveclouds1 20s linear infinite;
-o-animation: moveclouds1 20s linear infinite;
}
@-webkit-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds1 {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}

Script HTML :

<div id='cloud1-Seputar Ketramilan'>
<div class='cloud1-Seputar Ketramilan gray1'></div>
<div class='cloud1-Seputar Ketramilan gray2'></div>
<div class='cloud1-Seputar Ketramilan gray3'></div>
<div class='cloud1-Seputar Ketramilan gray4'></div>
<div class='cloud1-Seputar Ketramilan gray5'></div>
</div>

5. Kemudian klik save/simpan template, selesai dan lihat hasilnya... :)

Note :
Warna dari cloud (awan) tersebut bisa anda sesuaikan sendiri, caranya dengan mengubah/mengganti kode yang saya beri warna hijau (lihat pada script CSS di atas) dengan kode warna pilihan anda. Dan untuk previewnya bisa langsung anda lihat pada halaman postingan ini...

Selamat mencoba dan semoga postingan tentang cara membuat animasi cloud (awan) dengan CSS3 ini bermanfaat. Selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Auto Scroll Pada Widget Blog Archive

Membuat Auto Scroll Pada Widget Blog Archive - Hello kawan! Sudah hampir satu minggu ini saya tidak update postingan di Seputar Ketramilan, dan pada kesempata kali ini saya akan update dan share tutorial mengenai cara membuat auto scroll pada widget blog archive. Cara membuatnya cukup mudah sekali dan simple, hanya dengan menyisipkan sedikit script css saja.

Nahh, bagi anda yang berminat dan ingin mencoba untuk membuat auto scroll pada widget blog archive silahkan simak dengan baik tutorial di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian cari kode ]]></b:skin> dan letakkan script kode berikut ini tepat di atasnya.

#BlogArchive1 .widget-content{
height: 300px;
margin: 10px;
width: auto;
overflow: auto;
}

5. Kemudian klik save/simpan template, selesai dan lihat hasilnya...

Note :

• BlogArchive1 adalah id dari widget blog archive yang sudah kita pasang/ada di blog kita, id blog archive pada blog anda belum tentu sama seperti itu. Bisa jadi id blog anda adalah BlogArchive2, BlogAchive3, atau BlogArchive4 dan seterusnya.
• height: 300px; adalah untuk menentukan tinggi dari widget blog archive tersebut, anda bisa menggantinya sesuai dengan selera.
• Untuk previewnya bisa langsung anda lihat pada gambar yang ada di atas.

Cukup sekian postingan saya pada kesempatan kali ini mengenai cara membuat auto scroll pada widget blog archive. Semoga bisa bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kesalahan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Elegant Search Box Menggunakan CSS

Membuat Elegant Search Box Menggunakan CSS - Pada kesempatan kali ini saya akan share tentang cara memasang elegant search box menggunakan CSS, seperti yang kita ketahui bahwa search box ini sangatlah penting dan wajib ada pada web/blog kita karena keberadaannya amat sangat di butuhkan sekali pada proses pencarian dalam web/blog kita tersebut.

Dan kali ini akan saya share cara membuatnya, tampilannya sangat unik, keren, dan elegant... Scriptnya pun tidak begitu rumit, simple dan mudah di pahami. Oke, langsung saja bagi anda yang berminat memasang elegant search box menggunakan CSS ini slilahkan ikuti langkah-langkah berikut :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu pilih salah satu dari script kode elegant seacrh box di bawah ini dan letakkan di dalam widget HMTL/JavaScript yang sudah kita buat seperti pada langkah ke-4.

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJlyUAd2WdWn3eZ36q-mb5LNJA04yrgL7o5hNeDCtrfb1XGk2C0i5w7Kgw1AMm1MpKS9JhyphenhyphenRra79vVjl0GpchGB8dw6-JMBg0v6ktvcY2SddR9Zo7qbge956wNRQzruOixRIsWujeuQ4mm/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif3DkletYrT9CUkNrOSUHtXbmomtHu2D0g_5IgCZ2iyDV6N1K4hBEFklt0EuG_IiQ4Sm_Lrl5uA2YwHjkVZQVb5eeoCJzDix8do93knqcTkJAvDnDOO4YyMl3k0cKeAoBV8nGwWL2krpk6/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYhOEad2vC_rdG_GJm-hj7FmgRYwMqgULtoHqki7ZguuqeMlLYeOQ2TB4RueMheGe3kfvBeFPV-ZTbIW1FZnU1PfE93xUAOkba5J-V5CNxpqTXk5aBg1TUMF5MnXv7aDe8dmufHNa-sKQt/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 10px 12px;margin:0;}
form#w2b-searchform #s{padding: 6px;margin:0;width: 235px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}' onblur='if (this.value == "") {this.value = "Search...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2FkohQul-PUv0WPJDzn-1CW-0L_FZqd5qZB8_PU_MlgBKyzDXP53-KJzJOr-vVA_j5eZqdl1gYUhrCYJ2MBf2OWQsRBWUJu8ruvzYzPrzzTTZUnjKgZag8ph9POFFWS-cmscWzst8qB7k/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV-MgT_BDfHEVlEkZhWgUhStSf0Bxfar-dFxrJsIub4EVKuAA3FvnvvNahjaPN9lucWZjP6ZV-qlijE34JobafZgAKJE5sow5wP0pYD4GUCPMZucCdfwMMDtjhfOrGydoPjR-u0fdBz_L-/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Script :

<style type="text/css">
#w2b-searchbox{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisxOQL8bwSk-3SAofnaIoWrIAzUJbbSEA-ZpDPizcw-zQ3wkv2AJ3agSLMwf49jBqetLWHpwqxOiTBzj8x7DLnXBE24Kp4WU4B2ZiMImbubzC31wmsYJs3PBTklD37oI5F0x1bVe6fRUvJ/) no-repeat scroll center center transparent;
width:307px;height:50px;disaply:block;}
form#w2b-searchform{display: block;padding: 12px;margin:0;}
form#w2b-searchform #s{padding: 6px 6px 6px 26px;margin:0;width: 215px;font-size:14px;vertical-align: top;border:none;background:transparent;}
form#w2b-searchform #sbutton{margin:0;padding:0;height:30px;width:30px;vertical-align: top;border:none;background:transparent;}
</style>
<div id="w2b-searchbox">
<form id="w2b-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value=""/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

6. Kemudian klik save/simpan, dan lihat hasilnya...

Cukup sekian postingan tentang cara memasang elegant search box menggunakan CSS ini, semoga bermanfaat bagi anda. Selebihnya saya mohon ma'af atas segala kesalahan dan kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...

Membuat Menu Navigasi Horizontal Melayang Dengan CSS

Membuat Menu Navigasi Horizontal Melayang Dengan CSS - Pada kesempatan kali ini saya akan share tentang cara membuat menu navigasi horizontal melayang dengan CSS. Menu navigasi horizontal melayang ini terbilang unik dan elegant. Selain tampilannya yang berbeda dengan menu-menu navigasi pada umumnya dan memang sangat indah, menu ini juga fast loading (ringan) sehingga tidak membebani bobot loading blog anda. Kita bisa membuat menu navigasi horizontal melayang ini dengan menggunakan CSS.

Silahkan anda bisa ikuti langkah-langkah di bawah ini jika berminat untuk membuat menu navigasi horizontal melayang seperti yang terlihat pada gambar di atas.

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Tata Letak".

3. Klik "Tambah Gadget".

4. Kemudian pilih "HTML/JavaScript".

5. Lalu masukkan script kode berikut ini :

<style type="text/css">
#kucopas ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas li a:active {background: #009900; background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff; margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kucopas li li a:hover, #kucopas li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhulEvgpGqLyZpAlCUEg7MIGXQWS1G-5KVd3NCOIYZGuiSRnyL8S8ZNj01mqXvRQ90K5EoGYroFQkIOQVNFiSU1WmyWhChHoBsE00lsEDf4slTwSDZwcBrx2OX6jVSbu1qNo_QciMyDI5tI/)repeat-x;(0,0,0, 0.80);border: 0; padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>

<div id='kucopas'>
<ul id='kucopas'>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</a>
<ul class='children'>
<li><a href='#'>Download Aplikasi</a></li>
<li><a href='#'>Download Game</a></li>
<li><a href='#'>Download Icon</a></li>
<li><a href='#'>Download MP3</a></li>
<li><a href='#'>Download Software</a></li>
<li><a href='#'>Download Template</a></li>
</ul>
</li>
<li><a href='#'>About Me</a>
<ul class='children'>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google+</a></li>
</ul>
</li>
<li><a href='#'>Tips And Triks</a>
<ul class='children'>
<li><a href='#'>Tips Blogger</a></li>
<li><a href='#'>Trik Facebook</a></li>
<li><a href='#'>Trik Handpone</a></li>
<li><a href='#'>Seputar Ketramilan Menu</a></li>
</ul>
</li>
<li><a href='#'>Tutorial Blog</a>
<ul class='children' target='_blank'>
<li><a href='#'>Tutorial Blogger</a></li>
<li><a href='#'>Tutorial SEO</a></li>
</ul>
</li>
<li><a href='#'>Tv Online</a>
<ul class='children'>
<li><a href='#' target='_blank'>INDOSIAR</a></li>
<li><a href='#' target='_blank'>RCTI</a></li>
</ul>
</li>
<li><a href='#'>Tukar Link Blog</a></li>
<li><a href='http://seputarketrampilan.blogspot.com/' target='blank'>Seputar Ketramilan Blog</a></li>
</ul>
</div>

6. Klik save/simpan, selesai dan lihat hasilnya...

Note :
Ganti tanda # dengan alamar url (link) tujuan, dan sesuaikan teks atau tulisan yang ada di sampingnya.

Cukup sekian tutorial tentang cara membuat menu navigasi horizontal melayangdengan CSS ini. Semoga bermanfaat bagi anda, dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Special thanks to bagong-kewez. Salam sejahtera by Seputar Ketramilan...

Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3

Membuat Efek Spinning Image (Gambar Berputar) Dengan CSS3 - Pada kesempatan kali ini saya ingin share sebuah tutorial tentang cara membuat efek spinning image (gambar berputar) dengan CSS3, yang intinya adalah membuat efek spinning (berputar) pada suatu gambar tertentu baik ketika gambar tersebut di lalui atau di sorot oleh cursor dan ketika gambar tersebut sudah tidak di lalui atau di sorot oleh cursor lagi. Efek ini merupakan penerapan dari unsur transform dengan menggunakan CSS3.

Untuk langkah-langkah cara membuat efek spinning image (gambar berputar) dengan CSS3, silahkan simak dengan baik langkah-langkah di bawah ini :

1. Login ke blogger.com menggunakan akun anda.
2. Masuk ke halaman "Template".

3. Lalu pilih "Edit HTML", klik "Lanjutkan" dan jangan lupa centang "Expand Template Widget".

4. Kemudian letakkan script CSS berikut ini tepat di atas kode ]]></b:skin>.

div#spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}

div#spinstyle1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

div#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

div#spinstyle2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}

div#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}

div#spinstyle3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg);
}

5. Setelah itu klik save/simpan template.

Langkah selanjutnya adalah pemanggilan dari script CSS yang telah di deklarasikan tersebut, caranya sangat mudah sekali. Anda hanya perlu menambahkan script berikut ini :

<div id="spinstyle1">
<!-- angka 1 bisa di ganti dengan angka 2 atau 3 untuk menampilkan model spinning yg berbeda -->

<a href="http://seputarketrampilan.blogspot.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEij6Zo9CJKE_3Pr81r3nU6x93sl60BMN_LI9L51kuaxsfoyT90UV-ozTGV668CBiqxWnTIxpuKOMLeUA7n8ITBecobfoG9XPIEFnfOYdl9WAaUqqzRU-ex2hrKbjgOLlw-U-S4WfS_Z6e/s1600/rss.png" /></a>
 
<a href="http://www.delicious.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyYPUlDLwR7YRkXsyB1Fy8oNa3iAUqUEWU-PbvXMbr_qN-VCETeLebRGaAYiJmQCub936TJ-UJoBFlAebjMCWWhYSH2fswDKw8NZYekjGhg14garTbYgJneEVliNB5mBYZpJ0TLnYumqVP/s1600/delicious.png" /></a>
 
<a href="http://www.facebook.com/umam.nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9agnzr5hlN_xGusPNxBKkqEo7iVuB4NUf_cln9tk-6lsK2RiSSGvKzS7U9DBsIklqxmqj6A96-P9dNQ-6YaNSHH3q55-i4GCaFy4yj7_3vOcBms0zLUoW8FrrgmT3vH-a8ato7inyVAqq/s1600/facebook.png" /></a>

<a href="http://www.twitter.com/#!Nipponizer"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEHG4WEhYn7856GKstJbE_PSrjC0LFti3CvbDxJvOb82wJxw-j7Qy1uFwtFcIJz7-TeWmVmrHhcQaTZRtOH8Ubj0Low6pTlzNoonvbPozHoqwyKFRhiwFIyJRkc7qrn5DEaQ48lamkIX-_/s1600/twitter.png" /></a>

<a href="http://www.yahoo.com/"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Ei_zmslsbB2DH3h8uuMKRRAue09UwByCg_7xXQPErXJcIlMAS99cVk5W5sINUwk9SAOn_A0Pfr9vwhAzDJ68bTDey-v82LKeImV9ma0ODcwA66GAYPTo4xmtCTJj71XkBLE3shtPB1fM/s1600/yahoo.png" /></a>

</div>
<div class="clear"></div>

Preview atau hasil dari masing-masing style tampilannya kurang lebih seperti di bawah ini :

 #spinstyle1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */

#spinstyle2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */

#spinstyle3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */

Note :
Tulisan yang saya beri warna hijau merupakan style tampilan dari efek spinning image tersebut. Sedangkan tulisan yang saya beri warna merah merupakan keterangan dari masing-masing style tampilan dari efek spinning image tersebut. Dan barisan script yang saya beri warna orange adalah alamat url tujuan dan alamat url gambar yang akan kita berikan efek spinning image.

Cukup sekian dulu postingan pada kesempatan kali ini tentang cara membuat efek spinning image (gambar berputar) dengan CSS3. Semoga bermanfaat bagi anda dan selebihnya saya mohon ma'af atas segala kekurangan yang ada. Salam sejahtera by Seputar Ketramilan...