CARA MEMBUAT READMORE OTOMATIS DENGAN SNIPPET DI BLOGSPOT

Memodifikasi post halaman blog agar lebih ringan dengan sistem snipet pada home page halaman blog menjadi keuntungan buat para bloger mania. Sistem memodifikasi post pada halaman blogspot ini dapat mengurangi pemakaian script read more sebab sudah memakai fitur snipet secara otomatis akan mengambil atau menampilkan beberapa baris suku kata dari artikel postingan. Banyak para bloger mania selalu bertanya kepada saya, bagaimana cara membuat loading blog agar tidak lambat ? salah satu cara jitu yang saya pakai adalah sistem memodifikasi post pada halaman blog. itu adalah tehnik saya agar loading blog saya lebih ringan.
Pada postingan kali ini , post yang telah saya modifikasi akan lebih gampang untuk pemakaian berbagai widget pada halaman post anda. saya sudah membuat tanda untuk keperluan widget seperti " Related Post ", " Share media sosial " ditambah dengan pesan anda buat para pengunjung blog seperti halaman blog saya ini. Dalam modifikasi saya saya sudah menyertakan " Author post " pada halaman tersebut jadi anda tidak perlu lagi untuk memasangnya. Untuk demonya anda boleh lihat seperti tampilan halaman blog saya ini, baik itu pada home page saya ( Halaman awal blog ini ) atau tampilan saat anda membaca ini.
  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi
    /*****************************************
    START CSS modifikasi post BLOG DESIGN
    ******************************************/
    h2.post-titles {
    display : block;
    font-family : Arial, sans-serif;
    font-weight : bold;
    font-size : 14px;
    color : #950202;
    padding : 5px;
    background : #D0D5FD;
    }
    h2.post-title {
    display : none;
    }
    .posthead {
    font-size : 12px;
    padding-top : 5px;
    padding-left : 15px;
    color : #999;margin:-10px 0 10px 0;
    }
    .post-body {
    color : #000;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size : 13px;
    padding : 0 5px;width: auto;height:auto;
    text-align : left; line-height: 1.5em;
    }
    .thuum {
    height : 90px;
    width : 150px;
    border : #999999 solid 1px;
    }
    .thumbmage {
    float : left;
    width : auto;
    height : auto;
    margin : -20px 0 -10px 0;
    padding : 5px;
    width : 150px;
    height : 100px;
    transform : rotate(9deg);
    } /*****************************************
    END CSS modifikasi post BLOG DESIGN
    ******************************************/

    Install Program Tag HTML


  5. Setelah anda sudah memasang CSSnya saatnya anda memasang kode htmlnya.
  6. Karena kita mau memodifikasi post pada halaman blog, sekarang anda lebih fokus terhadap tulisan post.
  7. cari kode seperti kode dibawah ini

    <b:includable id='post' var='post'>...</b:includable>

  8. Setelah ketemu silahkan perhatikan kodenya agar lebih tepat. lihat code
    <b:includable id='post' var='post'> ini adalah kode awal dari post blog anda, jadi anda harus menghapusnya mulai dari kode tersebut. dan kode yang terakhir sebagai kode penutupnya adalah </b:includable> berarti anda harus menghapus semua kode tersebut sampai batas kode </b:includable>.
  9. Setelah anda hapus gantikan dengan kode yang ada dibawah ini, silahkan copy kode yang ada didalam spoiler dibawah ini.

<b:includable id='post' var='post'>
<!-- Modifikasi post BLOG DESiGN START-->
<div class='post hentry uncustomized-post-template' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:post.title'>
<h2 class='post-titles' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.firstImageUrl'>
<div style='clear:both;'/>
<span class='thumbmage'>
<img class='thuum' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/>
</span>
<b:else/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:post.title'>
<h2 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<b:if cond='data:post.url'>
<b:if cond='data:blog.url != data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>
<data:post.title/>
</a>
<b:else/>
<data:post.title/>
</b:if>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div class='posthead'>
Di poskan oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
| Dipublish pada :
<span class='updated'>
<data:post.timestamp/>
</span>
|
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>
</div>
</b:if>
</b:if>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<div>
<!-- Blog Design start pesan halaman -->
<div style='margin-top:1px; margin-right: 2px; text-align:center;font-family : Arial, Helvetica, sans-serif; font-size : 12px;'>
<div>

[[ isi dengan pesan anda kepada pengunjung halaman berupa terimakasih atas kunjungannya]]


</div>
</div>
</div>
<div style='clear: both;'/>
<!-- Blog Design end pesan halaman -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 10px;'>
<!-- Blog Design start related post halaman -->
<div>


[[ isi dengan related post, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-related-post-valid.html" target="_blank" title="cara membuat related post">++ cara membuat related post ++ </a> untuk membuat related post halaman anda]]



</div>
</div>
</b:if>
<div style='clear: both;'/>
<!-- Blog Design and related post halaman -->
<!-- Blog Design start share sosial media halaman -->
<div>

[[ isi dengan share sosial media anda, silahkan kunjungi <a href="http://rivai-silaban.blogspot.com/2013/07/cara-membuat-widget-share-diblog.html" target="_blank" title="cara membuat widget share sosial media">++ cara membuat widget share sosial media ++ </a> untuk membuat memasang sosial media share halaman anda]]


</div>
<!-- Blog Design and share sosial media halaman -->
<div style='font-size: 11px; color: #999; padding-top: 5px;'>
Di posting oleh :
<span class='vcard author'>
<span class='fn'>
<data:post.author/>
</span>
</span>
, Update pada :
<span class='updated'>
<data:post.timestamp/>
</span>
| &#9658;
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments == 1'>
1
<data:top.commentLabel/>
<b:else/>
<data:post.numComments/>
<data:top.commentLabelPlural/>
</b:if>
</b:if>

</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div>
<data:post.snippet/>
</div>
<div style='clear:both;'/>
</b:if>
</b:if>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.jumpText' rel='nofollow'>
<data:post.jumpText/>
</a>
</div>
</b:if>
</div><!-- Modifikasi post BLOG DESiGN AND-->
</b:includable>
Keterangan Code
  • Untuk kode CSSnya sesuaikan tampilan dengan kreative anda sendiri,bila ada kode yang sama dengan kode CSS yang anda miliki sebelumnya silahkan hapus satu kode CSS yang sama.
  • Untuk mengisi berbagai widget pada halaman anda silahkan lihat kode warna blog hitam, sya sudah membuat tnda untuk keperluan RELATED POST, SHARE SOSIAL MEDIA, DAN PESAN ADMIN.

Penulis : alifian ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel CARA MEMBUAT READMORE OTOMATIS DENGAN SNIPPET DI BLOGSPOT ini dipublish oleh alifian pada hari Saturday, August 24, 2013. Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan CARA MEMBUAT READMORE OTOMATIS DENGAN SNIPPET DI BLOGSPOT
 

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)
diooda
Share