Memasang Share Buttom Bip Messenger Pada Blog AMP

Memasang Share Buttom Bip Messenger Pada Blog AMP - Tidak hanya Whatsapp sebagai aplikasi chat beberapa bulan lalu juga ada aplikasi chat yang sangat populer namanya adalah Bip Messenger dimana fitur yang dimiliki pun lebih bagus dibanding aplikasi whatsapp. 

Pada artikel kali ini saya akan share tutorial Memasang Bip Messenger Pada Blog AMP, tutorial ini ditulis oleh kang ismet dan aku coba juga pada blog saya ini dan berhasil juga. Nah bagaimana caranya simak tutorial nya berikut ini ya

Memasang BiP Share Button

1. Pastikan anda pasang kode JS amp-social-share seperti di bawah, kalian pasang tepat dibawah kode head

<script async='async' custom-element='amp-social-share' src='https://cdn.ampproject.org/v0/amp-social-share-0.1.js'/>

2. Simpan kode ini, terserah kalian mau taruh dimana aja diatas postingan atau dibawah postingan

<amp-social-share type="bip"

  layout="container"

  data-share-endpoint="bip://send"

  expr:data-param-text='&quot;&quot; + data:blog.url'>

    <amp-img src="https://cdnblogger.github.io/images/bip-messenger.png"

      width="29"

      height="28"

      layout="fixed"

      alt="Share via BiP">

	</amp-img>

</amp-social-share>

Apabila akan ditampilkan hanya pada versi mobile (recommended) gunakan kode ini :

<b:if cond='data:blog.pageType == &quot;item&quot; and data:blog.isMobileRequest == &quot;true&quot;'>

<amp-social-share type="bip"

  layout="container"

  data-share-endpoint="bip://send"

  expr:data-param-text='&quot;&quot; + data:blog.url'>

    <amp-img src="https://cdnblogger.github.io/images/bip-messenger.png"

      width="29"

      height="28"

      layout="fixed"

      alt="Share via BiP">

	</amp-img>

</amp-social-share>

</b:if>

Jika kalian ingin melihat demo seperti apa kalian bisa langsung aja klik icon share pada blog ini, itulah tutorial nya selamat mencoba ya sobat. 

Cara Menampilkan Komentar Disqus di Halaman Static Blog

Membuat Forum di Halaman Stastic Valid AMP Dengan Disqus - Udah pada tau belum sekarang Sudar Blogger sudah menyediakan forum di blog ini dimana pengunjung bisa bertanya mengenai apa aja yang ingin kepoin mengenai admin nya, dengan adanya forum maka pengunjung bisa berinteraksi antara admin nya langsung. 

Dalam forum ini saya memanfaatkan komentar disqus karena tampilan nya simple dan tidak wah. Mungkin dari kalian tertarik dengan cara membuat nya bisa ikuti aja langkah berikut ini.

Cara Menampilkan Komentar Disqus di Halaman Static Blog

Pertama yang harus kalian lakukan adalah membuat halaman static kosongan atau bisa diselipkan kata - kata sesuai keinginan kalian, setelah itu kalian pilih mode HTML masukan kode yang ada di bawah ini. 

Untuk Blog non AMP

<div id='disqus_thread'></div>


<script>


var disqus_config = function () {


this.page.url = 'URL LAMAN DI SINI';  // Replace PAGE_URL with your page's canonical URL variable


this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable


this.page.title = 'JUDUL LAMAN DI SINI';


};


var shortname = 'SHORTNAME DISQUS DI SINI';


(function() { // DON'T EDIT BELOW THIS LINE


var d = document, s = d.createElement('script');


s.src = 'https://'+shortname+'.disqus.com/embed.js';


s.setAttribute('data-timestamp', +new Date());


(d.head || d.body).appendChild(s);


})();


</script>

Jangan lupa ganti yang ditandai dengan milik kalian seperti URL Halaman dan Username Disqus.

Untuk Blog AMP HTML

<amp-iframe frameborder="0" height="1000" layout="fixed-height" resizable="resizable" sandbox="allow-forms allow-scripts allow-same-origin allow-modals allow-popups" src="https://cdn.statically.io/gh/KompiAjaib/kompi-html/master/ampdisqus_blogger4.html?shortname=kompiajaib&amp;fontBodyFamily=sans-serif&amp;fontLinkColor=2B0C93&amp;canonicalurl=https://www.sudarblogger.web.id/p/oot_3.html&amp;title=Forum%20Kang%20Sudar" title="Disqus Comments">


  <div aria-label="Disqus Comments" overflow="" role="button" tabindex="0"></div>


<amp-img height="1000" layout="fixed-height" placeholder="" src="https://cdn.staticaly.com/img/1.bp.blogspot.com/-x1yVa6ztsWY/WyHFPLG0uLI/AAAAAAAAyIg/3C5Lb5EjGywOPzO_XSwK1XTu6VlBZE4SgCLcBGAs/s1600/back-iframe.png" width="auto"></amp-img>


</amp-iframe>

Jangan lupa ganti Username Disqus Kangsudar dengan nama disqus milik kalian, bagaimana apa masih ada yang ditanyakan. 

Cara Memasang Unit Iklan Google Adsense Auto Ads 2023

Panduan Lengkap Memasang Unit Iklan Google Adsense Auto Ads- Google adsense adalah sebuah pemyedia unit iklan milik google yang sangat populer di kalangan para blogger, mereka berlomba - lomba agar bisa di terima penyedia iklan tersebut.

Pada waktu lalu Google Adsense mengeluarkan fitur terbaru yaitu Unit Iklan 'Auto Ads'. Walaupun Google sudah menghadirkan unit iklan baru seperti In-Artikel, Matchen Contant, dan In-Feed namun Google belum puas agar publisher di beri kemudahan untuk unit iklannya.

Pada kali ini saya akan memberikan panduan lengkap cara memasang unit iklan Auto Ads di Blogger maupun Wordpress, jika kalian tertarik dengan tips ini simak sampai Akhir ya.

Cara Mendapatkan Iklan Auto Ads di Google Adsense

Sebelum memasang di blog kita tentu kota harus mendapatkan kodenya kan, nah bagaimana cara mendapatkan kode Unit Iklan Auto Adsense, ini dia. 

Langkah pertama kalian harus masuk Akun Adsense kalian, Pilih My Ads klik tombol Auto Ads.

Disitu ada sedikit penjelasan iklan tersebut, kemudian klik 'Get Started'.

Selanjutnya kalian Akan di bawa ke halaman 'Global Setting', pada bagian ini kalian bisa atur jenis iklan apa aja yang akan dipasang.

Jangan lupa Centang 'Automatically Get New Format', supaya jika google update unit iklan terbaru bisa langsung tampil kemudian langsung 'Save'.

Selanjutnya klik 'Stup Auto Ads' disini kalian akan ada Pop Up kode iklan Auto Adsense yang muncul.

Cara Memasang Kode di Blogger dan Wordpress

Setelah mendapatkan tentu kita harus memasang di blog, pada kali ini saya akan memasang dengan dua cara yaitu di blogger dan wordpress karena keduanya adalah platfrom dengan pengguna terbanya di indonesia.

Wordpress

• Langkah pertama kalian masuk ke Area Admin Wordpress blog.
• Kemudian pilih Appearance, pilih Editor kemudian buka File header.php
• Kemudia paste kode iklan auto ads di bawah kode <head>
• Setelah itu Simpan Change

Blogger

• Langkah pertama kalian masuk ke Dashboard Blogger
• Pilih Menu Tema, setelah itu pilih tombol Edit HTML.
• Cari kode <head> dan taruh kode Iklan Auto Ads dibawah kode tersebut.
• Simpan Template.

Cukup sampai disini Panduan Lengkap Memasang Iklan Auto Adsense di Blogger dan Wordpress dan Blogger, semoga bermanfaat.

Apa itu CSS Shotband? Mengenal CSS Shorthand

Apa itu Shorthand CSS? Ini artinya itu adalah memperpendek subuah CSS atau yanh disebut (Caschading Style Sheets) yang dimana menerapkan sebuah properti dalam waktu bersamaan. Apabila penerapan Shorthand CSS ini diterapkan maka akan membuat hemat energi, waktu dan tenaga ditambah lagi akan membuat menjadi lebih rapi juga. 

Penulisan gambar Margin, Pedding dan Outline

Contoh tulisan margin bisa liat pada contoh seperti yang ada dibawah ini

margin-top:5px;

margin-right:10px;

margin-bottom:20px;

margin-left:25px;

maka Shorthand dari CSS di atas Memiliki arti

margin: 5px 10px 20px 25px;

yang perlu diperhatikan cara menulisnya seperti  jarum jam atas > kanan > bawah > kiri

Satu Value

margin:10px;

apabila satu value seperti itu, maka artinya semua valua sama memiliki margin:10px, jadi apabila kode diatas dipanjangkan, hasilnya seperti ini

margin-top:10px;

margin-right:10px;

margin-bottom:10px;

margin-left:10px;

Dua Value

margin: 10px 15px;

karena mempunya dua value (nilai) maka berarti hanya atas dan kanan, bawah dan kiri tidak ada. Maka akan disamakan yang sejajar / bersebrangan. atas=bawah dan kanan=kiri. jadi apabila dipanjangkan hasilnya seperti ini

margin-top:10px;

margin-right:15px;

margin-bottom:10px;

margin-left:15px;

Tiga Value

margin: 10px 15px 20px;

perhatikan, value yang ada adalah atas > kanan > bawah. Maka untuk kiri yang tidak ada akan disamakan dengan kanan. jadi hasilnya seperti ini

margin-top:10px;

margin-right:15px;

margin-bottom:20px;

margin-left:15px;

Kesimpulannya, apabila 2 atau 3 value maka yang tidak ada akan disamakan dengan yang ada. atas=bawah dan kiri=kanan

Border

Pada property border, nilai yang bisa di set adalah border-width, border-style dan border-color

border: 1px solid black;

apabila diterjemahkan maka hasilnya adalah

border-width: 1px;

border-style: solid;

border-color: black;

Font

Contoh dari CSS Shorthand pada Font

font: bold italic small-caps 16px/30px Arial, sans-serif;

maka artinya adalah

font-weight: bold;

font-style: italic;

font-variant: small-caps;

font-size: 16px;

line-height: 30px;

font-family: Arial, sans-serif;

Background

Contoh Shorthand pada CSS Background

background: #fff url(kangismet.png) no-repeat top right fixed;

maka artinya adalah

background-color: #fff;

background-image: url(sudarblogger.png);

background-repeat: no-repeat;

background-position: top right;

background-attachment: fixed;

CSS Backround di CSS3

Pada CSS3 ada penambahan background-size, background-origin dan background-clip. Dan ini bisa digabung pada CSS Shorthand di atas. Maka sebagai contoh seperti ini

background: #fff url(kangismet.png) no-repeat top right fixed / 50% 30% border-box content-box;

List

Contoh CSS Shorthand pada List

list-style: circle inside url(bullet.gif);

maka artinya

list-style-type: circle;

list-style-position: inside;

list-style-image: url(bullet.gif);

Color

Warna juga bisa disingkat seperti #ffffff menjadi #fff atau #33dd77 menjadi #3d7. Tapi memang lebih mudah yang mempunyai 6 digit sama. atau dengan penyebutan warna seperti color: red;.

Semoga bermanfaat...