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 kode id nya ke notepad, seperti gambar diatas yang diberi tanda kotak merah.

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

6. Kode id dari ke tiga widget diatas.

CustomSearch1
BlogArchive1
Stats1

---

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

---

1. Buka Notepad tadi, lalu tambahkan kode seperti ini,

#CustomSearch1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7UvUxaDYpRhq-Btf6-ieATXGHw3hpFQVwmbu4zU0KVVYjDveC0q8VtycAdyXqxdPvmL0HAXrcDGPG4bbclCKdMorP469G1ySbvTO8ByArSJWx1ZVhyphenhyphenSnDSWqFV-bxTgZ2jtweW4uWMna/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

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

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

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

3. Setelah itu, save Template, Selesai.

Keterangan kode diatas:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7UvUxaDYpRhq-Btf6-ieATXGHw3hpFQVwmbu4zU0KVVYjDveC0q8VtycAdyXqxdPvmL0HAXrcDGPG4bbclCKdMorP469G1ySbvTO8ByArSJWx1ZVhyphenhyphenSnDSWqFV-bxTgZ2jtweW4uWMna/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: setelah diberi icon disetiap judul widget.

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

Read More

Tips dan Trik Menulis di Blog

Sebelumnya saya sudah memberikan cara menulis blog dengan memasukan gambar dan juga kotak script, ditengah-tengah Numbered list dan Bullet list. Dan kali ini tentang Tips dan trik menulis di blog menggunakan akar quadrat/pangkat atas, pangkat bawah, keterangan tulisan saat disentuh mouse dan juga garis pemisah antar paragraf.

Sama seperti artikel sebelumnya, kita akan menulis blog dengan mengedit kalimat artikel, pada bagian HTML nya. Untuk lebih jelasnya, silakan ikuti beberapa cara penggunaan kode dibawah ini, untuk menambah pilihan kita dalam menulis blog.

Cara menuliskan akar/quadrat atau pangkat diblog, contoh: 4² dan CO_2.

• Membuat pangkat atas, tulislah dibagian HTML 4² maka hasilnya akan menjadi seperti ini. 4².
• Untuk Pangkat Bawah, tulislah dibagian HTML  CO₂ hasilnya CO_2.

Cara membuat Keterangan tulisan saat disentuh Mouse. Contoh: Arahkan mouse ke tulisan ini, Blogger

• Buatlah di bagian HTML <abbr title="cara membuat blog">Blogger </abbr> maka hasilnya akan seperti contoh: Blogger
• Atau tulis seperti ini,  <acronym title="cara membuat blog">Blogger </acronym> maka hasilnya juga akan seperti contoh Blogger

Cara membuat garis bawah pemisah antar kalimat. Masukan kode <hr /> pada kalimat yang akan dipisah.

Contoh Penulisan di HTML:

SATU<br />

<hr />

DUA<br />

Maka hasilnya akan seperti ini dibagian Compose.

SATU

---

DUA

Sebenarnya masih banyak lagi cara yang dapat kita lakukan dalam menulis blog, tapi disini yang saya tuliskan adalah beberapa contoh yang mudah untuk diingat saja dan mungkin akan sering kita gunakan. Silakan dicoba cara² diatas, sebagai tambahan pilihan dalam menulis blog anda. Semoga Bermanfaat.

Read More

Cara Membuat Background di Halaman Posting

Cara membuat atau memasukan gambar yang akan dijadikan background dihalaman posting blog, background bisa kita gunakan dengan gambar yang berbeda, disetiap posting. Sebelumnya saya sudah membuat artikel tentang cara membuat background berbeda dihalaman berbeda, yaitu dengan cara memasukan background berdasarkan URL halaman.

Dan kali ini background di halaman posting, langsung dari artikelnya. Jadi kita memasukan gambar ke artikel untuk dijadikan background. Untuk lebih jelasnya silakan lihat background gambar dibagian akhir artikel ini. Atau lihat halaman profil dan halaman Contact di blog ini.

Langsung saja, cara membuat background disetiap postingan blog, ikuti langkah-langkah dibawah ini.

1. Login ke blogger, lalu buatlah entri baru. Atau edit artikel yang lama.
2. Selanjutnya copy kode dibawah ini.
<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background: url(&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYmBaKmej8O197Zg3mUobGYGoU7eF7shhuuJNxppjxN_wasa3SOJ9yA2OHUVmy4i0gIht9bN-Lb5bdHT66C54bQyOy7Vndi2-FAmBVuH6XD6oNOgggrOghDJLHKKOBYYmvBPasgKdLUhv/s1600/Fandra+Juani+copy.png&quot;) no-repeat right bottom;">
3. Dan pastekan di awal tulisan blog, pada bagian HTML. Contoh Gambar.

4. Setelah itu masukan kode </div> diakhirtulisan blog, masih pada bagian HTML.
5. Selanjutnya, pratinjau gambar, untuk memastikan apakah background sudah ada atau belum.
6. Jika sudah baru publikasikan(untuk artikel baru), atau Perbarui(untuk artikel lama). Selesai.

Keterangan Kode langkah 2:

•  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJYmBaKmej8O197Zg3mUobGYGoU7eF7shhuuJNxppjxN_wasa3SOJ9yA2OHUVmy4i0gIht9bN-Lb5bdHT66C54bQyOy7Vndi2-FAmBVuH6XD6oNOgggrOghDJLHKKOBYYmvBPasgKdLUhv/s1600/Fandra+Juani+copy.png ini url gambar yang akan dijadikan background. Silakan diganti dengan URL gambar kalian sendiri.
•  no-repeat berfungsi agar background gambar tidak berulang. untuk mengubah background gambar berulang, ganti menjadi repeat-x;
• right bottom ini posisi background, bisa diganti dengan.
left top
left center
left bottom
center top
center center
center bottom
right top
right center
right bottom

Jika belum tau cara membuat dan mengambil URL gambar sendiri, kamu bisa baca di cara cara upload dan ambil url gambar. Disitu ada cara upload dan ambil url sendiri dengan mudah. Background pada artikel ini saya letakan dibagian paling bawah, yaitu dibagian center bottom. Karena warna background nya terang, jadi tulisannya tidak terlihat.

Kalian bisa gunakan background dengan warna yang gelap, agar tulisan artikel bisa terlihat.

contoh background dengan gambar.  Tulisan ini sengaja saya blog, karenga tidak terlihat.         Semoga Bermanfaat.

Read More

Gambar Dengan Background Transparan

Cara membuat gambar dengan background transparan menggunakan photoshop, yang berguna untuk pembuatan icon dan juga penggunaan gambar di halaman blog. Agar gambar yang akan kita gunakan diblog, tetap transaparan, maka format gambar, harus diubah menjadi PNG, karena jika kita menggunakan JPG maka background gambar akan menjadi putih. Walaupun gambar sudah kita edit dengan background transparan di photoshop.

Untuk lebih jelasnya tentang cara membuat gambar dengan background transparan, silakan ikuti langkah-langkah dibawah ini.

Gambar.1. Backround Transparan

1. Bukalah gambar yang akan diedit backgroundnya. Klik Magic Wand Tool, untuk menyeleksi background yang akan dihapus.

Contoh: Gambar dalam format JPG.

---

Gambar 2. kiri(cara dupliacte layer) dan kanan (duplicate gambar)

2. Selanjutnya, buat duplicate gambar. Klik Background, lalu klik kanan, pilih Duplicate Layer.

3. Maka tampilannya layernya akan menjadi seperti gambar disamping.

• Bakcground(gambar asli). 
• Background Copy(duplicate gambar).

4. Sekarang Klik Background, dan klik delete pada bagian bawah yang diberi tanda bulat merah.

---

Gambar 3. Background Copy yang tersisa

5. Setelah di delete, maka yang tersisa adalah Background Copy saja, seperti gambar disamping.

---

Gambar. 4. delete background gambar

6. Setelah itu langsung ke gambar, delete backgroundnya. Dan save, dalam format PNG. Selesai.

Dengan men-save gambar ke PNG, background gambar tetap akan transparant, berbeda jika disave dalam format JPG, maka background gambar akan menjadi putih. 

---

Gambar.5. Cotoh gambar

Hasil gambar dengan background Transparant.

---

Gambar.6. Contoh penggunaan gambar transparant di blog.

Atau yang satu ini, contoh penggunaan gambar dengan background tranparant yang saya gunakan di blog.

Gambar ini letaknya pada bagian header, dan header saya beri warna background biru, sehingga background gambar juga berwarna biru, berbeda jika gambar disave dalam format JPG, backgorundnya gambarnya akan putih, jadi tidak sesuai dengan warna header yang saya gunakan.

---

Itulah sedikit tips dan trik tentang membuat gambar dengan background transparan, dapat kita gunakan juga untuk pembuatan icon di blog dengan background transaparant.


Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Cara Buat Header Dan Tabs Tanpa Jarak

Cara membuat header dan tabs penuh full body, tanpa ada jarak pemisah antara kiri dan kanan blog. Dibeberapa template header dan juga tabs blog tidak menampilkan background secara penuh, ada jarak kosong diantara kiri dan kanannya. Namun ada juga template yang menampilkan header dan tabs secara penuh tanpa ada jarak.

Cara mengubah header atau tabs blog menjadi penuh tanpa batas, Ikuti langkah-langkah dibawah ini.

Cara Membuat Header Penuh

1. Login ke blogger. Lalu pada halaman awal dasbor. Pilih pengaturan Tata Letak.
2. Selanjutnya Klik Desainer Template > Tingkat Lanjut > Dan Klik Tambahkan CSS.
3. Dan Masukan kode dibawah ini.
#header {background:black;margin:0px -235px 0px -235px;padding:0px 0px 0px 240px;overflow:hidden;}
4. Setelah itu lihat dulu perubahan dari warna background blog kamu. Jika sudah pas memenuhi semua body, baru klik Terapkan ke Blog.
5. Jika belum, tambahkan nilai pada kode margin:0px -235px 0px -235px; Contoh:-245. Jika sudah melebihi batas penuh. Silakan dikurangi nilai pada kode marginnya.
6. Keterangan kode margin:0px (Atas) -235px(kanan) 0px(bawah) -235 (kiri).
7. Untuk kode padding sama halnya seperti margin. Tapi padding digunakan untuk merubah posisi bagian dalam, jadi tulisannya bisa kita tempatkan ditengah. Sedangkan margin untuk bagian luar.
8. overflow:hidden; kode ini gunanya agar tampilan header tidak melebihi halaman blog.
9. Setelah semuanya sudah sesuai dengan yang kalian inginkan, Klik Terapkan Blog. Selesai.

Cara Membuat Tabs Penuh

1. Sama seperti cara membuat header penuh. yang berbeda hanya kode yang harus dimasukan. Kodenya dibawah ini.
.tabs-inner .widget ul {margin:0px -265px 0px -265px;padding:0px 0px 0px 240px;overflow:hidden;}
2. Perbedaannya dengan kode header. Kita dapat mengatur warna background tabs dibawah header langsung dari Desainer Template > Tingkat Lanjut > Latar Tab.
3. Jangan lupa diatur juga kode margin dan paddingnya agar sesuai dengan keinginan. Selesai.

Semoga bisa bermanfaat untuk anda.

Read More

Cara Print Banyak Kotak di Excel

Cara print banyak kotak di excel dalam satu lembar kertas. Standarnya excel hanya dapat diprint dalam beberapa kotak saja, sesuai dengan lebar dari kotak-kotak tersebut. Perlu pengaturan2 tambahan agar excel dapat di print dengan banyak kotak, dari lebar kertas, lebar dan tinggi document, juga bentuk kertas yang akan kita gunakan, apakah itu lanscape yang melebar kesamping atau portrait yang memanjang kebawah.

Seperti contoh gambar dibawah ini, yang menggunakan lanscape yang melebar kesamping.

Untuk lebih jelasnya tentang cara print banyak kotak diexcel dalam satu lembar kertas, ikuti langkah² dibawah ini.

1. Buatlah tulisan dengan kotak yang banyak, atau buka dokumen anda sendiri.
2. Selanjutnya, klik Page Layout di bagian menu atas.
3. Lalu ganti width dan height menjadi 1 page. seperti gambar dibawah ini.

4. Selanjutnya print, selesai.

Dari pengaturan diatas, maka berapa banyak pun kotak diexcel akan di print dalam satu lembar kertas.
Adapun Hal² lain yang harus diperhatikan, untuk print banyak kotak dalam satu lembar.

• Karena menggunakan banyak kotak kesamping, maka aturlah kertas dalam bentuk Landscape. Caranya klik page layout > Orientation > Landscape.
• Mengatur Margin kiri-kanan-atas-bawah kertas. Klik Page layout > Margin > dan pilih margin yang kalian inginkan.
• Dan yang terakhir mengatur ukuran kertas yang digunakan. Caranya, klik Print > Properties > Printer Paper Size > lalu pilih dengan ukuran kertas yang digunakan(contoh:A4).

Selesai sudah tentang cara print banyak kotak dalam satu lembar kertas di excel. Jika ada yang ditanyakan silakan masukan komentar dibawah. Semoga bermanfaat.

Read More

Tulisan Dengan Warna yang Berbeda

Tulisan dengan warna yang berbeda. Setiap huruf mempunyai warna yang berbeda. Bisa digunakan sebagai tulisan di menu blog. Pada saat tulisan tersebut di klik, akan terbuka halaman baru.

Sebagai contoh: saya membuat menu dengan judul Fandra Juani. Setiap huruf mempunyai warna yang berbeda-beda. Dan pada saat diklik akan terbuka halaman tentang saya. Lihat contoh dibawah ini.

• FANDRA JUANI

Untuk lebih jelasnya tentang cara membuat tulisan dengan warna yang berbeda di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor pilih pengaturan tata letak.
2. Lalu, klik tambahkan Gadget. Dan pilih HTML/Javasript.
3. Selanjutnya copi kode dibawah ini.
<style>
#tentang{background:transparent}
#tentang ul{float:left}
#tentang ul li{float:left;list-style:none}
#tentang ul li span{float:left;text-transform:uppercase;font-family:Ravie;font-size:12px;text-shadow:2px 2px 5px #1780dd;font-weight:bold;padding:0}
d{font-size:180%;color:DarkCyan}
g{color:red}
h{color:blue}
i{color:#ee3e80}
j{color:pink}
k{color:black}
l{font-size:180%;color:violet}
m{color:DarkCyan}
n{color:blue}
o{color:pink}
r{color:red}
#tentang ul li span:hover{background:transparent;font-weight:bold;color:#aaa;font-size:14px;font-family:Calligraffitti;text-shadow:2px 2px 3px #3af}
</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><span><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></span></a></li>
</ul>
</div>
4. Dan pastekan di Gadget HTML/Javascript Tadi. Save, lalu tempatkan gadget kemanapun yang kalian inginkan. Selesai.

Keterangan Kode Diatas:

• #tentang ul li span { fungsinya untuk mengatur tebal fon-family dan ukuran huruf yang digunakan.
• #tentang ul li span:hover{ fungsinya untuk mengatur tebal fon-family dan ukuran huruf pada saat di sentuh kursor.
• Kode Merah d sampai r. untuk mengatur warna tiap² huruf.
• Kode Biru adalah kalimat yang akan ditampilkan.
• Jadi Intinya setiap huruf mempunyai kode tersendiri. <d></d> untuk f dan seterusnya. 
• Terakhir, jangan lupa diganti  http://fandrajuani.blogspot.com/p/blog-page_25.html dengan alamat URL kalian sendiri.

Contoh yang saya berikan ini jumlah hurufnya ada 11, jadi ada 11 kode tersendiri di setiap hurufnya. Jika jumlah huruf kalian lebih dari 11. Tambahkan kode yang lain, misalnya <z></z> ,<t></t>.

Jika huruf yang ingin kalian buat kurang dari 11, silakan dikurangi saja beberapa kode diatas. Misal huruf kalian 6, maka gunakan kode merah d sampai k saja. Kode l sampai r hapus.

Begitu juga untuk kode biru gunakan <d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> saja. Kode <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r> hapus.

Itulah sedikit cara membuat tulisan dengan warna yang berbeda yang dapat digunakan di menu blog. Semoga Bermanfaat.

Read More