Trik Supaya Dapat Edit Arahan Iklan Dibagian Postingan Pada Hidangan Layout/Tata Letak

Adapun trik ini semacam memindahkan dan menciptakan tombol editing khusus untuk iklan dibagian postingan (di atas artikel dan di bawah artikel), berada di sajian layout atau tata letak Blogger.

Adapun trik ini semacam memindahkan dan menciptakan tombol editing khusus untuk iklan dibagian Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak

Trik ini bergotong-royong dikhususkan untuk creator template Blogger, sebagai pelengkap customasi tampilan Layout Blogger, untuk mempermudah pelanggan templatenya dikala ingin mengedit bagian-bagian yang ada di dalam postingan/artikel. Diantaranya yaitu mengedit script atau arahan iklan pada bab postingan.

Nah, dengan menerapkan trik ini, maka pengguna template tidak lagi masuk ke sajian Tema > Edit HTML, untuk sekadar mengganti atau menambahkan arahan iklan dibagian artikel (post page).

Cukup edit dibagian sajian Layout atau Tata Letak saja. Penasaran? Berikut tutorialnya!

Cara menciptakan dan memindahkan editing arahan iklan dibagian artikel, pada sajian Layout/Tata Letak Blogger

Cara menerapkannya sangat praktis namun agak sedikit rumit. Cobalah fokus sejenak dan sambil sruput kopi. Saya akan coba jelaskan langkah-langkahnya dengan cara yang sangat sederhana.

Langkah 1
Pergi ke sajian Theme > Edit HTML

Langkah 2
Temukan arahan <body> kemudian letakkan arahan berikut ini di bawah arahan tersebut.

<div class='single-post-ads' style='display:none'>
<b:section class='ad-post-top' id='ads-post-1' maxwidgets='1' name='Top Ad [Post Page]' preferred='no' showaddelement='no'>
<b:widget id='HTML101' locked='true' title='Iklan di atas artikel' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<a href="https://www.themeindie.com" target="_blank"><img style="width:100%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGx_5Ldw_dyq_s4uG8Dw1BELoH3RyBI3gZ0vkaHbB-47y3-UeN7UXfJwhtQKRe6N1r6EPAQES5XRW4BOno3cfXiPC53nEAkeZHVuPY8Khfb7odNWb_TTJ83dBX6qA4Wjxsz4sgRGtVdew/s1600/advertise-here-themeindie.png"/></a>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<b:if cond='data:title != ""'>
</b:if>
<div class='widget-content'>
<span> <data:content/></span>
</div>
</b:includable>
</b:widget>
</b:section>
<b:section class='ad-post-bottom' id='ads-post-2' maxwidgets='1' name='Bottom Ad [Post Page]' preferred='no' showaddelement='no'>
<b:widget id='HTML102' locked='true' title='Iklan di bawah artikel' type='HTML' version='1'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[<a href="https://www.themeindie.com" target="_blank"><img style="width:100%;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwMBaN8LHlyNX0yvzrAjqHVt_wPHqQcQA6YUg4VwMEkeTQ-8ndu7LQGRT8mEcwJ77sviJOkx2RVCUzvvHmyiEzW4_pQfzCpUMKQbIaoszz6-hAT422kRhmiaNC_qfB05Nj7x-8emEbpzA/s1600/themeindie_banner_300x250px_3.jpg"/></a>]]></b:widget-setting>
</b:widget-settings>
<b:includable id='main'>

<b:if cond='data:title != ""'>
</b:if>
<div class='widget-content'>
<span> <data:content/></span>
</div>
</b:includable>
</b:widget>
</b:section>
<div style='clear: both;'/>
</div>

Perhatian:
Kode ini juga dapat diletakkan di atas arahan </body> atau </body> atau di bawah arahan </main> dan </footer> asalkan tidak di dalam Blog1.

Langkah 3
Temukan arahan </body> atau </body> kemudian letakkan arahan berikut di atas arahan tadi.

<script async='async' type='text/javascript'>
//<![CDATA[
$(document).ready(function(){$('a[name="ad-post-top"]').before($("#ads-post-1 .widget-content").html()),$("#ads-post-1 .widget-content").html(""),$('a[name="ad-post-bottom"]').before($("#ads-post-2 .widget-content").html()),$("#ads-post-2 .widget-content").html("")})
//]]>
</script>

Langkah 4
Cari arahan </head> atau </head> kemudian letakkan arahan berikut di atas arahan tersebut.

https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Perhatian:
Jika arahan ibarat itu (atau sejenisnya) sudah ada di dalam template Anda, maka tidak perlu lagi menambahkan arahan tersebut.

Langkah 5
Saatnya meletakkan arahan pemanggil widget iklan yang akan tampil dibagian atas postingan/artikel.

Cari arahan <div class='post-header'> atau <article class='post hentry'> kemudian letakkan arahan berikut sempurna di bawah arahan tadi.

<div class='adspost1'>
<a name='ad-post-top'/>
</div>

Langkah 6
Saatnya meletakkan arahan pemanggil widget iklan yang akan tampil di bawah postingan/artikel.

Cari arahan <data:post.body/> untuk post page, atau cari arahan <div class='post-footer'> kemudian letakkan arahan berikut di bawah arahan tadi.

<div class='adspost2'>
<a name='ad-post-bottom'/>
</div>

Perhatian:
Khusus untuk Langkah 5 dan Langkah 6, bila iklan muncul di homepage, static page dan lainnya, silahkan tambahkan tag conditional yang hanya menampilkan widget di Post Page saja. Tag conditionalnya ibarat ini <b:if cond='data:view.isSingleItem'>.

Langkah 7
Saatnya memperbaiki tampilan tombol editing iklan pada bab Layout/Tata Letak, menjadi ibarat pada gambar berikut.

Cari arahan ]]></b:skin> atau ]]></b:template-skin> kemudian tambahkan arahan berikut di atas arahan tadi.

body#layout #wrapper,body#layout #content-wrapper{display: block;box-sizing: border-box;}
body#layout .single-post-ads{display:block!important;box-sizing: border-box;background-color:#5d4286!important;}
body#layout .single-post-ads .section > h4{font-size:10px!important;margin-left:0}
body#layout .single-post-ads .section{margin:20px auto 0;display:inline-block}
body#layout .single-post-ads:before{content:'POST ADVERTISEMENT SETTING';display:block;}

Langkah 8
Dan saatnya memperbaiki tampilan iklan yang tampil di atas dan di bawah postingan.

Cari arahan </style> kemudian tambahkan arahan berikut di atas arahan tadi.

/* Advertisement on post page */
.ad-post-top h2, .ad-post-bottom h2{display:none}
.adspost1{padding:0;width:auto;text-align:center;height:auto;margin:10px auto 15px;display:block;}
.adspost2{margin:15px auto;display:block;text-align:center;width:auto}
.adspost1 img,.adspost2 img{max-width:100%;height:auto;text-align:center;display:block;margin: auto}
.adspost2 img{max-width:300px;height:auto}

Langkah 9
Simpan tema

Itulah caranya menciptakan dan memindahkan widget editing iklan untuk postingan menjadi berada dibagian Layout atau Tata Letak. Cukup simple bukan?

Sebetulnya trik ini masih dapat dikembangkan lagi, contohnya mau bikin kolom editing untuk author description pada sajian layout, menciptakan tombol editing untuk social media author yang ada dibagian postingan, dan lainnya. Mudah-mudahan bila berkesempatan, aku akan coba buatkan tutorialnya.

Akhirnya, dengan trik ini, pengguna template Blogger serasa berada di platform Wordpress, mau edit macam-macam tidak perlu lagi ke script editor atau editor HTML.

Trik lainnya: Membuat 3 Iklan yang Tampil Sesuai Paragraf dan Bisa Diedit pada Layout, untuk Blogger Layout v3

Demikian tutorial kali ini, supaya membantu, terima kasih dan selamat mencoba!