Kode HTML Tampil di Postingan

Bagaimana caranya agar kode HTML bisa tampil di posting-an blog?  Agar kode-kode HTML dapat muncul pada posting-an blog kita, ada beberapa cara dan yang harus diketahui saat ini yaitu cuma baru dua cara ( barangkali kawan-kawan ada yang lebih tahu ).

Yang pertama yaitu anda harus mengganti karakter-karakter perintah dari program HTML dengan notasi tertentu. Karakter-karakter yang sering di gunakan yaitu seperti yang tertera pada tabel di bawah ini :

Karakter	Notasi	Keterangan
<	&lt;	Kurung runcing terbuka
>	&gt;	Kurung runcing tutup
&	&amp;	Tanda Dan
"	&quot;	Tanda petik ganda
±	&plusmn;	Tanda plus minus
Spasi	&nbsp;	Tanda Spasi
©	&copy;	Tanda hak cipta (copyright)
®	&reg;	Tanda terdaftar (Registered)

Nah agar lebih paham akan  diberi contoh, misalkan dalam postingan anda berisi kata-kata seperti ini.

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv="refresh" content="10">
</meta>

di dalam postingan anda, jika ingin tampil seperti itu maka yang di tuliskan tidak persis seperti kode di atas, sebab nanti di postingan tulisan kode tersebut tidak akan muncul, yang ada justru efek dari kode yang anda tuliskan. trus jalan keluarnya gimana? harus mengganti karakter-karakter perintah yang ada dengan notasi penggantinya, jadi yang harus dituliskan pada postingan adalah seperti ini :

Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :
<br/><br/> <code>
&lt;meta http-equiv="refresh" content="10"&gt;
<br/>
&lt;/meta&gt;
</code>

Pembubuhan perintah <code> dan </code> adalah untuk menandakan bahwa yang anda tulis adalah sebuah kode HTML, dan nantinya pun tulisan-tulisan yang berada dalam perintah ini akan tanpil beda dengan tulisan-tulisan yang lainnya,  pembubuhan perintah <br/> adalah untuk membuat tulisan berpindah kebawah, jika anda tidak membubuhkan perintah <br/> tadi, walaupun di posting-an anda tulis jauh kebawah, hasilnya akan tetap bersatu.

Cara yang kedua adalah dengan menggunakan text area.  Sebagai contoh, untuk menuliskan kode-kode di atas, pada posting-an anda harus menuliskan seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<br/><br/>
<p align="left"><textarea name="code" rows="6" cols="400">&lt;meta http-equiv="refresh" content="10"&gt; &lt;/meta&gt;</textarea></p>

Maka yang akan tampil di blog anda adalah seperti ini :
Untuk membuatnya cukup dengan hanya membubuhkan program di bawah ini :

<meta http-equiv="refresh" content="10"> </meta>

Selamat mencoba dan berkarya.
untuk memposting seperti yang dijelaskan diatas, anda harus pada posisi Edit HTML jangan pada posisi compose.

oke kawan, untuk yang kedua kalinya...selamat mencoba.

Trik Mudah membuat "Read more(3)"

Membuat fasilitas "Read more" atau "Selengkapnya.." pada template baru (XML) dapat kita lakukan dengan mudah asal mengetahui triknya.Topik "Read more" atau "Selengkapnya.." rupanya yang paling banyak di minati oleh para blogger baru. Membuat sebuah artikel fungsi Read more.. atau Selengkapnya... dapat dilaksanakan dengan mengikuti langkah-langkah berikut.

Langkah #1

• Sign in di blogger dengan id anda.
• Klik Pengaturan
• Klik Format
  
  Pada layar paling bawah, ada text area kosong disamping tulisan Template Posting, isi tesxt area kosong tersebut dengan kode di bawah ini :
  
  <span class="fullpost">
  
  </span>
  
• Klik tombol Simpan Pengaturan
• Pemasangan kode ini di maksudkan agar pada saat posting artikel, kode tersebut langsung muncul tanpa harus menuliskan terlebih dahulu, jadi membantu kita agar tidak harus selalu mengingat kode tersebut.
  

Langkah #2

• Klik menu Dasboard
• Klik menu Layout
• Klik menu Edit HTML
• Klik tulisan Download Template Selengkapnya.
• Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
• Beri tanda centang pada kotak di samping tulisan Expand Template Widget , lihat gambar di bawah :
  
  
  
  
  

• Tunggu beberapa saat ketika proses sedang berlangsung.
• Silahkan anda cari kode berikut pada kode template milik anda :
  
  <p><data:post.body/></p>

• Hapus kode diatas, lalu ganti dengan kode di bawah ini (klik pada tombol untuk menandai):
  
  <b:if cond='data:blog.pageType == "item"'>
  <style>.fullpost{display:inline;}</style>
  <p><data:post.body/></p>
  <b:else/>
  <style>.fullpost{display:none;}</style>
  <p><data:post.body/>
  <a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
  </b:if>
• Klik tombol Simpan Template
• Selesai.

Cara Posting Artikel

• Klik menu Posting
• Klik menu Edit HTML, maka secara otomatis tampak kode yang telah kita setting tadi, yakni :
  
  <span class="fullpost">
  </span>
  
• Tuliskan artikel yang ingin tampak pada blog sebelum kode :
  
  <span class="fullpost">
  
• Tulis keseluruhan sisa artikel sesudah kode di atas tadi dan sebelum kode :
  
  </span>
  
• Klik tombol bertuliskan MEMPUBLIKASIKAN POSTING
• Klik tulisan Lihat Blog
• Bagi tidak berhasil, jangan panik upload kembali backup templatenya dan nanti akan kembali ke keadaan semula sebelum di edit.
  
• Selamat mencoba !

Menampilkan Komentar dibawah Posting

Membangun sebuah blog tidak pas bila tidak dilengkapi fasilitas komentar bagi pembaca yang mengunjungi blog kita. Tentunya diperlukan menu khusus agar pembaca blog dapat berinteraksi di blog yang dikunjungi dan tentu saja menambah kelengkapan fasilitas blog kita. Menu interaksi komentar ini dirancang lebih simple dan memenuhi selera bagi blogger yang memilik citra rasa keindahan design sebuah blog. dan diletakkan dibawah posting. Adapun langkah-langkah sebagai berikut.

1. Login to Blogger Draft here
2. Go to your blog settings page -> comments
   
   
   
3. Done.
4. Go to your blogger template editor (Your Blog Dashboard -> Layout -> Edit HTML)backup your template first (Penting)
5. Tick the Expand Widget Templates
6. Find these codes below
   
   
   <p class='comment-footer'>
   <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'> <data:postCommentMsg/> </a>
   </b:if>
   </p>
   
7. Replace them with codes below
   
   <p class='comment-footer'>
   <b:if cond='data:post.embedCommentForm'>
   <b:include data='post' name='comment-form'/>
   <b:else/>
   <b:if cond='data:post.allowComments'>
   <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
   <data:postCommentMsg/>
   </a>
   </b:if>
   </b:if>
   </p>
   
8. Selesai, lihat hasilnya.
9. Sumber : http://www.jackbook.com/

Membuat Related Article (2)

Related Article atau Artikel Terkait biasa ditemukan di bawah dari postingan suatu blog. Related Article ini sangat berguna khusus untuk memudahkan pembaca blog untuk mengetahui tulisan-tulisan terkait atau yang berhubungan dengan tulisan yang baru dibaca. Untuk membuat supaya muncul Artikel Terkait di bawah postingan, dapat dilakukan dengan langkah-langkah sebagai berikut :

1. Buka Edit HTML -< pilih Expand Widget Templates>
2. jangan lupa backup templates terlebih dahulu
3. Cari kode <data:post.body/>
4, Copy kode berikut tepat di bawah


<data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'><span class='box'>
<div class='widget-content'>
<h3>Artikel Terkait</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 6;
maxNumberOfLabels = 100;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</span>
</div>

</b:if>


Simpan, silakan hasilnya. Kode di atas masih dapat diubah-ubah, seperti menambah atau mengurangi jumlah artikel terkait yang akan ditampilkan. Selamat mencoba dan Sukses.

Cara menampilkan posting yang berkaitan (Related Posts)

Related Posts atau biasa disebut "link yang bekaitan", "artikel pada kategori yang sama" atau istilah lainnya, merupakan bagian judul posting terkait dan biasanya ditampilkan berdasarkan penamaan label (kategori), Realated Post ini biasanya berupa link yang tampilkan dibawah postingan tunggal tepatnya di bawah kolom posting atau komentar. Keuntungan dengan pemasangan menu ini mempermudah pengunjung blog menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label. Langkah-langkah menampilkan posting yang berkaitan dapat dibaca selanjutnya. Sebelumnya hanya mengingatkan simpan terlebih dahulu existing.

Langkah 1:
Masuk pada Template , Edit HTML, dan klik Expand Widget Template kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode </head> saja, kemudian letakan kodenya diatas kode


</head> .
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
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 < 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 < 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;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

Langkah 2:
Masuk pada Template , Edit HTML, dan klik Expand Widget Template kemudian masukan dan cari kode HTML berikut.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan

Langkah 3:
Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

Langkah akhir :
Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, berikut.
Masuk pada Template , Edit HTML, dan klik Expand Widget Template dan cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, yaitu Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.

<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Selamat mencoba, dan sukses.