Home Panduan Template Cara Mempercantik Tampilan Blog dengan Modifikasi Tampilan Postingan

Sunday, September 4, 2016

Cara Mempercantik Tampilan Blog dengan Modifikasi Tampilan Postingan

modifikasi tampilan posting grid
Setelah sebelumnya kita sudah membahas modifikasi header blog, kali ini akan kita bahas modifikasi postingan blog.

Tidak salah bukan jika saya bilang postingan merupakan komponen blog paling sentral?

Yap, tentu saja!

Tanpa postingan nggak bisa disebut blog! Mengapa? Karena tidak ada isinya.

Semua isi yang sering kita kenal kontent (Bisa berupa artikel + gambar + Vidio atau gabungan salah dua sampai salah tiganya) berada dalam elemen postingan.

Sebenarnya, tanpa diutak atikpun postingan sudah melekat pada blog, termasuk pada template bawaan blogger.

Tapi, jika dibuat menjadi lebih menarik akan menambah daya tariknya bukan? Iya nggak?

Sebelumnya, saya sudah posting panduan membuat template sendiri seperti tahapan berikut!


Bagi yang belum mengikuti, saya sarankan untuk membacanya terlebih dahulu! Karena ini berkaitan.

Dan karena pada panduan kali ini saya juga menggunakan template yang sudah dibuat mengikuti panduan sebelumnya!

Pertama, coba lihat dulu screenshot berikut!

modifikasi tampilan posting grid

Itu merupakan tampilan posting pada Homepage maupun halaman posting yang polos dan tidak ada apa-apanya (Belum dimodifikasi).

Kalau sobat sudah puas dengan tampilan seperti itu, ya silahkan saja!

Dan sepertinya tidak perlu mengikuti panduan kali ini!

Tapi jika sobat seperti kebanyakan manusia yang selalu merasa kurang, sepertinya boleh mengikuti panduan kali ini!

Kita kenalan dulu, ada kode apa saja pada postingan blog.

Sobat lihat screenshot kode berikut!

modifikasi tampilan posting grid

Itu adalah satu paket kode kontent yang ditandai dengan berada dalam elemen yang saya beri warna kuning. “Content”

Di situ ada banyak sekali macam kode. Tapi jangan ditengok semuanya dulu.

Sobat fokus saja dengan kode yang saya block!

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


Sobat ingat saya pernah bilang elemen html sebagai wadah, seperti wrapper, outer-wrapper, header-wrapper dan lainnya?

Dalam kasus ini, elemen di atas juga disebut wadah. Jadi sobat bisa mengaturnya dengan kode CSS.

Titik-titik dalam kode tersebut jika diklik akan memunculkan kode yang juga sangat banyak.

Kode-kode tersebutlah yang jika dimodifikasi dengan CSS akan tampil berbeda dari tampilan default.

Tapi, tentu sobat pasti bingung duluan mau modifikasinya bagaimana? Iya kan?

Mungkin, kita bisa meringkas menjadi beberapa elemen penting yang harus dimodifikasi saja. Bagaimana?

Jadi, kita bisa memulai dengan modifikasi beberapa poin penting saja.

Seperti yang ada pada tampilan berikut!

modifikasi tampilan posting grid

Tapi sebelumnya, kita ubah dulu tampilan wadahnya sesuai selera sobat semua.

.post{background:#eaeaea; margin:0 0 15px;padding:10px 15px 0}


Fungsi-fungsi kodenya sudah paham bukan? Kan sudah saya jelaskan di bab-bab sebelumnya.

Kalau di save, ada satu bagian yang tidak ikut terwadahi, terutama untuk background. Yaitu elemen pembungkus date-header.

Jadi perlu kode tambahan sehingga menjadi

.post{background:#eaeaea; margin:0 0 15px;padding:10px 15px 0}
.date-outer {background:#eaeaea}


Itu hanya pengaturan background postingan!

Sekarang secara berurutan kita akan modifikasi sesuai gambar di atas.


#1 Date-Header

Ini merupakan tampilan tanggal kapan postingan tersebut diterbitkan.
Tidak terlalu rumit karena backgroundnya sudah kita atur, tinggal pengaturan tulisannya saja.

Pengaturan font sama seperti postingan saya sebelum-sebelumnya, jika belum paham coba baca Modifikasi Header Populer.

Terapkan kode CSS berikut!

h2.date-header{text-transform:none;font-family: courier new;font-size: 16px;color:#444;line-height:1.2em;margin:3.2em 0}


Ah, agar sobat paham.

Kenapa sih penulisannya h2.date-header yang artinya kenapa h2 terus diikuti .date-header?

Ada tiga tag html pemanggilan yang saya pahami setelah dua sudah saya jelaskan.
  • Pertama, mengandung id=’kode elemen’ dengan pengaturan CSS-nya diawali tanda (#)
  • Kedua, mengandung class=’kode elemen’ dengan pengaturan CSS-nya diawali tanda (.)
  • Dan Ketiga, tanpa kandungan apa-apa. Artinya tidak hamil! Seperti <h2> <img> <body> dan lainnya. Kode tanpa kandungan apa-apa sobat bisa mengaturnya dengan kode CSS tanpa awalan apapun. Seperti body{Kode pengaturan CSS-nya} h2{Kode pengaturan CSS-nya}

Lalu, untuk pertanyaan mengapa h2 harus diikuti .date-header?

Jawabannya adalah kode tersebut digunakan untuk pengaturan yang lebih spesifik. Yaitu pengaturan elemen di dalam elemen lain.

Jadi, yang perlu diperhatikan adalah elemen terluarnya lalu elemen yang ada di dalamnya.

Jika penulisannya h2.date-header itu artinya elemen date-header berada di dalam elemen h2.

Sebaliknya, jika penulisannya .date-header h2 artinya elemen h2 berada di dalam date-header.

Jika kode html pemanggilnya berbeda tinggal menyesuaikan saja.

Seperti .post .date-header (misalkan) yang artinya kode htmlnya sama-sama mengandung class=’....’

Sebagai catatan sobat, spasi penulisan antara kode CSS elemen terluar dan yang di dalamnya juga memiliki pengaruh. Pengaruh ini dalam artian pernyataan untuk menunjukkan kalau kodenya tidak salah.

Jika penulisannya h2 <spasi> .date-header kodenya tidak akan bekerja jadi harus digabung.

Sementara jika .date-header sebagai elemen luar dan h2 sebagai elemen dalam, ini justru harus menggunakan spasi. Jika tanpa spasi elemen h2 akan dianggap satu kesatuan kode date-header (Yang tentu tidak ditemukan) .date-headerh2

Dari sini ada yang ditanyakan? Masak gini aja nanya?


#2 Judul Postingan atau Post-Title

Caranya sama saja! Karena ini kan umumnya hanya diatur tulisannya saja.

Jadi, sobat bisa menerapkan kode berikut!

.post h3{font-family:courier new;text-align:center; color:#444; font-size:30px;}
.post h3 a{ font-family:courier new; font-size:30px;font-weight:700;line-height:1.2em;color:#444;margin:.0em 0 0; }
.post h3 a:hover{color:#3094db; font-size:30px;}



Lhoh, kok banyak?

Sebab ada fungsinya masing-masing.

Pertama, yang harus sobat tahu, judul postingan ditandai dengan heading h3. Makanya dibungkus dengan kode .post sehingga menjadi .post h3

Kita akan bahas satu-satu.

.post h3 digunakan untuk mengatur judul postingan pada tampilan postingan, jadi pada tampilan home page tidak akan bekerja karena berupa link yang ditandai dengan kode <h3><a judul postingan/></h3>

.post h3 a digunakan untuk pengaturan judul postingan yang berupa link pada homepage

.post h3 a:hover digunakan untuk pengaturan perubahan tampilan judul postingan di homepage ketika kursor diarahkan menuju link judul.


#3 Post Image

Untuk satu ini mungkin bisa dibilang optional, jadi perlu diatur juga bisa jadi tidak.

Karena bisa saja sobat tidak suka menggunakan gambar dalam postingan, iya kan? Bisa saja!

Tapi, sobat perlu tahu kalau postingan juga bisa membantu mendongkrak optimasi SEO artikel sobat. Mengapa? Selain menarik dan tidak monoton, gambar juga bisa menjadi alternatif pencarian pada mesin pencari.

Untuk pengaturannya ada dua macam cara,

Pertama dengan kode .post a img, itu jika kode gambar sobat tidak ada perubahan ketika melakukan upload. Karena kode default gambar ketika diupload pada postingan blog seperti berikut ini.

<a kode url><img kode gambar/></a>


Kedua bisa menggunakan .post img, itu jika sobat memodifikasi kodenya, kalau saya seringnya menggunakan ini karena kode <a> sebelum <img> sudah saya hilangkan.

Kode pengaturan CSS-nya bisa seperti ini! (Sobat bisa modifikasi sendiri)

.post img{text-align:center; margin-left:0px;  width:100%; height:auto;}



#4 Post-body atau Badan Artikel

Sudah paham bukan yang saya maksud badan artikel? Yap, itu adalah artikel itu sendiri.

Sekali lagi, pengaturannya masih sama saja nggak ada bedanya.

Dan pada post-body ini selain terdiri dari tulisan biasa juga terdiri dari link yang bisa sobat atur juga sehingga kodenya jadi berikut.

.post-body{padding-top:6px;margin:0px 0px ;text-align:justify; font-family: courier new;font-size: 20px;line-height:1.6em; color:#555; }
.post-body a{font-size: 20px;color:#3094db;}
.post-body a:hover{font-size: 20px;color:#4d4544;}


Ah ya, coba cari kode berikut lalu hapus!

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>


Itu untuk menghilangkan gambar pensil yang mengganggu pada tampilan postingan.

Sebenarnya ada banyak pengaturan yang bisa dilakukan jika bicara tentang badan postingan.

Karena dalam postingan bisa mengandung elemen apa saja, seperti blockquote, numbered list dan bullet list.

Seperti screenshot berikut!

modifikasi tampilan posting grid

Saya akan memberikan contoh pengaturan yang nanti bisa sobat kembangkan sendiri.

.post blockquote {text-align:left;background:#cab894;margin-left: 30px;font-family: courier new;font-size: 20px;font-weight: 300;font-style: italic;color: #4d4544;border: 20px solid #cab894; border-radius: 10px;}
.post blockquote:before {content: &quot;\f10d&quot;;float: left;margin-left: -15px;font-family: &quot;FontAwesome&quot;;font-style: normal;font-size: 15px;line-height: 1.33em;color: #3094db;opacity: 0.88;}
.post ol{ width:90%; background: #cab894; border-radius:10px;margin-left:30px;padding-top:5px;padding-bottom:5px;}
  .post ol li{ line-height:1em; text-align:left;padding: 5px 5px;margin-top:5px; width:98,5%; height: 65px; background:#3094db; color:#4d4544; border-radius:10px;}
  .post ul{list-style:none;margin-left:35px;text-align:left;}
.post ul li:before{content: &quot;\f04e&quot;;float: left;margin-left: -15px;font-family: &quot;FontAwesome&quot;;font-style: normal;font-size: 15px;line-height: 1.33em;color: #3094db;opacity: 0.88;margin-top:7px;margin-right:5px}


Umumnya, yang biasa diatur hanyalah blockquote.

Tapi, saya menambahkan pengaturan untuk numbered list dan bullet list sebagai bukti elemen lain bisa diatur jika sobat mau.

Ah ya, sobat pasti melihat ada kode before setelah kode .post blockquote atau .post ul li iya kan?

Itu fungsinya untuk menambahkan elemen sebelum elemen inti.

Jika pada blockquote saya menambahkan elemen quote menggunakan font awesome. Jika sobat tidak suka bisa menghilangkannya.


#5 Post footer

Pengaturan satu ini sama saja, banyak elemen yang ada di dalamnya. Seperti Author post, timestamp atau waktu postingan terbit, link komentar dan lainnya.

Jika sobat ingin mengatur semuanya sobat bisa mengaturnya sendiri jika mau!

Atur semua yang ada pada elemen  <div class='post-footer'> kode yang bisa diatur </div>

Tapi, kali ini saya akan memberikan kode pengaturan standar saja.

.post-footer, .post-footer a{font-family:courier new; line-height: 1.5em;font-size:16px; margin-top:20px}


Sebenarnya pada tampilan postingan sudah ada tombol share, tapi menurut saya mengganggu karena tampilannya jelek.

Kalau sobat mau, kita bisa menghilangkannya secara permanen dengan menghilangkan kode berikut!

<!-- share buttons -->
      <div class='post-share-buttons goog-inline-block'>
        <b:include cond='data:post.sharePostUrl' data='post' name='shareButtons'/>
      </div>


Coba sekarang simpan dan lihat hasilnya!

modifikasi tampilan posting grid

Jadi, jika digabungkan kode CSS postingannya jadi seperti berikut!

.post{background:#eaeaea; margin:0 0 15px;padding:10px 15px 0;}
.date-outer{background:#eaeaea}
h2.date-header{display:none;text-transform:none;font-family: courier new;font-size: 16px;color:#444;line-height:1.2em;margin:3.2em 0}
.post h3{font-family:courier new;text-align:center; color:#444; font-size:30px;margin-bottom: 20px}
.post h3 a{ font-family:courier new; font-size:30px;font-weight:700;line-height:1.2em;color:#444;margin-bottom: 20px }
.post h3 a:hover{color:#3094db; font-size:30px;}
 .post img{text-align:center; margin-left:0px;  width:100%; height:auto;}
.post-body{padding-top:6px;margin:0px 0px ;text-align:justify; font-family: courier new;font-size: 20px;line-height:1.6em; color:#555; }
.post-body a{font-size: 20px;color:#3094db;}
.post-body a:hover{font-size: 20px;color:#4d4544;}
.post-footer, .post-footer a{font-family:courier new; line-height: 1.5em;font-size:16px; margin-top:20px}
.post blockquote {text-align:left;background:#cab894;margin-left: 30px;font-family: courier new;font-size: 20px;font-weight: 300;font-style: italic;color: #4d4544;border: 20px solid #cab894; border-radius: 10px;}
.post blockquote:before {content: &quot;\f10d&quot;;float: left;margin-left: -15px;font-family: &quot;FontAwesome&quot;;font-style: normal;font-size: 15px;line-height: 1.33em;color: #3094db;opacity: 0.88;}
.post ol{ width:90%; background: #cab894; border-radius:10px;margin-left:30px;padding-top:5px;padding-bottom:5px;}
  .post ol li{ line-height:1em; text-align:left;padding: 5px 5px;margin-top:5px; width:98,5%; height: 65px; background:#3094db; color:#4d4544; border-radius:10px;}
  .post ul{list-style:none;margin-left:35px;text-align:left;}
.post ul li:before{content: &quot;\f04e&quot;;float: left;margin-left: -15px;font-family: &quot;FontAwesome&quot;;font-style: normal;font-size: 15px;line-height: 1.33em;color: #3094db;opacity: 0.88;margin-top:7px;margin-right:5px}


Kalau ingin lebih cantik, sobat bisa mengaturnya sendiri!


Selanjutnya apa?

Sobat belajar sampai di sini saja juga boleh, tinggal nyantikin sesuai selera.

Bukannya jelek?

Bukannya yang bagus itu tampilan di homepage pendek dan ada auto readmorenya?

Ah nggak juga, banyak kok blogger yang emang rata-rata blogger personal yang majang postingannya di homepage tanpa auto readmore.

Gaya seperti itu sah sah saja, tapi ada kekurangannya.

Pertama, bayangkan jika artikel sobat panjangnya bukan main?

Misal seperti artikel di blog Ganteng.id ini deh!

Pasti, selain nggak enak dilihat juga susah dijelajahi apa yang ada di halaman homepage. Padahal, halaman hompage itu kayak showroom lhoh! Iya kan?

Kedua, bisa saja memperlambat loading homepage blog! Bisa saja bukan? Sebab, seluruh isi artikel jadi di load pada homepage. Padahal, saat promosi blog seringnya kita pamer url homepage kan?

Lalu, harus dibuat pendek seperti sinopsis dan ada auto readmorenya ya?

Tidak harus, tapi nggak salah untuk dicoba!

Sebenarnya, ada banyak cara yang bisa digunakan untuk membuat auto readmore.

Tapi, rata-rata cara di luar sana sering menyebabkan ukuran thumbnail tidak bisa diatur, ada pula yang snippet atau sinopsisnya tidak bisa diatur panjang pendek katanya, ada pula yang bikin loading blog jadi tambah berat.

Namun, kali ini saya akan membagikan cara membuat auto readmore dengan thumbnail yang cukup membuat loading blog sobat masih tetap santai dan gambar serta snippetnya menjadi nurut, alias mudah diatur sehingga lebih mudah diatur agar responsive dan enak dilihat.

Pertama, kita akan menambahkan kode CSS berikut!

img.thumbnail-post {
width:100px;
height:100px;
float:left;
margin:0px 10px 0px 0px;
}


Jika sobat mengikuti Panduan membuat template blog ini dari awal, letakkan saja di atas </style>

Sobat lihat kode di atas, terutama untuk width dan heightnya. Itu bisa digunakan untuk mengatur ukuran thumbnailnya.

Float untuk posisi yang artinya ada di kiri dan margin untuk jarak gambar dari tepi.

Belum... jangan buru-buru di save! Nafsu amat pingin cepat jadi?

Sobat masih harus memasang tag html pemanggilnya.

Caranya, cari dulu kode <data:post.body/>

Biasanya, sobat bakal ketemu 2 sampai 3 kode seperti itu.

Setelah ketemu, coba ganti salah satu kode tersebut dengan kode di bawah!  (Coba saja satu-satu sampai sukses!)

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
      <a expr:href='data:post.url'><img class='thumbnail-post'  expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>
    <b:else/>
      <a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>
    </b:if>
    <div class='post-snippet'>
      <data:post.snippet/>
    </div>
    <div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
    </div>
  </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>



Kode html di atas memiliki tiga bagian yang akan muncul,
  1. Gambar atau thumbnail
  2. Snippet atau deskripsi atau sinopsis atau ringkasan atau (terserah sobat menyebutnya apa)
  3. Auto readmore atau kalau nggak ngerti bahasa inggris bilang saja baca selengkapnya

Thumbnail ditandai dengan kode berikut!

<a expr:href='data:post.url'><img class='thumbnail-post'  expr:alt='data:post.title' expr:title='data:post.title' expr:src='data:post.firstImageUrl'/></a>


Sebenarnya, meski nggak saya kasih tahu dan kalau sobat sudah ikuti panduan membuat template sendiri dari awal, sobat pasti tahu kode di atas digunakan untuk pemanggilan thumbnail, kalau melihat ada kode class=’thumbnail-post’. Iya kan? Masak harus dijelaskan lagi?

Sebenarnya kode di atas adalah pengadopsian kode pemanggilan link dan image standar.

Perbedaannya hanya jika biasanya kodenya seperti ini href=’linknya’ sekarang menjadi expr:href=’data:post.url’.

Memang apa bedanya?

Jadi, pemanggilan link dan juga berlaku untuk data lainnya adalah pemanggilan data yang memang sudah ada pada blog.

Jika dalam contoh adalah data:post.url maka itu untuk pemanggilan url postingan blog.

Begitu juga berlaku untuk kode-kode lainnya.

Contoh satu lagi adalah data:post.title yang digunakan untuk pemanggilan judul postingan.

Nah, dalam kode pemanggilan thumbnail di atas saya tambahkan kode expr:alt='data:post.title'

Itu merupakan Alt image, yang terhitung bagus untuk SEO dan juga mengurangi error blog.

Lhoh, padahal kan ketika upload gambar sudah memberikan alt image manual.

Ini beda kasus, alt image yang sobat berikan masuk pada pengkodean .post img yang muncul di halaman postingan.

Berhubung kali ini gambar postingan hanya kita pinjam urlnya saja untuk dijadikan thumbnail, jadi membutuhkan penambahan alt image lagi. Gitu!

Nah, sekarang lihat kode di bawah ini!

<a expr:href='data:post.url'><img class='thumbnail-post' expr:alt='data:post.title' expr:title='data:post.title' src='http://1.bp.blogspot.com/-XeZs003zT-4/UwM1mfc9l3I/AAAAAAAAAlw/TNTcFCMPH4A/s1600/no-image-thumbnail.jpg'/></a>


Itu sama saja, tapi sifatnya hanya alternatif jika sobat membuat artikel tanpa gambar. Jadi gambar no image itu sebagai penggantinya.

Coba saja nanti lakukan posting tanpa gambar untuk melihat efeknya!

Tapi saran saya, tetap gunakan gambar sob! Selain bagus buat tampilan artikel biar nggak bikin bosen, katanya juga bagus untuk SEO. Kan lumayan?

Sekali lagi jangan buru-buru disimpan dulu! Tapi kalau nafsu kepingin ngesave boleh saja sih! Siapa tahu bisa lihat efek jadinya gimana?

Selanjutnya adalah tentang snippet yang ditandai dengan kode

<div class='post-snippet'>
      <data:post.snippet/>
    </div>


Jadi, itu digunakan untuk memunculkan ringkasan blog yang diambil dari beberapa kata pertama dari artikel sobat.

Nah begini masalahnya, kalau kita hanya menggunakan kode di atas sering kita dibuat pasrah dengan tampilan snippet yang tidak bisa diatur panjang tulisannya.

Bisa juga mengikuti panjang tulisan popular post.

Tapi, popular post yang fungsinya sebagai widget pendukung tentu berbeda dengan postingan pada homepage yang fungsinya sebagai display.

Popular post membutuhkan snippet yang tidak panjanng bahkan bisa sama sekali tidak membutuhkan.

Sementara posting blog di homepage membutuhkan snippet yang terkadang harus sedikit lebih panjang agar mampu memberikan sedikit deskripsi artikel.

Coba lihat screenshot berikut!

modifikasi tampilan posting grid

Pendek bukan?

Untuk mengatasinya kita perlu menambahkan script tambahan!

Seperti ini, dan letakkan di atas kode </head>

<script type='text/javascript'>
snippet_count = 300;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var snippet = strx.split("<");
for(var i=0;i<snippet.length;i++){
if(snippet[i].indexOf(">")!=-1){
snippet[i] = snippet[i].substring(snippet[i].indexOf(">")+1,snippet[i].length);
}
}
strx = snippet.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 createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="post-snippet">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>


Sobat lihat snippet_count = 300;

Angka 300 itu digunakan untuk mengatur panjang pendeknya snippet, tapi ini tidak bisa langsung digunakan. Harus ada penggantian kode sedikit lagi.

Cari dan ganti <data:post.snippet/> atau <div class='post-snippet' expr:data-snippet='data:post.snippet'/> atau <meta expr:content='data:post.snippet' name='description'/>

Dengan kode berikut!

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>


Tekan simpan, maka hasilnya jadi seperti ini!

modifikasi posting blog

Selanjutnya adalah tentang tombol readmore itu sendiri.

Sobat bisa lihat kode berikut!

<div class='rm-button-wrap'>
      <a class='button' expr:href='data:post.url'>Baca Selengkapnya</a>
</div>

Di atas saya buat dengan tulisan Baca Selengkapnya, jika sobat lebih kreatif bisa mengubahnya dengan kalimat lain. Tenang, itu tidak dikenai undang-undang hak cipta kok!

Kalau sobat ingin memodifikasi tampilannya, sobat lihat kode <div class='rm-button-wrap'> dan class='button'! Nah, dengan begitu sobat tinggal merubah kode CSSnya. Sudah paham bukan mengaturnya di CSS?


Sekarang gimana lagi? 

Sobat bisa selesai juga bisa lanjut!

Kebanyakan sih, sudah banyak yang puas dengan tampilan postingan seperti itu dengan auto readmore.

Tapi sebagian lagi ingin tampilan yang berbeda dengan membuatnya menjadi grid!

Lhah, bagaimana lagi itu?

Oke, kita akan mencoba membahasnya pelan-pelan!

Kalau capek jangan dipaksa, mending istirahat dulu! (Kayaknya lebih capek yang bikin artikel ya?)

Awalnya, saya pikir rumit membuat tampilan postingan menjadi Grid. Ternyata tidak juga.

Kita hanya perlu bermain tag kondisional dan modifikasi tampilan postingan pada homepage.

Tapi, sebelumnya kita harus menghilangkan satu masalah sob!

Masalahnya adalah date-header yang mengganggu.

Coba cari kode seperti berikut ini, lalu musnahkan!

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>


Itu untuk tampilan tanggal terbit artikel sob!

Ada beberapa kode sob, coba saja satu-persatu sampai saat disimpan tampilan tanggal hilang.

Jangan khawatir, itu tidak dihilangkan sepenuhnya. Kita hanya akan mengganti letaknya agar tidak mengganggu.

Selanjutnya cari kode berikut!

<div class='post-header-line-1'/>


Lalu letakkan kode berikut di bawahnya!

<b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>


Setelah sumber masalah beres, kita bisa mulai membuat tampilan Gridnya!

Sobat bisa menambahkan kode berikut!

<b:if cond='data:blog.pageType != &quot;item&quot;'>
.post{width:44%; height:350px; float:left; background:#eaeaea; margin:10px 10px;padding:5px 5px;}
</b:if>


Tag kondisional yang saya gunakan adalah kode ini <b:if cond='data:blog.pageType != &quot;item&quot;'>

Dimana efeknya berlaku pada semua halaman kecuali halaman postingan.

Mengapa saya buat demikian? Agar nanti halaman homepage dan label bisa tampil grid.

Dan kunci untuk tampilan Grid sendiri adalah pada kode CSS yang sudah diapit tag kondisional di atas.

Pada kode width itu digunakan untuk membuat berapa jumlah kolom yang ingin sobat buat! Intinya, elemen post terdapat di dalam content-wrapper dengan lebar tertentu sesuai yang sobat atur. Dari lebar tersebut dinyatakan 100% karena masih utuh.

Nah, kode width saya buat menjadi 44% adalah untuk membuat kolom menjadi dua dengan asumsi sisa 2%nya dijadikan margin dan padding.

Kunci selanjutnya adalah Float, dengan penggunaan float:left ini seluruh post akan berada di samping post lainnya.

Jika tanpa float, maka postingan hanya akan sama saja. Membaris ke bawah, hanya ukuran lebarnya saja yang lebih kecil.

Sementara untuk height atau tinggi postingan saya buat 350 px, sobat bisa mengaturnya sendiri sesuai selera.

Untuk margin dan padding sobat juga masih bisa mengaturnya, karena yang saya buat masih belum rapi.

Maka hasilnya akan jadi seperti berikut!

modifikasi tampilan posting grid

Bisa dibilang masih berantakan bukan?

Sebab, snippet atau ringkasannya belum kita atur atau pendekkan.

Sudah tahu kan cara mendekinnya?

snippet_count = 50;


Kalau saya, snippetnya saya jadikan 50.

Untuk lebih merapikan tambahkan kode CSS berikut ini di dalam tag kondisional yang kita bahas tadi.

.post h3, .post h3 a, .post h3 a:hover{ line-height:0.75em;margin-bottom: 5px }
h2.date-header{line-height:0.75em;margin:0.75em 0}
.post-footer, .post-footer a{line-height: 1em;font-size:16px; margin-top:5px}


Sehingga keseluruhan kodenya akan menjadi seperti ini!

<b:if cond='data:blog.pageType != &quot;item&quot;'>
.post{width:44%; height:350px; float:left; background:#eaeaea; margin:10px 10px;padding:5px 5px;}
.post h3, .post h3 a, .post h3 a:hover{ line-height:0.75em;margin-bottom: 5px }
h2.date-header{line-height:0.75em;margin:0.75em 0}
.post-footer, .post-footer a{line-height: 1em;font-size:16px; margin-top:5px}
</b:if>


Sekarang coba simpan dan lihat hasilnya!

modifikasi tampilan posting grid

Dari sini, sobat bisa modifikasi sendiri!

Entah itu tampilan thumbnailnya, snippetnya, sampai kelengkapan lainnya. Bisa kan sob?

Nah, sekarang sobat sudah berhasil menyelesaikan 40% panduan membuat template sendiri yang mungkin kata para master ini hanya 1% bagi mereka!

40%



Untuk panduan berikutnya, adalah cara modifikasi kotak komentar dan memasang komentar facebook serta disquss di blog

Share this

Recommended

Disqus Comments