Widget Scroll AMP

Penggunaan Widget Scroll untuk Template Valid AMP, Widget Scroll Valid AMP blogger, Widget Scroll Valid AMP with CSS, Widget Scroll Down and Up Valid AMP with CSS featured - Mempercantik sebuah tampilan website memang merupakan kriteria agar user lebih mempertimbangkan kualitas dari website atau blog tersebut yang dimana dikhususkan untuk para pengunjung tentunya agar lebih antusias terpikat tentunya dengan tampilan website yang elok di lihat.
Nah alhamdulillah di kali ini AA Sciences akan membagikan fitur yang dimana fitur ini pun akan membuat nya suatu website dapat dinyatakan cantik tetapi fitur kali ini tidak lah hanya membuat cantik saja sobat AA Sciences melainkan membuat sebuah website tampil rapih dengan adanya widget scroll dalam widget ini dengan cara yang mudah hanya menerapkan script CSS + HTML saja pada widget tertentu sehingga fitur AMP akan support nya.

Sebelumnya AA Sciences pun sudah mengulas bagaimana cara membuat scroll dalam suatu website agar menjadi rapih, tetapi AA Sciences menerapkan nya pada tag tepat bagian HTML nya, tentunya dalam sebuah website yang valid strukutur AMP tidak mendukung tag HTML scroll karenakan terdapat mode style non AMP pada fitur tersebut melainkan CSS pun tidak menjadi fitur nya.

Baca : Popular Post Scroll Blogger
            Label Scroll Blogger
            Recent Post Scroll Blogger

Ya memang dengan adanya fitur scroll dalam suatu website memang terbilang dapat untuk merapikan sebuah tampilan website tentunya dengan adanya fitur scroll widget ini maka otomatis widget secara yang terbilang acak acakan layak nya tak terurus maka bisa di sulap menjadi sebuah widget yang tampil rapih dengan adanya fitur scroll dalam suatu widget tersebut.

Cara memasang scroll widget dalam suatu website terutama widget pun cara nya mudah kalian hanya menerapkan kode pemanggil nya seperti <div class="scrollaldi"> dan berikan penutup nya jangan lupa, dengan tag </div> pada akhiran widget yang dibuat tersebut.

Oke Langsung saja ke metode pembuatan mengenai Cara membuat Widget Scroll Valid AMP nya, di bawah ini.

Cara Membuat Widget Scroll Valid AMP Blogger With CSS

Pembuatan CSS nya terlebih dahulu :

Pastikan kalian sudahlah Login terlebih dahulu pada akun Blogger kalian.

Template - > Edit HTML - > CTRL+F (untuk memudahkan pencarian) lalu cari kode ]]></b:skin> atau dapat juga kode </style> atau tag tertentu yang ingin kalian terapkan.

Jika sudah ditemukan kode ]]></b:skin> atau </style> nya tadi, langsung saja kalian Salin kan Script CSS/Widget Scroll Valid AMP nya di bawah ini tepat sebelum tag ]]></b:skin> atau </style> atau tag tertentu, berikut CSS nya :

.scrollaldi{height:310px;width:auto;overflow:auto}

Kalian dapat menyesuaikan tinggi dan lebar nya dengan ukuran height dan width sesuai pada tampilan website tertentu kalian.

Penerapan HTML nya

Cara nya pun mudah kalian hanya cukup menerapkan seperti tag nya di bawah ini :

<div class='scrollaldi'>
...Disini letak Script yang ingin diberi scroll nya..</div>

Bagaimana paham bukan?

Jika bingung AA Sciences akan memberikan sebuah contoh pemasangan widget scroll nya ini dalam widget popular post dan label.

Contoh :

Scroll Widget in Popular Posts

<b:widget id='PopularPosts1'> locked='false' title='Artikel Terpopuler' type='PopularPosts' version='1'>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
  <div class='widget-content popular-posts'>
<div class='scrollaldi'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='!data:showThumbnails'>
          <b:if cond='!data:showSnippets'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
          <div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
            <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
                  <b:with value='data:post.featuredImage.isResizable? resizeImage(data:post.featuredImage, 160) : data:post.thumbnail' var='image'>
                    <amp-img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='100' width='160'/>
                  </b:with>
                </a>
              </div>
              <b:else/>
              <div class='item-thumbnail'>
                <a expr:href='data:post.href' target='_blank'>
              <amp-img expr:alt='data:post.title' expr:title='data:post.title' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5XkwXJLF0whFFcWCeYLAN2neJ-Z8IglSD6Kq3NmO5h1U15AT_rKbuhUSH77jbNy_HLWYqg1NjEZbpQ7blukkd7sPGKnHVrKfYPVEtljga4tXmN9nY3u1VroHY1n8Nys1O_mz7c-Nh1sdQ/s160/no-thumbnail.png' width='160'/>
                </a>
              </div>
            </b:if>
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <b:if cond='data:showSnippets'>
              <div class='item-snippet'><data:post.snippet/></div>
            </b:if>
          </div>
          <div class='clear'/>
        </b:if>
      </li>
      </b:loop>
  </ul></div>
    </div>
</b:includable>
    </b:widget>

Scroll Widget in Label

<b:widget id='Label1' locked='false' title='Kategori Artikel' type='Label' version='1'>
      <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2><data:title/></h2>
  </b:if>
  <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
  <div class='scrollaldi'>
    <b:if cond='data:display == &quot;list&quot;'>
      <ul>
        <b:loop values='data:labels' var='label'>
          <li>
            <b:if cond='data:blog.url == data:label.url'>
              <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
            <b:else/>
              <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;'><data:label.name/></a>
            </b:if>
            <b:if cond='data:showFreqNumbers'>
              <span dir='ltr'>(<data:label.count/>)</span>
            </b:if>
          </li>
        </b:loop>
      </ul>
    <b:else/>
      <b:loop values='data:labels' var='label'>
        <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
          <b:if cond='data:blog.url == data:label.url'>
            <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
          <b:else/>
            <a expr:dir='data:blog.languageDirection' expr:href='data:label.url + &quot;?&amp;amp;max-results=8&quot;'><data:label.name/></a>
          </b:if>
          <b:if cond='data:showFreqNumbers'>
            <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
          </b:if>
        </span>
      </b:loop>
    </b:if>
    </div></div>
</b:includable>
    </b:widget>

Dan langkah Terakhir, langsung saja Simpan theme dan lihat hasilnya.

Share this post