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