Cara menambahkan read more pada blogger

This is the way to show or hide your full post on the main page of your blog. This is different from my old "Read More " methods. If in old "Read More" Methods it will show "Read More" link, then if you click the link you will load and go to another page that will show your full post/articel. But with my next methode below, if you click the link you will see your full post/articel in the same page and it no needs time to load, it only expand your full post. Do you want to try it? here is the trick:

1. Login to Blogger, Chose "Layout --> Template --> Edit HTML
2. Click "Download Full Templates" link to back up your template.
3. Check on the "Expand Template Wdiget" Check Box.
4. Copy the code below and paste above this code </head>

<script src='http://kendhin.890m.com/Readmore.js' type='text/javascript'/>

5. Then find this code <div class='post-header-line-1'/> .

6. If You found it you will see a code like this:

<div class='post-body entry-content'>

or

<div class='post body'>

7. The next step is change or replace the code (Only Number 6 code) to be like this:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>

8. Under it you will see a code like this <p><data:post.body/></p>
9. Put the code below under it.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-]Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

10. So, the full code will like this :

<div class='post-header-line-1'/>
<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<b:if cond='data:blog.pageType == "item"'>
<p><data:post.body/></p>

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Show Full Post...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Hide Full Post...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

11. Save Your Editing.
12. Go to menu "Setting --> Formatting"
13. On the bottom page you will see a box beside text "Post Template". Copy the code below and paste in to the box

<span id="fullpost">


</span>

14. Save your setting.
15 If you want to post an articel place your part articel above this code <span id="fullpost">. Then the remain or full post put between this code <span id="fullpost"> and this </span>

link posting ini

Membuat Breadcrumb Menu Pada Blog

Membuat menu navigasi berurutan di atas artikel posting atau istilahnya disebut breadcrumb,merupakan cara efektif untuk memberikan kemudahan pengunjung dalam melihat kategori posting suatu blog.
Disamping itu dari segi seo(search engine optimization),Google sudah support/mendukung breadcrumb ini.

1. Pertama,pastikan anda sudah membuat label pada blog.
2. Selanjutnnya,pergi ke Dashboard,lalu pilih Tata Letak dan kemudian pilih Edit HTML,jangan lupa contreng tulisan Expand Widget Templates.
3. Selanjutnya cari kode berikut (gunakan Ctrl+F pada keyboard anda untuk membantu pencarian):

   ---

   <b:includable id='main' var='top'>

   ---

4. Setelah ketemu,letakkan breadcrumb script berikut tepat diatasnya.

   ---

   <b:includable id='breadcrumbs' var='post'>

<!-- Breadcrumbs hack. By Hoctro 9/11/2006 http://hoctro.blogspot.com -->
  <b:if cond='data:blog.pageType == "item"'>
      <p class='breadcrumbs'>
      <span class='post-labels'>
        <b:if cond='data:post.labels'>

          Browse:
          <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>  &gt;
          <b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.isLast == "true"'>
              <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
            </b:if>
          </b:loop>
          <b:if cond='data:post.title'>
&gt;  <b><data:post.title/></b>
          </b:if>

        </b:if>
      </span>
      </p>
  </b:if>
<!-- End of Breadcrums Hack -->
</b:includable>

   ---

5. Kemudian,carai lagi kode berikut:
   

   ---

   <b:if cond='data:post.dateHeader'>

   ---

6. Jika sudah ketemu,letakkan kode dibawah ini tepat diatasnya.

   ---

   <b:include data='post' name='breadcrumbs'/>

   ---

7. Nah,sekarang cari kode ]]></b:skin>,jika sudah ketemu letakkan barisan kode css breadcrumb dibawah ini tepat diatasnya.

   ---

   .breadcrumbs {
border-bottom:1px dotted #000;
margin:2em 0 0.5em;
padding:0 0 0.5em;
}

   ---

8. Kemudian Simpan Templates dan Selesai.

sumber http://pelajaran-blog.blogspot.com


link ke posting ini