Cara Memasang Icon Yang Berbeda Di Setiap Judul Widget Blog

Cara memasang icon yang berbeda disetiap judul widget di blog. Untuk lebih jelasnya, silakan ikuti langkah-langkah dibawah ini.

Contoh gambar disamping: 3 widget dengan judul Total Tayangan Laman, Cari Blog ini, dan Blog archive.

---

Langkah Pertama, mencari kode id dari setiap widget yang akan diberi Icon, Caranya:

---

1. Login ke blogger, ke pengaturan template.

2. Lalu Klik edit html.

3. Setelah itu cari judul widget, Contoh: widget dengan judul Cari Blog Ini. Tekan Ctrl + F dikeyboard untuk memudahkan pencarian. Seperti gambar dibawah ini.

4. Selanjutnya copy isyarat id nya ke notepad, menyerupai gambar diatas yang diberi tanda kotak merah.

5. Dan lanjutkan mencari isyarat id dari widget yang lainnya, disini misalnya Total Tayangan Laman dan Blog archive. 

6. Kode id dari ke tiga widget diatas.

CustomSearch1
BlogArchive1
Stats1

---

Langkah Kedua, memasang isyarat icon diatas ]]></b:skin> , Caranya:

---

1. Buka Notepad tadi, kemudian tambahkan isyarat menyerupai ini,

#CustomSearch1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9L0hX2eEFYNUOUuLG9LmlXzn4F2vbT9CYcabiUbXlGWEsT20ja89kDBQ-I-kLWvvGzj-pAq3ju9KSqzl7G57bcRRy546Ap0B3Kk-3LoIlrZVF97g93AXXhWTT3xQoU9JqROX7rpgmqGrH/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#BlogArchive1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjahl47hi_2LLh8hAN3b4csFHDkXOuF_wVNpkpys6sX_whdVIceBNej3xKi5KNP7dENxSGk9Nz4XsPa85hvD_WXacoJOpyVA5ifwxy5bNL5MhDRU5IDLYXajHOWkqDsEX_yW4uRjm7d1Nx9/s1600/DESAIN.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

#Stats1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhu2GG_pDKKTMeYxAOY01TdYtq4x9r6lNCgnBnrlYHVJ_cCu9DvgEBuqDrdxUA_8pqifNyIWvz2TzYYiJkdUxNDZaTeSCXKl4yI_wG3ersGI2jL54hSPFjmYvZKjOJM7lJx0IH7xXVju92v/s1600/fandra-juani.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

2. Selanjutnya, Copy semua isyarat yang ada di Notepad,  dan pastekan diatas ]]></b:skin>.

3. Setelah itu, save Template, Selesai.

Keterangan isyarat diatas:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9L0hX2eEFYNUOUuLG9LmlXzn4F2vbT9CYcabiUbXlGWEsT20ja89kDBQ-I-kLWvvGzj-pAq3ju9KSqzl7G57bcRRy546Ap0B3Kk-3LoIlrZVF97g93AXXhWTT3xQoU9JqROX7rpgmqGrH/s1600/32x32.jpg Kode URL dari gambar yang akan dijadikan icon.
no-repeat, gambar tidak berulang.
padding:10px 0px 0px 40px; mengatur posisi tulisan.
height:22px; tinggi.

Contoh gambar: sesudah diberi icon disetiap judul widget.

Untuk menciptakan icon sendiri, silakan baca cara menciptakan icon blog, dan cara upload dan ambil url  gambar, baca di cara upload dan ambil url gambar. Itulah sedikit cara desain blog ialah perihal cara memasang icon yang berbeda disetiap judul widget. Semoga Bermanfaat.

Read More

Fungsi Border Dan Penggunaannya Di Blog

Fungsi border dan cara pengguaannya di blog. Border merupakan arahan css yang dipakai untuk menciptakan kotak di blog atau website lainnya. Salah satu pola penggunaan border ialah pembuatan kotak script, untuk menempatkan arahan script di posting blog. Berikut contohnya.

1.  Buka entri gres atau post usang kamu.
2.  Klik HTML kemudian masukan arahan 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 bab Compose. Maka tampilannya akan menyerupai ini.
.kode script disini.
4. Klik .kode script disini. hapus dan ganti dengan arahan script yang kalian masukan.

Keteranga arahan 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, kalau sudah melebihi tinggi kotak height: 80px;

Berikut ini ialah bentuk kotak lain yang sanggup 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 menciptakan border menyerupai ini, arahan 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 ialah penggunaan border didalam posting, berikut ini ialah penggunaan border di bab 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 pola penggunaan border diblog, masih banyak yang sanggup diberi border diblog, yang terpenting kita mengetahui arahan pada bab mana yang akan kita beri border. Semoga bermanfaat untuk anda.

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 perihal 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 instruksi </head>.
3. Setelah itu copy instruksi 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} menciptakan halaman posting lebar hingga ke bab 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 instruksi 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} instruksi untuk menyembunyikan sidebar tanpa memperlebar ukuran halaman posting.

Dari kedua cara diatas kita sanggup menyembunyikan Sidebar blog sesuai dengan impian kita. Pertama kita sanggup menyembunyikan sidebar tanpa menghilangkan ukurannya, dengan begitu ukuran dari halaman posting tetap akan sama menyerupai ada sidebar. Kedua, Sidebar disembunyukan dan ukurannya dihilangkan, sehingga menciptakan halaman posting melebar hingga 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 menciptakan perbedaan pada suatu halaman. Itulah sedikit tips dan trik perihal cara menghilangkan sidear blog pada halaman tertentu, yang sanggup dipakai sebagai embel-embel pilihan dalam mendesain blog.

Semoga Bermanfaat.

Read More

Merubah Tampilan Sidebar Dan Posting Blog

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

Langsung saja, cara merubah tampilan bab sidebar.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan pilih Desainer Template > Tingkat Lanjut.
3. Tambahkan CSS. kemudian masukan instruksi 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 bab sidebar.
• .sidebar .widget { mengatur isi dari bab sidebar.
• text-align:center; menciptakan goresan pena ditengah.
• border garis kotak 
• margin menciptakan kotak judul melebihi lebar dari isi widget atau gadget.
• padding mengatur goresan pena dibagian dalam tulisan.
• background:#eee; warna background.
• box-shadow:  warna bayangan dikotak

Cara Merubah tampilan posting blog.

---

1. Langkahnya sama menyerupai cara merubah tampilan sidebar blog. Hanya saja instruksi yang dimasukan yaitu 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 bab judul posting
• .post{ untuk mengatur isi dari bab posting.
• Jika h2.post title tidak ada ganti dengan h3.post title
• Untuk instruksi yang lainnya, fungsinya sama menyerupai keterangan instruksi di sidebar.

Silakan berkreasi sendiri, artikel diatas hanyalah sedikit pola 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 sanggup dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Read More

Cara Buat Kotak Bayangan Diblog

Cara menciptakan kotak bayangan diblog. Maksudnya yaitu kita sanggup menciptakan bayangan pada kotak yang ada diblog menyerupai pada bab sidebar, posting, header dan juga pada bab lain-lainnya. Contoh kotak bayangan menyerupai dibawah ini.

---

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

---

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

---

Berikut ini beberapa pola instruksi box-shadow atau kotak bayangan yang sanggup 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 memakai kode2 diatas. Untuk mengedit pada bab yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara menciptakan goresan pena bayangan diblog disana ada kode2 bab dari blog, yang sanggup anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog memakai instruksi box-shadow atau kotak bayangan yang sanggup dipakai diblog. Semoga sanggup bermanfaat untuk anda.

Read More