Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting

Tabel Konten
  1. Kode XML 
  2. Tata Letak 1: Thumbnail di Sebelah Kiri Judul dan Ringkasan Posting 
  3. Tata Letak 2: Thumbnail di Sebelah Atas Judul dan Ringkasan Posting 
  • Struktur Posting yang Tercipta 
  • Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk membuat templat List & Masonry Grid)? Di sini Saya mencoba untuk membuat kode XML posting khusus yang Saya buat sefleksibel mungkin untuk keperluan modifikasi di masa datang. Kode ini sudah mencakup modifikasi ringkasan posting, sehingga jika Anda sudah mengimplementasikan modifikasi ini, maka Anda tidak perlu lagi repot-repot untuk mengimplementasikan tutorial pembuatan posting auto read-more.

    Namun sebelum melakukan modifikasi ini, perlu dipertimbangkan bahwa nanti Anda akan mengubah struktur posting secara keseluruhan, sehingga beberapa kustomisasi lama Anda seperti penambahan widget artikel terkait, widget berbagi dan semuanya akan menghilang. Disarankan untuk menyimpan salinan templat Anda terlebih dahulu sebelum melakukan modifikasi ini.

    Kode XML 

    Langkah pertama adalah mengedit XML templat. Kode XML ini cukup diterapkan sekali saja. Mengenai pengaturan posisi setiap elemen bisa kita lakukan dengan CSS yang sudah Saya tuliskan di bawah:

    <b:includable id='post' var='post'>
    
      <article expr:class='&quot;_post _post-&quot; + data:blog.pageType' expr:id='&quot;post-&quot; + data:post.id'>
    
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
            <div class='_post-part _post-thumbnail-area'>
              <b:if cond='data:post.thumbnailUrl'>
                <img class='_post-thumbnail' expr:alt='data:post.title' expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;1:1&quot;)' height='200' width='200'/>
              </b:if>
            </div> <!-- ._post-thumbnail-area -->
          </b:if>
        </b:if>
    
        <div class='_post-part _post-body-area'>
    
          <h3 class='_post-title'>
            <b:if cond='data:post.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'>
                  <b:if cond='data:blog.url != data:post.url'>
                    <a expr:href='data:post.url'><data:post.title/></a>
                  <b:else/>
                    <data:post.title/>
                  </b:if>
                <b:else/>
                  <data:post.title/>
                </b:if>
              </b:if>
            <b:else/>
              [Untitled]
            </b:if>
          </h3> <!-- ._post-title -->
    
          <div class='_post-body'>
            <b:if cond='data:blog.pageType == &quot;item&quot;'>
              <data:post.body/>
            <b:else/>
              <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
                <data:post.body/>
              <b:else/>
                <b:if cond='data:post.snippet'>
                  <data:post.snippet/>
                <b:else/>
                  No content.
                </b:if>
              </b:if>
            </b:if>
          </div> <!-- ._post-body -->
    
          <footer class='_post-footer'>
            <div class='_post-footer-line _post-footer-line-1'>
              <span class='_post-author vcard'>
                <b:if cond='data:top.showAuthor'>
                  <data:top.authorLabel/> <span class='fn'>
                  <b:if cond='data:post.authorProfileUrl'>
                    <a class='g-profile' expr:href='data:post.authorProfileUrl' rel='author' title='Author Profile'><data:post.author/></a>
                  <b:else/>
                    <span class='g-profile'><data:post.author/></span>
                  </b:if>
                  </span>
                </b:if>
              </span> <span class='_post-time'>
              <b:if cond='data:top.showTimestamp'>
                <data:top.timestampLabel/> <a class='_post-time-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='_post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>
              </b:if>
              </span> <span class='_post-comment-link'>
              <b:if cond='data:blog.pageType != &quot;item&quot;'>
                <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
                  <b:if cond='data:post.allowComments'>
                    <a expr:href='data:post.url + &quot;#comments&quot;'><data:post.commentLabelFull/></a>
                  </b:if>
                </b:if>
              </b:if>
              </span>
            </div> <!-- ._post-footer-line-1 -->
            <div class='_post-footer-line _post-footer-line-2'>
              <span class='_post-labels'>
                <b:if cond='data:post.labels'>
                  <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'>
                    <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>, </b:if>
                  </b:loop>
                </b:if>
                <!-- b:include data='post' name='postQuickEdit'/ -->
              </span>
            </div> <!-- ._post-footer-line-2 -->
          </footer> <!-- ._post-footer -->
    
        </div> <!-- ._post-body-area -->
    
      </article> <!-- ._post -->
    
    </b:includable>

    Salin semua kode di atas untuk menggantikan kode yang tampak seperti ini di dalam templat:

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

    Langkah berikutnya adalah menambahkan CSS khusus. Pilih salah satu saja.

    Tata Letak 1: Thumbnail di Sebelah Kiri Judul dan Ringkasan Posting 

    Post Thumbnail on the Left
    Thumbnail di sebelah kiri judul dan ringkasan posting.

    Salin kode CSS ini lalu letakkan di atas ]]></b:skin> atau </style>:

    /*!
    Thumbnail width: 200
    Thumbnail height: 200
    */
    
    ._post {
      background-color:white;
      height:200px; /* Thumbnail height */
      margin:0 0 10px;
      overflow:hidden;
      *zoom:1;
    }
    
    ._post:after {
      content:" ";
      display:block;
      clear:both;
    }
    
    ._post-title {
      font:normal bold 20px/1.2 Arial,Sans-Serif;
      margin:0 0 10px;
      padding:0;
    }
    
    ._post-thumbnail-area {
      width:200px; /* Thumbnail width */
      height:200px; /* Thumbnail height */
      background-color:#2D3957;
      float:left;
      overflow:hidden;
    }
    
    ._post-thumbnail {
      display:block;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      min-width:0;
      min-height:0;
      margin:0;
      padding:0;
      border:none;
      outline:none;
      position:static;
    }
    
    ._post-body-area {
      padding:20px;
      margin-left:200px; /* Thumbnail width */
      font-size:11px;
    }
    
    ._post-footer {
      margin:10px 0 0;
      padding:10px 0 0;
      border-top:1px dotted #ddd;
      font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;
      text-transform:uppercase;
      color:#999;
    }
    
    /* Item + Static Page */
    ._post-item,
    ._post-static_page {height:auto}
    
    ._post-item ._post-body-area,
    ._post-static_page ._post-body-area {
      margin:0;
      padding:20px;
      font-size:13px;
    }
    
    ._post-item ._post-title,
    ._post-static_page ._post-title {font-size:40px}

    Tata Letak 2: Thumbnail di Sebelah Atas Judul dan Ringkasan Posting 

    Thumbnail Before Post Title and Summary
    Thumbnail di sebelah atas judul dan ringkasan posting.

    Salin kode CSS ini lalu letakkan di atas ]]></b:skin> atau </style>:

    /*!
    Thumbnail width: 300
    Thumbnail height: 300
    */
    
    ._post {
      background-color:white;
      width:300px; /* Thumbnail width */
      margin:0 10px 10px 0;
      overflow:hidden;
      *zoom:1;
      /* float:left; */
    }
    
    ._post:after {
      content:" ";
      display:block;
      clear:both;
    }
    
    ._post-title {
      font:normal bold 16px/1.2 Arial,Sans-Serif;
      margin:0 0 10px;
      padding:0;
    }
    
    ._post-thumbnail-area {
      width:300px; /* Thumbnail width */
      height:300px; /* Thumbnail height */
      background-color:#2D3957;
      overflow:hidden;
    }
    
    ._post-thumbnail {
      display:block;
      width:100%;
      height:100%;
      max-width:none;
      max-height:none;
      min-width:0;
      min-height:0;
      margin:0;
      padding:0;
      border:none;
      outline:none;
      position:static;
    }
    
    ._post-body-area {
      padding:20px;
      margin:10px 0 0;
      font-size:11px;
    }
    
    ._post-footer {
      margin:10px 0 0;
      padding:10px 0 0;
      border-top:1px dotted #ddd;
      font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif;
      text-transform:uppercase;
      color:#999;
    }
    
    /* Item + Static Page */
    ._post-item,
    ._post-static_page {width:auto}
    
    ._post-item ._post-body-area,
    ._post-static_page ._post-body-area {
      margin:0;
      padding:20px;
      font-size:13px;
    }
    
    ._post-item ._post-title,
    ._post-static_page ._post-title {font-size:40px}

    Kode yang Saya beri tanda adalah resolusi gambar yang akan Anda terapkan. Ini tergantung dari ukuran standar masing-masing gambar posting di atas, yang sudah Saya sertakan dalam komentar CSS.

    Simpan perubahan.


    Struktur Posting yang Tercipta 

    Berikut ini adalah diagram markup HTML yang akan tercipta secara garis besar. Semoga bisa sedikit membantu untuk memberikan gambaran modifikasi lanjutan:

    • ._post
      • ._post-part._post-thumbnail-area
        • ._post-thumbnail
      • ._post-part._post-body-area
        • ._post-title
        • ._post-body
        • ._post-footer
          • ._post-footer-line._post-footer-line-1
            • ._post-author
            • ._post-time
            • ._post-comment-link
          • ._post-footer-line._post-footer-line-2
            • ._post-labels
    ._post {}
    ._post-part {}
    ._post-thumbnail-area {}
    ._post-body-area {}
    ._post-title {}
    ._post-body {}
    ._post-footer {}
    ._post-footer-line {}
    ._post-footer-line-1 {}
    ._post-footer-line-2 {}
    ._post-author {}
    ._post-time {}
    ._post-comment-link {}
    ._post-labels {}

    Catatan Tambahan: Setelah ini lebih baik Anda hapus beberapa kode CSS yang memiliki selektor seperti ini. Markup posting sudah berubah secara total, sehingga CSS ini sudah tidak diperlukan lagi:

    .post {}
    .post-title {}
    .post-body {}
    .post-footer {}
    .post-footer-line {}
    .post-footer-line-1 {}
    .post-footer-line-2 {}
    .post-footer-line-3 {}
    .post-header-line {}
    .post-header-line-1 {}
    .post-header-line-2 {}
    .post-header-line-3 {}
    .post-author {}
    .post-timestamp {}
    .post-comment-link {}
    .post-labels {}

    132 Komentar

    • Unknown

      bagaiman jika kita ingin menghilangkan Thumbnailnya, yang ada cuma ringkasan postingannya ?

      • Taufik Nurrohman

        Pelajari dulu. Kalau ada kesulitan baru boleh tanya.

        • Unknown

          Itu Thumnailnya gak bisa di kasig border tha mas.. Segala cara GW pake kog tetep aja gak ada bordernya :D

          • Taufik Nurrohman

            Bisa, kalau ganti model.

            • Unknown

              Pernah mas ganti model... saya settingnya bikin Judul di samping gambar kaya Gitu... Tapi waktu tampilan penuh postingnya malah Gak ada judulnya :D Pusing saya

    • Adhy Suryadi

      Sangat perlu nih bagi yang sedang belajar membuat atau memodifikasi template. Makasih mas tutorialnya... :)

    • Unknown

      Wah dapat pelajaran baru nih dari DTE :-bd thanks brother..

    • REVENGE213

      Wah keren mas ... :-bd

    • Salim

      wehh, desain baru nih... :-bd

    • Saeful Rahman

      Oh ya mas, menentukan ukuran sebuah gambar lebih baik % atau px untuk mengurangi loading blog.

      • Damar Zaky

        wkwkwk gak ada hubunganya untuk loading itu mah

        • Saeful Rahman

          hahah gk papa gan, mohon di maklum masih newbie. :D

    • uki

      Wah ini dia yang saya cari cari (y)

    • Anonim

      kebetulan lagi nyari yang kaya gini :-bd

    • Unknown

      awesome...
      keren... :D

    • Sopala Multapa

      Mantap mas ..

    • Unknown

      ini yang guwe cari \o/

    • Unknown

      terima kasih atas tutorial nya mas... saya jadi bisa

    • Goro

      untuk menampilkan teulisan lebih banyak lagi di edit mananya ya?

    • Beben Koben

      alamakjang 7:(

    • Unknown

      Mas itu generator kode warna (lupa apa namanya) yang di puter-puter itu kmana yah? apa memang sekarang di tiadakan yaa? :(

      • Taufik Nurrohman

        Sudah Saya hapus. Kapan-kapan Saya buat lagi. Cuma mungkin akan Saya letakkan di halaman berbeda. Saya kira sudah tidak ada yang pakai.

        • Unknown

          Kan gak semua orang hafal kode warna, paling hafal juga kode dasar seperti hitam, putih, kuning, dll .. Di buat lagi ya mas ^_^

        • Unknown

          Makasih mas, generator kode warnanya udah ada lagi, malahan yang sekarang lebih keren :D sangat membantu buat saya ketika menentukan kombinasi warna template ^_^

    • Anonim

      You are the first person who shared this trick. I was looking for this to design some template. You are the master in blogging. May Allah (SWT) bless you with divine peace.

    • kamu info

      nice tutorial nya mas taufik :)

    • Unknown

      Sudah saya coba dan berhasil, pertanyaan saya adalah apakah ada contoh yang telah anda buat setelah menerapkan hal tersebut ? Terimakasih.

    • Unknown

      Wah nemu juga Akhirnya ..terima kasih mas dah share artikel ini ..semoga selalu sehat ..supaya bisa terus belajar di sini...

    • MbahDoyok

      kok sepertinya ribet banget kang, main absolute relative aja kan bisa kang

      • Taufik Nurrohman

        Masalah akan bertambah ribet lagi kalau templat yang dipakai itu tidak standar (hasil konversi dari tema Wordpress misalnya). Jadi solusi yang paling mudah dan yang bisa diterapkan oleh siapa saja ya dengan cara membongkar kode XML posting secara keseluruhan.

        Lagipula kode yang harus ditemukan untuk diganti itu cuma ada satu. Jadi Saya jamin tidak akan membingungkan.

        • MbahDoyok

          mungkin juga ya kang,

          tp saya pribadi biasanya lebih nyaman hanya dengan rubah css saja
          relative untuk kotak,
          absolute utk thumbnail,

          jadi yang dirubah mungkin hanya beberapa baris kode saja kang,
          tp ya bener njenengan, tdk semua templet akan sama ...

        • MbahDoyok

          tp biar tak cobanya dulu cara ini kang, siapa tahu cocok

    • Rabbi Khan

      Hi bro Fixing Resolution Image is giving an error. It shows

      The widget with id "Blog1" cannot contain element: "b:if". A widget can only contain b:includable elements

    • Rabbi Khan

      Anyway I have solve the issue. Bro is there any way to increase post description line?

    • Unknown

      mas apakah ini merubah sampai di halaman post asli ?

    • Unknown

      mas cara kombinasikan ini sama disini http://www.dte.web.id/2012/05/posting-dua-kolom.html bagaimana? Saya udah coba copy keduanya. Postingan tetap tidak terbagi dua

    • Unknown

      Mas mau nanya nih .. Kenapa ya mas halaman Saya seperti ini (http://www.center60.com/p/blog-page_24.html)

      http://ximg.us/upload/1382446355.png

    • Unknown

      Mas , Tlong Rubah tampilan Judl Post Saya Menjadi disamping Thumbnail dong.
      Ini Mas CSS nya :
      .post{margin:8px 5px;padding:5px 15px}
      .post h1,.post h2{font-family: 'Source Sans Pro', sans-serif, Segoe UI,Arial,Tahoma;font-size:170%;line-height:1.2em;margin:6px 0 7px;padding:0;}
      .post img{transition:all 400ms ease-in-out;-webkit-transition:all 400ms ease-in-out;-moz-transition:all 400ms ease-in-out;-o-transition:all 400ms ease-in-out;-ms-transition:all 400ms ease-in-out; }
      .post-body{border-top:none;padding-top:0px;background:none;line-height:1.8em;margin:0;padding-bottom:10px;text-align:justify;color:#555;font-family: 'Source Sans Pro', sans-serif, Segoe UI,Arial,Tahoma;}
      .post-footer{display:none}
      .postmeta{;padding:5px 0 10px}
      .post img:hover{opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}
      .thumbnail{width:180px;height:130px;overflow:hidden;border:1px solid #ccc;margin:0 10px 5px 0;float:left;padding:0px; border:4px double #bbb;}
      @media screen and (max-width:460px){
      .thumbnail{width:140px;height:90px}
      }

      Xml :
      http://yourjavascript.com/9251108135/post.js

    • Anonim

      Wah mantep banget infonya

    • Suwardi

      Mas taufik Js untuk memperbaiki resolusi gambar itu berlaku untuk gambar yang resolusi berapa..??
      Terus kalau di tautan mengunakan gambar yang resolusinya cukup tinggi apakah js itu masih berfungsi..??
      == Terima Kasih ==

      • Taufik Nurrohman

        Resolusi berapa saja bisa. Skrip ini cuma berfungsi untuk mengubah tulisan s72-c menjadi s###-c. Selama pola teksnya cocok, resolusi bisa diubah.

    • Fahru Rofi

      makasi pak, blog saya lebih rapi, awalnya bingung mau ngerubah ukuran height, ternyata bisa dipaksa lewat CSS :-bd

    • Anonim

      makasih referensinya ilmunya om :)
      beguna sekali buat dipraktek..

    • Prisma Try Laksana

      nah ini dia tutorial yang saya cari" :)

    • Unknown

      kok thumbnail di homepagenya banyak yg ga tampil sih? trus banyak gambar thumbnail yg bukan gambar pertama dari postingannya. gimana nih?

    • Unknown

      Terus ringkasan ini nindih semua isi postingan apa ngga?

    • Unknown

      Mas kalau CSS bawaan templatenya di Delete mempengaruh tidak ?

    • Surga Kenari

      Sukses berat :)
      thanks banget mas taufik :-bd .. salam hangat dari surgakenari.blogspot.com

    • Ijal Fauzi

      Saya sarankan buat yg mau coba tutorial ini lebih baik menggunakan templat simple bawaan blogger dulu, lalu dimodifikasi. Saya sudah coba, dan bisa berhasil.

      Btw, saya mau tanya kenapa mas menggunakan underscore dihampir semua class nya? :\

      • Taufik Nurrohman

        Supaya tidak terjadi konflik dengan selektor CSS posting yang asli. Jadi pengguna bisa memodifikasi kode CSS kerangka posting ini dengan bebas.

        • Ijal Fauzi

          Oh, cuma gitu aja. Tak kira takut elemen nya kembali kebawaan blogger secara otomatis :/ Kalo gitu berarti kalau saya ubah dengan tanpa underscore ngga masalah dong ya.

    • Anonim

      sudah saya terapkan yang style 4 dengan resolusi thumbnail 152px, tapi kok gambarnya jadi ngeblur ya?

      saya coba terapkan kode ini dibawah kode related posts

      <b:if cond='data:blog.pageType == &quot;item&quot;'>
      <script>
      //<![CDATA[
      function resizeThumb(parentID, size) {
      var parent = document.getElementById(parentID),
      image = parent.getElementsByTagName('img');
      for (var i = 0; i < image.length; i++) {
      image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
      image[i].width = size;
      image[i].height = size;
      }
      } resizeThumb('related-post-item-thumbnail', 152);
      //]]>
      </script>
      </b:if>

      hasilnya masih tetap sama. mungkin mas Taufik bisa membantu. untuk sekarang saya menggunakan style pertama saja.

      • Taufik Nurrohman

        Mungkin karena ukurannya bukan 72 piksel.

        /\/s72\-c/
        • Anonim

          untuk ukuran s72 mungkin bisa diubah ke misal s100...ok nanti saya coba, makasih ya.

    • Unknown

      Kalau nambah thumbnail yang kosong pakai gambar gimana mas?

      • you

        Cari kode ini pada html di atas <img class='_post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/> Kemudian tambahkan ini di bawahnya sebelum </b:if>
        <b:else/>
        <img alt="Thumb" src="url thumbnail defaul anda" width="72" height="72" />

        Mohon direvisi mas taufik kalo kalo tidak tepat..

      • Taufik Nurrohman

        <b:if cond='data:post.thumbnailUrl'>
        <img class='_post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72' height='72'/>
        <b:else/>
        <img class='_post-thumbnail' expr:alt='data:post.title' src='URL-GAMBAR-DEFAULT.png' width='72' height='72'/>
        </b:if>
        • Unknown

          agan ini memang hebat dan pintar ya :)

        • Unknown

          Terimakasih, mas :D

        • Unknown

          Masalah tumbnail teratasi, sekarang, kenapa lamannya nggak muncul?

    • wm1996

      ini yang aku cari gan, makasi :)
      akan saya coba

    • Unknown

      Ngantuk. X@ tapi masih belajar nih sambil :Q , yah biar paham dengan apa yang selalu di ajarkan oleh mas taufik,. :D

    • Fathun Munier

      bang kok gambar aku pecah ya ? tahap memperbaiki resolusinya selalu salah. mohon bantuannya masih newbie

      • Uji Coba

        Di post udah ada solusinya. Tapi saya juga masalahnya belum fix.

    • Ijal Fauzi

      Mas, untuk default image ketika postingan ngga ada gambarnya gimana ya?

    • Uji Coba

      Gambar Posting
      Bang, biar readmore gak ada gambar deafault gimana?
      Soalnya kalau posting gak ada gambar, di readmore muncul gambar tapi cuma warna biru..

      • Taufik Nurrohman

        Itu bukan gambar, itu lubang. Ganti bagian ini:

        <div class='_post-part _post-thumbnail-area'>
        <b:if cond='data:post.thumbnailUrl'>
        …
        </b:if>
        </div> <!-- ._post-thumbnail-area -->

        dengan ini:

        <b:if cond='data:post.thumbnailUrl'>
        <div class='_post-part _post-thumbnail-area'>
        …
        </div> <!-- ._post-thumbnail-area -->
        <b:else/>
        <div class='_post-no-thumbnail'/>
        </b:if>

        Kode CSS tambahan, letakkan setelah ._post-body-area {}

        ._post-no-thumbnail + ._post-body-area {margin-left:0}
        • Uji Coba

          Kalau ganti warna judul post gimana?

    • Anonim

      supaya postnya berjejer kesamping caranya? supaya tidak ada ruang kosong antara post dan sidebar di homepage

      • Taufik Nurrohman

        Lihat pada bagian ini (untuk tata letak 2):

        ._post {
        background-color:white;
        width:300px; /* Thumbnail width */
        margin:0 10px 10px 0;
        overflow:hidden;
        *zoom:1;
        /* float:left; */
        }

        Pada deklarasi CSS di baris terakhir sengaja Saya komentari/tidak Saya aktifkan. Untuk menggeser posisi item posting ke samping, ubah kode /* float:left; */ menjadi float:left;

    • Unknown

      Mas mohon pencerahan.. Ini saya menambahkan border di css nya dengan Format ._post-thumbnail {
      width:100%;
      height:100%;
      margin:0;
      padding:0;
      border:border:1px solid #ddd;padding:3px;
      outline:2px;
      }

      Dan hasilnya begini,
      pertanyaannya: kog itu bordernya kog cuma melingkar di separuh gambar aja ya mas.? :'(

      • Unknown

        Border:border:1px solid #ddd
        Tuh border nya double, outline nya mending diremove, juga liat img style nya
        Coba diinspect, terus ganti-ganti biar gampang nge-develop

    • Unknown

      permisi mas, sya mau menambahkan label di atas judulnya gmn ya ?

      • Taufik Nurrohman

        Pindahkan <footer class='_post-footer'> … </footer> ke atas <h3 class='_post-title'> … </h3>

    • Unknown

      resizeThumb('Blog1', 200);
      script ini kan buat ngerubah ukuran gambar.

      kalo misalkan pada resolusi screen 1025px, kita ingin pakai ukuran 600px,
      nah pada saat screen 400px (ukuran smartphone) saya ingin meruba ukuran jadi 300px, gimna caranya..
      biar ukurannya juga responsive biar ngurangin sizenya juga.
      minta bantuannya mas

      kalo css kan bisa pake yang @media screen

    • Unknown

      mohon di bantu mas...
      untuk blog saya,, soalnya saya sudah mencobanya tp kurang sempura jka ada gamabar yang tidak tampak makan hasilnya akan ber warna hitam dan saya tidak bisa menghilangkanya.. mohon peencerahanya ini CSS post saya.. mohon di balas

      /* Post Content */
      h2.date-header {display:none;margin:0 0 .5em;}
      .post h2 {font-family: Arial, sans-serif;font-size:18px;font-weight:700;line-height:1.6em;color:#00BFFF;margin:.7em 0 0;padding:0 0 4px;}
      .sidleft {color:#333;line-height:1.1em;border-top:none;padding:1px 0 2px 0;}
      .sidleft li {background:url(http://4.bp.blogspot.com/-qg7CXkXooN8/TkOhskmMWXI/AAAAAAAAKws/mhp9rC8Rwsk/s1600/list_bg.png) no-repeat center left;font:12px Arial;line-height:1.1em;padding:5px 0 4px 10px;border-bottom:1px solid #e2e2e2;}
      .post h2 a,.post h2 a:visited,.post h2 strong {text-decoration:none;color:#00BFFF;}
      .post h2 strong,.post h2 a:hover {color:#00CED1;text-decoration:none;}
      .post-body,.post-header {line-height:1.5em;margin:0 0 .75em;}
      .post {margin:0 0 5px 0;padding:5px 0 5px 0;}
      .post-body a:link,.post-body a:visited {color:#FE9A2E;}
      .post-body a:hover {color:#FAAC58;}
      .post-body blockquote {line-height:1.3em;}
      .post-body blockquote {background:#eaeaea;text-align:left;margin:0 10px;padding:10px;line-height:1.4em; font-style:italic;}
      .post-body p {margin-bottom:15px;}
      .post-footer {color:#999;text-transform:uppercase;letter-spacing:.1em;font:normal normal 80% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;line-height:1.4em;margin:25px auto;}
      .comment-link {margin-left:.6em;}
      .tr-caption-container img,table.tr-caption-container {border:none;padding:0;}
      .post-comment-link {float:right;margin:0;.margin:-20px 0 0 0;padding:0;}
      .breadcrumbs {border-bottom:3px double #e0e0e0;font:13px Arial;margin:0;padding:10px 0;}
      .rmlink {float:right;-moz-box-shadow:inset 0 1px 0 0 #fff;-webkit-box-shadow:inset 0 1px 0 0 #fff;box-shadow:inset 0 1px 0 0 #fff;background-image:linear-gradient(totop,#DFDFDF0%,#EDEDED100%);border:1px solid #eaeaea;display:inline-block;color:#777;font-size:12px;text-decoration:none;text-shadow:1px 1px 0 #fff;margin-top:10px;padding:1px 8px;}
      .rmlink a:link,.rmlink a:visited {color:#777;}
      .rmlink a:hover {color:#FAAC58;text-decoration:none;background-image:linear-gradient(totop,#EDEDED0%,#DFDFDF100%);}

      • Taufik Nurrohman

        ._post-thumbnail {background:transparent url('URL-GAMBAR-KOSONG.jpg') no-repeat 50% 50%}
    • Unknown

      bagaimana ketika kita mau posting vidio contoh dari yutube yang muncul di thumbnail homepage hanya gambar/menjadi gambar .. kalau ingin langsung menjadi vidio tidak berbentuk gambar gimana ? mas

      • Taufik Nurrohman

        Saya nyerah saja kalau untuk kasus semacam ini. Kalaupun bisa dibuat di Blogger, itu cuma bisa pakai JavaScript, dan cuma akan membuat tampilan di layar saja kelihatannya cuma ada video, padahal kalau di lihat di kode sumbernya ya semua teks di dalam posting tersebut akan kelihatan. Jadi percuma saja. Malah jadi kerja dua kali lipat: Pertama-tama semua data dimuat, terus setelah itu dipotong lagi supaya cuma kelihatan videonya saja. Mubadzir.

        • Unknown

          Oke lah saya mengerti untuk kasus itu dan memang bribet .. tapi kalau ingin merubah ukuran gambar default dari yutube'y gimana ?? soalnya ukuran gambar cuma 120 x 90 jadi keliatan ngeblur ..

          • Taufik Nurrohman

            http://stackoverflow.com/q/2068344
            http://stackoverflow.com/q/12788287

            • Unknown

              Saya sudah mendapatkan solusi untuk itu dan hasilnya memuaskan .. terimakasih sudah mau menjawab
              example

    • Unknown

      Kok Gak Bisa Di Save Ya ? :'(

      • Unknown

        itu kamunya gak teliti ...

    Komentar telah ditutup.