Cara Menampilkan Widget di Template Blogspot Versi Mobile Saja Tidak Muncul di Desktop | ARMAILA BLOGGER

Cara Menampilkan Widget di Template Blogspot Versi Mobile Saja | Di template landing page blogspot versi dua yang diberikan oleh owner. semua widget utama bisa ditampilkan menggunakan desktop atau mobile.

Hal ini berbeda dengan template landing page blogspot pada versi satu yang memberikan fasilitas widget yang hanya tampil di mobile atau hp aja. Dan juga widget yang tidak akan muncul di hp.

Cara Menampilkan Widget di Template Blogspot Versi Mobile Saja Tidak Muncul di Desktop | ARMAILA BLOGGER

Nah, berhubung pada template yang pertama tidak tersedia fitur untuk menambah postingan, maka Armaila mencoba mengotak atik template versi dua yang sudah tersedia fitur postingannnya. Namun fitur widget hanya tampil di mobile tidak disertakan.

Setelah googling akhirnya nemu juga panduan bagaimana "Cara Menampilkan Widget di Template Blogspot Versi Mobile" saja yang akan admin terapkan di Blogspot Landing Page ku.

Menampilkan Widget di Template Blogspot Versi Mobile

hal pertama yang perlu diperhatikan adalah memastikan widget yang mana yang tidak ditampilkan di desktop dan hanya muncul di mobile saja.

Dalam kasus Armaila. Widget yang akan disetting muncul di hp saja adalah widget dengan id HTML55

Dan berikut ini kode yang perlu ditambah
  <b:widget  cond='data:blog.isMobileRequest' id='HTML55' locked='true' title='Hanya Tampil di HP' type='HTML' version='1'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;a href=&quot;https://shopee.co.id/umahopat&quot; target=&quot;_blank&quot; rel=&quot;nofollow&quot;&gt;
      &lt;img src=&quot;https://1.bp.blogspot.com/-KJGVviy-3xM/Xx1t6NxCGfI/AAAAAAAANJw/LsHvjKzOd9oVjh2YOXERiEXt2WvhUXNHQCLcBGAsYHQ/s1600/Cara%2BMenambah%2BLink%2BPada%2BGambar%2BHTML%2Barmaila%2Bakhir%2Bmali.png&quot; title=&quot;Beli Via Shopee&quot; alt=&quot;Beli Via Shopee&quot; /&gt;
    &lt;/a&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
  </b:widget>

Jika diringkas akan menjadi seperti berikut ini

  <b:widget  cond='data:blog.isMobileRequest' id='HTML55' locked='true' title='Hanya Tampil di HP' type='HTML' version='1'>
 
  <!-- KODE WIDGET-->

  </b:widget>


True: untuk memunculkan di mobile saja. Jika ingin menyembunyikan di mobile maka ganti jadi "false"
HTML55: sesuaikan dengan id widget yang akan ditampilkan di mobile saja

NB:
Mohon maaf jika penjelasannya belepotan karena ini hanya sekedar dokumentasi pribadi yang berhasil dipraktekkan dari beberapa tutorial yang beredar di google. Dengan harapan bisa merujuk kembali kesini jika terjadi permasalahan yang sama di kemudian hari.

Cara Menambah Link Pada Gambar HTML | Armaila Blogger

Armaila Blogger | Cara Menambah Link Pada Gambar HTML - Gambar yang muncul di blogspot atau web bukan sekedar pajangan semata. Dengan gambar owner atau admin blog bisa berpromosi dan mengarahkan klicker nya ke arah yang ditetapkan oleh admin berupa link yang telah disisipkan ke dalam gambar tersebut.

Cara Menambah Link Pada Gambar HTML

Menambah Link Pada Gambar HTML

Dan berikut ini adalah kode yang diperlukan saat akan menyisipkan link kedalam gambar


Keterangan:
href: Link tujuan
src: Link gambar

Selanjutnya kode tersebut letakkan pada widget yang diinginkan.

Hasilnya akan seperti berikut ini;

Beli Via Shopee

Selamat mencoba dan semoga sukses

Cara Agar Kode Iklan Tidak Muncul di Halaman Blogspot Halaman Statis Blogger

Setiap seorang blogger tentu memiliki alasan tersendiri untuk mebatasi iklan agar tidak muncul di halaman tertentu blognya salah satunya di halaman statis blogspot.

Nah. hal yang sama juga terjadi pada Admin yang ingin membatasi agar iklan tidak muncul di halaman Blog yang admin buat.

Setelah browsing akhirnya admin mendapatkan panduan atau tutorial tentang "Cara Agar Kode Iklan Tidak Muncul di Halaman Blogspot Halaman Statis Blogger" dan berhasil atau bekerja dengan baik setelah admin praktekkan.


Membatasi Iklan Di Halaman Statis Blogspot


1. Silahkan login blogger denggan akun gmail anda.
2. Kemudian pada menu utama blogger, silahkan pilih Tema, lalu klik Edit HTML.
3. Kemudian silahkan cari kode <data:post.body/>, mungkin anda akan sedikit binggung untuk mencari kode <data:post.body/>, mengingat didalam sebuah template blogger terdapat lebih dari satu kode tersebut.

Untuk memastikan kode mana yang dimaksud, silahkan cari kode <!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->.

4. Selanjutnya sebelum memasang iklan, Anda harus menambahkan kode berikut.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
 Kode iklan yang sudah diparse.
</b:if>


Contoh kode iklan admin

<center>
<!-- IKLAN ATAS -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- IKLAN TEKS DAN BERGAMBAR -->
<div dir='ltr' style='text-align: center;' trbidi='on'>
<span style='color: #666666;'><span style='font-size: x-small;'>Advertisement</span></span></div>
<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
<!-- IKLAN TEKS DAN BERGAMBAR -->
<ins class='adsbygoogle' data-ad-client='ca-pub-7764741xxxxxxxx' data-ad-format='auto' data-ad-slot='9464825701' style='display:block'/>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</b:if>
</center>


Posisi / letak iklan tepat di tengah-tengah.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<center>
Kode iklan yang sudah di parse.
</center>
</b:if>

Posisi / letak iklan di sebelah kiri menyatu dengan artikel.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:left;padding-right:15px'>
Kode iklan yang sudah di parse.
</div>
</b:if>

Keterangan :
  • Kode warna Merah berfungsi untuk membatasi iklan supaya tidak muncul pada halaman statis atau supaya iklan hanya tampil pada postingan artikel saja.
  • Kode warna Biru berfungsi untuk menentukan posisi letak iklan (bisa diganti sesuai keinginan).
6. Selanjutnya silahkan klik Simpan Template.
7. Selesai.

Sumber: isotenan

Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2

Sebelumnya Armaila ada sharing tentang cara membuat box iklan melayang saat discroll kebawah. Namun setelah Armaila mencoba mengaplikasikannya di web pulsa Apn.AkhirMali.com ternyata tidak berfungsi.

Akhirnya admin menemukan "Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2" dan cara ini berhasil untuk template frontier yang admin terapkan per tanggal 7 Juli 2020 ini.

Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2

Cara Membuat Widget Sticky pada Sidebar di Blogspot Widget Melayang Blogger Versi 2

1. login akun blogger anda.
2. Pilih Template kemudian Edit HTML, kemudian pasang kode berikut ini tepat diatas kode </head>

<!-- STICKY https://blogger.armaila.com/2020/07/cara-membuat-widget-sticky-pada-sidebar-blog-versi-2.html -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function () {
var offset = $("#HTML1").offset();
var topPadding = 0;
$(window).scroll(function () {
if ($(window).scrollTop() &gt; offset.top) {
$("#HTML1").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
})
} else {
$("#HTML1").stop().animate({
marginTop: 0
})
}
})
});
</script>
<!-- STICKY END -->

Ganti #HTML1 dengan ID widget yang ingin dibuat melayang (sticky).

3. Save template dan lihat hasilnya.

Sumber: KangIsmet