Cara Membuat Style Post Ala Kang Ismet | Pekidakinta

Cara Membuat Style Post Ala Kang Ismet

Banyak yang pengen tahu cara membuat style post seperti Blog Kang Ismet, nah sekarang saya akan bagikan tutorial membuat style post itu. 
Untuk membuat style post tersebut kita tidak perlu ribet-ribet pasang kode ke sana ke mari, nah silahkan simak cara membuatnya.

  1. Pergi ke dasbor Blogger > Template > Edit HTML
  2. Cari kode dibawah ini, untuk mempermudah gunakan CTRL+F
 <b:includable id='post' var='post'>
     3.  Setelah menemukan kode tersebut, ganti kode tersebut dengan kode di bawah ini

<b:includable id='post' var='post'>
  <article expr:class='&quot;blogger-post blogger-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='blogger-post-part blogger-post-thumbnail-area'>          <b:if cond='data:post.thumbnailUrl'>            <a expr:href='data:post.url'><img class='blogger-post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72' width='72'/></a>          </b:if>        </div>      </b:if>    </b:if>
    <div class='blogger-post-part blogger-post-body-area'>
      <h3 class='blogger-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>
      <div class='blogger-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> 
      <footer class='blogger-post-footer'>        <div class='blogger-post-footer-line blogger-post-footer-line-1'>          <span class='blogger-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='blogger-post-timestamp'>          <b:if cond='data:top.showTimestamp'>            <data:top.timestampLabel/> <a class='blogger-post-timestamp-link' expr:href='data:post.url' rel='bookmark' title='Permanent Link'><time class='blogger-post-published published' expr:datetime='data:post.timestampISO8601'><data:post.timestamp/></time></a>          </b:if>          </span> <span class='blogger-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>         <div class='blogger-post-footer-line blogger-post-footer-line-2'>          <span class='blogger-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>      </footer>     </div>  </article></b:includable>

Setelah itu, pasang css pada template sobat. Ada beberapa style yang saya sediakan, silahkan pilih yang mana menurut sobat bagus.


  1. Style Post with Round Thumbnail On The Left:

.blogger-post {padding: 5px 0px 0px; background: #F6F6F6; border-right: 1px dashed #E3E3E3;height:150px; margin:0 0 20px; overflow:hidden; *zoom:1;}.blogger-post:after {  content:" "; display:block;clear:both;}.blogger-post-title { font:normal bold 20px/1.2 Arial,Sans-Serif; margin:0 0 10px;padding:0;}.blogger-post-title a{color: #888;}.blogger-post-thumbnail-area {border-radius: 330px;-webkit-border-radius: 330px; -moz-border-radius: 330px;  border: 10px solid #E5E5E5;margin-left: 20px;width:120px;height:120px; background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png'); background-repeat: no-repeat; background-size: 100%;}.blogger-post-body-area:before {border-bottom:40px solid transparent;border-right:40px solid #E4E4E4;border-top:40px solid transparent; width:0;height:0; content:"";margin: 10px 0px 20px -60px;display:inline-block;float: left;}.blogger-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;}.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;border-left: 1px solid #E3E3E3;}.blogger-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;}.blogger-post-footer a {color: #888;}.blogger-post-item,.blogger-post-static_page {height:auto}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area {margin:0;padding:20px;font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px}.icon-action {width: 10px;height:10px;}
      2.   Thumbnails with Title and Post Summary on the right


.blogger-post {background: #F6F6F6;border-right: 1px dashed #E3E3E3;height:200px; margin:0 0 20px; overflow:hidden; *zoom:1;}.blogger-post:after { content:" "; display:block; clear:both;}.blogger-post-title {font:normal bold 20px/1.2 Arial,Sans-Serif;margin:0 0 10px; padding:0;}.blogger-post-title a{color: #888;}.blogger-post-thumbnail-area {width:200px; height:200px;background-color:#2D3957;float:left;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}.blogger-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;}.blogger-post-body-area {padding:20px;margin-left:200px;font-size:12px;}.blogger-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;}.blogger-post-footer a {color: #888;}.blogger-post-item,.blogger-post-static_page {height:auto}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area { margin:0; padding:20px; font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px}.icon-action {width: 10px;height:10px;}


       3.    Blogger Posts Side by Side with Title and Summary Below Thumbnail (Newspaper Style Layout)
#blog-pager {clear: both;}.blogger-post {background: #F6F6F6;  border-right: 1px dashed #E3E3E3;  border-left: 1px dashed #E3E3E3; height: 405px; width:200px;  margin:0 20px 20px 0;  padding: 10px 10px 0px;  overflow:hidden;  float: left; display:inline-block; *zoom:1;}.blogger-post:after {  content:" ";  display:block;  clear:both;}.blogger-post-title {  font:normal bold 16px/1.2 Arial,Sans-Serif;  margin:0 0 10px;  padding:0;}.blogger-post-title a{color: #777;}.blogger-post-thumbnail-area a img{  width:200px;  height:200px;  background-color:#fff;overflow:hidden;background: url('http://4.bp.blogspot.com/-1EWHdOSKo4U/U6SRtdpyfnI/AAAAAAAAJS8/pGyE9nTVSFM/s1600/no-image-available.png');background-repeat: no-repeat;background-size: 100%;}.blogger-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;}.blogger-post-body-area { padding:10px 20px 20px; margin:10px 0 0; font-size:11px;}.blogger-post-footer {background: #E9E9E9;  margin:10px -20px 0; padding:20px;  border-top:1px dotted #ddd; font:normal bold 8px/1.5 Verdana,Tahoma,Arial,Sans-Serif; text-transform:uppercase;  color:#555;}.blogger-post-footer a{color: #888;}.blogger-post-item,.blogger-post-static_page {width:auto;}.blogger-post-item .blogger-post-body-area,.blogger-post-static_page .blogger-post-body-area {  margin:0;  padding:20px;  font-size:13px;}.blogger-post-item .blogger-post-title,.blogger-post-static_page .blogger-post-title {font-size:30px;}.icon-action {width: 10px;height:10px;}


Note:  
- untuk membuat thumbnail lebih besar, edit angka yang berwarna merah (harap dicatat bahwa beberapa nilai adalah untuk posting tinggi / lebar yang harus sama dengan ukuran thumbnail - kecuali untuk contoh pertama di mana Anda harus menambahkan 30px lain (150px - tinggi posting)); 
-untuk mengubah gambar ketika tidak ada thumbnail, ganti url warna biru dengan alamat gambar Anda; 
-untuk mengubah latar belakang, mengubah nilai dalam violet: # F6F6F6 - untuk posting latar belakang dan # E9E9E9 - untuk posting footer

Langkah terakhir simpan tempate, selamat.
Jika anda tidak mengerti dengan tutorial diatas silahkan berkomentar di bawah.
Semoga bermanfaat.

12 Responses to "Cara Membuat Style Post Ala Kang Ismet "

  1. ane suka yg oval gan,bookmark dulu ya :D

    ReplyDelete
  2. Walah Kalau Dengan Menggunakan ini , jadi doble dengan style kita kan ?
    Apakah Tutorial Ini bisa langsung menghapusnya ? , atau kita harus hapus terlebih dahulu ?

    ReplyDelete
  3. Wew keren, pasti sudah di ekstrak :D

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. Solihin: silahkan gan
    Reza: langsung pakai aj gan
    Dian: hahah, kgk ada ekstak"an, emang mastin

    ReplyDelete
  6. wah, mantap gan, saya coba dlu gan

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. keren" style nya gan
    langsung coba ahh :)

    ReplyDelete