Memposisikan Judul Dan Ringkasan Posting Di Samping Thumbnail Atau Thumbnail Di Atas Judul Dan Ringkasan Posting - Dewa Blogger

Halaman

    Social Items

Buy Now
/ / / / Memposisikan Judul Dan Ringkasan Posting Di Samping Thumbnail Atau Thumbnail Di Atas Judul Dan Ringkasan Posting

Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk menciptakan templat List & Masonry Grid)? Di sini Saya mencoba untuk menciptakan arahan XML posting khusus yang Saya buat sefleksibel mungkin untuk keperluan modifikasi di masa datang. Kode ini sudah meliputi modifikasi ringkasan posting, sehingga kalau Anda sudah mengimplementasikan modifikasi ini, maka Anda tidak perlu lagi repot-repot untuk mengimplementasikan tutorial pembuatan posting auto read-more.

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

Kode XML

Langkah pertama yakni mengedit XML templat. Kode XML ini cukup diterapkan sekali saja. Mengenai pengaturan posisi setiap elemen dapat 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 arahan di atas untuk menggantikan arahan yang tampak menyerupai ini di dalam templat:

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

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

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

Bagaimana caranya memposisikan judul dan ringkasan posting di samping Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting
Thumbnail di sebelah kiri judul dan ringkasan posting.

Salin arahan CSS ini kemudian 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

Bagaimana caranya memposisikan judul dan ringkasan posting di samping Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting
Thumbnail di sebelah atas judul dan ringkasan posting.

Salin arahan CSS ini kemudian 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 yakni 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 yakni diagram markup HTML yang akan tercipta secara garis besar. Semoga dapat sedikit membantu untuk memperlihatkan citra 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 arahan CSS yang mempunyai selektor menyerupai ini. Markup posting sudah berubah secara total, sehingga CSS ini sudah tidak dibutuhkan 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 {}

Sumber https://www.dte.web.id/

Memposisikan Judul Dan Ringkasan Posting Di Samping Thumbnail Atau Thumbnail Di Atas Judul Dan Ringkasan Posting

Bagaimana caranya memposisikan judul dan ringkasan posting di samping thumbnail, atau bagaimana cara memposisikan thumbnail di atas judul dan ringkasan posting (biasanya untuk menciptakan templat List & Masonry Grid)? Di sini Saya mencoba untuk menciptakan arahan XML posting khusus yang Saya buat sefleksibel mungkin untuk keperluan modifikasi di masa datang. Kode ini sudah meliputi modifikasi ringkasan posting, sehingga kalau Anda sudah mengimplementasikan modifikasi ini, maka Anda tidak perlu lagi repot-repot untuk mengimplementasikan tutorial pembuatan posting auto read-more.

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

Kode XML

Langkah pertama yakni mengedit XML templat. Kode XML ini cukup diterapkan sekali saja. Mengenai pengaturan posisi setiap elemen dapat 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 arahan di atas untuk menggantikan arahan yang tampak menyerupai ini di dalam templat:

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

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

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

Bagaimana caranya memposisikan judul dan ringkasan posting di samping Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting
Thumbnail di sebelah kiri judul dan ringkasan posting.

Salin arahan CSS ini kemudian 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

Bagaimana caranya memposisikan judul dan ringkasan posting di samping Memposisikan Judul dan Ringkasan Posting di Samping Thumbnail atau Thumbnail di atas Judul dan Ringkasan Posting
Thumbnail di sebelah atas judul dan ringkasan posting.

Salin arahan CSS ini kemudian 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 yakni 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 yakni diagram markup HTML yang akan tercipta secara garis besar. Semoga dapat sedikit membantu untuk memperlihatkan citra 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 arahan CSS yang mempunyai selektor menyerupai ini. Markup posting sudah berubah secara total, sehingga CSS ini sudah tidak dibutuhkan 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 {}

Sumber https://www.dte.web.id/
Blogger Desain Lanjutan
Langganan: Posting Komentar (Atom)