Komunikasi Praktis
  • HOME
  • Jurnalistik
  • Media
  • Humas
  • Speaking
  • Blogging
    • Templates
    • Tips SEO
    • AdSense
    • Posting
  • Komunikasi
  • About
  • Kontak
  • Sitemap
  • Disclaimer
  • Iklan
Home Komunikasi Blog Stylish Featured Post Image for Blogger - Metro UI Style

Stylish Featured Post Image for Blogger - Metro UI Style

Komunikasi Praktis Komunikasi Praktis Komunikasi Praktis
November 26, 2014
Komunikasi Praktis Follow @romel_tea
Komunikasi Praktis

Baca Juga

Stylish Featured Post Image for Blogger
BERIKUT ini cara membuat Stylish Featured Post Image (Conten Slide) for Blogger -- dikenal dengan Metro UI Featured Post Widget Style.

Featured Post berfungsi menampilkan posting (tulisan) yang "diunggulkan" di halaman depan (home, homepage, beranda). Anda bisa menggantinya, misalnya, setiap minggu. Ada empat posting yang bisa ditampilkan di Featured Post ini.

KP anjurkan memilihi Featured Post yang non-slider karena slider tidak user friendly juga tidak seo friendly. Jadi, pilih saja Featured Image Post yang statis seperti yang dipasang di Metro Simple Blogger Template. (Lihat DEMO)

Cara Memasang Stylish Featured Post Image for Blogger - Metro UI Style:

1. Di Blogger Dashboard, klik "Template" > "Edit HTML"

2.  Cari (Ctrl+F) kode

<b:section class='main' id='main' showaddelement='no'>

3. Ganti dengan kode   

<b:section class='main' id='main' showaddelement='yes'> 

 atau ubah "no" menjadi "yes".

4. Cari (Ctrl+F) kode ]]></b:skin>  dan Copy+Paste kode CSS berikut ini di atasnya:
#featured-post a{color:#fff}
#featured-post ul{list-style:none;padding:0}
#featured-post ul li{padding:2px 0 0 2px;float:left;clear:none;width:183px}
#featured-post .item-content{background:transparent}
#featured-post .item-thumbnail{background:transparent}
#featured-post .item-content img{width:183px;height:183px}
#featured-post .item-title{line-height:1.3em;font-size:90%;min-height:50px;max-height:50px;;opacity:0.75;background:#000;margin:-63px 0 1px;padding:5px;color:#fff;overflow:hidden}
#featured-post ul li:first-child{height:250px!important;width:250px!important;padding:2px 0 0!important}
#featured-post ul li:first-child img{height:250px!important;width:250px!important}
#featured-post ul li:first-child + li + li + li{width:368px!important;height:64px!important;overflow:hidden}
#featured-post ul li:first-child + li + li + li img{width:368px!important;height:368px!important}
#featured-post ul li:first-child + li + li + li div.item-title{margin:-373px 0 5px;padding-right:60px;min-height:56px;max-height:56px;opacity:0.90;background: #000 url('https://lh6.googleusercontent.com/-XE052qluJF4/T5WdnWYnAmI/AAAAAAAAJTg/yzMM76rYjkI/s48/Arrow%2520Right.png') 305px 7px no-repeat!important}
#featured-post ul li:first-child + li + li + li div.item-title a{font-size:16px;line-height:1.2em}
5. Save Template!
6. Kembali ke Dashboard Blog
7. Klik "Layout" > klik "Add a Gadget" yang ada di atas kotak "Blog Post".

tambahkan gadget

8. Pilih "HTML/Javascript", lalu Copy+Paste kode berikut ini:

html javascript


<div id="featured-post">
<ul>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="#"><img src="http://4.bp.blogspot.com/-jyTdPw4eyG0/U_Ip28AZPRI/AAAAAAAAACw/68dFiAv8hxk/s1600/Humas%2B-%2BPR.jpg" /> </a></div>
<div class="item-title">
<a href="#">Komunikasi Humas - Dasar Keahlian Humas PR Instansi</a></div></div></li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="#"><img src="http://3.bp.blogspot.com/-L1UXT2oy0AU/U_Ipek170hI/AAAAAAAAACo/gjKXv1elT5k/s1600/Email%2Bsaat%2Bliburan%2Bdapat%2Bdihapus.jpg" /> </a></div>
<div class="item-title">
<a href="#">Phasellus viverra nulla ut metus varius laoreet</a></div></div></li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="#"><img src="http://2.bp.blogspot.com/-g7XD9vqj00Q/U_InczJ-zVI/AAAAAAAAACc/ApanvbXzgDY/s1600/media%2Bbaru.jpeg" /> </a></div>
<div class="item-title">
<a href="#">Komunikasi Media - Komunikasi Melalui Media Massa</a></div></div></li>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="#"><img src="http://4.bp.blogspot.com/-cW8Q5W5A58Y/U_InAb0mfuI/AAAAAAAAACU/1TMJpSRoZyA/s1600/jurnalistik%2B-%2Bjurnalisme.png" /> </a></div>
<div class="item-title">
<a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</a></div></div></li>
</ul></div>

Catatan:
1. Ganti tanda pagar (#) dengan URL/Permalink Posting Anda.
2. Ganti URL Gambar yang diawali kode <img src dengan URL Image Anda.
3. Ganti juga judul posting dengan judul tulisan Anda.

TAHAP KEDUA
Setelah selesai, Featured Post Content/Image sudah muncul. Namun, ia akan muncul di setiap halaman bukan? Bagaimana agar hanya muncul di halaman depan (home) saja? Ini caranya:

1. Template > Edit HTML
2.  Cari kode  

<b:section class='main' id='main' showaddelement='yes'>.

Akan terlihat Widget Type HTML dengan ID HTML dengan nomor, misalnya HTML5.

3. Tambahkan Tag Kondisional agar Featured Post ini hanya muncul pada halaman depan. Tambahkan kode yang berwarna merah, posisinya persis seperti ini:

 <b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- 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:if> 
</b:includable>
</b:widget>

4. Hapus kode  

<b:include name='quickedit'/> 

5. Save Template!

Demikian cara memasang Stylish Featured Post Image for Blogger - Metro UI Style di blog blogspot Anda. Good Luck! (www.komunikasipraktis.com).*

Thanks for reading Stylish Featured Post Image for Blogger - Metro UI Style | Tags: Blogging Komunikasi Blog

Next Article
« Prev Post
Previous Article
Next Post »

Related Posts

Your Comments

7 komentar on Stylish Featured Post Image for Blogger - Metro UI Style

  1. UnknownJanuary 10, 2015

    min.. yang di popular post kok saya gak gak muncul angka nya ya? gimana cara munculinnya? makasih :)

    ReplyDelete
    Replies
    1. AdminJanuary 11, 2015

      Cara Membuat Widget Popular Posts di blog dengan angka ada di sini:
      http://contohblognih.blogspot.com/2014/12/membuat-widget-popular-posts-keren-di.html

      Delete
      Replies
        Reply
    2. Reply
  2. PaduDadi ShareFebruary 04, 2015

    ini nih yang ane cari2 selama ini, mau laporan gan sukses terpasang, makasih

    ReplyDelete
    Replies
      Reply
  3. TravellPreneurMarch 08, 2015

    Min, ga bisa di copas codenya ya...

    ReplyDelete
    Replies
      Reply
  4. MAMENEWSApril 10, 2016

    Min, sulit nyari kode yang mau di pasang kalo sesuai tutorial yang sudah ente sajikan..
    emang di prifat apa postingan'e?

    ReplyDelete
    Replies
    1. AdminOctober 06, 2016

      ente mau copas kode atau postingan? kode bisa dicopas, postingan tidak, yg penting 'kan kodenya

      Delete
      Replies
        Reply
    2. Reply
  5. SitracunJuly 23, 2017

    Lapor gan sukses besar ..Makasih ,,salam blogger

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Subscribe to: Post Comments (Atom)

Recent Posts

Popular Posts

  • Contoh Naskah Pembukaan oleh Pembawa Acara (MC)
  • Cara Menjadi Pembawa Acara (MC) yang Baik
  • Karya Tulis Ilmiah: Pengertian, Karakteristik, dan Jenis-Jenis
  • Contoh Naskah MC (Pemandu Acara) untuk Acara Agustusan
  • Teknik Debat dan Cara Berdebat yang Baik
  • Daftar Kata Baku – Tidak Baku Bahasa Indonesia
  • Pengertian Literasi Secara Bahasa dan Istilah
  • Jurnalisme Kuning Jadi Trend Situs Berita
  • Contoh Script Opening Siaran Radio
  • Arti dan Asal-Usul Teks Lorem Ipsum Dolor Sit Amet

Info Bola & MotoGP

Domain & Hosting

Hosting Unlimited Indonesia

Categories

Bahasa Blogging Feature Fotografi Google Adsense Humas Internet Jurnalistik Kode Etik Komunikasi Media Media Massa Menulis Pers Podcast Presentasi Press Release Public Speaking Radio Teknik MC Teknik Presentasi Tenik MC Tips SEO Wartawan Website

About

Komunikasi Praktis adalah blog tentang keterampilan komunikasi: jurnalistik, media massa, kepenulisan, public speaking, mc, siaran radio, presentasi, humas, public relations, blogging, podcasting, dll.

Web Partners

  • Romeltea Online
  • Romeltea Media
  • Contoh Blog
  • Katalisnet
  • Median Sport

Newsletter

Berlangganan artikel terbaru dari blog ini langsung via email.

Copyright © Komunikasi Praktis. All rights reserved