Entri Populer

Profil Penulis

Selasa, 28 Mei 2013

Cara Mendesain Tampilan Blog agar lebih Menarik

Cara Mendesain Tampilan Blog Page agar lebih Menarik- Kali ini saya akan membahas mengenai tampilan home blog, Seperti yang telah kita ketahui bahwa apabila kita menggunakan template standar blogger, maka artikel yang diposting akan ditampilkan secara urut dari atas ke bawah sesuai dengan tanggal penerbitannya. Dan seperti itu pula lah setelan default yang biasanya digunakan pada kustom template. Namun demikian bisa jadi anda pernah mendapati sebuah blog yang menggunakan kustom template yang memiliki desain tampilan halaman beranda yang berbeda, jadi dalam artikel ini adalah untuk membuat kolom posting menjadi beberapa bagian seperti yang tampak pada gambar di samping.
Dengan adanya kita merubah tampilan home blog maka akan terlihat simple serta terlihat cantik, Untuk mengerjakannya silahkan ikuti langkah - langkah di bawah ini :
1. Sebelumnya backup dulu template sobat
2. Cari kode ]]></b:skin> setelah ketemu sobat sisipkan kode di bawah tepat di atas kode ]]></b:skin>

/***************************************************
Mengubah Kolom Posting Yang Dihasilkan Oleh Template
Standar Blogger Menjadi Beberapa Bagian Yang Sama
Oleh: Hendra Arrasyid

Blog: Bestari Abadi
URL : http://bestariabadi.blogspot.com/
****************************************************/
.bidang-utama {
width: 100%;
height: auto;
padding: 0px;
margin: 0px;
}
.bidang-artikel {
float: left;
width: 50%;
height: auto;
padding: 0px;
margin: 0px;
}
.kotak-artikel {
height: auto;
min-height: 144px;
padding: 10px;
margin: 5px;
border: 1px solid #000000;
}
.kotak-judul {
width: 96%;
height: 30px;
padding: 5px;
margin-bottom: 5px;
text-align: justify;
overflow: hidden;
border: 1px solid #000000;
font: bold 13px Arial;
background: #000000;
background: -moz-linear-gradient( center top, #f9f9f9 20%, #6BB200 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #6BB200) );
}
.kotak-gambar {
float: left;
width: 90px;
height: 95px;
margin-right: 10px;
border: 1px solid #000000;
border-radius: 3px;
overflow: hidden;
}
.kotak-gambar img {
width:90px !important;
height:95px !important;
}
.kotak-ringkasan {
max-height: 70px;
min-height: 70px;
text-align: justify;
font: 11px Arial;
overflow: hidden;
}
.garis-batas {
padding-top: 5px;
width: 100%;
border-bottom: 1px solid #000000;
}
.baca-selengkapnya {
text-align: right;
}
.baca-selengkapnya a {
display: inline-block;
margin: 0;
padding: 2px 2px;
border: 1px solid #000000;
text-align: center;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: #F5F5F5;
background: -moz-linear-gradient( center top, #f9f9f9 20%, #1919B3 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #1919B3) );
font: 11px Arial;
}
.baca-selengkapnya a:hover {
background: #f9f9f9;
background: -moz-linear-gradient(center top, #1919B3 20%, #1919B3 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #1919B3),color-stop(1, #1919B3));
}

3. Cari kode <b:includable id='main' var='top'> setelah ketemu silahkan sobat hapus seluruh rangkaian tersebut, untuk lebih jelasnya lihat contoh di bawah.

<b:includable id='main' var='top'>   ------------ Hapus dari sini -------------
----------------Rangkaian kode----------------
</b:includable>     ------------Hapus sampai sini--------------

4. Salin kode di bawah dan sisipkan di bagian yang telah sobat hapus tadi.

<b:includable id='main' var='top'>
  <b:if cond='data:mobile == &quot;false&quot;'>
    <!-- posts -->
    <div class='blog-posts hfeed'>
      <b:include data='top' name='status-message'/>
      <b:loop values='data:posts' var='post'>
        <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
          <b:if cond='data:blog.homepageUrl != data:blog.url'>
            <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
              <b:if cond='data:blog.pageType != &quot;item&quot;'>
                <b:include name='kolom-posting'/>
              <b:else/>
                <b:include name='full-artikel'/>
              </b:if>
            <b:else/>
              <b:include name='full-artikel'/>
            </b:if>
          <b:else/>
            <b:include name='kolom-posting'/>
          </b:if>
        <b:else/>
        </b:if>
      </b:loop>
    </div>
    <!-- navigation -->
    <b:include name='nextprev'/>
    <!-- feed links -->
    <b:include name='feedLinks'/>
    <b:if cond='data:top.showStars'>
      <script src='//www.google.com/jsapi' type='text/javascript'/>
      <script type='text/javascript'>
        google.load(&quot;annotations&quot;, &quot;1&quot;, {&quot;locale&quot;: &quot;<data:top.languageCode/>&quot;});
          function initialize() {
            google.annotations.setApplicationId(<data:top.blogspotReviews/>);
            google.annotations.createAll();
            google.annotations.fetch();
          }
        google.setOnLoadCallback(initialize);
      </script>
    </b:if>
  <b:else/>
    <b:include name='mobile-main'/>
  </b:if>
  <b:if cond='data:top.showDummy'>
    <data:top.dummyBootstrap/>
  </b:if>
</b:includable>
<b:includable id='kolom-posting'>
<div class='date-outer'>
  <div class='post-outer' style='padding: 0px; margin: 0px; height: auto; overflow: hidden;'>
    <div class='bidang-utama'>
      <b:loop values='data:posts' var='post'>
        <div class='bidang-artikel'>
          <div class='kotak-artikel'>
            <a expr:name='data:post.id'/>
            <div class='kotak-judul'>
              <b><a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a></b><br/>
            </div>
            <b:if cond='data:post.thumbnailUrl'>
              <div class="kotak-gambar">
                <a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' expr:src='data:post.thumbnailUrl'/></a><br/>
              </div>
            <b:else/>
              <div class='kotak-gambar'>
                <a expr:href='data:post.url' title='Klik untuk membuka artikel.'><img alt='Gambar' src='http://2.bp.blogspot.com/-9OyboJZcRHQ/UXw6rCa_KaI/AAAAAAAABlk/RQoa3t5NdRs/s1600/cooltext1010377363.png'/></a><br/>
              </div>
            </b:if>
            <b:if cond='data:post.snippet'>
              <div class='kotak-ringkasan'>
                <data:post.snippet/>
              </div>
            <b:else/>
              <div class='kotak-ringkasan'>
              </div>          
            </b:if>    
            <div class='garis-batas'/>
            <div class='baca-selengkapnya'>
              <b><a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a></b>
            </div>
          </div>
        </div>
      </b:loop>
    </div>
  </div>
</div>
</b:includable>
<b:includable id='full-artikel'>
  <data:defaultAdStart/>
    <b:if cond='data:post.isDateStart'>
      <b:if cond='data:post.isFirstPost == &quot;false&quot;'>
        &lt;/div&gt;&lt;/div&gt;
      </b:if>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-outer&quot;&gt;
    </b:if>
    <b:if cond='data:post.dateHeader'>
      <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
    </b:if>
    <b:if cond='data:post.isDateStart'>
      &lt;div class=&quot;date-posts&quot;&gt;
    </b:if>
    <div class='post-outer'>
      <b:include data='post' name='post'/>
      <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
        <b:if cond='data:post.showThreadedComments'>
          <b:include data='post' name='threaded_comments'/>
        <b:else/>
          <b:include data='post' name='comments'/>
        </b:if>
      </b:if>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
        <b:if cond='data:post.showThreadedComments'>
          <b:include data='post' name='threaded_comments'/>
        <b:else/>
          <b:include data='post' name='comments'/>
        </b:if>
      </b:if>
    </div>
    <b:if cond='data:post.includeAd'>
      <b:if cond='data:post.isFirstPost'>
        <data:defaultAdEnd/>
      <b:else/>
        <data:adEnd/>
      </b:if>
      <div class='inline-ad'>
        <data:adCode/>
      </div>
        <data:adStart/>
    </b:if>
    <b:if cond='data:numPosts != 0'>
      &lt;/div&gt;&lt;/div&gt;
    </b:if>
  <data:adEnd/>
</b:includable>

5. Klik pratinjau sebelum di simpan, jika sudah benar baru klik save atau simpan.
Selesai sudah tentang Cara, Triks atau Tips Mengganti Tampilan Desain Halaman Blog Home Dengan lebih Cantik, Jika sobat melakukannya dengan tahap-tahap di atas pasti tampilan di home blog sobat tidak urut ke bawah lagi, melainkan berubah menjadi beberapa kolom seperti gambar di atas.
Apabila dalam penerapan ada kesulitan silahkan koment di bawah...
Selamat mencoba, dan semoga berhasil.!!!

,

BACA JUGA

Ditulis Oleh : Hendra Arrasyid // 17.10

0 komentar:

Poskan Komentar