Memperbaiki Kekeliruan Format Posting

Kemungkinan ketika Anda telah melakukan instalasi, ternyata terdapat beberapa pengkodean yang kurang mendukung dengan apa yang Anda inginkan, seperti penempatan gambar, penggunaan post-header, dan sebagainya. Posting ini akan mencoba untuk mengupas tentang bagaimana beberapa pengkodean yang kurang sesuai dapat sesuai dengan standar posting di Blogger.com.

Dalam menempatan gambar (image), biasanya pada Blogger.com akan diapit dengan kode <div>. Contoh:

<div class="separator" style="clear: both; text-align: center;">
<a href="#" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="#" width="200"/></a></div>

Sedangkan pada template MiMspot memasukkan markah gambar secara manual.

<a href="#"><img class="aligncenter" src="#" height="200" width="200" alt="MiMspot Posting" style="margin-bottom:1.5714em;margin-top:1.5714em;"/></a>

Jika Anda selalu menggunakan penambahan gambar sesuai dengan bantuan dari Blogger.com pada editor posting, sebaiknya lakukan penghapusan pada selector img dalam kode CSS (Cascading Style Sheets).

img {
background: none;
border: 0;
display: block;
}

Menampilkan post-header di bawah judul posting, seperti published date, author, & komentar.

   <div class='post-header-line-1'>
      <p><span class='post-timestamp updated'>
        <b:if cond='data:top.showTimestamp'>
        <b:if cond='data:post.url'>
          <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr>
        </b:if>
        </b:if>
      </span> <span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-comment-link'>
        <b:if cond='data:blog.pageType != "item"'>
        <b:if cond='data:blog.pageType != "static_page"'>
          <b:if cond='data:post.allowComments'>
            <span class='sep'> // </span><a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
            <data:post.commentLabelFull/>
            </a>
          </b:if>
        </b:if>
        </b:if>
      </span></p>
    </div>

Termasuk juga kode CSS berikut yang menunjukkan mirip dengan gambar “tangan menulis”.

.post-header-line-1 p:before {
content: '\270d';
margin-right: .25em;
}

Sementara pengkodean sebenarnya terletak pada post-footer, namun dalam MiMspot pengkodean tersebut disembunyikan dengan menambahkan CSS-inline (warna merah).

    <div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'><span class='post-author vcard' style='display:none;'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn'>
                <a expr:href='data:post.authorProfileUrl' itemprop='author' rel='author' title='author profile'>
                  <data:post.author/>
                </a>
              </span>
            <b:else/>
              <span class='fn'><data:post.author/></span>
            </b:if>
        </b:if>
      </span> <span class='post-timestamp' style='display:none;'>
        <b:if cond='data:top.showTimestamp'>
          <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' itemprop='url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
        </b:if>
        </b:if>
      </span> <span class='post-comment-link' style='display:none;'>
        <b:if cond='data:blog.pageType != "item"'>
          <b:if cond='data:blog.pageType != "static_page"'>
            <b:if cond='data:post.allowComments'>
              <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
                <data:post.commentLabelFull/>:
              </a>
            </b:if>
          </b:if>
        </b:if>
      </span> <span class='post-icons'>
        <!-- email post links -->
        <b:if cond='data:post.emailPostUrl'>
          <span class='item-action'>
          <a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
              <img alt='' class='icon-action' height='13' src='http://img1.blogblog.com/img/icon18_email.gif' width='18'/>
          </a>
          </span>
        </b:if>

        <!-- quickedit pencil -->
        <b:include data='post' name='postQuickEdit'/>
      </span> <div class='post-share-buttons goog-inline-block'><span class='subscribe-rss'><a href='/feeds/posts/default' title='Berlangganan posting via feedburner'>Subscribe</a></span> <span class='sep'>| </span>
        <b:if cond='data:post.sharePostUrl'>
          <b:include data='post' name='shareButtons'/>
        </b:if>
      </div> <span class='post-backlinks post-comment-link'>
         <b:if cond='data:blog.pageType != "item"'>
           <b:if cond='data:blog.pageType != "static_page"'>
             <b:if cond='data:post.showBacklinks'>
               <a class='comment-link' expr:href='data:post.url + "#links"'><data:top.backlinkLabel/></a>
             </b:if>
           </b:if>
         </b:if>
       </span> </div>

      <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 != "true"'>,</b:if>
          </b:loop>
        </b:if>
      </span></div>
      <div class='post-footer-line post-footer-line-3'><p class='foot-info small'>Anda baru saja membaca posting dengan judul “<data:post.title/>” dan Anda pun dapat membuat penanda ke <a expr:href='data:post.url' expr:title='data:post.title' itemprop='url' rel='bookmark'>permalink</a>.</p></div>
    </div>

Sedangkan kode berwarna hijau merupakan penambahan untuk taut berlangganan yang juga terkait dengan CSS seperti di bawah ini.

.subscribe-rss,
.feed-links {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUqNUuhrUE0U-TlCujm_u_1fiHiEm38r9J1d7p-4wpmONy7b0EyMVqjfFWqwhUFECBUYu-kNaHwkbfmhnwzixB9ABU94Y3CDFC0P_m-R9LhvMBI7HsXbGw58MXqPguPPNWGfk29fExdu0/s800/mimicon.png) no-repeat -10px -93px;
padding-left: 1.5714em;
}

Selanjutnya penambahan kode yang berwarna biru terkait dengan CSS berikut.

.foot-info {
border: 1px dotted #ddd;
color: #666;
font-style: normal;
margin-top:  1.5714em;
padding: 15px;
}
.foot-info a {
color: #3268c4;
font-weight: bold;
}

Memperbaiki posisi daftar pada posting terkait, yakni terjadi ketika judul sebuah posting sangat panjang sehingga menempatkan dua atau tiga baris teks. Cari kode CSS berikut:

.related-posts ul {
list-style: none;
margin-left: 0;
}
.related-posts li:before {
content: '\2023';
margin-right: 1.2em;
}

Ganti dengan:

.related-posts ul {
list-style: none;
}
.related-posts li:before {
content: '\2023';
margin-left: -1.5em;
padding-right: 1.2em;
}

Mungkin yang lain — tidak berhubungan dengan posting — adalah menu horizontal. Untuk kode yang ditandai dengan # harus diganti dengan URL (Uniform Resource Locator) tujuan, bukan ditambahkan. Contoh: http://namablog.blogspot.com/p/about dan bukan http://namablog.blogspot.com/p/about#. Kecuali untuk menu dropdown induk.

Silakan beri komentar di sini, jika dalam penginstalan MiMspot kurang/tidak sesuai dengan format demonstrasi ini.

Related Articles: