Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak

bungfrangki Tutorial Blog Trik Agar Bisa Edit Kode Iklan dibagian Postingan pada Menu Layout/Tata Letak

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

Trik ini sebetulnya dikhususkan untuk creator template Blogger, sebagai tambahan customasi tampilan Layout Blogger, untuk mempermudah pelanggan templatenya saat ingin mengedit bagian-bagian yang ada di dalam postingan/artikel. Diantaranya adalah mengedit script atau kode iklan pada bagian postingan.

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

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

Cara membuat dan memindahkan editing kode iklan dibagian artikel, pada menu Layout/Tata Letak Blogger

Cara menerapkannya sangat gampang 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 menu Theme > Edit HTML

Langkah 2
Temukan kode <body> lalu letakkan kode berikut ini di bawah kode 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/AVvXsEisHsup0fOkrXn5ysZ7zcs1JNtvLbsFRXwzfFuRPoqf5pRyTcluto_64-7PwnhSeOvlPbYr_Qd0SxsVmOlV8ShRxE-Ku4MQ3Uxft6hTuGBcxCDd3vTzhhlCD6on-QtI1FBgVUsZNLk5Vy0/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/AVvXsEjAJUcvjaVMieZQ97tAwCQj8A8pZUGqLEe-m-pCCC8gfJqicLqTfrXTNP__FGB2XfXyx9Wzw4SiWPxH7wkiwMIxue9lSeuw3OuBdkUnho9yH-5KbzmUSLXFSDQnnK71rHXe-JGPP7YYjEg/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 bisa diletakkan di atas kode </body> atau </body> atau di bawah kode </main> dan </footer> asalkan tidak di dalam Blog1.

Langkah 3
Temukan kode </body> atau </body> lalu letakkan kode berikut di atas kode 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 kode </head> atau </head> lalu letakkan kode berikut di atas kode tersebut.

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

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

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

Cari kode <div class='post-header'> atau <article class='post hentry'> lalu letakkan kode berikut tepat di bawah kode tadi.

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

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

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

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

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

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

Cari kode ]]></b:skin> atau ]]></b:template-skin> lalu tambahkan kode berikut di atas kode 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 kode </style> lalu tambahkan kode berikut di atas kode 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 membuat dan memindahkan widget editing iklan untuk postingan menjadi berada dibagian Layout atau Tata Letak. Cukup simple bukan?

Sebetulnya trik ini masih bisa dikembangkan lagi, misalnya mau bikin kolom editing untuk author description pada menu layout, membuat tombol editing untuk social media author yang ada dibagian postingan, dan lainnya. Mudah-mudahan jika berkesempatan, saya 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, semoga membantu, terima kasih dan selamat mencoba!

Label

Tutorial Blog