Cara Mudah Buat Auto Readmore Dua Kolom Pada Halaman Utama Blogger




Cara Mudah Buat Auto Readmore Dua Kolom Pada Halaman Utama Blogger
Cara Mudah Buat Auto Readmore Dua Kolom Pada Halaman Utama Blogger

Jika anda ingin berniat untuk mengubah halaman utama blogger milik anda, anda bisa menerapkan kode yang sudah di sediakan di bawah ini, dan bagi anda yang belum tau apa itu auto redmore dua kolom halaman depan (Home), saya akan menjelasakan sedikit mengenai Auto Readmore, Auto Redmore Dua adalah yang menampilkan sebuah posting terbaru yaitu berupa ringkasan dan gambar thumbnail yang dibagi menjadi dua kolom.

Untuk anda yang penasaran ingin melihat bentuk auto readmore dua kolom halaman blog, seperti contoh pada blog Contohblog dan masih banyak lagi template blog yang lain terdapat dua halaman depannya berisi auto readmore dua kolom.

Nah bagi anda yang ingin membuatnya, anda bisa menerapkan langkah-langkah dibawah ini dengan teliti, khususnya yang baru mengenal dunia blogger.

Auto Readmore Dua Kolom Pada Halaman Utama Blogger

  1. Seperti biasa anda  pastikan sudah login pada dasbhor  akun bloger anda sendiri
  2. Lalu anda masuk pada bagian Editor template , caranya pilih Menu Template ==> Edit HTML.
  3. Kemudian anda cari/ temukan kode seperti ini <data:post.body/>
  4. Jika sudah ketemu anda hapus <data:post.body/>
  5. Namun untuk kode yang akan di hapus, anda lihat pada urutan kode  yang kedua dan anda gantikan dengan kode berikut di bawah ini.
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
     <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
      <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
    <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read more &#187;</a></span></b:if></b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
    
    
  6. Kemudian anda cari lgi kode <b:include data='post' name='post'/> cara cepat tekan CTRL+F jika sudah ketemu, maka anda hapus dan ganti dengan kode berikut di bawah ini.
    <b:if cond='data:post.isFirstPost'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
    <div id='first'>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>
    <div class='first-body'>
     
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
    <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
    <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read more&#187;</a></span>
    </b:if></b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
     
    </div>
    </div>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if><b:if cond='data:post.isFirstPost'><b:if cond='data:blog.homepageUrl == data:blog.url'>
    <div id='first'>
    <b:if cond='data:post.title'>
    <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
    <b:if cond='data:post.url'>
    <a expr:href='data:post.url'><data:post.title/></a>
    <b:else/>
    <data:post.title/>
    </b:if>
    </b:if>
    </h3>
    </b:if>
    <div class='first-body'>
     
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <div expr:id='&quot;summary1&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb1(&quot;summary1<data:post.id/>&quot;);</script>
    <span class='post-comment-link'><b:if cond='data:blog.pageType != &quot;item&quot;'><b:if cond='data:post.allowComments'><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:post.numComments/></a></b:if></b:if></span>
    <span class='readmorebutton' style='float:right'><a expr:href='data:post.url'>Read more&#187;</a></span>
    </b:if></b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>
     
    </div>
    </div>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
  7. Lalu anda Copas kode berikut ini di atas kode </head> 
     <script type='text/javascript'>
    posts_no_thumb_sum = 290;
    posts_thumb_sum = 240;
    img_thumb_height = 80;
    img_thumb_width = 80;
    first_no_thumb_sum = 600;
    first_thumb_sum = 540;
    img_thumb_height1 = 145;
    img_thumb_width1 = 165;
    </script>
     
    <script type='text/javascript'>
    //<![CDATA[
    function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }
    strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
    }
     
    function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = posts_no_thumb_sum;
    if(img.length>=1) {
    imgtag = '<span class="posts-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
    summ = posts_thumb_sum;
    }
     
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
    }
     
    function createSummaryAndThumb1(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = first_no_thumb_sum;
    if(img.length>=1) {
    imgtag = '<span class="first-post-thumb" style="float:left;"><img src="'+img[0].src+'" width="'+img_thumb_width1+'px" height="'+img_thumb_height1+'px"/></span>';
    summ = first_thumb_sum;
    }
     
    var summary1 = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary1;
    }
     
    //]]>
    </script>
     
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <style type='text/css'>
    .first-post-thumb {
    margin-right: 10px;
    border: 1px solid #fff;
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }
    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    }
    #first { /* styles for first post container */
    width: auto;
    height: 250px;
    float: left;
    margin-bottom:10px;
    background-color: #F4F4F4; /* background color for the first post */
    border: 1px solid #E5E5E5; /* color and size of first post border */
    }
    .first-body { /* first post summary styles */
    color: #545454;
    font-size: 13px;
    text-align: justify;
    padding: 5px 10px;
    line-height:1.5em;
    }
    #first h3 a, #first h3 a:visited { /* First Post title styles*/
    border-bottom: 2px solid #DFDFDF;
    color: #515151;
    font-size: 20px;
    display:block;
    margin: 10px auto;
    width: 95%;
    font-size: 20px;
    padding: 0px 0px 4px 0px;
    font-weight: bold;
    text-align:left;
    line-height: 1.4em;
    background: none;
    }
    #first h3 a:hover { /* mouseover color for the First Post title */
    color: #1061A1;
    }
    .post { /* small posts container styles */
    float:left;
    margin-right: 10px;
    width: 290px;
    height: 210px;
    padding: 0px 5px 5px 5px;
    background: #FCFCFC; /* background color for the small posts */
    border: 1px solid #E5E5E5; /* color and size for small posts border */
    overflow: hidden;
    }
    .posts-thumb { /* small posts thumbnails styles */
    margin-right: 5px;
    background: #ddd;
    padding: 3px 3px 0px;
    border: 1px solid #C4C4C4;
    border-radius: 4px;
    }
    h3.post-title a{ /* small posts titles styles */
    font-size: 14px;
    color: #747474;
    background-color: #F4F4F4; /* background color for the small posts titles */
    width: 95%;
    font-weight: bold;
    font-family: 'Arial Narrow', sans-serif;
    padding: 5px;
    }
    h3.post-title a:hover { /* mouseover color for the Small Posts Ttitle */
    color: #005B77;
    }
    h2.date-header { /* Post date */
    display:none;
    }
    .post-footer { display: none;}
    h3.post-title {margin: 0px;}
    .readmorebutton { margin-top: 5px;}
     
    .readmorebutton a { /* Read More link styles */
    color: #767676;
    border: 1px solid #E1E1E1;
    background: #EAEAEA; /* Background color for the Read More link */
    text-decoration:none;
    padding: 3px 5px;
    font-weight: bold;
    font-size: 11px;
    }
    .post-comment-link {
    float: right;
    display: inline;
    margin: -35px 0px;
    border: 1px solid #E1E1E1; /* border for the comment bubble */
    background: #EAEAEA; /* background color for comment bubble */
    font-size: 11px;
    position: relative;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    }
    #first .post-comment-link { /* style for the comment bubble of first post */
    margin: -200px 10px;
    }
    .post-comment-link a{
    padding: 10px;
    color: #6A6A6A;
    text-decoration:none;
    font-weight: bold;
    }
    #blog-pager {clear:both;}
    </style>
    </b:if>
    </b:if>
  8. Jika sudah anda lakukan langkah diatas, maka kemudian anda klik Save Template
Note: Jika anda ingin mengedit kembali kode- kode di atas, anda bisa mengedit kode yang bewarna merah Pada angka-angka 290, 240, 80, 600, 540, 145, dan 165 adalah ukuran gambar thumbnail, area teks, dan jumlah ringkasan posting. Atur-atur aja biar pas!

Untuk mengikuti tips penjelasan di atas, maka desain blog yang bisa di terima terutama bagi template blog belum auto readmore. Jika anda ingin mengikuti penjelasan langkah- langkah di atas, maka anda harus menghapus dulu kode-kode autoreadmore, menjadi posting penuh.

Demikian penjelasan pada malam ini, selamat mencoba dan mudah-mudahan bisa berhasil di terapkan di blog anda.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect