Membuat Read More/ Baca Selengkapnya pada blogger

Kadang ada sebuah template blog tidak dilengkapi dengan read more atau baca selengkapnya, sehingga membuat tampilan blog kita menjadi sangat panjang apabila postingan yang kita tampilkan memuat banyak pembahasan, nahhhh…suapaya tampilan blog awal/home sobat tidak memanjang seperti menara petronas, kita harus membuat read more pada bagian artikel yang ingin kita potong. Berikut ini langkah-langkah nya.
Login ke blog sobat masing-masing, klik Layout kemudian masuk ke Edit HTML
centang Expand Widget Templates
Masukkan kode berikut sebelum tag <head>
atau tepat sesudah kode ]]></b:skin>
seperti ini contohnya :

]]></b:skin>
<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

Selanjutnya mengatur supaya postingan terpotong, cari kode

<p><data:post.body/></p> dalam template sobat, kemudian bawahnya beri code seperti ini :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More..</a>
</b:if>

Nah supaya terpotong, setiap kali sobat posting, klik pada bagian posting dimana sobat ingin tulisan Read More.. muncul maka ketik span <class="fullpost">. kemudian pada akhir postingan sobat kasih </span>. Untuk menmbahkan kode ini, ketika posting sobat harus dalam mode Edit HTML bukan Compose


Contoh penulisan posting:
Membuat Read more.. itu mudah semudah memjamkan mata, yang susah dijaman sekarang itu, cari uang susahnya minta ampun. Saya potong dulu. <class="fullpost"> Tapi kalo mau berusaha semuanya pasti bias….semangat….</span>

read more...

Membuat Related Post Berdasarkan Lable

Sudah lama saya tidak posting artikel di blog saya yang satu ini...biasa karena banyak pikiran beban hidup yang semakin berat, jadi tidak sempat nulis hehehehehe...
kali ini saya akan berbagi informasi bagaimana caranya membuat related post berdasarkan label, related post biasanya difungsikan untuk memudahkan para pembaca blog kita untuk mendapatkan informasi yang berhubungan dengan postingan yang dibaca, sehingga para pembaca bisa betah membaca blog kita.
Baik langsung saja begini caranya :
- Pertama pastinya Loggin dulu ke blogger.
- Masuk ke Tata Letak/Layout
- Pilih Edit HTML
- Centang tulisan Expand Widget Template
Cari code ini,
<data:post.body/>
untuk memudahkan tekan Ctrl+f, cari code tersebut :
setelah code tersebut ditemukan paste code dibawah ini setelah code tersebut diatas.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<!-- *****************Related Posting****************** -->
<div class='widget-content'>
<b>Related Posting :</b>
<div id='data2007'/><br/><br/>
<div id='Randezvous'>
<u><h5><a href=''>
</a></h5></u>
</div>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</b:if>

read more...

Membuat Table pada Postingan Blog Menggunakan HTML

Terkadang sobat-sobat semua ketika memposting artikel biasanya membutuhkan table untuk menampilkan artikel. Nah….disini mari kita bersama belajar untuk membuat table pada postingan blog menggunakan HTML. Lanagsung saja kita kecontohnya. Misalnya sobat ingin membuat table dengan 3 kolom dengan 2 row/baris. Maka kodenya adalah sebagai berikut :
<table width="200" border="1" cellspacing="0" cellpadding="1" bgcolor="#999999">
<tr>
<td>No</td>
<td>Nama</td>
<td>Nilai</td>
</tr>
<tr>
<td>1.</td>
<td>Bowo</td>
<td>10</td>
</tr>
</table>
Maka tampilan pada blog nantinya adalah seperti ini :



No	Nama	Nilai
1.	Bowo	10

Disini akan saya jelaskan, kode <tr> dan harus ditutup dengan </tr> adalah kode unutk membuat baris/row pada table. Sedangankan kode <td> dan harus ditutup dengan </td> adalah kode untuk membuat kolom. Sehingga pada kode HTML diatas untuk membuat dua row maka membutuhkan kode <tr></tr> dua kali. Dan untuk membuat tiga kolom maka diantara kode <tr> dan </tr> harus ada kode <td></td> sebanyak tiga kali. Didalam kode <td> bisa diisikan isi dari table yang diinginkan.

Didalam kode <table width="200" border="1" cellspacing="0" cellpadding="1" bgcolor="#999999" > , terdapat kode

Width = fungsinya untuk menentukan lebar table
Border = fungsinya untuk menetukan ketebalan garis dari table yang dibuat
Cellspacing=fungsinya untuk batas antara garis dengan cell atau isi dari table
Cellpadding=fungsinya untuk batas antara cell yang satu dengan yang lainya
Bgcolor=fungsinya untuk menentuka warna background dari table yang dibuat

Untuk membuat kode table diatas, mempostingnya pada tap HTML sobat jangan di Compose,OK……

read more...

Menampilkan Kode HTML pada Posting Blog

Menampilkan Kode HTML pada Posting Blog
Ketika saya posting artikel diblog dan kebetulan postingan saya ada kode HTMLnya yang harus ditampilkan, tiba-tiba terjadi error sehingga tidak bisa di publish. Kemudian saya cari-cari info akhirnya menemkan solusinya. Yang membuat kode HTML tersebut tidak bisa ditampilkan dipostingan karena oleh blogger dianggap sebagai code HTML sesungguhnya yang dimasukkan di postingan, sehingga apabila terjadi ketidak sesuaian kode tersebut mangakibatkan tidak bisa disimpan postingannya. Pada kode HTML terdapat tanda < dan tanda >. Tanda atau code tersebut harus dirubah menjadi variable yang lain yaitu tanda < menjadi &lt; dan tanda > menjadi &gt;. Lansung saja kecontoh biar gak bingung, misalnya sobat mau menampilkan kode HTML seperti ini :




<code>
<a href="http://bowoinfo.blogspot.com/2010/01/membuat-fungsi-terbilang-pada-vb-6.html">
<span class="style1">Judul Postingan Sobat</span></a><br/>
</code>

Maka supaya bisa tampil pada postingan obat semua harus merubah setiap tanda < dan tanda > menjadi &lt; dan &gt; sehingga menjadi seperti ini :

<a href="http://bowoinfo.blogspot.com/2010/01/query-running-total-in-sql-server-2000.html"><span class="style1"&gtQuery Judul Postingan Sobat </span></a><br/>


Sebelum code HTML yang akan diposting sebaiknya diberi <code> dan ditutup dengan </code>. Itu untuk menandakan bahwa yang kita postingkan adalah code.
Code HTML yang kita buat diatas tadi akan tampil dipostingan seperti ini :

<a href="http://bowoinfo.blogspot.com/2010/01/query-running-total-in-sql-server-2000.html"><span class="style1"&gtQuery Judul Postingan Sobat </span></a><br/>


Tanda < dan > menjadi &lt; dan &gt;.
Oiya sobat untuk mempostingnya sebaiknya di Tab HTML jangan Compose, supaya kita bisa melihat code HTMLnya.

read more...

Membuat Dafatar Isi pada Blog

OK…sobat sekarang postingan saya kali ini sedikit tentang utak-atik blog, yaitu bagaimana membuat daftar isi blog sendiri. Caranya mudah sekali. Yang pasti pertama harus login dulu ke blog sobat masing-masing jangan keblog saya hehehehe…
Ini dia langkah-langkah nya :
1. Login ke blog sobat masing-masing
2. Click Lyaout
3. Page Elemen
4. Click Tambah Gadget, terserah sobat nanti mau diletakkan disebelah mana daftar isinya
5. pilih HTML/JavaScript
6. copykan code dibawah ini

<style type="text/css">
<!--
.style1 {
font-family: Tahoma;
font-size: 11px;
}
-->
</style>
<div style="overflow:auto;width:330px;height:150px;padding:10px;border:1px solid #eee">

<a href="http://bowoinfo.blogspot.com/2010/01/membuat-fungsi-terbilang-pada-vb-6.html">
<span class="style1">Judul Postingan Sobat</span></a><br/>

<a href="http://bowoinfo.blogspot.com/2010/01/query-running-total-in-sql-server-2000.html"><span class="style1">Judul Postingan Sobat </span></a><br/>
</div>



7. save, Selesei
Apabila sobat semua ingin merubah ukuran dari daftar isinya tinggal ubah saja width dan height menjadi ukuran yang sobat inginkan, disini saya menggunakan ukuran width:330px;height:150px.
Apabila Sobat ingin merubah Jenis hurufnya tinggal ubah saja font-family menjadi terserah sobat mau huruf apa, disini saya menggunakan font-family: Tahoma;
Apabila sobat ingin merubah ukuranya tinggal ubah font-size menjadi terserah sobat, disini saya menggunakan font-size: 11px;
Jangan lupa apabila sobat menambah postingan baru dan apabila ingin tampil pada daftar isi silahkan tambah linknya yaitu :

<a href="http://bowoinfo.blogspot.com/2010/01/query-running-total-in-sql-server-2000.html"><span class="style1">Query Judul Postingan Sobat </span></a><br/>


read more...