Cara Menghapus Element/Widget di Blog secara Permanen

Pernah berkeinginan untuk menghapus element yang ada di dalam blog? Seperti menghapus Popular Posts bawaan blogger template premium yang keren abisss? Atau... Menghapus "Section" yang muncul di Layout Blog?

Saya awali dengan pengakuan pribadi bahwasanya saya nggak begitu paham persoalan isi template seperti jQuery, CSS dan lainnya. Hanya sedikit yang saya tahu, itu pun belajar secara otodidak.

Belajar membuat template blogger pun seringkali kacau balau, toh belajarnya otodidak hehe... Tapi saya nggak pernah patah arang, sikat terus sampai mampus :)

Nah topik kali ini tentang menghapus element-element yang ada di dalam template blogger seperti FeedLinks, FeedLinksBody, iFrame_Comments, Comment-Form, Section di Layout Blog dan lainnya.

Contoh penampakkannya? Nih ada dibawah:

<b:includable id='main' var='top'>...</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>...</b:includable>
<b:includable id='backlinks' var='post'>...</b:includable>
<b:includable id='breadcrumb' var='posts'>...</b:includable>
<b:includable id='comments' var='post'>...</b:includable>
<b:includable id='comment-form' var='post'>...</b:includable>
<b:includable id='comment_count_picker' var='post'>...</b:includable>
<b:includable id='feedLinks'>...</b:includable>
<b:includable id='feedLinksBody' var='links'>...</b:includable>

Beberapa kode yang saya sebutkan diatas, ada kaitannya dengan widget komentar default Blogger (Blogspot). Tapi bukan itu yang kita bahas, bukan cara menghapus widget komentar default dari Blogger.

Ok misalkan, kronologisnya kita ingin menghapus kode yang berkaitan dengan Comment. Contoh kodenya ini:

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

Itu baru ciutannya (singkatan) saja. Baik mari kita klik 3 buah titik tersebut untuk memperbesar lagi kode yang disembunyikan. Dibawah ini tampilannya:

<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h3><b:if cond='data:post.numComments == 0'> 0 Response to &quot;<data:blog.pageName/>&quot;</b:if> <b:if cond='data:post.numComments == 1'> 1 Response to &quot;<data:blog.pageName/>&quot; </b:if> <b:if cond='data:post.numComments &gt; 1'> <data:post.numComments/> Responses to &quot;<data:blog.pageName/>&quot; </b:if></h3>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<b:if cond='data:post.hasOlderLinks'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
</b:if>

<data:post.commentRangeText/>
<b:if cond='data:post.hasNewerLinks'>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</b:if>
</span>
</b:if>

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>

Panjang banget kan? Namun karena persoalannya kita mau menghapus salah satu element yang ada di dalam blogger template, mau tidak mau ya harus mengikuti tutorial dibawah ini.

Cara Menghapus Element/Widget di Blog secara Permanen (Blogger Blogspot)

Kita gambarkan dulu bagaimana kinerja dari sebuah blogger template. Yang saya tahu dan pahami selama ini, di dalam template ada 2 jenis kode yang berbeda tapi mengatur untuk satu element atau widget di blog.

Nah 2 jenis kode ini terdiri dari <header>, <b:section....., <div class='clear'/>, kode Navigasi Menu dan lainnya yang terletak di ruang lingkup <body> sampai penutupnya yakni </body>.

Kode yang berada di antara <body> hingga </body> bertugas untuk menjalankan perintah yang kita mau.

Satunya lagi ialah jenis kode CSS Style untuk mengatur tinggi, lebar atau pun ukuran dari element widget tersebut. Seringkali letaknya di ruang lingkup <style> sampai penutupnya, maupun <b:skin><![CDATA[ sampai penutupnya.

Ok itu dia.

Sebenarnya ada 3 jenis kode, satunya lagi ialah kode yang mengatur Responsive dan Mobile Friendly dari sebuah template. Biasanya diawali dengan kode "@media screen", letaknya bisa jadi di bagian <b:skin> sampai akhir, maupun <style> sampai akhir.

Ingat ya gan... disini saya membahas dan menuntaskan artikel ini bermodalkan 2 jenis kode saja, artinya situasi kita saat ini berada di template blogger yang belum Mobile Friendly dan Responsive. Masih template jadul, alias punya lama.

Nah kalau misalkan kode templatenya sudah mendukung Responsive, bagaimana? Nanti saya bahas dibagian paling bawah.

Ok ini dia topiknya. Kita contohkan kode diatas!

Pada kode diatas kita bakal melihat beberapa kode utama seperti:

<div class='comments' id='comments'>

dan;

<a name='comments'/>

dan;

<span class='paging-control-container'>

dan;

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>

dan;

<span class='deleted-comment'><data:comment.body/></span>

dan;

<dd class='comment-footer'>

dan;

<span class='comment-timestamp'>

dan;

<a expr:href='data:comment.url' title='comment permalink'>

dan;

<span class='paging-control-container'>

dan;

<p class='comment-footer'>

dan;

<b:include data='post' name='comment-form'/>

dan;

<div id='comment-popup'>

Dan diakhiri dengan penutup kodenya yakni </b:includable>.

Ok sudah kita tandai.

Cara Menghapus Widget di Blog secara Permanen

Setelah kita tandai kode yang mana-mana saja, saatnya melakukan eksekusi.

Cari semua kode (atau nama) CSS yang sama kode (atau namanya) dengan kode (atau nama) dari kode perintah tersebut. Misalnya kode perintah yang ingin dihapus ialah:

<span class='comment-timestamp'>

Pada bagian CSS Style, sudah pasti ada kode comment-timestamp. Hapus semua kode tersebut. Ok! Begitulah caranya.

Antara percaya atau tidak, semua kode diatas yang diawali dengan nama-nama seperti 'paging-control-container', 'comment-footer', 'comment-popup', 'comment-form' dan lainnya punya kode CSS nya masing-masing.

Letak kode CSS nya pun berada diantara <b:skin> sampai penutupnya, maupun berada di kode <style> sampai bagian akhirnya. Berbeda-beda sesuai pembuatan dari desainer templatenya.

Note: Nggak semua kode perintah tersebut punya kode CSS nya. Tergantung dari desain template yang dikerjakan dan dibuat oleh desainer blogger template.

Atas nama bertujuan untuk menghapus sebuah element berupa widget atau pun Section yang muncul di Layout Blog, kedua jenis kode tersebut harus dihapus. Arti lainnya, kita telah mencoba cara menghapus widget blogger secara permanen.

Ingat sekali lagi gan...

Menghapus widget blog berarti kita harus menghapus kode CSS nya juga. Kalau hanya menghapus widgetnya saja tapi kode CSSnya tidak dihapus, malah itu menyebabkan lambatnya loading blog.

Contoh kasus lainnya?

Agan sendiri pasti melihat ada begitu banyak Styles atau bermacam gaya Popular Posts yang dibagikan secara gratis oleh Blogger luar negeri.

Biasanya pun Style dari widget Popular Posts tersebut menggunakan kode CSS tambahan agar tampilan Popular Posts sesuai dan terbentuk seperti yang dimunculkan dimulai dari Background, Font, Tinggi, Lebar atau pun Ukurannya.

Nah suatu waktu agan mau menghapus widget Popular Posts tersebut. Ternyata, yang agan hapus hanya widgetnya saja. Namun kode pengatur CSS nya belum dihapus, itulah salah satu penyebab lambatnya loading blog!

Percaya atau tidak, boleh di cek di tool-tool gratis seperti CSS Drive atau Compress CSS / JavaScript. Kalau kasusnya sudah demikian, otomatis bakal terdeteksi banyak CSS yang tidak terpakai, dan itulah mengapa blog agan begitu lambat.

Ok sampai disini sudah dipahami dan dimengerti. Jika ada yang kurang dimengerti, mohon ditanyakan.

Kode ini:

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

...merupakan kode pengatur komentar default blogger. Usahakan jangan dihapus agar blog tidak error. Kode tersebut yang saya sertakan di posting ini, hanya gambaran penghapusan saja.

Oh ya... dengan cara diatas pun, kita bisa menghapus atau menghilangkan Section yang muncul di Layout Blogger, tempat dimana kita memasangkan Gadget HTML atau Feed dan lainnya.

Satu lagi, saya juga mohon maaf apabila ada kekeliruan di dalam artikel kali ini. Ini semua hanya gambaran saja bagaimana cara menghapus widget atau element di blog secara permanen dan dilakukan dengan benar. Semoga berguna.*