Menampilkan Cuplikan Image Di Homepage Simple Blogger Template

Menambahkan cuplikan gambar, foto atau image pada beranda tema simple blogger template agar tampilan blog atau webste menjadi lebih menarik.

OK.. sobat seharisilam web, jika postingan sebelumnya saya berbagi tentang Cara Menampilkan Deskripsi Halaman Web Di Bawah Post Title, tapi pada postingan ini saya akan berbagi tentang Menampilkan Cuplikan Image Di Homepage Simple Blogger Template.

Jika kalian pengguna simple blogger template, jelas..! cuplikan gambar tidaklah nampak jika dilihat di halaman beranda homepage. Padahal halaman beranda punya fungsi yang sangat penting, yang memberikan kesan dan gambaran singkat yang mewakili dari keseluruhan halaman website kepada pengguna saat berkunjung di halaman beranda sebuah website.

Oleh karena itu, sebuah cuplikan gambar sangatlah penting ditempatkan di area homepage ini untuk mengundang para pembaca, pengguna membuka halaman atau file-file lain berikutnya.

Sifatnya yang fleksibel dalam menerima perubahan dan perkembangan dari web of development, membuat tema - template ini sangat diminati olrh para blogger. Namun demikian, secara default simple blogger template ini tidaklah disertai dengan cuplikan gambar (thumbnail).

Sebagai gambaran atau contoh, kalian bisa meluhat beranda pada web atau blog ini. Oleh karena itu, pada episode kali ini saya ingin berbagi tentang bagaimana cara menampilkan cuplikan gambar di beranda saat menggunakan simple blogger template. Begini caranya :

●  Letekkan css ini di atas </style> atau ]]></b:skin>   :

.Image.firstImg {

   width:240px;

   height:auto;

   float:left;

   clear:left;

   border-radius:7px;

   margin:0 15px 0 0

 }

.post p {

   line-height:1.5;

   font-size:15px;

 }

.jump-link {

   padding:5px 1px;

   border-bottom:1px dashed #ddd;

   color:var(--bg-link);

   font-weight:bold;

   font-style:normal;

   text-transform:normal;

   margin-bottom:15px

 }

.post-footer {

   display:none;

   line-height:1.4;

   margin:-10px 0 10px -8px

 }

  

@media screen and (max-width:768px){

.Image.firstImg {

   width:150px;

   height:auto;

   margin-bottom:0px

 }

  

h2.post-title {

   font-size:18px;

   margin-bottom:-10px

 }

}

●  Cari script <data:post.body/> yang kedua, lalu letakkan berikut ini, tepat di atasmya.

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

        <b:if cond='data:post.firstImageUrl'>

              <div class='Image firstImg'>

                <img alt='nama blog kamu' expr:src='data:post.firstImageUrl'/>

              </div>

          </b:if>

      <b:else/>

</b:if>

●  Lihat hasilya dengan cara buka homepage

●  Done!

    

Untuk penataan tata ruang yang lebih rapi, penggunaan huruf dan pemilihan warna yang lebih menarik, kalian bisa meng-otak-atik sendiri pada bagian css di atas. Selamat mencoba... mohon bagikan kepada rekan-rekan melalui sosial media anda, and GOODLUCK!

Share :