Cara mempercepat loading blog lanjutan

Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah² dibawah ini.

Menambahkan attribute width dan height.

Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:

1. Untuk kode HTML
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzyde8o5p3QDy7_BCcL7_gpNOQTFRtq2Wm4Y_9mGQAyw8UpgjT2uyynBIXi71B8o0c2hY3ygU5Eym2JKeaWXqH1erRVlvq2BptW-R0Rq0mh-aZ1VOD06OWwqZdB_mky0zTQn5zT-y35On/s128/fandra-juani.jpg' width='32' height='32' />


2. Untuk kode CSS width:70px;height:70px;

Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.

Merubah ukuran asli dari sebuah gambar.

Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.

Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.

Mengganti server gambar blogger dengan google.

1. Buatlah entri baru, lalu masukan gambar ke posting.
2. Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.

3. Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
4. Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
5. Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.  
6. Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
7. Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdXm7Evo73E6skvzwjdytxpf3jXhS2_hyphenhyphen_CWiAp85WeIxId_rV49L1B2ltstjxJ24DsI1V0wzM1dgJtl3f6p6PVVguxHiuqHwd85ddcG5fzbAGmtHBw8vXyExEQgyFW7F5fbDK0VDi-kF/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdXm7Evo73E6skvzwjdytxpf3jXhS2_hyphenhyphen_CWiAp85WeIxId_rV49L1B2ltstjxJ24DsI1V0wzM1dgJtl3f6p6PVVguxHiuqHwd85ddcG5fzbAGmtHBw8vXyExEQgyFW7F5fbDK0VDi-kF/s1600/loading.jpg" /></a></div>

URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55mYUr1lz58csAfbJih5qrb1M9cf47tF5QhyphenhyphenBiCybIVqJ5ljkFOCcNyJHCXKP_W_lP-shycfi7qGa7gSOT8UrIRgqp2IE2ZNKv41U7zEXY3FU5zA5ttyPCFKPPPsiJL7Mlz5R7ozJG-MF/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi55mYUr1lz58csAfbJih5qrb1M9cf47tF5QhyphenhyphenBiCybIVqJ5ljkFOCcNyJHCXKP_W_lP-shycfi7qGa7gSOT8UrIRgqp2IE2ZNKv41U7zEXY3FU5zA5ttyPCFKPPPsiJL7Mlz5R7ozJG-MF/s300/loading.jpg" /></a></div>
8. Selesai.

Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.

Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.

Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.

Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/author dikotak komentar blog. Seperti gambar dibawah ini. Tanda penulis berupa gambar, yang akan muncul ketika penulis memberikan komentar. Sehingga mudah untuk dibedakan yang mana author/pemilik blog dengan pengunjung yang memberikan komentar.

Untuk lebih jelasnya tentang cara membuat tanda penulis atau author dikotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan Template.
2. Klik edit HTML dan cari kode ]]></b:skin> dan tempatkan kode berikut ini diatasnya.
.comments .comments-content .icon.blog-author{
background-repeat:no-repeat;
background-image:url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzbbX32zpQu2fascyLk-ncoDpg-tE93E_nxZ_-uyjxiiVkA_bMTtrz7Tm9h4VO1aVYmwqWqp0hs1Oqd6IPbXk-7S-hoDC5hSzMkP7w72gyXgXM-GF7k_LnJSA8m6jmOvtVXBwU2tl_2pU/s125/fandra%2520penulis.png);
background-position: top; float:right;width:125px;height:32px;margin:-16px 0px 0px 0px;
}
3. Save template, selesai.

Keteranga kode diatas:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzbbX32zpQu2fascyLk-ncoDpg-tE93E_nxZ_-uyjxiiVkA_bMTtrz7Tm9h4VO1aVYmwqWqp0hs1Oqd6IPbXk-7S-hoDC5hSzMkP7w72gyXgXM-GF7k_LnJSA8m6jmOvtVXBwU2tl_2pU/s125/fandra%2520penulis.png merupakan url dari gambar yang akan ditampilkan.
• float:right; posisi gambar disebelah kanan.
• width:125px;height:32px; tinggi dan lebar gambar.
• margin:-16px 0px 0px 0px; mengatur posisi gambar agar tidak terkena komentar. Pengaturan kode: -16(kanan), 0(atas), 0(bawah), 0(kiri).

Gambar diatas menggunakan format PNG, dan background dibuat transparant. Jadi background gambar akan mengikuti warna background dari kotak komentar. Untuk membuat gambar transparan, baca di cara membuat gambar dengan background transparan. Dan silakan baca juga cara upload dan ambil url gambar, untuk memasukan gambar anda yang akan dijadikan tanda penulis.

Itulah sedikit cara desain blog yaitu tentang membuat tanda penulis dikotak komentar blog, agar pengunjung mengetahui siapa penulis atau pemilik dari blog. Silakan baca juga artikel lainnya, yang berhubungan dengan gambar. Seperti cara menambahkan gambar disamping judul posting atau cara memasang icon berbeda disetiap judul widget. Dan juga artikel lainnya.

Semoga bisa bermanfaat untuk anda.

Menu Vertical Fandra Juani

Menu Vertical Fandra Juani. Menu vertical ini berisi tulisan dengan warna yang berbeda disetiap hurufnya, ditambah dengan icon disamping kirinya. Icon yang dipasang dibuat dengan bentuk bulat. Dan ketika disentuh kursor mouse icon tersebut akan berputar.

• Fandra Juani
• Facebook
• Twitter
• Google +

Cara membuatnya ikuti langkah² dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Selanjutnya, pilih tambahkan Gadget, dan pilih HTML/Javascript. Lalu masukan kode dibawah ini.
<style>
#tentang{background:transparent;height:150px}
#tentang ul{float:left}
#tentang ul li{width:200px;float:left;list-style:none}
#tentang ul li span{float:left;font-family:Trebuchet;text-transform:uppercase;font-size:14px;padding:0 0 0 10px;text-shadow:2px 2px 5px #1780dd;font-weight:bold}
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}
t{font-size:180%;color:yellow}
x{font-size:180%;color:#3af}
#tentang ul li span:hover{padding:0 0 0 20px}
#tentang ul li img{padding:0;border-radius:100px;-moz-border-radius:100px;-webkit-border-radius:100px;float:left;position:relative;-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .8s ease-in-out}
#tentang ul li img:hover{-o-transform:scale(1) rotate(360deg);-moz-transform:scale(1) rotate(360deg);-webkit-transform:scale(1) rotate(360deg)}</style>
<div id='tentang'>
<ul>
<li><a href='http://fandrajuani.blogspot.com/p/blog-page_25.html' title='Fandra Juani'><img alt="Tentang Fandra Juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKzyde8o5p3QDy7_BCcL7_gpNOQTFRtq2Wm4Y_9mGQAyw8UpgjT2uyynBIXi71B8o0c2hY3ygU5Eym2JKeaWXqH1erRVlvq2BptW-R0Rq0mh-aZ1VOD06OWwqZdB_mky0zTQn5zT-y35On/s128/fandra-juani.jpg' width='32' height='32' title="About Me"/><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>

<li><a href='https://www.facebook.com/fandra.juani'title='My Facebook'><img alt="fandra juani"src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTmeE3fFNOQn15UNB48VjNHOWD46du7Xhz6WU8xHWCnETkdsqO9rrQ8y2YPsw1ge7fwbMH6dXImJUWCArWvVN1CSD42cJ5bsJmHBL6O-LkStNRB9YAqdRPMkDvnfle_GSHYpx7IDcPmFt/s128/Fb.jpg' width='32' height='32' title="Facebook Fandra Juani"/><span><t>F</t>a<h>c</h><g>e</g><j>b</j><m>o</m><r>o</r><h>k</h></span></a></li>

<li><a href='https://twitter.com/fandrajuani' title='My Twitter'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN6PBkmhyZJX5Wyb5kWoLIhXfYuUNEwpy8HgbR-zEzh-eVwJq-iDytXvo5lvonfyGrKY6dhdBQNHsWwOGs9eHT8ag9ZKzCUAhS4kMFgtjdztz5Gca4lInaUpvlnZ1hz_gyyPg7qlhlVJoR/s128/Twitter.jpg' width='32' height='32' title="Twitter Fandra Juani"/><span><x>T</x><o>w</o><m>i</m>t<j>t</j><h>e</h><r>r</r></span></a></li>

<li><a href='https://plus.google.com/u/0/110277074823916598610/posts' title='My Google+'><img alt="fandra juani" src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6ET_r2F6vTNcv2BPGrqlzN3FkIT6w6BJdWZZERAopSZNX-juGyBUBipPuTvbwVAnVBrOtuU3Zk4IdIGK8cx6Ph0mqlHKOiCws1d22WXX1EeCWNfYEVe3HEWHl8zYyMjKzM8Ccogqh3o1/s32/G%252B.jpg' width='32' height='32' title="Google+ Fandra Juani"/><span><l>G</l><h>o</h><r>o</r><m>g</m><k>l</k><h>e</h> <g>+</g></span></a></li>
</ul>
</div>
3. Save Gadget, Selesai.

Keterangan Kode:  #tentang{background:transparent;height:150px}atur tinggi menu vertical sesuai dengan tinggi dari menu kalian.

Keterangan kode lainnya, bisa di pelajari pada daftar artikel dibawah ini.

1. Membuat menu vertical sederhana.
2. Tulisan dengan warna yang berbeda. 
3. Membuat icon sendiri untuk website. 
4. Cara upload dan ambil URL Gambar.
5. Membuat gambar bentuk bulat diblog.
6. Membuat gambar berputar diblog.

Silakan berkreasi, dan semoga bisa bermanfaat untuk anda.

Menghilangkan kotak komentar pada halaman tertentu diblog

Menghilangkan kotak komentar pada halaman tertentu diblog. Untuk suatu halaman, seperti halaman contact, tentang/profil, atau pun juga daftar isi. Beberapa orang mungkin tidak menginginkan kotak komentar dibawahnya. Agar halaman tersebut bisa terlihat lebih rapi, dan berbeda dengan halaman-halaman lainnya.

Untuk melihat contohnya: silakan lihat halaman hubungi pada menu blog ini atau halaman tentang saya(jika masih saya gunakan). Berikut ini adalah cara agar kotak komentar pada suatu halaman diblog hilang. Tapi pada halaman lainnya, kotak komentar tetap ada. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan post.

2. Selanjutnya, buatlah entri baru atau buka artikel lama saja.

3. Lalu klik Pilihan(letaknya disebelah kanan bawah, diurutan Setelan entri).

4. Setelah itu, beri tanda Jangan bolehkan pada pilihan Komentar pembaca. Seperti gambar dibawah ini.

5. Klik selesai, lalu silahkan dipublikasikan(untuk entri baru) atau Perbarui(pada artikel lama). Dan lihat halaman tersebut, kotak komentar akan hilang. Selesai.

Setelah melakukan cara diatas. Ketika kamu membuat entri baru, coba cek pengaturan pilihan, biasanya tanda masih di Jangan bolehkan pada pilihan komentar pembaca. Ganti menjadi izinkan, agar entri baru tersebut dapat dikomentari oleh pembaca. Untuk entri baru selanjutnya. blogger akan mengatur otomatis, pengaturan komentar pembaca pada pilihkan bolehkan.

Silahkan dibaca juga cara-cara membuat suatu halaman blog berbeda dengan halaman lainnya. Seperti menghilangkan sidebar blog pada halaman tertentu, widget2 dikiri dan kanan blog akan dihilangkan. Atau baca juga artikel tentang background berbeda dihalaman berbeda, kita dapat memberi backcground pada halaman tertentu.

Dan silahkan baca juga artikel yang berhubungan dengan kotak komentar, yaitu tentang cara memasang scroll dikotak komentar blog, untuk mempersingkat tampilan kotak komentar jika sudah ada banyak komentarnya. Dan juga artikel-artikel lainnya. Semoga bermanfaat untuk anda.

Cara membuat dan memasang favicon blog

Cara membuat dan memasang favicon blog. Favicon atau gambar icon yang berada diatas bar address dari browser yang kita gunakan. Seperti contoh gambar dibawah ini.

Cara membuat favicon blog.

1. Buatlah favicon sendiri diphotoshop, paint atau program gambar lainnya. Atau bisa juga gunakan foto anda sendiri untuk dijadikan favicon.
2. Selanjutnya ganti ukuran gambar menjadi 48x48 atau 32x32, atau ukuran terkecil 16x16, agar gambar berbentuk bujur sangkar. Cara mengganti ukuran gambar baca di cara membuat icon untuk website. 
3. Setelah selesai merubah ukuran gambar, simpan gambar tersebut dengan format JPG atau save dalam format PNG jika ingin menggunakan gambar dengan background transparant.

Cara memasang favicon diblog.

1. Pertama upload gambar yang akan dijadikan favicon, ke blog lalu ambil url gambarnya. Silakan baca disini tentang cara upload dan ambil url gambar.
2. Setelah itu, masukan url gambar tadi ke format kode seperti dibawah ini.
<link href='URL gambar kamu' rel='shortcut icon'/>
3. Lalu buka pengaturan Template, klik edit HTML, dan cari kode <head>
4. Dan letakan kode favicon dari langkah 2 ke bawah <head>. Contoh:
<head>
<meta content='A87E01E095BC5007155087A5ECD3A506' name='msvalidate.01'/>
......
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
......

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnjPpnDyA6wQgUMdM1KDYvSinfN_wU4ZEpJ7HpQSJdNtVE3zJDyGMrUaR8UTTh-vN0xsYg-LoyJKnCNGUOEsOTcqVtPMhSU84JpS7paXZLvUzB5OXRrFNl66Lecps_RLPYQmYhPOIWvCsh/s48/Fandra-Juani.png' rel='shortcut icon'/>
5. Terakhir save template, selesai.

Sebenarnya, kita bisa mengganti favicon langsung dari blogger, yaitu dengan mengupload gambar dengan bentuk bujur sangkar di pengaturan Tata Letak > edit favicon > Upload gambar > Simpan. Kekurangannya gambar tidak akan langsung mengganti favicon di blog, kita harus menunggu dulu blogger untuk mengubah favicon yang kita gunakan. Mungkin bisa seharian.

Berbeda dengan menempatkan kode dibawah <head>, setelah di save template, favicon blog akan langsung terganti dengan gambar yang kita upload. Gambar favicon yang saya gunakan itu berformat PNG, background akan tetap transparent. Berbeda dengan menggunakan format JPG. Walaupun kita sudah edit gambar dengan background transparant, hasilnya gambar tetap akan ada backroundnya, warna backgroudnya putih.

Silakan dicoba dan Semoga bisa bermanfaat untuk anda.

Fungsi Fixed dan Cara Menggunakannya

Belajar fungsi kode Fixed dan cara menggunakannya diblog. Fixed merupakan kode css yang berarti menetapkan, dalam penggunaannya, fixed akan membuat posisi widget atau gadget menjadi menetap. Atau posisinya akan tetap disitu² saja. Walaupun kita mengarahkan mouse sampai kebawah. Untuk lebih jelasnya silakan lihat gambar dengan tulisan Contoh penggunaan kode fixed dibawah ini dibawah kiri. 

Dari contoh, posisi gambar tetap, walaupun mouse diarahkan ke atas atau bawah. Bagaimana membuatnya, silakan baca artikel cara membuat menu menempel diblog.

Setelah selesai membaca dan mencoba cara membuat menu menempel diblog. Sekarang saya beri contoh penggunaan kode fixed pada bagian header blog, sedikit lebih rumit dari cara sebelumnya. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Lalu klik Desainer Template > tingkat lanjut > Tambahkan CSS.
3. Copy kode dibawah ini. Lalu pastekan di kotak pada Tambahkan CSS.
#header {
  width: 100%;
  position: fixed;
top: 0px;
  left: 0px;
  right: 0px;
height: 88px;
margin:0px 0px 0px 0px;
padding:10px 0px 0px 10px;
z-index: 99;
white-space: nowrap;
background-color: #33aaff;
background-image: -moz-linear-gradient(center top , rgb(20, 132, 206) 0%, #1780dd 100%);
  box-shadow: 0px 2px 0px rgb(14, 90, 140);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
4. Maka tampilan header blog akan menetap, tapi masalahnya jika header kita beri fixed, bagian posting(main) dan juga sidebar, posisinya akan naik. Ini dikarenakan posisi pertama dalam sebuah template itu adalah header, ketika header diberi fungsi fixed, maka akan ada kekosongan diposisi pertama, sehingga posisi kedua(main dan sidebar) akan naik menjadi posisi pertama.
5. Untuk mengatur main(posting) dan sidebar turun, tambahkan kode berikut dibawah kode dari langkah 3 tadi.
#main{margin:40px 0px 0px 0px;}
.sidebar{margin:40px 0px 0px 0px;}

Keterangan kode:
#main untuk bagian posting
.sidebar untuk bagian widget kanan dan kiri blog.
40px 0px 0px 0px untuk mengatur posisinya, atas, kanan, bawah, kiri.
6. Atur sesuai dengan yang kalian inginkan. Setelah itu baru save template. Selesai.

Sekarang, Pertanyaannya, berapa banyak widget yang anda gunakan diblog??? Jika kita hanya mengatur header saja, apalagi menggunakan background warna. Maka widget/gadget lain yang ada di bagian header akan tertutup/tidak terlihat.

Solusinya, kita harus memberikan fungsi fixed juga pada gadget lain yang ada diheader. Contoh: Misalkan anda menggunakan 2 Gadget lain pada bagian header, seperti contoh dibawah ini.

1. Gadget Menu Laman.
2. Gadget Kotak search.

Kita cari dulu kode id dari kedua Gadget/widget diatas. Cara mencarinya bisa dibaca di membuat cara membuat menu menempel diblog. Berikut contoh dari kedua kode id diatas:

1. PageList1
2. CustomSearch1

Setelah ketemu semua kode, selanjtunya menambahkan satu persatu kode tersebut dengan fungsi fixed. Contoh Dari Keseluruhan kode diatas.

#PageList1{
width: 100%;
  position: fixed;
  top: 0px;
  left: 790px;
  right: 0px;
  height: 30px;
z-index: 99;
white-space: nowrap;
}

#CustomSearch1{
width:30%;
position:fixed;
top:0px;
right:0px;
margin:40px 0px 0px 0px;
z-index:99;
white-space:nowrap}

Jika sudah memasang background pada header, gadget yang lain tidak perlu diberi background. Cukup dengan mengatur posisinya saja, atur kode width: top, right, dan margin untuk mengatur posisi widget. Semoga Bermanfaat.

Contoh penggunaan kode fixed dibawah ini

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.

Cara upload dan ambil url gambar

Cara Upload Gambar Dan Ambil URL Gambar

1. Buatlah Entri Baru. Beri Judul, Dan Jangan dipublikasikan, cukup simpan di Draf Saja.
2. Selanjutnya Upload gambar/icon yang kamu inginkan.

3. Setelah di Upload, klik kanan gambar tersebut, dan pilih Copy Link Location. Seperti contoh gambar dibawah ini.
   

4. Setelah itu baru pastekan di format gambar background:url("Link Url Blog kamu") atau <img src='URL BLOG KAMU'/>. Contoh URL Gambar:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmAArmMyHPjGTPg6z6lZsQX6fjYdL37FlTtu3v8kUbcTup7pb_ox8DgOrMzHn7vr5akDvhjZW_DdIlxvXHHBThKM4zkIRXlQN_mQxF7g3p0U6ZoNYZRWkFbH0yAwEpJ5zZz-kEBY0gP4NP/s1600/Fandra+Juani.jpg


5. Selesai.

Dengan menggunakan cara diatas, kita dapat upload gambar yang kita buat sendiri ke blog dengan mudah, lalu mengambil URL nya untuk digunakan di blog. Contoh penggunaan URL gambar di blog.

1. Gambar disamping judul posting.
2. Icon disetiap judul widget blog.
3. Background dihalaman posting.
4. Gambar Bentuk Bulat. 
5. Menu dengan gambar disampingnya.
6. Mengganti judul blog dengan gambar.

Itulah sedikit tips dan trik tentang cara upload gambar dan mengambil url dari gambar untuk digunakan di blog. Semoga bisa Bermanfaat untuk anda.

Cara Membuat Gambar Bentuk Bulat di Blog

Cara Buat gambar bentuk bulat di blog. Silakan lihat gambar dibawah ini.

• 
• 
• 
• 

Gambar diatas itu aslinya kotak, tidak langsung bulat. Setelah diberi kode css, barulah gambar itu bisa bulat. Dibawah ini adalah gambar asli dari contoh diatas.

• 
• 
• 
• 

Berikut Ini adalah satu contoh penggunaan gambar bulat di blog, bisa kalian gunakan untuk menu, atau halaman lainnya. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor, pilih pengaturan tata letak.
2. Lalu klik tambahkan Gadget, pilih HTML/JAvascript.
3. Selanjutnya copy kode dibawah ini.
<style>
#bulat{background:transparent;}
#bulat ul{}
#bulat ul li{float:left;list-style:none;padding:0px 10px 0px 0px;}
#bulat ul li img{padding:0px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;}
</style>

<div id="bulat">
<ul>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="URL" ><img src="URL Gambar" /></a></li>
<li><a href="https://plus.google.com/u/0/110277074823916598610/posts"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP6ET_r2F6vTNcv2BPGrqlzN3FkIT6w6BJdWZZERAopSZNX-juGyBUBipPuTvbwVAnVBrOtuU3Zk4IdIGK8cx6Ph0mqlHKOiCws1d22WXX1EeCWNfYEVe3HEWHl8zYyMjKzM8Ccogqh3o1/s32/G%252B.jpg" /></a></li>
</ul>
</div>
4. Dan pastekan di gadget HTML/JAvascript tadi.
5. Save gadget, selesai.

Keterangan kode langkah 3:

• #bulat ul li img{padding:0px; border-radius: 100px;-moz-border-radius: 100px;-webkit-border-radius: 100px;} kode ini fungsinya untuk membuat gambar menjadi bulat.
• float:left; fungsinya agar urutan gambar menjadi vertical kesamping.
• list-style:none; menghilangkan bentuk bulat list disetiap gambar.
• padding:0px 10px 0px 0px; jarak antar gambar.
• <a href="URL" > isi dengan URL yang kalian inginkan.
• <img src="URL Gambar" /> isi dengan URL gambar.

URL maksudnya adalah alamat blog atau halaman web yang ada di address bar pada bagian atas browser, seperti: blogspot.com. Untuk membuat gambar/icon seperti diatas, silakan baca di cara membuat icon website dan jika masih bingung mengambil url gambar, bisa baca di cara mengambil url gambar. 

Itulah sedikit tips dan trik tentang cara membuat gambar bentuk bulat di blog, yang dapat kita digunakan untuk menambah pilihan dalam mendesain blog sendiri.

Semoga Bisa Bermanfaat Untuk Anda.

Cara Merubah Tampilan Header Blog

Cara Merubah Tampilan Header Blog.

Misalkan header blog anda seperti gambar diatas. Kita bisa merubah tampilanya, dibawah ini ada 2 cara yang dapat digunakan.

Cara Pertama: Menggunakan gambar background dengan ukuran yang besar, tulisan judul dan deskripsi blog disembunyikan. Yang terlihat hanyalah gambar saja dan gambar diletakan dibagian tengah. Kekurangaannya adalah, gambar tersebut tidak dapat diklik, seperti tulisan judul-deskripsi blog.

Ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.

2. Lalu klik Desainer Template > Tingkat Lanjut > Tambahkan Css.

3. Selanjutnya masukan kode ini didalamnya.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr4bzsR3LIw3ggZSa2gWHxK26oADSeh5BB8swo9acIZeMEk5ppE9qwQx_1jDYKptxUEIhytJ_jFLakELP_UD30LyJOMocw3gYHgGcM00S2r-Z7VpVsPv8cdRN7pmAIajJYAjvpBDUE7jM/s1600/Fandra+Juani.jpg)no-repeat center;margin:-40px 0px -40px 0px;}
.Header h1{ visibility: hidden;}
.Header .description{ visibility: hidden;}

 Keterangan kode:

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr4bzsR3LIw3ggZSa2gWHxK26oADSeh5BB8swo9acIZeMEk5ppE9qwQx_1jDYKptxUEIhytJ_jFLakELP_UD30LyJOMocw3gYHgGcM00S2r-Z7VpVsPv8cdRN7pmAIajJYAjvpBDUE7jM/s1600/Fandra+Juani.jpg adalah alamat url gambar yang akan dijadikan background.
• no-repeat membuat gambar tidak berulang.
• center adalah posisi gambar ditengah, bisa diganti dengan left(kiri), dan right(kanan).
• margin:-40px 0px -40px 0px; untuk mengatur jarak -40(atas) 0(kanan) -40px(bawah) 0(kiri) dari background gambar.
• .Header h1 tulisan dari judul blog
• .Header .description tulisan dari deskripsi blog.
• visibility: hidden; menyembunyikan tulisan.

4. Klik terapkan ke blog, selesai.

Cara Kedua: Menggunakan background gambar dengan ukuran yang lebih kecil. Gambar diletakan disamping kiri, dan tulisan judul-deskripsi blog di letakan disamping kanannya. 

1. Sama seperti cara pertama, tapi pada bagian langkah 3 masukan kode dibawah ini.

#Header1 {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbYNH1sHaD6Oyr6JfxBADDDy3fSTdMHTo1Z0zMR12lZr5Hhj9MMSw917wkcy_QOQcgSSTiOxex-eyAZwOd8CITTqDJRky6Jvjmj4KR-R_k6YEA7eAa1Ibg8mf3aZMhWz8D7cUEfa01kU/s1600/Fandra-Juani.png)no-repeat left;}
.Header h1{ margin:0px 0px 0px 80px;}
.Header .description{ margin:-20px 0px 0px 80px;}

2. Klik terapkan ke blog, selesai.

Silakan berkreasi sendiri dengan cara-cara diatas, dan baca juga cara cara mengganti judul blog dengan gambar yang bisa menjadi pilihan anda dalam mengubah tampilan header blog anda. Jika ada yang ingin ditanyakan tentang artikel diatas, masukan komentar dibawah. Semoga Bermanfaat.

Cara Membuat Search Kotak Penelusuran

Cara membuat tombol search atau kotak penelusuran di blog. Kotak penelusuran, jika kita memasukan kata kunci didalam kotak penelusuran, maka akan muncul artikel-artikel dari dalam blog kita, yang sesuai dengan kata kunci yang kita masukan. Tidak hanya kata kunci yang mendekati judul dari artikel kita, tapi juga artikel dengan isi yang sesuai dari kata kunci yang dimasukan di kotak search.

Untuk lebih jelasnya, silakan masukan kata kunci didalam kotak search dibawah ini. Maka akan terbuka halaman baru yang menampilkan artikel-artikel dari blog ini, yang berkaitan dengan kata kunci yang dimasukan.

Cara membuat kotak search atau kotak penelusuran di blog, Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman dasbor. Pilih pengaturan TATA LETAK.
2. Tambahkan Gadget, Dan pilih HTML/Javascript.
3. Selanjutnya, copi kode dibawah ini. Dan pastekan di gadget HTML/Javascript tadi
<form action="http://fandrajuani.blogspot.com/search" method="get">
<input class="textinput" name="q" size="48px" type="text"/>
<input value="search" class="buttonsubmit" name="submit" type="submit"/></form>
4. Save Gadget, lalu pindahkan ke tempat yang kalian inginkan. Selesai.

Keterangan Kode Langkah 3: http://fandrajuani.blogspot.com/ ganti dengan URL blog kalian, dan 48px lebar kotak search, semakin besar angkanya maka akan semakin lebar kotak search nya.

Sebenarnya widget search/kotak penelusuran, sudah disediakan oleh blogger. Tapi lebarnya kotak penelusuran otomatis, mengikuti lebar dari layout yang kita pasangi widget search/kotak penelusuran. Dengan memasang kotak search seperti diatas, kita dapat mengatur lebar kotak search sesuai dengan yang kita inginkan, kodenya juga sedikit, tidak membuat blog menjadi berat atau lama untuk dibuka.

Untuk membuat kotak penelusuran yang sedikit lebih sulit, yang ada tulisan googlenya, baca di google custom search di blog. Silakan baca juga artikel saya yang lainnya, seperti cara cara membuat tombol share di blog atau cara membuat artikel terkait di blog dan juga artikel saya yang lainnya.

Semoga bisa bermanfaat untuk anda.

Cara Memasang Scroll di Kotak Komentar Blog

Cara Memasang Scroll di Kotak Komentar Blog. Silakan lihat contoh gambar dibawah ini:

Untuk lebih jelasnya tentang cara memasang scroll di kotak komentar blog. Ikuti langkah-langkah dibawah ini.

1. Login Ke Blogger, Dari halaman Dasbor pilih pengaturan Template.
2. Klik Edit HTML dan cari kode <div class='comments' id='comments'>
3. Setelah ketemu, ganti kode tersebut dengan kode dibawah ini.
<div class='comments' id='comments' style='max-height:960px;overflow:auto;'>
4. Karena kode <div class='comments' id='comments'> ada 2 ditemplate. Ganti kedua² nya dengan kode diatas. 
5. Selanjutnya save template, selesai.

Keterangan Kode:  max-height:960px untuk mengatur tinggi kotak komentar yang akan ditampilkan. Dan overflow:auto; ini kode scroll nya,  scroll akan muncul ketika kotak komentar sudah melebihi max-height yang sudah kita atur.

Kotak scroll diatas berfungsi untuk mempersingkat tampilan komentar blog. Ketika artikel kita sudah mempunyai komentar yang banyak, maka komentar yang akan terlihat pertama kali hanya sebatas dari tinggi kotak yang telah kita atur. Pada saat discroll kebawah, maka komentar lain akan muncul, dan komentar² yang pertama akan disembunyikan. Jika di scroll lagi ke atas, maka komentar yang disembunyikan tadi akan muncul kembali, jadi semua komentar tetap ada, hanya tampilannya saja yang kita persingkat.

Dengan memasang kotak scroll di kotak komentar blog, maka loading blog akan lebih cepat, jika dibandingkan harus membuka semua komentar2 yang ada pada suatu artikel. Jika artikel kita belum ada komentar, maka scroll pun tidak akan terlihat. Scroll hanya akan muncul ketika komentar di artikel kita sudah banyak, atau sudah melebihi tinggi kotak komentar, seperti penjelasan saya di keterangan kode.

Itulah sedikit tips dan trik tentang cara memasang scroll di kotak komentar blog, silakan baca tips dan trik lainnya yang dapat kita gunakan diblogspot, seperti cara mempercepat loading blog agar lebih mudah untuk dibuka, atau cara menuliskan pangkat di blog seperti ini 2⁸ dan artikel lain²nya.  

Semoga bisa bermanfaat untuk anda.

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.

Cara Membuat Gambar Posting Membesar

Cara membuat gambar posting membesar pada saat disentuh mouse. Sedikit berbeda dengan artikel saya sebelumnya yaitu tentang cara membuat gambar posting berputar, gambar akan berputar dan juga membesar. Kali ini gambar di posting blog akan kita perbesar saja. Dengan begitu kita bisa menggunakan gambar dengan ukuran yang kecil. Ketika disentuh mouse, maka gambar akan membesar.

Jadi dapat menghemat ruang tulis kita di blog. Loading blog pun akan jauh lebih cepat pada saat dibuka. Dan juga membuat tulisan terlihat rapi. Untuk lebih jelasnya, ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Dari halaman dasbor, pilih pengaturan template.
2. Selanjutnya, Klik Edit HTML dan cari kode ]]></b:skin>.
3. Setelah itu, copy kode dibawah ini, dan pastekan diatas ]]></b:skin>
.post img{
vertical-align:bottom;max-width:90%;max-height:90%;
-o-transition:all .5s ease;
-moz-transition:all .5s ease;
-webkit-transition:all .5s ease}
.post img:hover{
-o-transform:scale(1.4) translate(0px);
-moz-transform:scale(1.4) translate(0px);
-webkit-transform:scale(1.4) translate(0px);
-o-transition:all .5s ease;-moz-transition:all .5s ease;-webkit-transition:all .5s ease}
4. Terakhir Save Template. Selesai.

Keterangan kode langkah 3:
scale(1.4) untuk mengatur berapa besar gambar pada saat di sentuh mouse. Jika kurang besar silakan diganti dengan angka yang lebih besar. Contoh:scale(1.9)
5s waktu yang dibutuhkan, saat memperbesar gambar.

Itulah sedikit tuorial tentang cara membuat gambar di posting blog membesar pada saat disentuh mouse. Silakan dibaca juga artikel saya yang lainnya. Semoga bisa bermanfaat untuk anda.

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/AVvXsEhwsbTAnLSl1nFRg7w74pHLWYv6J7Xw6yRk2MgGT2Z1Is8aY_6tZu-KQ6igprQr_6Ibf06ylMpf-VlXK_IFc37Lh-HFnRKHpAYQr5gEaOpZetxjS4ybOsMqwvRWVAto5xIhn0bzvNdlpXfB/s1600/32x32.jpg")no-repeat;padding:10px 0px 0px 40px;height:22px;}

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

#Stats1 h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiclLpvTLpmpjHjZGVaCPKc_RycVOpbF1lR2wMLQf2rrsV0ZCOrpp5uiZyTfNuwTfS6Ig301eHoPl6zb9cIQFFKtnl712hJKLmuyNQ2WZSggWAXtyDTsCuBvLQlm795v00klkgECWSeCteX/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/AVvXsEhwsbTAnLSl1nFRg7w74pHLWYv6J7Xw6yRk2MgGT2Z1Is8aY_6tZu-KQ6igprQr_6Ibf06ylMpf-VlXK_IFc37Lh-HFnRKHpAYQr5gEaOpZetxjS4ybOsMqwvRWVAto5xIhn0bzvNdlpXfB/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.

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.

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

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.

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.

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.

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.