Mengatur teks dan gambar di Blog

Assalamu'alaikum warakhmatullahi wabarakatuh. Sahabat Bloggers yang dirakhmati Allah SWT, ada banyak cara untuk mengatur teks dan gambar dengan perataan dalam postingan Anda, berikut ini akan saya sampaikan cara mudah untuk mengatur pertaan tersebut yang fungsinya agar teks dan gambar dapat tampil dengan rapih sesuai kehendak Anda. Dasar tag atau sintaks perintah tersebut adalah "alignment" yaitu rata kiri (left), rata tengah (center), rata kanan (right) dan rata kanan-kiri (justify). Dapat juga diatur dengan model "float", tetapi dalam pembahasan kali ini saya akan menggunakan istilah "alignment" atau perataan dengan sintaks "div" "style" dan "align". Langsung saja pada cara menggunakan sintaks tersebut pada palikasi posting Anda sebagai berikut.

1. Perataan teks
1. Teks rata kiri (align left)


<div style="text-align:left;">Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal. Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.</div>


Hasilnya seperti berikut:

Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal.
Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.


2. Teks rata kanan (align right)


<div style="text-align:right;">Kedua hal ini tidak salah. Namun ada langkah penting dalam proses marketing yang perlu diingat dan dilakukan. Langkah ini merupakan bagian awal yang sangat mendasar saat seorang pebisnis hendak melakukan proses pemasaran.</div>


Hasilnya seperti berikut:

Kedua hal ini tidak salah. Namun ada langkah penting dalam proses marketing yang perlu diingat dan dilakukan.
Langkah ini merupakan bagian awal yang sangat mendasar saat seorang pebisnis hendak melakukan proses pemasaran.


3. Teks rata tengah (align center)


<div style="text-align:center;">Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal. Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.</div>


Hasilnya seperti berikut:

Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal.
Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.


4. Teks rata kanan dan kiri (align justify)


<div style="text-align:justify;">Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal. Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.</div>


Hasilnya seperti berikut:

Sering kali ketika seorang pebisnis hendak melakukan proses pemasaran produk atau jasa sebagai bagian dari marketing strategi, yang pertama kali terbayang biasanya ada dua hal. Pertama, mereka selalu mengatakan bahwa mereka tidak punya cukup anggaran atau dana promosi yang tersedia terbatas. Dan kedua, bagaimana agar promosi yang dilakukan bisa cukup mengena walau dana yang tersedia terbatas.


2. Perataan gambar (img)
1. Gambar rata kiri (align left)
   
   <div style="text-align:left;"><a href="http://www.FormulaBisnisClickBank.com/?id=Surya62" target="_blank"><img border="0" src="http://www.FormulaBisnisClickBank.com/images/fbcbanner468x60.gif" alt="Formula Bisnis ClickBank" width="468" height="60"></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
2. Gambar rata tengah (align center)
   
   <div style="text-align:center;"><a href="http://instanx.com/?id=Surya62" target="_blank"><img border="0" src="http://instanx.com/images/bn-ins.gif" alt="InstanX Bisnis Tanpa ribet" width="468" height="60"></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
3. Gambar rata kanan (align right)
   
   <div style="text-align:right;"><a href="http://www.syariahbisnis.com/?id=surya546" target="_blank"><img border="0" src="http://www.syariahbisnis.com/image/bisnis-online.gif" alt="Konten Islami terlengkap" width="468" height="60"></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
3. Perataan teks Model Blogspot
1. Teks rata kanan dan kiri (align justify)


<p class="MsoNormal" Style="text-align:justify;text-indent:0.5in;">Perataan teks model Blogspot ini adalah menggunakan jenis indentasi dengan asumsi jarak baris 0.5in dengan rata kanan dan rata kiri. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang dimana baris pertama menjorok kekanan.</p>


Hasilnya seperti berikut:


Perataan teks model Blogspot ini adalah menggunakan jenis indentasi dengan asumsi jarak baris 0.5in dengan rata kanan dan rata kiri. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang dimana baris pertama menjorok kekanan.



2. Teks rata kiri (align left)


<p class="MsoNormal" Style="text-align:left;padding=10px 10px 10px 20px;">Perataan teks model Blogspot rata kiri ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.</p>


Hasilnya seperti berikut:


Perataan teks model Blogspot rata kiri ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.



3. Teks rata kanan (align right)


<p class="MsoNormal" Style="text-align:right;padding=10px 10px 10px 20px;">Perataan teks model Blogspot rata kanan ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.</p>


Hasilnya seperti berikut:


Perataan teks model Blogspot rata kanan ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.



4. Teks rata tengah (align center)


<p class="MsoNormal" Style="text-align:center;padding=10px 10px 10px 20px;">Perataan teks model Blogspot rata tengah ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.</p>


Hasilnya seperti berikut:


Perataan teks model Blogspot rata tengah ini adalah menggunakan jenis padding dengan asumsi jarak dari tepi baris atas 10px, kanan 10px, bawah 10px dan kiri 20px. Mode ini khusus untuk membuat teks dalam sebuah paragraf sehingga nampak lebih tertata rapih dan sedap dipandang baik dari jarak pinggir kiri, kanan, atas dan bawah.



4. Perataan Gambar Model Blogspot
1. Gambar rata kanan (align right)
   
   <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1CNrZShNeykmM_jQBT_TuvVNPX0x3e9HRBBLSpdVw9kzoXemqXRwUzaqXduFBors23silQuA59-9ld-kPR7n4MChIVXFvzV3D69kE3p2IL5KcIeIR2DEbDIjqKHqwxsRopYOlfnP0PI/s1600/googledrive1.png" imageanchor="1" style="clear:right; float:right; margin-left:1em; margin-bottom:1em"><img border="0" height="114" width="115" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1CNrZShNeykmM_jQBT_TuvVNPX0x3e9HRBBLSpdVw9kzoXemqXRwUzaqXduFBors23silQuA59-9ld-kPR7n4MChIVXFvzV3D69kE3p2IL5KcIeIR2DEbDIjqKHqwxsRopYOlfnP0PI/s320/googledrive1.png" /></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
   
   
   
   
   
   
   
2. Gambar rata tengah (align center)
   
   <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahpsHeq_0MYdwMkOSz0S7YB1oK5sgvX3cKGelRGcQ8SJVaPOvs51UTd4k6VxQJNPhlk4FD_cIpXqfPa0wcGQIhK8hNxP2S4DBumVLUemmdsTkMVUTj7rJTNCIFetgxKuFv1FGh3NrupU/s1600/googledrive2.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="31" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiahpsHeq_0MYdwMkOSz0S7YB1oK5sgvX3cKGelRGcQ8SJVaPOvs51UTd4k6VxQJNPhlk4FD_cIpXqfPa0wcGQIhK8hNxP2S4DBumVLUemmdsTkMVUTj7rJTNCIFetgxKuFv1FGh3NrupU/s200/googledrive2.png" /></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
3. Gambar rata kiri (align left)
   
   <div class="separator" style="clear: both; text-align: center;"> <a href="http://s.myniceprofile.com/myspacepic/535/th/53581.gif" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="100" width="75" src="http://s.myniceprofile.com/myspacepic/535/th/53581.gif" /></a></div>

   
   Hasilnya seperti berikut:
   
   
   
   
   
   
   
   




5. Perataan Gambar Model Info Toko Surya


<div style="text-align:center;"> <table><tr><td> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFYgrUJnGF0JuJTa34UK-92BHlagBPvcnoHsfm-9XKJwFlC6nFwhiRZtUK8UjXa3PqohCYOvOEqYmabcZcHcjnV6RfgBIpmGhGzo9aUGv1ICWk8riel1RwqVKUfWkYnt4XH2_CIUG8O0/s1600/googledrive5.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="99" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJFYgrUJnGF0JuJTa34UK-92BHlagBPvcnoHsfm-9XKJwFlC6nFwhiRZtUK8UjXa3PqohCYOvOEqYmabcZcHcjnV6RfgBIpmGhGzo9aUGv1ICWk8riel1RwqVKUfWkYnt4XH2_CIUG8O0/s200/googledrive5.png" /></a><br/>Gambar satu<br/></td> <td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxzbXpTC1Hu-nnoWAlWwTj1fUz-C42EHIymvhjZk7sS5nVA0MB_WrDHA60vUheNOSUmBh-Vh-yFmXlFOaYLkBYzm4v9qA7Sh2BBhUM1KMLJ90A3yO09sa2ssm7GIiBY1rDSgjYDAwiHSU/s1600/googledrive4.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="99" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxzbXpTC1Hu-nnoWAlWwTj1fUz-C42EHIymvhjZk7sS5nVA0MB_WrDHA60vUheNOSUmBh-Vh-yFmXlFOaYLkBYzm4v9qA7Sh2BBhUM1KMLJ90A3yO09sa2ssm7GIiBY1rDSgjYDAwiHSU/s200/googledrive4.png" /></a><br/>Gambar dua<br/></td></tr> <tr><td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6vaSK8zNYuJy0UMPthEh3rSfkuggLNvXjB92vvCRLkPBLMRNIpHpF6CcTOCzvwtj2TyInpvsfzEAtqa6fSXHY3luvbzDknwLeOSM3-nHPFQw3u5pcn3YW1DRFv2yUROk3tLt5VhXSLg/s1600/googledrive6.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="64" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH6vaSK8zNYuJy0UMPthEh3rSfkuggLNvXjB92vvCRLkPBLMRNIpHpF6CcTOCzvwtj2TyInpvsfzEAtqa6fSXHY3luvbzDknwLeOSM3-nHPFQw3u5pcn3YW1DRFv2yUROk3tLt5VhXSLg/s200/googledrive6.png" /></a><br/>Gambar tiga<br/></td> <td><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNOYJ9g-_XK71PsfiM3CYXDwS6jRsP7Dh5k1QEH7RRXCiDkd2hIfk2z3MLywt6az7LDdFVq36rJ66sABadW8WLtu1QJNXoII0oElMpHscBtvECTn1EoFCWOakPt9BntSJdZ7IPnj7438/s1600/gogledrive6.png" imageanchor="1" style="margin-left:1em; margin-right:1em"><img border="0" height="64" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiNOYJ9g-_XK71PsfiM3CYXDwS6jRsP7Dh5k1QEH7RRXCiDkd2hIfk2z3MLywt6az7LDdFVq36rJ66sABadW8WLtu1QJNXoII0oElMpHscBtvECTn1EoFCWOakPt9BntSJdZ7IPnj7438/s320/gogledrive6.png" /></a><br/>Gambar empat<br/></td></tr></table></div>


Hasilnya seperti berikut:


Gambar satu	Gambar dua
Gambar tiga	Gambar empat

Demikian konten saya kali ini semoga bermanfaat dan semoga Sukses !!! Terima kasih atas kunjungannya dan berikan koment yang terbaik agar kita dapat lebih meningkatkan persahabatan.
Wassalamu'alaikum wa Rakhmatullahi wa Barakatuh.

Bergabunglah untuk cari uang tak berbelit-belit!

Bisnis terpercaya di Joko Susilo.com dan Stop Dreaming in action Info Toko Surya62. Bisnis spektakuler Best Marketing place, Konten Islami, Bisnis click-bank, Balkblakan Marketing Online, Smart Machine System V 2.0, submit terbaik, MobiGarda-Iphone. Mari cari Uang di Internet bersama dengan klik berikut ini di Info Toko Surya62

Anda tertarik dengan tulisan ini? silahkan saya tunggu "review saya disini" dan saya akan review balik jika Anda menyertakan alamat lengkapnya, trims.