Pembaruan Terakhir (26-05-2023)
  • Update script: membuat notifikasi semua komentar di blogger (mode popup)
  • Spesifikasi: src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/user53cm.js'

  • Toast notif disertai Text-to-speech
  • Cukup klik 1 kali maka mode responsif akan aktif (sebelumnya dua kali kik)
  • Sekarang komentar telah di tambahkan beberapa fitur custom segera periksa

Cara membuat first image berada di atas judul blog

views

Hello sobat icloudZer kali ini admin bakalan memberikan aetikel mengenai bagaimana caranya membuat gambar thumbnail di atas judul blog di blogger

Info: Oke sobat icloudZer jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

First Image

First image merupakan gambar pertama pada sebuah artikel post di blogger, first image atu gambar pertama biasanya di letakkan pada posisi standar di bawah title alias judul blog, sedangkan pada beberapa template blogger gambar pertama post artikel di letakkan berada di atas judul blog alias title, first image juga sering di tampilkan sebagai thumbnail gambar pada suatu artikel di blogger

Menggunakan Javascript

Dalam membuat first image di atas judul blog kita akan menggunakan kode javascript untuk menjalankan fungsi first image di atas judul blog secara otomatis, dengan menghapus first image yang terletak di bawah judul blog dan menampilkan first image di atas judul blog menggunakan kode javascript

Cara pembuatan

Baiklah sekarang saatnya admin akan menjabarkan mengenai bagaimana caranya membuat first image di atas judul blog secara otomatis, pelajari secara perlahan dan ikuti setiap arahan yang admin berikan

  1. Login ke blogger menggunakan akun google milikmu
  2. Selanjutnya pilih menu Theme kemudian pilih menu Edit HTML
  3. Salin kode CSS di bawah ini kemudian letakkan diatas kode ]]></b:skin>
  4. .rahfirst-img{
      background:#fefefe;
      padding-bottom:16px;
      background-repeat:no-repeat;
      background-position:center;
      background-size:cover;
      width:100%;
      height:auto
    }

    Info: Atau kamu juga bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas

  5. Selanjutnya Cari kode <article class="post"> kemudian jika sudah ketemu letakkan kode javascript di bawah ini tepat di bawah kode tersebut
  6. <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:post.firstImageUrl'>
    <img class='rahfirst-img' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
    <script type='text/javascript'>
    //<![CDATA[
    $(function(){$(".separator:first").remove(),$(".post-body > img:first").remove()});
    //]]>
    </script>
    </b:if>
    </b:if>

    Info: Untuk mempermudah anda gunakan tombol CTRL+F untuk mencari kode <article class="post">, gak tau ap itu CTRL+F bisa baca disini

  7. Kemudian kamu bisa langsung simpan template dan lihat bagaimana hasilnya setelah menerapkan semua langkah langkah di atas

Contoh Tampilan

Jika kamu penasaran dengan bagaimana tampilan dari first image di atas judul blog silahkan gunakan tombol di bawah ini untuk mengetahuinya

Info: Bagaimana sobat dengan contoh tampilan nya keren ya, oke semoga Bermanfaat

Keindahanmu akan kuabadikan disetiap karyaku.

Posting Komentar

Pergunakanlah kecerdasan anda saat berkomentar, dan tinggalkan komentar sesuai topik tulisan. Komentar dengan link aktif tidak akan ditampilkan.
Masukkan URL Gambar atau URL Video YouTube atau Potongan Kode , atau Quote , lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image video quote pre code
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.