Senin, 06 Desember 2010
Image. Kalau berbicara masalah image/gambar, memang sangat seru dan menyenangkan. Dengan adanya image maka blog kita akan tampil lebih menarik untuk di lihat,walaupun tentusaja apabila berlebihan akan berakibat buruk yaitu blog kita akan susah untuk di aksesoleh para pengunjung karena beban kapasitas data yang berlebihan dan bila itu terjadi maka para pengunjung akan menjadi malas untuk berkunjung. Memang segala sesuatu kalau berlebihan akan berakibat tidak baik, jalan keluarnya ya wajar-wajar saja Re....
Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.
Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :
Langkah pertama
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.
Langkah kedua
langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.
Langkah ketiga
langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :
Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :
Sehingga kodenya akan jadi seperti ini :
dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :
tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut
sehingga image yang tadi akan berubah jadi seperti ini :
Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.
Langkah keempat
langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
Untuk yang memakai template klasik :
Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.
Untuk yang memakai templat baru :
Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :
kode image tersebut tag nya harus ditutup dengan tag penutup :
Sehingga kode image jadi bertambah menjadi :
Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :
Ok sobat, biar ga terlalu banyak berimpropisasi, langsung saja pada topik bahasan. topik yang akan kita bicarakan saat ini yaitu memasang image/gambar pada judul artikel. Artikel ini saya buat bagi yang senang akan pernak-pernik gambar,bagi yang tidak senang, ya sebagai pengetahuan saja lah.
Untuk memasang sebuah image pada judul artikel, ada beberapa tahapan yang harus dilakukan, antara lain :
Langkah pertama yang harus dilakukan adalah membuat image ataupun logo yang di inginkan. jika sobat mahir dalam program grafik & design semisal adobe photoshop ataupun coreldraw, ya tinggal buat saja yang nyentrik. Tapi kalau tidak bisa atau males bisa gunakan layanan di internet, ini sudah saya bahas pada artikel terdahulu, silahkan klik disini untuk membacanya kembali.
langkah kedua yaitu sobat harus upload image atau logo tersebut, bisa ke blogger ataupun ke hosting lain. Misalkan biasanya saya menyimpan setiap image yang saya punya di www.Photobucket.com untuk masalah upload gambarpun sudah saya bahas pada postingan yang lalu, kalau mau baca-baca lagi silahkan klik di sini.
langkah ketiga adalah mengatur ukuran dari image tersebut agar sesuai dengan yang di inginkan, karena jika terlalu besar atau terlalu kecil maka tentu saja akan tidak enak dipandang mata. Misalkan saya mempunyai URL image seperti ini :
http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif Sebagaimana kita ketahui untuk membuat sebuah image bisa online maka kita tambahkan kode :
<img src="URL image"> Sehingga kodenya akan jadi seperti ini :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif"> dan yang akan tampil adalah image dengan ukuran yang sebenarnya. contoh image tersebut adalah seperti ini :
tentu saja bila kita memajang image sesuai ukuran image yang aslinya, ini menjadi kurang enak di lihat jika di padukan dengan tulisan judul posting. Untuk mengakalinya kita bisa menambahkan beberapa atribut kedalam kode image tersebut, antara lain atribut
width="..." untuk lebar, height="..." untuk tinggi, danborder="..." untuk bingkai, dan dalam hal ini yang dipakai adalah border dengan nilai 0 (nol) agar terhindar dari setting template yang memakai nilai border. Saya ambil contoh kode image tadi jadi seperti ini : <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"> sehingga image yang tadi akan berubah jadi seperti ini :
Bagaimana sudah jelaskan cara merubah ukuran gambar? jika sudah, kita beranjak ke langkah selanjutnya.
langkah keempat yaitu memasukan kode gambar yang sudah kita modifikasi tadi ke dalam kode template blog milik kita. Silahkan ikuti langkah-langkah berikut ini :
Untuk yang memakai template klasik :
- Sign in ke blogger dengan id sobat
- Klik menu Template
- Klik menu Edit HTML
- Copy 'n paste seluruh kode HTML ke dalam notepad, ini dimaksudkan untuk mengurangi resiko apabila terjadi kesalahan pada saat kita melakukan editting kode template
- Cari kode berikut pada kode HTML sobat :
- Klik tombol Preview untuk melihat perubahan yang dilakukan
- Jika sudah OK, klik tombol Save Settings
- Selesai
<$BlogItemTitle$> cara yang mudah untuk menemukan kode tersebut adalah : klik menu Edit yang berada bar menu browser lalu klik Find kemudian tuliskan kode diatas tadi lalu klik tombol Find, maka secara otomatis kita akan langsung di bawa ke tulisan kode tadi. Nah kode
<$BlogItemTitle$> adalah merupakan kode untuk menampilkan judul postingan, maka kita harus menyimpan kode image yang kita miliki di dekatnya, bisa sebelum atau sesudahnya tergantung dari keinginan kita. Tentunya bila di simpan sebelum kode judul posting maka image pun akan muncul sebelum judul posting, jika di simpan sesudah kode judul posting sudah barang tentu image pun akan muncul sesudah tulisan judul. Saya ambil contoh kode image di simpan sebelum tulisan judul : <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"> <$BlogItemTitle$> pemasangn kode adalah untuk memberi jarak spasi antara image dengan tulisan judul, sebab jika tidak menambahkan kode maka image dengan tulisan akan bersatu walaupun kode image dengan kode judul di tulis ada jarak spasinya.
Maka setiap sobat posting artikel, secara otomatis image yang kita pasang tadi akan muncul tanpa harus di tuliskan kembali. Untuk contoh nyata silahkan lihat judul postingan ini.
Untuk yang memakai templat baru :
Catatan awal bagi yang memakai template baru yaitu setiap tag yang kita pakai harus selalu di tutup tidak seperti template klasik, contoh kode gambar yang tadi kita pakai adalah :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"> kode image tersebut tag nya harus ditutup dengan tag penutup :
</img> Sehingga kode image jadi bertambah menjadi :
<img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> Untuk memasukan kode gambar yang sudah di tambahi tag penutup tadi, silahkan ikuti langkah berikut :
- Sign in ke blogger dengan id sobat
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Full Template
- Silahkan save dulu template sobat, ini untuk back up data apabila terjadi kesalahan editting
- Beri tanda centang pada kotak disamping tulisan Expand Widget Templates. Sekali lagi jangan lupa beri tanda centang, sebab kalau tidak, nanti tidak akan sesuai dengan langkah selanjutnya
- Tunggu beberapa saat sampai proses selesai
- Cari kode berikut pada template sobat :
- Sisipkan kode gambar yang kita miliki diantara kode :
- Klik tombol PREVIEW untuk melihat perubahan
- bila sudah OK, klik tombol SAVE TEMPLATE
- Selesai
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/> <a expr:href='data:post.url'> dan kode <data:post.title/></a>
<b:else/> Sehingga bila di satukan kodenya menjadi :
<a expr:href='data:post.url'> <img src="http://i162.photobucket.com/albums/t253/rohman24/kupu2.gif" width="45" hight="45" border="0"></img> <data:post.title/></a>
<b:else/> 
Label:
Beberapa hari yang lalu, sobat Uel menanyakan perihal bagaimana caranya untuk mengganti background blog, dan tentunya saya akan coba membahasnya. Menurut saya, ada dua kemungkinan mengganti background yaitu yang pertama adalah mengganti hanya warna background (latar belakang) saja, yang kedua adalah mengganti background blog dengan menggunakan gambar atau image.
Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah template asli blogger yaitu template minima.
Mengganti Warna Background
Untuk template minima klasik :
Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.
Untuk template minima baru :
Mudah bukan?
Mengganti Background Dengan Image
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !
Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :
alamat gambarnya adalah
http://amen24.googlepages.com/pattern_096.gif
gambarnya seperti ini :
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
Untuk template minima klasik :
Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.
Untuk template minima baru :
Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat klik di sini !
Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.
Selamat mencoba !
Ada satu hal yang saya anggap penting apabila sobat berniat mengganti background (latar belakang) yaitu gantilah background dengan warna atau image yang sekiranya tidak membuat tulisan-tulisan kita menjadi susah untuk di baca. Jika tulisan yang tersedia berwarna gelap, maka pilihlah warna atau image yang terang, akan tetapi sebaliknya apabila tulisan yang ada berwarna terang, maka sebaiknya warna atau image background berwarna gelap. Tulisan yang susah untuk di baca oleh pengunjung, tentunya akan membuat pengunjung tersebut malas untuk membaca artikel-artikel yang kita tulis, dan tentunya percuma saja kita memposting artikel jika tidak ada yang mau untuk membacanya.OK, biar tidak menyita halaman langsung saja pada topik utama. Karena kode template sangat bervariasi, yang akan saya jadikan contoh adalah template asli blogger yaitu template minima.
Untuk template minima klasik :
- Sign in
- Klik menu Template
- Klik menu Edit HTML
- Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
- Rubahlah kode warna asli template dengan kode warna yang sobat sukai (yang warna merah adalah kode yang harus di rubah) :
- Klik tombol Pratinjau untuk melihat perubahan
- Jika sudah OK, klik tombol Simpan Perubahan Template
- Selesai.
body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Misalkan jika ingin menjadi warna abu-abu terang, kodenya jadi seperti ini :
body {
background:#E7E3E3;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Jika sobat kebingungan tentang kode warna, sobat bisa menggunakan bantuan program photoshop, kapan-kapan akan saya posting khusus tentang bagaimana cara mengetahui kode warna.
Untuk template minima baru :
- sign in
- Klik menu Layout
- Klik menu Fon dan Warna
- Pada gambar teks area sebelah kiri, pilih yang Warna latar Belakang Halaman (biasanya yg pertama sih langsung ini, jadi tidak usah di pilih lagi)
- Klik warna yang sobat sukai pada gambar warna-warna yang di tampilkan, lalu lihat perubahannya pada gambar di sebelah bawah
- Jika merasa sudah cocok, klik tombol SIMPAN PERUBAHAN
- Selesai.
Mudah bukan?
Hal yang pertama tentu saja sobat harus mempunyai file image. Image ini bisa berbentuk imaage biasa, photo, bahkan animasi pun bisa. hal yang kedua adalah menguploadnya ke situs untuk menyimpan gambar, saya anggap sobat sudah bisa melakukannya karena sudah saya bahas pada postingan terdahulu, atau masih bingung? kalau iya, coba baca kembali di sini !
Untuk ukuran gambar, sobat tidak usah membuatnya dalam bentuk yang sangat besar, karena walaupun ukuran asli dari image (gambar) adalah kecil, nanti akan di tampilkan dalam jumlah yang sangat banyak hingga memenuhi layar monitor, contoh saya sudah menguload sebuah gambar dengan ukuran yang kecil saja, gambarnya seperti ini (ukuran gambar dalam ukuran aslinya) :
alamat gambarnya adalah
http://amen24.googlepages.com/pattern_096.gif
gambarnya seperti ini :
gambarnya sangat kecil bukan? tapi gambar tersebut akan tampil memenuhi layar karena akan di tampilkan dalam jumlah yang sangat banyak.
Untuk cara instalasinya, silahkan ikuti langkah-langkah berikut !
Untuk template minima klasik :
- Sign in
- Klik menu Template
- Klik menu Edit HTML
- Copy seluruh kede Template, paste pada notepad lalu save untuk backup data
- Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
- Klik tombol Pratinjau untuk melihat perubahan
- Jika sudah OK, klik tombol Simpan Perubahan Template
- Selesai.
body {
background:#fff url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}
Kode warna background sengaja tidak saya hilangkan, ini di maksudkan agar apabila background image yang kita pakai gagal di loading oleh komputer pengunjung blog, maka yang bekerja duluan warna background.
Untuk template minima baru :
- Sign in
- Klik menu Layout
- Klik menu Edit HTML
- Klik tulisan Download Template Lengkap, silahkan save dulu template sobat untuk backup data
- Klik kotak kecil di samping tulisan Expand Template Widget
- Tunggu beberapa saat sampai proses selesai
- Tambahkan kode berikut pada style sheet css sobat (yang warna merah adalah kode yang harus di tambahkan) :
- Klik tombol Pratinjau untuk melihat perubahan
- Bila sudah OK, klik tombol SIMPAN TEMPLATE
- Selesai.
body {
background:$bgcolor url('http://amen24.googlepages.com/pattern_096.gif');
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}
Saya rasa ini sangat mudah dilakukan, karena tidak banyak kode yang harus di tambahkan, Untuk melihat contoh blog yang sudah saya pasang background dengan gambar yang saya contohkan di atas, silahkan sobat klik di sini !
Eh lupa, bagi sobat yang malas membuat gambar, sobat bisa mendownload berbagai gambar pattren di sini.
Selamat mencoba !
Sudah dua kali pertanyaan ini muncul pada shoutbox, salah satunya seperti ini :
"mas,gimana cara bikin rata kanan agar postingnya jadi rapi .... thx"
Sebenarnya tentang cara posting artikel sudah saya bahas pada postingan terdahulu, jika mau iseng coba bacadi sini, akan tetapi biar lebih faham, sengaja saya posting lagi agar lebih jelas.
Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan sobat saat posting artikel, apakah biasa pakai menu Compose atauEdit HTML. Oleh karena itu akan saya bahas untuk keduanya.
Untuk menu Compose
Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :
--> Untuk merubah jenis hurup yang di gunakan
--> Untuk merubah ukuran hurup (heading)
--> Untuk Menebalkan hurup
--> Untuk memiringkan hurup
--> Untuk merubah warna hurup
--> Untuk membuat link
--> Untuk membuat artikel menjadi rata kiri
--> Untuk membuat tulisan menjadi di tengah
--> Untuk membuat artikel menjadi rata kanan
--> Untuk membuat artikel menjadi rata kiri dan rata kanan
--> Untuk membuat sub bahasan oleh angka
--> Untuk membuat sub bahasan oleh bullet
--> Untuk mengecek spelling
--> Untuk memasukan gambar(upload gambar)
--> Untuk membuat artikel dalam kode HTML
--> Untuk membuat artikel dalam mode Compose (biasa)
--> Untuk me review (melihat) artikel
Cara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?
Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.
Untuk menu Edit HTML
Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :
Rata kiri :
<div align="left">
isi artikelnya di sini
</div>
Rata kanan :
<div align="right">
isi artikelnya di sini
</div>
Rata kiri-kanan :
<div align="justify">
isi artikelnya di sini
</div>
Supaya tengah semua :
<div align="center">
isi artikelnya di sini
</div>
Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.
Contoh cara membuatnya seperti ini :
Untuk yang rata kiri :
<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Untuk yang rata kanan :
<div align="right">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Untuk yang rata kiri-kanan :
<div align="justify">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Untuk yang tengah semua :
<div align="center">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Untuk yang bullet & numbering, ini bisa juga dilakukan :
contohnya seperti ini :
Bullet saja :
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
Hasilnya seperti ini :
Sig in di blogger dengan id sobat
Klik menu layout
Klik menu Edit HTML
Bullet yang menjorok ke tengah :
<ul>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ul>
Hasilnya seperti ini :
Yang memakai nomor :
<ol>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ol>
Hasilnya seperti ini :
Untuk warna :
<span style="color:kode warna">
tulisan yang mau di warnai
</span>
contoh untuk warna merah :
<span style="color:red">
ini contoh merah
</span>
hasilnya seperti ini :
ini contoh merah
atau bisa juga seperti ini :
<span style="color:#FD0303">
ini contoh merah
</span>
Hasilnya tetap sama :
ini contoh merah
untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan program photosop, sobat tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.
Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template.
Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?
Selamat ngeblog buat semuanya !
"mas,gimana cara bikin rata kanan agar postingnya jadi rapi .... thx"
Sebenarnya tentang cara posting artikel sudah saya bahas pada postingan terdahulu, jika mau iseng coba bacadi sini, akan tetapi biar lebih faham, sengaja saya posting lagi agar lebih jelas.
Untuk membuat perataan (align), baik rata kiri, kanan, kiri-kanan, atau mau tengah-tengah semuanya, bisa dengan dua cara tergantung dari kebiasaan sobat saat posting artikel, apakah biasa pakai menu Compose atauEdit HTML. Oleh karena itu akan saya bahas untuk keduanya.
Untuk menu Compose
Pada menu compose sebenarnya ini lebih mudah, sebab untuk membuat perataan sudah di sediakan tool (peralatan) yang sama dengan yang ada di Microsoft Word atau Exel, icon tool nya seperti ini :
--> Untuk merubah jenis hurup yang di gunakan --> Untuk merubah ukuran hurup (heading) --> Untuk Menebalkan hurup --> Untuk memiringkan hurup --> Untuk merubah warna hurup --> Untuk membuat link --> Untuk membuat artikel menjadi rata kiri --> Untuk membuat tulisan menjadi di tengah --> Untuk membuat artikel menjadi rata kanan --> Untuk membuat artikel menjadi rata kiri dan rata kanan --> Untuk membuat sub bahasan oleh angka --> Untuk membuat sub bahasan oleh bullet --> Untuk mengecek spelling --> Untuk memasukan gambar(upload gambar) --> Untuk membuat artikel dalam kode HTML --> Untuk membuat artikel dalam mode Compose (biasa) --> Untuk me review (melihat) artikelCara agar artikel bisa rata kanan yaitu Highligh (blok) seluruh artikel yang di buat, lalu klik icon yang untuk rata kanan saja. Bila ingin rata kanan-kiri, rata kiri atau tengah semua, caranya ya sama yaitu tinggal Highligh (blok) seluruh artikel yang di buat, trus ya klik icon yang sobat mau pake, kelar deh. Selanjutnya ya tinggal publish, mudah bukan?
Akan tetapi bagi sobat yang memakai system Read more yang memakai kode <span class="fullpost">, memposting artikel artikel dengan memakai menu Compose sering menemui masalah di akibatkan jika di lihat pada menu Edit HTML akan muncul kode tadi di atas dalam jumlah yang banyak tanpa kita tuliskan sehingga sistem read more menjadi tidak bekerja dengan baik, oleh karena alasan tadi sistem read more yang saya ajarkan di blog ini adalah dengan memakai kode <div class="fullpost"> yang relatif lebih aman.
Untuk menu Edit HTML
Bagi sobat yang terbiasa memakai Edit HTML bisa juga membuat perataan, baik kiri, kanan, kiri-kanan, ataupun tengah semua, yaitu caranya dengan menambahkan kode HTML di awal dan akhir artikel, kodenya seperti ini :
Rata kiri :
<div align="left">
isi artikelnya di sini
</div>
Rata kanan :
<div align="right">
isi artikelnya di sini
</div>
Rata kiri-kanan :
<div align="justify">
isi artikelnya di sini
</div>
Supaya tengah semua :
<div align="center">
isi artikelnya di sini
</div>
Agar hasilnya kelihatan, saya berikan contoh dengan mengutif isi artikel di blog ini.
Contoh cara membuatnya seperti ini :
Untuk yang rata kiri :
<div align="left">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
Untuk yang rata kanan :
<div align="right">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
Untuk yang rata kiri-kanan :
<div align="justify">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
Untuk yang tengah semua :
<div align="center">
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
</div>
Maka hasilnya akan seperti ini :
Terima kasih kepada saudaraku Abu Amin yang telah mengingatkan. Kepada para sobat semua, saya menghimbau tolong ilmu yang didapatkan dari blog ini jangan di gunakan pada hal-hal yang tidah baik, semisal membuat situs porno dan lain sebagainya. Gunakanlah ilmu sobat untuk hal-hal yang baik,Terima kasih.
Untuk yang bullet & numbering, ini bisa juga dilakukan :
contohnya seperti ini :
Bullet saja :
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
Hasilnya seperti ini :
Bullet yang menjorok ke tengah :
<ul>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ul>
Hasilnya seperti ini :
- Sig in di blogger dengan id sobat
- Klik menu layout
- Klik menu Edit HTML
Yang memakai nomor :
<ol>
<li>Sig in di blogger dengan id sobat </li>
<br/>
<li>Klik menu layout </li>
<br/>
<li>Klik menu Edit HTML </li>
</ol>
Hasilnya seperti ini :
- Sig in di blogger dengan id sobat
- Klik menu layout
- Klik menu Edit HTML
Untuk warna :
<span style="color:kode warna">
tulisan yang mau di warnai
</span>
contoh untuk warna merah :
<span style="color:red">
ini contoh merah
</span>
hasilnya seperti ini :
ini contoh merah
atau bisa juga seperti ini :
<span style="color:#FD0303">
ini contoh merah
</span>
Hasilnya tetap sama :
ini contoh merah
untuk mengetahui kode warna sangat gampang, sobat bisa menggunakan bantuan program photosop, sobat tinggal sorot warna yg di kehendaki, nanti kode warnanya akan di tampilkan.
Kode-kode diatas tidak hanya berlaku pada postingan saja, akan tetapi berlaku juga pada edit HTML untuk kode template.
Saya kira cukup sekian dulu, kalau kepanjangan bosen bacanya kan ?
Selamat ngeblog buat semuanya !
Langganan:
Postingan (Atom)
