Dijual Rumah Nyaman di Daerah Ciwastra Kota Bandung



Klik gambar untuk info lebih lanjut
Luas Bangunan: 110 m2

Lokasi rumah ini sangat Strategis.
Sertifikat dan pemilik atas nama pengiklan.
Sertifikat ada dan SHM
 

Harga Rp. 600.000.000 (nego)

Luas Tanah: 140 m2
Luas Bangunan: 110 m2
Kamar Tidur: 3
Kamar Mandi: 2
Carport: 1
Garasi : 1
Listrik: 1300 Watt

Lokasi rumah ini sangat Strategis.
Sertifikat dan pemilik atas nama pengiklan.
Sertifikat ada dan SHM
Air tanah sangat bening tidak berbau layak minum,
suasana rumah adem, asri, sepi dari hiruk pikuk kendaraan, ada pohon anggur, mangga, sirih merah dan tanaman lain.
Jalan cor beton, Bebas banjir dan sangat layak huni.
Nego sampai sepakat. Hubungi via WA setiap saat.http://olx.co.id/iklan/rumah-adem-asri-di-komplek-pasir-pogor-ciwastra-kota-bandung-IDl0XEC.html#21ac5e70aa

Cara Membuat Related Post / Artikel Terkait Di Dalam Postingan Blogspot

Pada kesempatan ini saya akan share pada anda tercinta tentang tutorial yang sangat bagus untuk kemajuan blog anda dan nantinya akan mendatangkan pengunjung untuk berlama-lama di blog anda. Tutorial yang akan saya bahas yaitu tentang membuat artikel terkait / related post di blog. Tapi pada tutorial tersebut agak berbeda pada dari yang lain. Related post / artikel terkait yang biasa dipakai oleh blogger atau dijumpai pada blog-blog orang lain, biasanya ditempatkan di bawah posting atau pada sidebar.

Pada topik cara memasang related post / artikel terkait pada blogger yang saya sajikan untuk anda yaitu related post berada di dalam artikel blog. Nah tentunya dengan penampilan yang bisa dikatakan baru ini, akan mempermudah dilihat oleh pengunjung untuk mencari artikel yang akan mereka cari / dibaca. Di bawah ini contoh tampilan Related Post / artikel terkait di lokasi postingan. Nah, saya mulai sekarang cara membuatnya :

Berikut langkah-langkah cara bikin related post di dalam artikel blogspot :

1. Masuk ke Dasboard
2. Pada menu Design => Edit Html
3. Backup dulu template anda => centeng Expand widget template
4. Cari kode </head> dan letakkan kode script dibawah ini di atas kode </head>

<script type='text/javascript'>

//&lt;![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i &lt; json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k &lt; entry.link.length; k++) {

if (entry.link[k].rel == &#39;alternate&#39;) {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;
}
}
}
}
function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i &lt; relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];

}

}

relatedTitles = tmp2;

relatedUrls = tmp;

}

function contains(a, e) {

for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;

return false;

}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;



while (i &lt; relatedTitles.length &amp;&amp; i &lt; 20) {

document.write(&#39;&lt;li&gt;&lt;a 
href=&quot;&#39; + relatedUrls[r] + 
&#39;&quot;&gt;&#39; + relatedTitles[r] + 
&#39;&lt;/a&gt;&lt;/li&gt;&#39;);

if (r &lt; relatedTitles.length - 1) {

r++;
} else {
r = 0;
}
i++;

}
}

//]]&gt;

</script>
5. Kemudian cari kode <div class='entry entry-content'>
6. Lalu copy kode di bawah ini dan letakkan di bawah kode <div class='entry entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;'>
<div class='related-posts'>
<p>Related posts:</p>
<ol>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</ol>
</div>
</div>
</b:if>
7. Selesai, simpan template anda

Nah sekarang anda sudah punya Related post / artikel terkait pada blog anda, tapi untuk tampil lebih keren dan lebih menarik, saya akan beri tambahan sedikit sentuhan kode css,caranya yaitu :

- Cari kode ]]></b:skin>
- Lalu copy kode dibawah ini dan letakkan sebelum kode ]]></b:skin>

.related-posts {
border:1px solid #ddd;
background:#D8DFEA;
font-weight:bold;
width: 80%;
float:right;
}
.related-posts p {
margin:5px 10px 5px;
}
.related-posts ol {
font-weight:normal;
margin:0 0 0 25px;
}
.related-posts li {
margin-bottom: 2px;
}
selamat mencoba.



copas dari:
http://anaktimor-17.blogspot.com

Membuat Related Post di Sisi Kiri/Kanan Blog

Alangkah bagusnya kalau related post berada tepat di bawah judul blog, di sisi kanan atau kiri postingan seperti yang bisa kita lihat di situs berita Kompas.com. Setelah cari-cari kesana kemari akhirnya ketemu juga solusinya.

Prinsip dasarnya sebenarnya sederhana,

Pertama, memasang related post yang biasa dilakukan oleh para blogger pemula seperti saya di bawah postingan, (dalam hal ini saya ambil turornya dari blog bdigg.blogspot.com

Kedua, memindahkan related post yang sudah terpasang ke sisi kanan/kiri tulisan di bawah judul blog (dalam hal ini saya ambil tutornya dari blog lostsector.blogspot.com

Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut:
1.Log in ke akun Blogger
2.Klik Template
3.Edit Html » Centang kotak Expand template widget.
4.Cari kode </head> (gunakan CTRL + F). Kemudian letakkan kode berikut tepat diatas kode  </head>

<style> #related-posts { float : left; width : 300px; margin-top:2px; margin-left : 5px; margin-bottom:20px; font : 11px Arial;  color:#FF0080;margin-bottom:5px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { color:#116f9e;text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://4.bp.blogspot.com/-W-cSsHwgVRw/UMJ8xiVxYBI/AAAAAAAACFE/Z7-313ShTRw/s320/titik.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yudatfort.googlecode.com/files/related%20posts%20b-digg.js' type='text/javascript'/>

5.Sekarang cari kode  <div class='post-body entry-content'> atau  <div class='post-header-line-1'/>

 Kemudian letakkan kode di bawah ini tepat di bawah kode tadi.

<div style='float:left; margin : 0px 10px 0px 0px'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='2'><b> TERKAIT : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
</div>

Kode Warna merah tersebut adalah perintah untuk menempatkannya di sisi kiri atau kanan. Untuk memindahkan ke kanan tinggal ganti float:left menjadi float:right

6. Save

Note: Untuk ukuran lebarnya bisa diatur sendiri dengan mengganti kode berwarna pink yang berada diatas kode </head>

Selamat mencoba

copas dari
http://jusmanonline.blogspot.com

Membuat daftar isi pada widget / sidebar blog

Karena masih banyak orang mengeluhkan bagaimana cara membuat daftar isi pada widget atau sidebar secara sederhana dan mudah dimengerti pemula (newbie), namun tidak muncul pada widget atau beberapa saat kemudian Daftar Isi-nya jadi kosong alias tidak amapu mengakses isi blog kita.

Biasanya sang pemula, hanya bersifat co-pas, padahal widget tersebut menggunakan java script orang lain, maka jika suatu ketika blog orang tersebut terkena suspend atau java script-nya dihapus atau rusak, maka dengan sendirinya Daftar Isi kita tidak mampu membaca lagi hasil postingan kita.

Kali ini saya akan memberikan beberapa macam java script Daftar Isi, silahkan dicoba satu persatu, dan pilih mana yang dirasa paling sesuai.


DAFTAR ISI vers-1
  1. Log in ke akun blog sobat.
  2. Pada dashboard blogger, klik Tata Letak (layout).
  3. klik Tambah gadget (add gadget) --> HTML/Javascript
  4. Silakan beri judul pada widget.
  5. Copy dan pastekan html - script dibawah ini ke dalam kotak javascript.

Catatan: Jika sudah ada widget terdahulu namun daftar isi-nya tidak muncul, tinggal klik saja gadget tersebut, lalu hapus script/html yang lama dan pastekan dengan html yang anda pilih


<div style="background:#FFFFFF; no-repeat scroll 0 0; border:1px solid #272622color:##110B26; height:400px; overflow:auto; padding:10px; width:100%;">
<div id="cl_option">
Loading... </div>
<div id="cl_content_list">
</div>
<script type="text/javascript">
var jumlah_kata_dalam_ringkasan = 200;
</script>
<script src="http://tateluproject.googlecode.com/files/DaftarMenuOtomatis.js">
</script>
<script src="http://colomero.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=999">
</script></div>
Ket:
  • Background:#FFFFFF; border:2px solid #272622adalah warna yang bisa diganti disesuaikan dengan blog anda
  • height:400px; dan width:260px; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6. Lalu save atau simpan.



DAFTAR ISI vers-2

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

 <div style="background-color: transparent; border: 1px solid #ACC3E2; height: 300pxwidth: 100%;overflow: auto; ">
<script src="http://sites.google.com/site/itinformationclub/daftar_isi.js"></script>
<script> var numposts = 1000; var showpostdate = false; var showpostsummary = false; var numchars = 100; var standardstyling = true; </script>
<script src="
"http://nugarro.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;max-results=999&amp;callback=showrecentposts"></script>
</div>

Ket:
  • Background-color: transparentborder:2px solid #272622adalah warna yang bisa diganti disesuaikan dengan warna blog anda
  • height: 300px; dan width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://nugarro.blogspot.com/ silahkan ganti dengan url blog anda.
6. Lalu save atau simpan.



DAFTAR ISI vers-3

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #cccccc;  margin: auto; overflow: auto; padding: 3px; text-align: left; height: 400px;width: 100%;">
<div align="center">
<span style="font-size: medium;">Myblog Contents</span></div>
<script src="http://julak-project.googlecode.com/files/dafisiscroll%20.js">

</script><script src="http://colomero.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>

Ket:
  • border: 1px solid #ccccccadalah warna yang bisa diganti disesuaikan dengan blog anda
  • height: 400px;width: 100%; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Myblog Contents bisa diganti sesukanya
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6 . Lalu save atau simpan.



DAFTAR ISI vers-4

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="overflow:auto;height:250px;padding:10px;border:1px solid #eee"><script src="https://html-scripts.googlecode.com/files/feeds.js"></script>
<script src="http://eppoh.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>

</div>

  • Ganti Alamat eppoh.blogspot.com dengan url / alamat blog anda.
  • Ganti https://html-scripts.googlecode.com/files/feeds.js dengan kode daftar isi dibawah ini :
    1. Berdasarkan Label :
      https://html-scripts.googlecode.com/files/feeds-labels.js
    2. Berdasarkan Tanggal :
      https://html-scripts.googlecode.com/files/feed-dates.js
    3. Berdasarkan Artikel terbaru :
      https://html-scripts.googlecode.com/files/feeds.js

6. Klik tombol SAVE. Lalu lihat hasilnya di Blog.



DAFTAR ISI vers-5

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/blogger-toc-with-pagination_default-theme.css" type="text/css" />
<script type="text/javascript">
var showPostDate   = true,
    showComments   = true,
    idMode         = true,
    sortByLabel    = false,
    labelSorter    = "JQuery",
    loadingText    = "Loading...",
    totalPostLabel = "Jumlah posting:",
    jumpPageLabel  = "Halaman",
    commentsLabel  = "Komentar",
    rmoreText      = "Selengkapnya &#9658;",
    prevText       = "Sebelumnya",
    nextText       = "Berikutnya",
    siteUrl        = "http://nama_blog.blogspot.com",
    postsPerPage   = 10,
    numChars       = 370,
    imgBlank       = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/blogger-archive-with-pagination.js"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pengaturan

OpsiNilaiKeterangan
showPostDatetrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan bulan terbit artikel.
false
showCommentstrueGanti nilainya menjadi false jika Anda tidak ingin menampilkan jumlah komentar pada artikel.
false
idModetrueJika bernilai true, sistem penaggalan artikel akan menjadi berbahasa Indonesia. Jika bernilai false sistem penanggalan artikel akan berubah menjadi berbahasa Inggris.
false
sortByLabeltrueDigunakan untuk memfilter artikel/posting. Jika ingin menampilkan posting dengan kategori tertentu saja, pilihlah nilai true. Setelah itu tentukan nama label pada variabel labelSorter.
false
labelSorter"JavaScript", "Widget", ... (nama label)Tentukan nama label jika opsi sortByLabel bernilai true.
totalPostLabel"Jumlah posting:", ... (teks)Tentukan keterangan jumlah posting (yang di bawah navigasi).
jumpPageLabel"Halaman", ... (teks)Tentukan keterangan lompatan posting (yang di bawah navigasi).
commentsLabel"Komentar", "Comments", ... (teks)Digunakan untuk menentukan label jumlah komentar (contoh: 10 Komentar).
rmoreText"Baca Selengkapnya", "Read More", ... (teks)Digunakan untuk menentukan label link menuju posting asli.
prevText"Sebelumnya", "Previous", ... (teks)Digunakan untuk menentukan label navigasi mundur.
nextText"Berikutnya", "Next", ... (teks)Digunakan untuk menentukan label navigasi maju.
siteUrl(URL Blog)Ganti URL ini dengan URL blog Anda.
postsPerPage10, 30, ... (numerik)Digunakan untuk menentukan jumlah posting yang tampil pada satu halaman.
numChars100, 200, ... (numerik)Digunakan untuk menentukan jumlah karakter ringkasan posting.
imgBlankno-image.jpg (URL Gambar)Gambar cadangan jika posting yang tampil tidak memiliki gambar.



DAFTAR ISI vers-6

Lakukan no. 1 s/d 5 seperti cara Daftar Isi vers-1, lalu:

<div style="border: 1px solid #000000height : 350px; overflow : auto; padding : 5px; width: auto;"> <script src="https://sites.google.com/site/dhany99487/widget/daftar isi otomatis.js"></script> <script src="http://colomero.blogspot.com/feeds/posts/default?max-results=999&amp;alt=json-in-script&amp;callback=loadtoc"></script> </div>

Ket:
  • border: 1px solid #cccccc; adalah warna garis tepi bisa diganti disesuaikan dengan blog anda
  • height : 350px dan width: auto; adalah tinggi dan lebar widget - bisa diganti disesuaikan dengan tinggi dan lebar sidebar blog anda
  • Url ini : "http://colomero.blogspot.com/ silahkan ganti dengan url blog anda.
6 . Lalu save atau simpan.


sumber:
dte.web.id
eppoh.net
emmahandoko.com






Arti Kode html

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:
Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :
Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :
Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4<sub>2</sub></p>hasilnya seperti ini:
42

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:
  • DOT 1
  • DOT 2
  • DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:
Belajar

Membuat tabel border solid gunakan kode:
<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>
hasilnya seperti :
Text


Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text


Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text


Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text


Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text


Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text


Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:
Text


Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:
Text


Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :
Text


Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:
Text


Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)



sumber

http://artikodehtml.blogspot.com/

Apa itu HTML dan CSS

Apa itu HTML dan CSS

Berhubung aku selalu menuliskan tentang tutorial blog, jadi biar aku menjelaskan tentang apa arti HTML dan CSS sambil aku juga belajar sendiri hehehe....ok deh langsung saja ya xD.

Arti HTML adalah:
  • HTML itu singkatan dari Hyper Text Markup Language
  • Hyper: adalah kebalikan dari kata linear, linear adalah bahasa pemrograman, linear ''urutan tertentu'' dengan menggunakan Hyper jadi user bisa menghasilkan sebuah website dan user juga bisa mengunjungi sebuah website setiap saat.
  • Text: dalam kata html ini hanya tersedia dalam bahasa Inggris, atau teks html saat ini hanya ada dalam bahasa Inggris.
  • Markup: artinya apa yang dilakukan terhadap teks untuk merubah penampilan. Markup terdiri dari satu set simbul atau bahasa yang digunakan untuk memberi petunjuk dengan menggunakan kode-kode atau bahasa dalam spesifikasi tertentu contohnya: <b> </b> <h1> <p> </p> <ul> </ul> etc. Jadi dengan menggunakan markup maka teks akan bisa diatur dengan menggunakan jenis huruf yang tepat misalnya ukuran tinggi/height,  lebar/weight, atau ukuran/tanda yang lain.
  • Language: bahasa dalam html adalah bahasa yang dibaca oleh komputer untuk memahami sebuah web.

Itulah arti HTML aku sudah tuliskan di atas dan orang yang ingin mengetahui lebih jauh tentang html jadi harus siap-siap punya minat coding xD. Dan sekarang juga banyak tehnik belajar HTML secara online yang free atau gratis. Memang untuk mendirikan sebuah web atau blog tidak ada keharusan untuk memahami HTML tapi untuk orang yang ingin/suka mendirikan/menghasilkan sebuah website apabila tahu dan memahami bagaimana html bekerja pasti itu akan sangat membantu sekali.
Apa itu CSS/Cascading Style Sheets:
  • CSS singkatan dari Cascading Style Sheets yang sebenarnya pada awal aku menuliskan tutorial juga sudah sedikit menjelaskan tentang arti CSS.
  • CSS kalau dihubungkan dengan HTML adalah struktur yang menentukan penampilan konten sebuah website.
  • Kebaikan utama dari CSS adalah lebih markup dari segi HTML, CSS bisa mengontrol bagaimana sebuah blog/website ditampilkan misalnya gambar, ukuran/size, dll.
  • Menghapus semua presentasional markup dari halaman web akan bisa mendukung penggunaan CSS, juga bisa mengurangi ukuran dan penggunaan bandwidth lebih dari 50% dalam banyak kasus yang terdokumentasi. 
  • Dengan melalui bandwidth yang lebih rendah ini adalah keuntungan dari pemilik situs yang berpengaruh terhadap biaya penyimpanan, pengunjung situs, halaman web dengan loading/muatan menjadi lebih cepat.
  • Penghematan keseluruhan bandwidth bisa terukur karena style sheet adalah cache bisa kita tentukan sendiri  dan dapat digunakan kembali untuk setiap halaman di situs, tidak harus didownload dengan setiap halaman web.
  • Kita tidak perlu lagi membuat versi khusus dari setiap halaman untuk menampilkan website kita, tapi hanya perlu membuat style sheet tunggal untuk mengontrol bagaimana setiap halaman di situs tersebut akan dibentuk, dihias, di design.
Itulah penjelasanku tentang arti HTML dan CSS seperti yang aku ketahui dan yang ingin mengetahui tentang coding, isi sebuah website menurutku memang harus bisa membedakan dan juga mengetahui mana yang HTML, CSS, dan Javascript.
 
 sumber
 
 

Cara Membuat Related Post di Bawah Postingan

Beberapa kali saya memposting  Cara Membuat Related Post di Bawah Postingan tapi setelah beberapa lama kemudian ternyata no work atau tidak tampil dibawah postingan, membuat lumayan sebel, ini akibatkita selalu menumpang padajava script orang lain. tapi sekarang saya posting lagi dan masih menempel pada oranmg lain.

Dan ternyata blogger telah merubah cara penyimpanan htmlnya sehingga kita perlu lagi belajar bagaimana mencari salah satu kode html yang kita inginkan,karena pada cara baru ini meskipun kita menggunakan  (Gunakan Ctrl+F untuk mempermudah pencarian) belum tentu ketemu.

Namun jika template blog anda sudah menyajikan Related Post, abaikan saja ini). Sekedar berbagi saja untuk kawan-kawan.

Cara Membuat Related Post di Bawah Postingan
  1. Bukalah akun blogger anda dengan tenang dan damai sejahtera.
  2. Pilihlah Elemen Template. Lalu Pilit Edit HTML, jangan lupa centang Expand Template Widget
  3. Carilah kode </head> (Gunakan Ctrl+F untuk mempermudah pencarian), setelah anda menemukannya, letakkanlah kode javascript di bawah ini (Copy) persis di atas kode </head> tadi (Pastekan)

    <style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin: 10px; padding : 0; } #related-posts ul li { display : block; background : url("http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yourjavascript.com/11631137121/related_post_pelajaran_blog.js' type='text/javascript'/>
  4. Aplagi cara no 3 diatas sudah anda lakukan, selanjutnya cari lagi kode berikut: <data:post.body/>, Sudah ketemu belum kode itu, kalau sudah ketemu, letakkan lagi kode di bawah ini (copy) tepat di bawah kode <data:post.body/> (pastekan)
    <br/><br/><b:if cond='data:blog.pageType == "item"'>
    <div id="related-posts"><font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font><script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script>
    </div></b:if>
  5. Setelah selesai, lalu simpan template blog anda.
  6. Lihat hasilnya seperti apa.

Catatan :
Kode <data:post.body/> mungkin anda akan temukan banyak, pilih saja satu, tidak apa-apa kok anda coba-coba yang penting anda faham.

sumber
bos-tutorial.blogspot.com

Pengertian Padding dan Margin Dalam Blog



Kali ini adalah pengertian dari masing-masing komponen :
  • Padding : digunakan untuk menentukan jarak komponen body ke bagian border atau ukuran jarak bagian dalam
  • Border : Garis Tepi Dari Sebuah Komponen (Content)
  • Margin : Ukuran Jarak Bagian Luar Atau Jarak Setelah Border.

Cara penggunaan :

Padding

Jadi bagaimana dengan padding? Nah, padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi/konten dari elemen yang ditargetkan. Jadi padding di bagian dalam kotak, bukan di luar.
Padding juga dapat dipahami sebagai "filling". Karena  padding tidak mempengaruhi jarak dari elemen ke elemen lainnya tetapi hanya mendefinisikan jarak inner antara tepi/border dan isi dari elemen. (lihat visual dibawah)


Dari gambar diatas dapat diartikan padding adalah ruang yang diatur antara border/tepi dengan isi / konten dari suatu elemen (dalam hal ini isi konten berupa text).
Serupa dengan margin, padding juga diatur menggunakan properti padding "shorthand"  dan juga dapat dilakukan dengan properti padding "longhand": padding-top, padding-right, padding-bottom, dan padding-left.

Contoh :
#element { padding: 10px; }/*padding untuk semua sisi sama 10px*/
#element { padding: 5px 10px 2px 4px; }/*padding: Top, Right, Bottom, Left*/ 
#element { padding-top: 10px; padding-right: 5px; padding-bottom: 5px; padding-left: 10px;} 

Pengertian dari properti padding sama dengan  margin, cuma kalau padding bersifat inside space dari suatu elemen yang diatur disekitar area konten. Penerapannya padding sering dijumpai  hampir disemua elemen, sebagai contoh pengggunaan padding pada heading (h1, h2, h3....) di postingan.

Contoh :
h1 { background: yellow;
padding: 20px 20px 20px 80px;}

h2 { background: orange;
padding-left:120px;}

Hasilnya pada postingan Anda akan seperti ini :

heading dan padding


Penulisan css untuk padding adalah padding:5px 5px 5px 5px; urutan penggunaan ukurannya adalah mulai dari yang paling depan yaitu atas, kanan bawah, kiri. Atau jika sobat ingin memecahnya menjadi bagian yang lebih spesifik yaitu :
  • Padding-top:5px; ~ digunakan untuk padding bagian atas
  • Padding-right:5px; ~ digunakan untuk padding bagian kanan
  • Padding-bottom:5px; ~ digunakan untuk padding bagian bawah
  • Padding-left:5px; ~ digunakan untuk padding bagian kiri

Margin

Margin (dalam pengertian CSS) adalah ruang disekitar elemen/konten. Margin akan membentuk daerah (ruang) vertikal dan horizontal antara elemen. Jika elemen/konten tidak memilki margin, maka elemen-elemen tersebut akan rapat bertemu terhadap satu sama lain. Agar margin bekerja dengan baik, elemen biasanya diikuti oleh posisi float atau diposisikan relative. Style ini sering diterapkan untuk dapat memindahkan elemen lain di sekitarnya.
Secara visual akan lebih mudah memahami definisi dari margin ini :

visualisasi pengertian margin

Margin dapat diatur menggunakan properti margin "shorthand" (yaitu istilah, yang mewakili empat nilai marjin untuk elemen) atau dengan penulisan stye "longhand". Untuk itu dibawah saya beri contoh beberapa penulisan margin dalam css.

Contoh penulisan margin pada suatu elemen ("shorthand")

#element { margin: 10px;}
Ini berarti elemen memilki margin yang sama "10px" untuk setiap sisi elemen

#element { margin: 10px 20px; }
Ini berarti elemen memiliki:
-margin-top, margin-bottom : "10px"
-margin-left, margin-right : "20px"

#element { margin: 10px 20px 5px 15px; }
Elemen ini memiliki -margin-top : 10px, margin-right: 20px,  margin-bottom : 5px, margin-left: 15px

Berikut penulisan margin style "longhand":
#element { margin-top: 10px; margin-right: 5px; margin-bottom: 5px; margin-left: 10px;}
 Penulisan css untuk margin adalah margin:5px 5px 5px 5px; urutan penggunaan ukurannya adalah mulai dari yang paling depan yaitu atas, kanan bawah, kiri. Atau jika sobat ingin memecahnya menjadi bagian yang lebih spesifik yaitu :
  • Margin-top:5px; ~ digunakan untuk margin bagian atas
  • Margin-right:5px; ~ digunakan untuk margin bagian kanan
  • Margin-bottom:5px; ~ digunakan untuk margin bagian bawah
  • Marg-left:5px; ~ digunakan untuk margin bagian kiri

Border

Apa arti Border? Border/garis tepi dapat digunakan untuk banyak hal, misalnya sebagai elemen dekoratif atau untuk memberi garis batas pemisah dari dua hal. Border properti mendefinisikan width, color, and style dari batas area pada box/kotak.

CSS memberi Anda pilihan dalam menggunakan border antara lain :

  • border-style
  • border-width
  • border-color
  • border-individual
Border Style

Properti border-style untuk menentukan bentuk (style) dari tampilan border.
Tak satu pun dari properti border memiliki efek APAPUN kecuali telah menempatkan properti border-style dahulu!

Ada 9 type border-style values yang umum digunakan dalam CSS :
  1. None : mendefinisikan tidak ada border
    border style

  2. Dotted : berarti border berupa dot (titik)
    Dotted

  3. Dashed : border berupa dashed (garis putus-putus)
    Dashed

  4. Solid : border yang solid
    Solid

  5. Double : mendefinisikan double border. Lebar double border adalah sama dengan nilai border-width
     Double

  6. Groove : mendefinisikan sebuah border groove (beralur) 3D. Efeknya tergantung pada nilai border-color
    Groove

  7. Ridge: mendefinisikan sebuah border bergerigi (ridge) 3D. Efeknya tergantung pada nilai border-color
     Ridge


  8. Inset: mendefinisikan sebuah border inset 3D. Efeknya tergantung pada nilai border-color


  9. Outset : mendefinisikan sebuah border outset 3D. Efeknya tergantung pada nilai border-color
    Outset

Border Width

Properti border-width digunakan untuk mengatur lebar border/garis tepi. Border diatur dalam pixel, atau dengan menggunakan salah satu dari tiga nilai yang telah ditentukan : thin, medium, dan thick.

Border Width
ukuran border dalam pixel dan value thin, medium, thick

Contoh :
p{ border-style:solid; border-width:5px; }
p{ border-style:solid; border-width:medium; }
p{ border-style:solid; border-width:1px; }

Border Color Properti border-color mendefinisikan warna yang dimiliki oleh border. Nilai-nilai yang normal penggunaan nilai warna misalnya: hex "# 123456", rgb "(123.123.123)" atau "blue". Anda juga dapat mengatur warna border menjadi "transparent".

chart warna hex

Contoh :




Border - Individual sides Dalam CSS Anda bisa juga menentukan border yang berbeda pada tiap sisi:



Penulisan css untuk margin adalah margin:5px 5px 5px 5px; urutan penggunaan ukurannya adalah mulai dari yang paling depan yaitu atas, kanan bawah, kiri. Atau jika sobat ingin memecahnya menjadi bagian yang lebih spesifik yaitu :
  • Margin-top:5px; ~ digunakan untuk margin bagian atas
  • Margin-right:5px; ~ digunakan untuk margin bagian kanan
  • Margin-bottom:5px; ~ digunakan untuk margin bagian bawah
  • Marg-left:5px; ~ digunakan untuk margin bagian kiri
Macam-macam satuan dalam CSS Satuan dalam CSS dikelompokkan menjadi 2bagian yaitu:
  • Statik
    • % ~ Satuan Persen em ~ Satuan em / ems (1em = Ukuran Font Yang Tengah Dalam Elemen)
    • ex ~ Satuan X-Height Suatu Font (X-Height Biasanya Setengah Dari Ukuran Dasar Font)

  • Relatif
    • in ~ Satuan Inchi
    • cm ~ Satuan Centimeter
    • mm ~ Satuan Milimeter
    • pt ~ Satuan Point (1 Point = 1/72 Inchi)
    • pc ~ Satu Pica (1 Pica = 12 Point)
    • px ~ Satuan Pixel (Titik Terkecil Dalam Visual PC)

Sumber:
problogiz.blogspot.com