Mengaktifkan Blogger Quickedit Post Valid HTML5

Mengaktifkan Blogger Quickedit Post Valid HTML5

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

27 Comments Add Comment

pertamax gak ya?? hehehe...

Balas

Waduh ketinggalan beberapa menit nih dari mbak leony, jadi nggak pertamaxx :D

Balas

pada ngincer pertamax aja nih kalian :D

Balas

Pertamax sis hanya selisih 3 detik dari publish artikel heheheh :D

Balas

Hanya 1 detik bedanya dari sis Leony :D

Balas

Biar berada di atas :D

Balas

Widih widih :D kurang cepat nih :D

Balas

ane gk pertamax tapi semoga gk ketinggalan info :3

Balas

kang, minta tolong ...bantuin saya, sudah saya pos di forum...
hehehe

Balas

Enggak mas, masih anget hehehe :D

Balas

Sudah saya jawab barusan mas :D

Balas

Kang punten naroskn deui :) Masih masalah Validasi.
Blog saya di home page error tinggal satu. Di post page tinggal 2 kecuali postingan terbaru ada 4.
Kira kira gaduh solusi teu kang.

Blog kang Adhy ge sapertosna mah teu acan valid postingan terbaru na. :)

Balas

Terima kasih Kang, terima kasih banyak ... Sukses selalu dah

Balas

Iya kang, url gambarnya error, kadang url gambar yang diupload di blogger suka error juga biasanya mengandung dua atau lebih tanda strip seperti ini (---) pada linknya.

Balas

Sepertinya masih ada kesalahan untuk menyembunyikan css riset blogger-na kang.

Sareng nu di postingan aya error tina iframe komentar na kang, tos dibahas di Kang Ismet cara validasi halaman postingan blog.

Balas

cocok kang.. abdi nambihkeun deui quick edit.. biar gampang ngedit.. nuhun ah :-d

Balas

wih html5 lagi nih, langsung praktek :)

Balas

Muhun kang katingali aya ngacung di handap :D

Balas

Silahkan mas :D

Balas

Mau Laporan Mas kode berikut kayaknya ada error 401 berikut kodenya

http://reader-download.googlecode.com/svn/trunk/images/emo/applause.gif

Balas

Iya smiley tepuk tangan dari mbak Leony... makasih informasinya... saya ganti smileynya :D

Balas

Dicoba applause-nya |o|

Balas

Makasih gan atas ilmunya...

Balas

haturnuwun kang,, =)D

sip :-bd

Balas

aduh malah pusing jadi kode yang mau di tambahin tu yang mana bosss... www.mahadewapulsa.com

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×