Cara buat kotak bayangan diblog

Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.

---

Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

---

1. Login keblogger, lalu kepengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
.sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
3. Maka hasilnya akan seperti contoh kotak bayangan diatas.
4. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

---

Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.

---

box-shadow: 0px 0px 15px #1780dd;

box-shadow: 5px 5px 5px#1780dd;

box-shadow: -5px -5px #1780dd;

box-shadow: inset 0 0 10px;

box-shadow: 5px 5px 5px 5px #1780dd;

Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

Read More

Merubah tampilan sidebar dan posting blog

cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

Langsung saja, cara merubah tampilan bagian sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. lalu masukan kode dibawah ini.
.sidebar .widget h2{
text-align:center;
border:1px solid #ddd;
margin:-10px -10px 0 -10px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 5px 5px #aaaaaa;}

.sidebar .widget {
text-align:center;
border:1px solid #ddd;
padding:5px 0 5px 0;
box-shadow:0px 10px 10px #aaaaaa;}
4. Terapkan ke blog. Selesai.

Keterangan kode:

• .sidebar .widget h2{ mengatur judul pada bagian sidebar.
• .sidebar .widget { mengatur isi dari bagian sidebar.
• text-align:center; membuat tulisan ditengah.
• border garis kotak 
• margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur tulisan dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
h2.post-title{
border:1px solid #ddd;
margin:-12px -20px 0 -20px;
padding:5px 0 5px 10px;
background:#eee;
box-shadow:0px 10px 5px #aaaaaa;}

.post{
border:1px solid #ddd;
padding:10px 10px 0 10px;
margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
2. Terapkan ke blog. Selesai.

Keterangan kode:

•  h2.post-title{ untuk mengatur bagian judul posting
• .post{ untuk mengatur isi dari bagian posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Read More

Menghilangkan sidebar blog pada halaman tertentu

Cara menghilangkan sidebar blog pada halaman atau posting tertentu. Sidebar hanya akan disembunyikan pada halaman yang diatur saja. Pada halaman yang lain, sidebar akan tetap ada. Seperti halaman posting ini, sidebar tetap ada. Berbeda dengan halaman hubungi yang ada dimenu blog ini, sidebarnya hilang.

Untuk lebih jelasnya tentang cara menghilangkan atau menyembunyikan sidebar pada halaman tertentu. Silakan ikuti langkah-langkah dibawah ini.

1. Pertama Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode </head>.
3. Setelah itu copy kode berikut ini dan pastekan di atas </head>
<b:if cond='data:blog.url == &quot;http://fandrajuani.blogspot.com/p/daftar-isi_12.html&quot;'>
<style type='text/css'>
.main-inner .columns{padding-left:0;padding-right:0}
.main-inner .column-left-outer{display:none}
.main-inner .column-right-outer{display:none}
</style>
</b:if>
4. Save Template, selesai.

Keterangan kode:

• http://fandrajuani.blogspot.com/p/daftar-isi_12.html URL dari halaman posting.
• .main-inner .columns{padding-left:0;padding-right:0} membuat halaman posting lebar hingga ke bagian sidebar.
• .main-inner .column-left-outer{display:none} menyembunyikan sidebar kiri.
• .main-inner .column-right-outer{display:none} menyembunyikan sidebar kanan.

Jika ingin menyembunyikan sidebar tanpa memperlebar halaman posting. Letakan kode berikut ini diatas </head>

<b:if cond='data:blog.url == &quot;http://fandrajuani.blogspot.com/p/hubungi.html&quot;'>

<style type='text/css'>

.sidebar{display:none}

</style>

</b:if>

Keterangan kode: .sidebar{display:none} kode untuk menyembunyikan sidebar tanpa memperlebar ukuran halaman posting.

Dari kedua cara diatas kita dapat menyembunyikan Sidebar blog sesuai dengan keinginan kita. Pertama kita dapat menyembunyikan sidebar tanpa menghilangkan ukurannya, dengan begitu ukuran dari halaman posting tetap akan sama seperti ada sidebar. Kedua, Sidebar disembunyukan dan ukurannya dihilangkan, sehingga membuat halaman posting melebar sampai ke sidebar.

Dengan menyembunyikan sidebar pada halaman tertentu, maka loading dari halaman tersebut akan lebih cepat. Karena widget2 atau gadget yang ada disidebar disembunyikan. Silakan baca juga cara menghilangkan kotak komentar blog pada halaman tertentu, untuk membuat perbedaan pada suatu halaman. Itulah sedikit tips dan trik tentang cara menghilangkan sidear blog pada halaman tertentu, yang dapat digunakan sebagai tambahan pilihan dalam mendesain blog.

Semoga Bermanfaat.

Read More

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan kode css yang digunakan untuk membuat kotak di blog atau website lainnya. Salah satu contoh penggunaan border adalah pembuatan kotak script, untuk menempatkan kode script di posting blog. Berikut contohnya.

1.  Buka entri baru atau post lama kamu.
2.  Klik HTML lalu masukan kode sricpt dibawah ini.
<div style="border: 1px #cccccc solid; padding: 10px;background-color:#ffffff;
overflow: auto; height: 80px; text-align: left;">.kode script disini.</div>
3. Lalu klik pada bagian Compose. Maka tampilannya akan seperti ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan kode script yang kalian masukan.

Keteranga kode langkah 2: 

border: 1px ketebalan kotak, #cccccc warna garis kotak, solid(bentuk kotak)
background-color:#ffffff; warna kotak
height: 80px; tinggi kotak yang akan ditampilkan diposting blog.
overflow: auto; akan ada scroll dikotak, jika sudah melebihi tinggi kotak height: 80px;

Berikut ini adalah bentuk kotak lain yang dapat digunakan, untuk menggantikan bentuk solid.

dotted

dashed

double

groove

ridge

inset

outset

Satu lagi penggunaan warna yang berbeda disetiap border, atas,kanan,bawah,kiri.

untuk membuat border seperti ini, kode yang digunakan:
 <div style="border-top:2px solid green;border-bottom:2px solid red;border-left:2px solid #1780dd;
border-right:2px solid orange; padding: 10px;background-color:#ffffff;overflow: auto; height: 200px;
text-align: left;">.kode script disini.</div>
 

Contoh-contoh diatas adalah penggunaan border didalam posting, berikut ini adalah penggunaan border di bagian sidebar blog.

.sidebar .widget h2 {
 border-top:2px solid red;border-bottom:2px solid green;border-left:2px solid orange;border-right:2px solid #1780dd; padding: 10px;background-color:#ffffff;
}

Contoh gambar:

Artikel diatas merupakan sedikit contoh penggunaan border diblog, masih banyak yang dapat diberi border diblog, yang terpenting kita mengetahui kode pada bagian mana yang akan kita beri border. Semoga bermanfaat untuk anda.

Read More

Cara Mengganti Warna Judul Sidebar

Cara Mengganti Warna Judul Sidebar, widget yang berada di kiri-kanan posting dan juga bagian bawah blog. Seperti widget arsip, pengikut, mengenai saya, total tayangan laman, label, populer post dan lain-lain. Sesuai dengan widget yang dipakai di blog. Berikut Tips dan Trik cara mengganti warna judul sidebar yang digunakan di blogspot. Ikuti langkah-langkah dibawah ini.

 

Cara Mengganti Warna Judul Sidebar

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin> 
h2 {
padding: 4px 2px 2px;
background:#0a58a3;
border-bottom:4px solid #1780dd;
}
3. Save Template. Selesai.

Keterangan kode diatas:

• padding: 4px 2px 2px; rata huruf judul kiri kanan. Jika kurang rata ganti ketiga kode itu.
• background:#0a58a3; Warna Background
• border-bottom: garis bawah,  4px(ketebalan garis bawah) solid(bentuk garis bawah) dan #1780dd; warna garis bawah. Hilangkan kode ini jika sidebar tidak ingin diberi garis bawah.
• border-bottom bisa diganti dengan:
border-top: Garis Atas
border-right: Garis Kanan
border-left: Garis Kiri
border: Seluruh garis
• solid(bentuk garis bawah) bisa diganti dengan:
dashed
dotted
Double
Groove
inset
outset
ridge

Ganti sesuai dengan yang kalian inginkan, kode h2 { diatas, akan mengganti semua warna judul sidebar widget dikiri-kanan dan juga bagian bawah footer blog. Jika ingin membuat warna judul yang berbeda antara sidebar dan footer bagian bawah, Ikut langkah-langkah dibawah ini.

Warna Judul Sidebar Widget Kiri-Kanan Blog

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.sidebar .widget h2 {
padding: 4px 2px 2px;
background:#0a58a3;
}
3. Save Template. Selesai.

Warna Judul Footer Bagian Bawah Blog

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.footer-inner .widget h2 {
padding: 4px 2px 2px;
background:#CCCCCC;
}
3. Save Template. Selesai.

Menambahkan Icon disamping judul sidebar

1. Login ke blog. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya klik edit HTML dan cari kode ]]></b:skin> dan pasang kode berikut di atas kode ]]></b:skin>
.sidebar .widget h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4eFh2JcjYMieOsWXVk7sx-NQ5dcBAYNk7N9I8cNAjtW7phaLGXw2wWQQ22oil7AWCV9Bs-IcVjdcnSTRzpn-kMQ9C_dK8NW9NPGFtk4fNuXjSqdFbyNpwgBHuCXu8KYdUl9YKUCEFnMHa/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;}
3. Save Template. Selesai.

Contoh icon disamping sidebar

Untuk icon, tidak hanya di sidebar saja, tapi juga di tempatkan dibagian footer. Dari yang pernah saya coba, cara diatas bisa bekerja di template asli dari blogger. Saya belum tau bisa atau tidak di template hasil download. Karena disetiap template mungkin mempunyai sedikit perbedaan kode. Jika tidak berjalan ditemplate kamu. Coba di edit kode awalnya, misalnya kode .sidebar .widget h2 { ganti menjadi .sidebar { saja dan juga bagian footer, kira-kira seperti itu. 

Jika cara diatas bisa berjalan ditemplate yang kamu gunakan, Alhamdulillah, artinya artikel di desain blog tutorial ini tidak sia-sia dan berguna. Silakan dibaca juga Artikel lainnya tentang cara membuat related post dengan gambar dibawah posting blog dan membuat kotak komentar facebook bersebelahan dengan kotak komentar blogger. Semoga Bermanfaat.

Read More