Tag dasar HTML buat pemformatan teks

Sudah gak asing lagi kayaknya bagi para bloger dengan kata HTML(HyperText Markup Language).Cuma mungkin masih banyak juga yang masih bingung cara penerapannya dilapangan atau pada prakteknya langsung,termasuk saya juga masih bingung hehehe.
Bagi yang pengen tahu HTML secara lengkap silahkan ke sini,karna tutorial blog pada kesempatan kali ini hanya akan membahas tag dasar HTML buat pemformatan teks yang sering digunakan dalam membuat artikel diblog agar terlihat rapi sesuai dengan apa yang kita inginkan.

---

Membuat garis baru:
tag: <br/>
Contoh: percobaan<br/>percobaan<br/>percobaan
Hasilnya:
percobaan
percobaan
percobaan

---

Membuat huruf tebal:
Tag: <b></b>
Contoh: <b>percobaan</b>
Hasilnya: percobaan

---

Membuat huruf miring:
Tag: <i></i>
Contoh: <i>percobaan</i>
Hasilnya: percobaan

---

Membuat garis bawah:
Tag: <u></u>
Contoh: <u>percobaan</u>
Hasilnya: percobaan

---

Membuat align center:
Tag: <p></p>
Atribut: align
Contoh: <p align='center'>percobaan</p>
Hasilnya:

percobaan

---

Membuat align left:
Tag: <p></p>
Atribut: align
Contoh: <p align='left'>percobaan</p>
Hasilnya:

percobaan

---

Membuat align right:
Tag: <p></p>
Atribut: align
Contoh: <p align='right'>percobaan</p>
Hasilnya:

percobaan

---

Membuat teks berwarna
Tag: <span></span>
Atribut: style
Contoh: <span style='color:red;'>percobaan</span>
Hasilnya: percobaan

---

Membuat lis dengan angka:
Tag: <ol></ol> dan <li></li>
Contoh: <ol><li>percobaan</li><li>percobaan</li><li>percobaan</li></ol>
Hasilnya:

1. percobaan
2. percobaan
3. percobaan

---

Membuat lis tanpa angka:
Tag: <ul></ul> dan <li></li>
Contoh: <ul><li>percobaan</li><li>percobaan</li><li>percobaan</li></ul>
Hasilnya:

• percobaan
• percobaan
• percobaan

---

Cukup sampai disini dulu tutorial blog kali ini,walaupun cuma sedikit,mudah-mudahan bermanfaat.

Readmore →

Kode HTML warna

Dalam hal warna-mewarnai pada sebuah tampilan blog atau web sangat penting sekali agar terlihat menarik,atau bahkan dalam membuat sebuah artikel,misalnya kita akan menandai sebuah kalimat yang penting untuk diperhatikan oleh pembaca,maka kalimat tersebut kita kasih warna yang spesial yang berbeda dengan warna teks lainnya.
Maka dari itu disini tutorial blog akan menyajikan kode HTML warna yang nantinya bisa sobat masukan kedalam script HTML/CSS sesuai selera dan kebutuhan.

#FFFFFF	#FFCCFF	#FF99FF
#FFFFCC	#FFCCCC	#FF99CC
#FFFF99	#FFCC99	#FF9999
#FFFF66	#FFCC66	#FF9966
#FFFF33	#FFCC33	#FF9933
#FFFF00	#FFCC00	#FF9900
#FF66FF	#FF33FF	#FF00FF
#FF66CC	#FF33CC	#FF00CC
#FF6699	#FF3399	#FF0099
#FF6666	#FF3366	#FF0066
#FF6633	#FF3333	#FF0033
#FF6600	#FF3300	#FF0000

#CCFFFF	#CCCCFF	#CC99FF
#CCFFCC	#CCCCCC	#CC99CC
#CCFF99	#CCCC99	#CC9999
#CCFF66	#CCCC66	#CC9966
#CCFF33	#CCCC33	#CC9933
#CCFF00	#CCCC00	#CC9900
#CC66FF	#CC33FF	#CC00FF
#CC66CC	#CC33CC	#CC00CC
#CC6699	#CC3399	#CC0099
#cc6666	#CC3366	#CC0066
#CC6633	#CC3333	#CC0033
#CC6600	#CC3300	#CC0000

#99FFFF	#99CCFF	#9999FF
#99FFCC	#99CCCC	#9999CC
#99FF99	#99CC99	#999999
#99FF66	#99CC66	#999966
#99FF33	#99CC33	#999933
#99FF00	#99CC00	#999900
#9966FF	#9933FF	#9900FF
#9966CC	#9933CC	#9900CC
#996699	#993399	#990099
#996666	#993366	#990066
#996633	#993333	#990033
#996600	#993300	#990000

#66FFFF	#66CCFF	#6699FF
#66FFCC	#66CCCC	#6699CC
#66FF99	#66CC99	#669999
#66FF66	#66CC66	#669966
#66FF33	#66CC33	#669933
#66FF00	#66CC00	#669900
#6666FF	#6633FF	#6600FF
#6666CC	#6633CC	#6600CC
#666699	#663399	#660099
#666666	#663366	#660066
#666633	#663333	#660033
#666600	#663300	#660000

#33FFFF	#33CCFF	#3399FF
#33FFCC	#33CCCC	#3399CC
#33FF99	#33CC99	#339999
#33FF66	#33CC66	#339966
#33FF33	#33CC33	#339933
#33FF00	#33CC00	#339900
#3366FF	#3333FF	#3300FF
#3366CC	#3333CC	#3300CC
#336699	#333399	#330099
#336666	#333366	#330066
#336633	#333333	#330033
#336600	#333300	#330000

#00FFFF	#00CCFF	#0099FF
#00FFCC	#00CCCC	#0099CC
#00FF99	#00CC99	#009999
#00FF66	#00CC66	#009966
#00FF33	#00CC33	#009933
#00FF00	#00CC00	#009900
#0066FF	#0033FF	#0000FF
#0066CC	#0033CC	#0000CC
#006699	#003399	#000099
#006666	#003366	#000066
#006633	#003333	#000033
#006600	#003300	#000000

Mungkin kode warna diatas kurang lengkap karna saking banyaknya warna,tapi mudah-mudahan bisa membantu bagi sobat yang sedang membutuhkan.


Diatas langit masih ada langit,jangan pernah membusungkan dada cuma hanya karna secuil ilmu yang kita miliki,tapi syukurilah.

Readmore →

Mengatasi warning pada Rich Snippets TestingTool

Disini saya hanya berbagi apa yang telah saya lakukan pada blog ini untuk Mengatasi warning pada Rich Snippets Testing Tool.
Saat blog ini dites strukturnya pada google webmaster muncul peringatan seperti ini:
Peringatan: Missing required field "updated"
Peringatan: Page contains property "image_url" which is not part of the schema.
Peringatan: Page contains property "blogid" which is not part of the schema.
Peringatan: Page contains property "postid" which is not part of the schema.
Setelah mondar-mandir ngebukain arsipnya om google ahirnya saya menemukan solusinya,dan saya kira ini adalah solusi terbaik untuk saya saat ini.
Sebelumnya saya ucapkan terimakasih kepada optimasi-blog.blogspot.com dan schema.org yang telah memberikan titik terang kepada saya.
Peringatan-peringatan diatas muncul akibat terjadi ketidaksesuaian struktur HTML template kita dengan aturan schema.org sebagai acuan.Untuk lebih jelasnya silahkan pelajari lagi tentang microdata dan microformat,karna sayapun belum begitu memahaminya.
Yang masih menjadi pertanyaan besar buat saya saat ini adalah,kenapa template default blogger pun masih terdapat pesan Peringatan saat dites pada rich snippets testing tool??,bagi yang mengetahuinya,tolong kasih tahu saya melalui komentar.
Sekarang kita masuk ke inti bahasan kita yaitu Mengatasi warning pada Rich Snippets Testing Tool

1. Menghilangkan Peringatan: Missing required field "updated"
   peringatan ini berhubungan dengan tanggal atau waktu saat mempublish artikel atau saat meng'updatenya,cara menghilangkanya yaitu:
   masuk blogger.com>>> template>>>backup template(buat jaga-jaga ketika terjadi kesalahan)>>>edit HTML>>>Centang expand widget template,
2. cari kode 'published' lengkapnya seperti ini:
   <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
3. tambahkan properti 'updated' pada properti 'published' sehingga menjadi seperti ini:
   <abbr class='updated published' expr:title='data:post.timestampISO8601' itemprop='datePublished'>
   
   Pada template saya ada dua script dan saya merubah keduanya.Untuk menghilangkan warning yang pertama udah selesai,terserah mau disave dulu atau dilanjut ketahap berikutnya.
4. menghilangkan Peringatan: Page contains property "image_url" which is not part of the schema.
   Peringatan ini muncul karna properti "image_url" bukan merupankan bagian dari properti schema.Secara kasarnya properti "image_url" tidak terdaftar pada schema.org.Maka kita harus mengganti properti tersebut dengan properti yang sesuai,dimana disini saya menggantinya dengan "thumbnailUrl".Untuk menggantinya sama saja seperti cara diatas yaitu masih dalam posisi 'edit HTML',
5. cari kode "image_url" detailnya seperti ini:
   <meta expr:content='data:post.firstImageUrl' itemprop='image_url'/>
   karna ditemplate saya ada dua script,ini script yang satunya lagi:
   <meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>
   kemudian keduanya saya ganti dengan 'thumbnailUrl'sehingga menjadi seperti ini:
   <meta expr:content='data:post.firstImageUrl' itemprop='thumbnailUrl'/>
   dan seperti ini:
   <meta expr:content='data:post.thumbnailUrl' itemprop='thumbnailUrl'/>
6. menghilangkan Peringatan: Page contains property "blogid" which is not part of the schema. dan Peringatan: Page contains property "postid" which is not part of the schema.
   Untuk menghilangkan kedua peringatan ini,kita akan melakukan pergantian properti dan pemindahan script.
   Perhatikan script dibawah ini:
   <meta expr:content='data:blog.blogId' itemprop='blogId'/> <meta expr:content='data:post.id' itemprop='postId'/>
   • ganti properti 'blogId' dan 'postId' dengan properti 'owns'
   • sehingga menjadi seperti ini:
     <meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/>
   • kemudian copy semua script tersebut pada notepad dan delete smua script aslinya karena kita akan melakukan pemindahan pada area < p o s t - f o o t e r > tepatnya pada kode p o s t - a u t h o r.
   • cari kode script <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> detailnya seperti dibawah ini:
     <div class='post-footer'> <div class='post-footer-line post-footer-line-1'><span class='post-author vcard'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <b:if cond='data:post.authorProfileUrl'> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <meta expr:content='data:post.authorProfileUrl' itemprop='url'/> <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'> <span itemprop='name'><data:post.author/></span> </a> </span> <b:else/> <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><meta expr:content='data:blog.blogId' itemprop='owns'/> <meta expr:content='data:post.id' itemprop='owns'/> <span itemprop='name'><data:post.author/></span> </span> </b:if> </b:if> </span>
     script yang berwarna biru adalah hasil paste dari script yang kita kopy sebelumnya.
   • save template dan silahkan lakukan tes pada Rich Snippets Testing Tool, dan ini telah berhasil pada blog saya.

Ahir kata,saya hanyalah manusia biasa yang sangat jauh dari kata sempurna karna kesempurnaan hanyalah milik Tuhan.


sumber: optimasi-blog.blogspot.com dan schema.org

Readmore →

Membuat auto readmore pada templet bawaan blogger(simple template)

Banyak sekali rasanya tutorial-tutorial membuat auto readmore bertebaran dimana-mana,tapi yang akan tutorial blog sajikan kali ini lebih menitik beratkan pada templet bawaan blogger(simple template) atau templet default,yaitu bagaimana caranya Membuat auto readmore pada templet bawaan blogger,mari disimak tutorialnya.

1.masuk ke dashbor blogger -->>>setelan-->>>template-->>>(Jangan lupa backup dulu templetnya,jaga-jaga jika terjadi kesalahan)-->>>edit HTML-->>>centang Expand widget templates.

2.cari kode </head>

3.kopy paste script dibawah ini sebelum kode </head>

<b:if cond='data:blog.pageType != "item"'> <script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 310; summary_img = 270; img_thumb_height = 110; img_thumb_width = 130; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+' ...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0;margin:0 10px 0 0"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div> ' + removeHtmlTag(div.innerHTML,summ) + '</div> '; div.innerHTML = summary; } //]]> </script> </b:if>

4.hapus kode yang berada DIANTARA <div class='post-header-line-1'/></div> dan <b:if cond='data:post.hasJumpLink'> kemudian ganti dengan script dibawah.

<div class='post-body entry-content'> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'> <data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='rmlink' style='float:right;padding-top:5px;'><a expr:href='data:post.url'>Readmore →</a></span> </b:if> <b:if cond='data:blog.pageType == "item"'> <data:post.body/> </b:if> </b:if> <div style='clear: both;'/> <!-- clear for photos floats --> </div>

5.save template dan lihat hasilnya.

Readmore →