Mengaktifkan Blogger Quickedit Post Valid HTML5

Blogger Quickedit Post Valid HTML5
Jika Anda pengguna template default dari blogger tentu sudah tidak asing dengan icon pencil ini. Biasanya icon pencil ini berada di bawah postingan pada kelompok footer post. Icon pencil ini adalah blogger quickedit post, dengan quickedit post Anda bisa langsung mengedit postingan dari tampilan blog dengan mengklik icon pencil ini dan Anda akan langsung dibawa ke post editor blogger. Jadi dengan ini Anda tidak perlu masuk melalui dashboard untuk mengedit postingan.

Namun bagi yang menggunakan custom template hampir dipastikan tidak ada yang memasang fitur ini (termasuk saya... heheheh...). Kalaupun mencoba mengaktifkannya, icon ini tidak bisa muncul.

Itu karena kebanyakan dari pembuat template menghapus kode html untuk menampilkan fitur ini yang berada pada post-footer.

Perlu Anda ketahui bahwa fitur quickedit post ini tidak valid HTML5, oleh karena itu banyak tutorial-tutorial validasi HTML5 menyarankan untuk tidak mengaktifkan fitur quickedit ini. Namun jika Anda ingin mencoba fitur ini, kita bisa mem-valid-kan quick edit ini baik bagi Anda pengguna default template blogger ataupun custom template.

1. Biasanya kode Blogger quickedit post seperti di bawah ini.

              <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
        <img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>      </a>
    </span>
  </b:if>
</b:includable>

2. Dan kode pemanggilnya seperti di bawah ini.

<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>

Kode yang berwarna biru itulah yang menampilkan quickedit post. Untuk validasinya kita hanya melakukan perubahan pada kode yang atas (nomor 1) pada link dan icon-nya (kode yang berwarna merah). Silahkan ganti kode nomer satu dengan kode di bawah ini. 

              <b:includable id='postQuickEdit' var='post'>
  <b:if cond='data:post.editUrl'>
    <span expr:class='&quot;item-control &quot; + data:post.adminClass'>
      <a expr:href='&quot;http://www.blogger.com//post-edit.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot;+ data:post.id + &quot;&amp;amp;from=pencil&quot;' expr:title='data:top.editPostMsg'>
        <img alt='edit post icon' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18' expr:title='data:top.editPostMsg'/>
      </a>
    </span>
  </b:if>
</b:includable>

Kode yang diberi warna merah itulah yang terjadi perubahan untuk validasi HTML5 dan agar tidak mengurangi skor seo blog pada description image.

Kemudian aktifkan fitur ini (jika belum tampil) melalui dashboard >> tata letak >> klik edit pada blog post (kotak paling besar) dan centang pada "Show Quick Editing".

Setelah mengaktifkan ini kadang kala icon quickeditnya tidak muncul di postingan, biasanya ini terjadi pada custom template. Nah untuk menampilkannya silahkan gunakan kode di bawah ini, Anda bisa menampilkannya di bawah postingan atau di atasnya, di sebelah kiri atau kanan.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class='post-icons'>
<b:include data='post' name='postQuickEdit'/>
      </span>
</b:if>

Jika ingin berada di sebelah kanan silahkan tambahkan style pada class-nya, jadi seperti di bawah ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <span class='post-icons' style='float:right'>
<b:include data='post' name='postQuickEdit'/>
      </span>
</b:if>


Silahkan lihat icon pencil di bawah kanan postingan. Selamat mencoba....

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments