Cara Mengganti Desain Halaman Blog Yang Dihasilkan Oleh Penggunaan Template Standar

Teknik yang diuraikan dalam artikel ini merupakan versi kedua dari uraian yang terdapat dalam artikel sebelumnya dengan judul ’Cara Membuat Headline Artikel Di Beranda Blog Tampilan Versi Seluler’ dan juga uraian teknik dalam artikel yang berjudul ‘Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda’. Bilamana pada artikel tersebut telah diuraikan cara yang digunakan untuk mengubah desain tampilan halaman blog, dalam hal ini adalah mengubah model bidang posting serta menambahkan sebuah kolom headline untuk posting artikel yang ditampilkan di beranda, maka maksud dan tujuan dari penggunaan teknik yang diuraikan dalam artikel ini adalah untuk membuat kolom posting menjadi beberapa bagian seperti yang tampak pada gambar di atas.

Seperti yang telah kita ketahui bersama 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 memiliki desain tampilan halaman beranda yang berbeda, dalam hal ini artikel tidak ditampilkan secara urut dari atas ke bawah akan tetapi ditampilkan dalam beberapa kolom seperti yang tampak pada gambar di atas. Dengan membagi kolom posting menjadi beberapa bagian (seperti yang tampak pada gambar di atas), maka artikel yang ditampilkan di halaman beranda tampak lebih ringkas dan jumlah artikel yang dapat ditampilkan pun menjadi lebih banyak.

Berbicara mengenai desain tampilan halaman beranda blog, pada dasarnya template standar yang disediakan oleh Blogger juga dapat dimodifikasi sedemikian rupa sehingga dapat menampilkan artikel dalam beberapa kolom posting seperti halnya model kolom posting yang digunakan pada beberapa macam kustom template. Dimana untuk menjadikan desain tampilan halaman yang dihasilkan oleh penggunaan template standar Blogger menjadi demikian, maka Anda dapat melakukannya dengan mengerjakan langkah-langkah di bawah ini secara berurutan.

Pertama, backup template Anda dan kemudian buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > ‘Expand Template Widget’.

Kedua, cari ]]></b:skin> dan kemudian sisipkan kode di bawah ini tepat di atasnya.

/***************************************************
Mengubah Kolom Posting Yang Dihasilkan Oleh Template
Standar Blogger Menjadi Beberapa Bagian Yang Sama
Oleh: Semar Bingung
Blog: ELTELU -:[SEMAR BINGUNG'S WEBLOG]:-
URL : http://eltelu.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 #DBDBDB;
}

.kotak-judul {
  width: 96%;
  height: 30px;
  padding: 5px;
  margin-bottom: 5px;
  text-align: justify;
  overflow: hidden;
  border: 1px solid #f3f3f3;
  font: bold 13px Arial;
  background: #F5F5F5;
  background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
}

.kotak-gambar {
  float: left;
  width: 90px;
  height: 95px;
  margin-right: 10px;
  border: 1px solid #f3f3f3;
  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 #f3f3f3;
}

.baca-selengkapnya {
  text-align: right;
}

.baca-selengkapnya a {
  display: inline-block;
  margin: 0;
  padding: 2px 2px;
  border: 1px solid #f3f3f3;
  text-align: center;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background: #F5F5F5;
  background: -moz-linear-gradient( center top, #f9f9f9 20%, #F5F5F5 100% );
  background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #f9f9f9), color-stop(1, #F5F5F5) );
  font: 11px Arial;
}

.baca-selengkapnya a:hover {
  background: #f9f9f9;
  background: -moz-linear-gradient(center top, #F5F5F5 20%, #f9f9f9 100%);
  background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #F5F5F5),color-stop(1, #f9f9f9));
}

Keterangan:

Apabila warna garis, background, efek hover, serta ukuran maupun model huruf yang dihasilkan oleh rangkaian CSS di atas belum sesuai dengan desain tampilan halaman blog yang Anda kelola, maka silakan dilakukan kustomisasi seperlunya.

Ketiga, cari kode <b:includable id='main' var='top'> dan kemudian hapus seluruh rangkaian kode untuk bagian tersebut. Sebagai contoh perhatikan rangkaian kode di bawah ini.

<b:includable id='main' var='top'>   <!-- hapus dari sini -->

  ----- rangkaian kode -----

</b:includable>   <!-- hapus sampai sini -->

Keterangan:

Jika sebelum ini Anda telah mengimplementasikan atau menerapkan teknik yang diuraikan dalam artikel dengan judul ‘Cara Mengubah Desain Tampilan Blog Untuk Model Bidang Artikel Halaman Beranda’, maka cari dan kemudian hapus seluruh rangkaian kode yang digunakan pada langkah kedua serta langkah keempat artikel tersebut, karena rangkaian kode yang dimaksud sudah tidak diperlukan dan tidak digunakan lagi apabila menerapkan teknik yang diuraikan dalam artikel ini.

Keempat, salin rangkaian kode berikut ini dan kemudian sisipkan di bagian yang sebelumnya telah dihapus dengan menggunakan langkah ketiga di atas.

<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgtz6J6fAeCikK3PhIRJmOcLm5ntM4gU-5AhLQmpC-aKBrqZptWe58AGLOAVHfRCFRTIq47r41_j8M3h4VRnRjFaB6gGi1ZAk6JE3IyJ1VuT6ZAifbBYhCMbbneIE4bN0G_4JBmjMzZuY/s800/ELTELU.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>

Kelima, lakukan pratinjau (preview) untuk tampilan akhir yang akan didapatkan dan apabila hasilnya telah sesuai dengan harapan maka simpan template Anda.

Setelah template disimpan maka model bidang posting yang ditampilkan di halaman beranda tidak lagi urut sesuai dengan tanggal penerbitan artikel dari atas ke bawah, namun akan berubah menjadi beberapa kolom artikel seperti yang tampak pada gambar di atas. Dan kemudian perlu diketahui bahwa apabila teknik yang diuraikan dalam artikel ini dikerjakan dengan benar, maka teknik tersebut dapat diimplementasikan secara aman pada semua kategori template standar yang disediakan oleh Blogger.

Namun demikian apabila dalam penerapannya Anda mengalami kesulitan, maka silakan ajukan pertanyaan mengenai kesulitan yang Anda alami ketika mengimplementasikan teknik tersebut dengan cara mengeposkan komentar dalam artikel ini.

Semoga berguna dan bermanfaat.

Salam.