Sunday, November 24, 2013

Membuat readmore pada tampilan postingan halaman utama blog

Readmore digunakan untuk menampilkan sinopsis atau sebagian dari postingan sehingga ketika pengunjung memasuki halaman homepage atau halaman utama akan muncul beberapa pilihan postingan dan dapat memilih atau membacanya salah satu atau semuanya. dengan demikian tampilan halaman utama blog anda akan terlihat simple, tertata rapi dan anda dapat menambahkan widget-widget lainnya pada widget blog anda agar blog anda semakin terlihat menarik.

Berikut cara membuat readmore pada blog sahabat :
  • Login dahulu ke blog sahabat
  • Klik panah kebawah seperti pada gambar yang diberi kotak merah :

  • pilih >> Template


  • Silahkan anda backup template blog sahabat terlebih dahulu untuk keaman. cara backup templatenya bisa lihat link berikut : Cara Backup Template Blogger.
  • Setelah tersimpan kemudian lanjutkan dengan klik >> Edit HTML
  • Kemudian centang Expand widget template.
  • Cari kode berikut dengan klik Ctrl + F pada keyboard dan masukkan kode berikut :
 ]]></b:skin>
  •  Setelah ketemu silahkan pilih style yang anda inginkan dan pasang kode style readmore berikut tepat diatas kode ]]></b:skin> :
Style#1:
Read More Button

/*-------------------------- Narrow black Orange-------------*/
.MBT-readmore{
background:#fff;
text-align:right;
cursor:pointer;
color:#EB7F17;
margin:5px 0;
border-left:400px dashed #474747;
border-right:2px solid #474747;
border-top:2px solid #474747;
border-bottom:2px solid #474747;
padding:2px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
font:bold 11px sans-serif;
}
.MBT-readmore:hover{
background:#EB7F17;
color:#fff;
border-left:400px dashed #474747;
border-right:2px solid #EB7F17;
border-top:2px solid #EB7F17;
border-bottom:2px solid #EB7F17;
}
.MBT-readmore a {
color:#fff;
text-decoration:none;
}
.MBT-readmore a:hover {
color:#fff;
text-decoration:none;
}

    Style#2:
    Read More Button

    /*------------Light Purple long----------------------*/
    .MBT-readmore{
    background:#fff;
    text-align:right;
    cursor:pointer;
    color:#6882C7;
    margin:5px 0;
    border-left:400px solid #6882C7;
    border-right:2px solid #6882C7;
    border-top:2px solid #6882C7;
    border-bottom:2px solid #6882C7;
    padding:1px 5px 1px 1px;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    font:bold 11px sans-serif;
    }
    .MBT-readmore:hover{
    color:#000800;
    border-left:50px solid #6882C7;
    border-right:2px solid #6882C7;
    border-top:2px solid #6882C7;
    border-bottom:2px solid #6882C7;
    }
    .MBT-readmore a {
    color:#fff;
    text-decoration:none;
    }
    .MBT-readmore a:hover {
    color:#fff;
    text-decoration:none;
    }

      Style#3:
      Read More Button

      /*---------------- Rectangle left border-----------*/
      .MBT-readmore{
      background:#fff;
      text-align:right;
      cursor:pointer;
      color:#009999;
      margin:5px 0;
      float:right;
      border-right:2px solid #009999;
      border-left:10px solid #009999;
      border-bottom:2px solid #009999;
      border-top:2px solid #009999;
      padding:5px;
      font:bold 11px sans-serif;
      }
      .MBT-readmore:hover{
      background:#fff;
      font:bold 11px sans-serif;
      color:#006B6B;
      border-right:2px dotted #009999;
      border-left:10px solid #006B6B;
      border-bottom:2px dotted #009999;
      border-top:2px dotted #009999;
      }
      .MBT-readmore a {
      color:#fff;
      text-decoration:none;
      }
      .MBT-readmore a:hover {
      color:#fff;
      text-decoration:none;
      }


        Style#4:
        Read More Button


        /*-------------- Pink Left right -----------*/
        .MBT-readmore{
        background:#fff;
        text-align:right;
        cursor:pointer;
        color:#FE80DF;
        margin:5px 0;
        float:right;
        border-right:2px solid #FE80DF;
        border-left:2px solid #FE80DF;
        padding:5px;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        font:bold 11px sans-serif;
        }
        .MBT-readmore:hover{
        background:#fff;
        font:bold 11px sans-serif;
        color:#CC0099;
        border-right:2px solid #CC0099;
        border-left:2px solid #CC0099;
        }
        .MBT-readmore a {
        color:#fff;
        text-decoration:none;
        }
        .MBT-readmore a:hover {
        color:#fff;
        text-decoration:none;
        }

          Style#5:
          Read More Button


          /*------------- Brown top Bottom----------*/
          .MBT-readmore{
          background:#fff;
          text-align:right;
          cursor:pointer;
          color:#B26B00;
          margin:5px 0;
          float:right;
          border-top:2px solid #ddd;
          border-bottom:2px solid #ddd;
          padding:5px;
          -moz-border-radius:6px;
          -webkit-border-radius:6px;
          font:bold 11px sans-serif;
          }
          .MBT-readmore:hover{
          background:#fff;
          font:bold 11px sans-serif;
          color:#B26B00;
          border-top:2px solid #B26B00;
          border-bottom:2px solid #B26B00;
          }
          .MBT-readmore a {
          color:#fff;
          text-decoration:none;
          }
          .MBT-readmore a:hover {
          color:#fff;
          text-decoration:none;
          }

            Style#6:
            Read More Link

            /*-------------- Blue Blank-----------------*/
            .MBT-readmore{
            background:#0080ff;
            text-align:right;
            cursor:pointer;
            color:#Fff;
            margin:5px 0;
            float:right;
            border:2px solid #ddd;
            padding:5px;
            -moz-border-radius:6px;
            -webkit-border-radius:6px;
            font:bold 11px sans-serif;
            }
            .MBT-readmore:hover{
            background:#FFf;
            font:bold 11px sans-serif;
            color:#0080ff;
            border:3px dotted #ddd;
            }
            .MBT-readmore a {
            color:#fff;
            text-decoration:none;
            }
            .MBT-readmore a:hover {
            color:#fff;
            text-decoration:none;
            }

              Style#7:
              Read More Link
              /*------------- Red + Dark Red------------*/
              .MBT-readmore{
              background:#fffff;
              text-align:right;
              cursor:pointer;
              color:#FE8080;
              margin:5px 0;
              float:right;
              border:2px solid #FE8080;
              padding:5px;
              -moz-border-radius:6px;
              -webkit-border-radius:6px;
              font:bold 11px sans-serif;
              }
              .MBT-readmore:hover{
              background:#FFf;
              font:bold 12px sans-serif;
              color:#FF0000;
              border:2px solid #FF0000;
              }
              .MBT-readmore a {
              color:#fff;
              text-decoration:none;
              }
              .MBT-readmore a:hover {
              color:#fff;
              text-decoration:none;
              }

                Style#8:
                Read More Link

                /*------------ White + Green -----------*/
                .MBT-readmore{
                background:#fffff;
                text-align:right;
                cursor:pointer;
                color:#008000;
                margin:5px 0;
                float:right;
                border:2px solid #ddd;
                padding:5px;
                -moz-border-radius:6px;
                -webkit-border-radius:6px;
                font:bold 11px sans-serif;
                }
                .MBT-readmore:hover{
                background:#008000;
                font:bold 11px sans-serif;
                color:#fff;
                border:2px solid #ddd;
                }
                .MBT-readmore a {
                color:#fff;
                text-decoration:none;
                }
                .MBT-readmore a:hover {
                color:#fff;
                text-decoration:none;
                }

                  Style#9:
                  Read More Link

                  /*---------- Black --------------*/
                  .MBT-readmore{
                  background:#000800;
                  text-align:right;
                  cursor:pointer;
                  color:#fff;
                  margin:5px 0;
                  float:right;
                  border:2px solid #ddd;
                  padding:5px;
                  -moz-border-radius:6px;
                  -webkit-border-radius:6px;
                  font:bold 11px sans-serif;
                  }
                  .MBT-readmore:hover{
                  background:#fff;
                  font:bold 11px sans-serif;
                  color:#000800;
                  border:2px solid #000800;
                  }
                  .MBT-readmore a {
                  color:#fff;
                  text-decoration:none;
                  }
                  .MBT-readmore a:hover {
                  color:#fff;
                  text-decoration:none;
                  }

                    Style#10:
                    Read More Link

                    /*----------Orange One 1 ----------------*/
                    .MBT-readmore{
                    background:#EB7F17;
                    text-align:right;
                    cursor:pointer;
                    color:#fff;
                    margin:5px 0;
                    float:right;
                    border:none;
                    padding:5px;
                    -moz-border-radius:6px;
                    -webkit-border-radius:6px;
                    font:bold 11px sans-serif;
                    }
                    .MBT-readmore:hover{
                    background:#FFB93C;
                    }
                    .MBT-readmore a {
                    color:#fff;
                    text-decoration:none;
                    }
                    .MBT-readmore a:hover {
                    color:#fff;
                    text-decoration:none;
                    }

                      •  Kemudian cari kode berikut :
                      <data:post.body/>
                      •  Setelah ketemu lalu cari kode readmore yang kurang lebih seperti kode berikut : 
                      <b:if cond=data:blog.pageType != "item">
                      <a expr:href=data:post.url>
                      <div style="text-align: right;">Read More ->></div></a>
                      </b:if>
                      • Pada template tertentu terkadang kode diatas tidak ketemu dan mungkin kode readmore lebih mirip kode dibawah ini :
                      <b:if cond=data:blog.pageType != "item">
                      <a expr:href=data:post.url>
                      <div style="text-align: right;">< img src=http://xyz.com border="0"/></div></a>
                      </b:if>
                      •  Nah jika ketemu silahkan ganti kode yang diblock warna kuning yang anda temukan seperti kode diatas dengan kode dibawah ini.
                      class="MBT-readmore"
                      •  Simpan pengaturan dan selesailah proses pemasangan readmore pada blog.


                      Posted by at
                      Labels: , , , , , , ,

                      No comments:

                      Post a Comment

                      Subscribe to: Post Comments (Atom)