Skip to main content

follow us


www.azid.web.id - Cara Membuat Related Melayang sebelah Kanan Seperti Pengguna Wordpress. Pada kesempatan ini saya akan share memebuat related post melayang disebelah kanan. Mungkin sobat pernah melihat pada web yang menggunakan self hosting wordpress ada beberapa yang menggunakan related post ini dengan plugin. Memang hal ini merupakan ciri khas dari wordpress dari pada blogger.

Dari beberapa pencarian google ketika saya mencari "cara membuat related post sebelah kanan" ternyata tidak ada sama sekali tutorial terkait hal tersebut buat blogger justru yang muncul adalah "membuat iklan melayang sebelah kanan". Dari sinilah akhirnya saya mengotak-atik sendiri script iklan sticky buatan kompiajaib.com untuk dijadikan related post melayang disebelah kanan blog dan berhasil.

Bagi sobat yang ingin menggunakan script tersebut, sobat bisa menggunakannya dengan langkah-langkah berikut;

Pertama, masuk blogger pilih theme dan edit HTML setelah itu copas script dibawah ini tepat di atas kode </body>


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sticky-ad fade-in' id='sticky-ad'>
<!-- Kode iklan silahkan simpan di bawah ini -->
<!-- KompiSticky -->
<iframe expr:src='&quot;https://cdn.staticaly.com/gh/Azidzainuri/kode-azid/e6f0b85a/azid.html?protocol=http&amp;url=https://www.azid.web.id&amp;label=&quot; + data:label.name' frameborder='0' height='300' id='rp-amp' layout='fixed-height' resizable='resizable' sandbox='allow-scripts allow-same-origin allow-modals allow-popups' width='100%'>
<div aria-label='Related Posts' overflow='' role='button' tabindex='0'>Related Posts</div>
  </iframe>
<div class='clear'/>
<button aria-label='Close this ad' class='sticky-ad-close-button' onclick='document.getElementById(&#39;sticky-ad&#39;).style.display=&#39;none&#39;;removeClassBody()'></button>
</div>
<style>
/*<![CDATA[*/
.sticky-ad>div{margin:0 auto!important}
body.sticky,body.sticky #sidebar-wrapper{padding-bottom:100px}
.sticky-ad{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:visible;position:fixed;text-align:center;bottom:0;right:0;width:400px;z-index:995;max-height:300px;background-image:none;background-color:rgba(255,255,255,.7);box-shadow:0 0 5px 0 rgba(0,0,0,.2);margin-bottom:0;padding-top:4px;display:none}.sticky-ad-close-button{position:absolute;width:28px;height:28px;top:0;right:378px;background-image:url("data:image/svg+xml;charset=utf8,%3csvg width='13' height='13' viewBox='341 8 13 13' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%234F4F4F' d='M354 9.31L352.69 8l-5.19 5.19L342.31 8 341 9.31l5.19 5.19-5.19 5.19 1.31 1.31 5.19-5.19 5.19 5.19 1.31-1.31-5.19-5.19z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e");background-size:13px 13px;background-position:9px;background-color:rgba(255,255,255,.7);background-repeat:no-repeat;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:0;cursor:pointer}.sticky-ad-close-button:before{position:absolute;content:"";top:-20px;right:0;left:-20px;bottom:0}.fade-in{-webkit-animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in 1.2s cubic-bezier(.39,.575,.565,1.000) both}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}
/*]]>*/
</style>
<script>
//<![CDATA[
var lazyadsense = false;
window.addEventListener("scroll", function(){
if ((document.documentElement.scrollTop != 0 && lazyadsense === false) || (document.body.scrollTop != 0 && lazyadsense === false)) {
document.getElementById('sticky-ad').style.display = "block";
document.body.className += " sticky";
lazyadsense = true;
  }
}, true);
function removeClassBody() {
    var element = document.body;
    element.className = element.className.replace(/\bsticky\b/g, "");
}
//]]>
</script>
</b:if>

Kedua, jika sobat sudah menempatkan kode tersebut langkah selanjutnya sobat bisa tinggal save template. dan lihat hasilnya.

Demikianlah artikel saya tentang Cara Membuat Related Melayang sebelah Kanan Seperti Pengguna Wordpress. Semoga bermanfaat. Amin.
PERHATIAN!: setiap link template pada blog ini di direct 5 -7 kali jadi harap bersabar.

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar