Auto Readmore Blogspot

Membuat Read More Otomatis Blogspot

---

Kalau biasanya membuat readmore di blogspot pada paragraf pertama posting anda wajib mengetikkan kode ini => <span class="fullpost"> pada tab edit HTML, namun sekarang ada trik (Readmore Otomatis) yang memudahkan anda membuat readmore tanpa harus mengetikkan kode di atas.

Jika ingin memakai cara lama (dengan mengetikkan kode di atas => <span class="fullpost">), maka hal berikut ini yang harus anda lakukan. Pertama login ke akun blogger anda, navigasikan ke tab 'Layout' (Tata Letak) klik 'Edit HTML', kemudian cari kode berikut ini ]]></b:skin>. Copy dan pastekan kode berikut di bawah kode ]]></b:skin>:

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

Kemudian cari lagi kode ini <p><data:post.body/></p> dan tambahkan kode berikut di bawahnya:

[xml collapse="false"]
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Read More.. (Ganti Read More.. dengan kata terserah anda contoh 'Selengkapnya')</a>
</b:if>
[/xml]

Agar paragraf postingan baru anda pada halaman utama blogspot terpotong maka ketika membuat posting navigasikan ke mode 'Edit HTML'. Ketikkan kode <span class="fullpost"> sebelum kata / kalimat depan yang ingin anda potong, dan tulis kode </span> setelah akhir kalimat yang ingin anda potong.

Cara ini bisa anda pakai untuk membuat read more, namun ada cara satu lagi yang lebih praktis. Cara ini secara otomatis akan membuat readmore untuk anda, berikut tahapan yang harus anda lakukan: Login ke blogger anda => 'LayOut' (Tata Letak) => klik pada bagian 'Edit HTML'. Temukan kode berikut <data:post.body/> (agar lebih mudah gunakan shortcut keyboard dengan mengetikkan 'Ctrl + F, kemudian pastekan kode tersebut). Ganti kode <data:post.body/> dengan kode di bawah ini:

[xml]
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'/>
<script type='text/javascript'>
var blogID = "780351826145379977"
function retriveSummaryPost<data:post.id/>(json){document.getElementById("summary<data:post.id/>").innerHTML
= json.entry.summary.$t + "..."}

function createSummaryPost<data:post.id/>(POSTID){ var script =
document.createElement("script");
script.src = "http://www.blogger.com/feeds/"+blogID+"/posts/summary/"+POSTID+"?alt=json-in-script&amp;callback=retriveSummaryPost<data:post.id/>";
script.type = "text/javascript"; document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);

}
</script>
<script type='text/javascript'>
createSummaryPost<data:post.id/>("<data:post.id/>");
</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Selengkapnya</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div id='post_body'><data:post.body/></div>
</b:if>
[/xml]

Ganti var blogID = "780351826145379977", jika tidak tahu dimana mencari BlogID anda login dulu ke blogger => arahkan ke bagian posting => lihat pada address bar. Contoh "http://www.blogger.com/posts.g?blogID=XXXXXXXXXXX". XXXXXXXXXXX adalah BlogID anda.

Selesai... Sekarang setiap kali anda posting maka secara otomatis pada halaman utama cuplikan posting anda akan terpotong.

http://www.bloggertipandtrick.net/how-to-add-auto-read-more-feature-with/

Selengkapnya

Dropdown Label Kategori Blogspot

Blog dengan beragam tulisan yang dikelompokkan menjadi beberapa kategori, bisa jadi apabila menggunakan tampilan list label standar blogger akan menyita banyak tempat pada sidebar blog. Padahal jika dibuat lebih ringkas, sisa space sidebar dapat anda manfaatkan untuk widget informatif lainnya. Selain itu meringkas label list standar ke drop-down menu akan membuat blog anda kelihatan lebih rapi. Sebelum mulai ada baiknya backup dulu current template, selanjutnya ikuti step di bawah ini:

1. Login ke account blogspot


2. Klik pada tab 'Layout (Tata Letak)'


3. Klik 'Edit HTML'


4. Centang pada kotak check box 'Expand Template Widget'


5. Temukan kode yang mirip (identik) dengan code di bawah:
   
   [html collapse="false"]
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <data:label.name/>
   <b:else/>
   <a expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   (<data:label.count/>)
   </li>
   </b:loop>
   </ul>
   [/html]
   
   atau seperti ini:
   
   [html collapse="false"]
   <ul>
   <b:loop values='data:labels' var='label'>
   <li>
   <b:if cond='data:blog.url == data:label.url'>
   <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
   <b:else/>
   <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
   </b:if>
   <b:if cond='data:showFreqNumbers'>
   <span dir='ltr'>(<data:label.count/>)</span>
   </b:if>
   </li>
   </b:loop>
   </ul>
   [/html]
   
   Hapus dan ganti kode di atas dengan kode di bawah ini;
   
   [html collapse="false"]
   <select onchange='location=this.options[this.selectedIndex].value;' style='width:100%'><option>Browse By categories</option>
   <b:loop values='data:labels' var='label'>
   <option expr:value='data:label.url'><data:label.name/>
   (<data:label.count/>)
   </option>
   </b:loop>
   </select>
   [/html]
   

Klik pada tombol 'Simpan Template' (Save Template) dan lihat hasilnya.

Have fun...
:D

Selengkapnya