Cara Membuat Featured Post Metro Ul Style di blogspot

Cara Membuat Featured Post Metro Ul Style di blogspot - Edukatif

Pentingnya Blog Edukatif

Sobat. JIKA memperhatikan tampilan blog FBI (Forum Blogger Indonesia) ini, akan terlihat "Featured Post" yang sangat menarik, karena menggunakan gaya Metro Ul Style. Namun yang paling penting tidak sekedar tampilan yang elok nan rapih, namun juga harus bersifat edukatif, informatif dan user friendly (memudahkan pembaca setia).

Hal itu memang menjadi acuan utama blog ini. Seperti saran dari para master blogger tentang salah satu parameter utama blog berkualitas adalah memberikan informasi yang edukatif dan informatif.

Sobat Forum Blogger Indo tidak usah khawatir. Dalam kesempatan ini akan saya bagi tips cara memasang featured post gaya Metro Ul Style. Tidak susah kok, yang penting mau berusaha dan berdo'a.

Langkah Memasang Featured Post Metro Ul Style (Muncul di semua Page)

1. Berdo'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='no'>

4. Ganti kode 'no' menjadi 'yes'. Jadinya seperti ini:

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

5. Cari kode ]]></b:Skin>

6. Copy kode di bawah ini dan letakkan tepat di atas kode ]]></b:Skin>

#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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWn7C1fNi5xY4JNWuf_Ol02n4vclS6CAFLzzMlvMqnUWFd4BdUYUsmRfE3xJcey6nGWQ8j8WCkS8Io3CCIw-IKV0sNcg1Oyy8QBGjZGl17GasXYhDD8wXTYUlvUQ8_Pv6o_TcoMKIJJ3A/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}

7. Save Template

8. Buka Dashboard blog > tata letak (layout) > add widget > HTML Java Script

9. Copas kode di bawah ini ke dalam widget baru tadi (pada langkah ke-8) > Save

<div id="featured-post"><ul><li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-zWdwFT8wlIxMq97ng9DaCmBWMopyxUS7i8LdCP3qmgFnpve8C0d7Woj_y6xSM38jmcqlsXzu8gNXyT9VgKaVFPVldMdC3TU5bL_BtXUdBHui5AgjqSlKycAb-VRpkRdgokHk1D_BtOc/s1600/Humas+-+PR.jpg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-cepat-membuat-blog-terindeks.html">Cara Cepat Indeks Blog ke Google dalam Satu Menit</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfPL1k04bczKOv3GFQmhztYFSJfnMXkdDoWagt7Yie2d7dxWAc2BGjXXw1KvQGY99K4v45NZ-vFP_pev8QBRpK7r0sAeZcEKbPpOI6Rj26RZgXDIZl3LDLPcKBkiuzEeWNEjRTZUulPT4/s1600/Email+saat+liburan+dapat+dihapus.jpg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/search/label/Template%20SEO">Template Super Responsive dan Super SEO</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYIvHrEWF-HZcT1afUer44nS0n3leAXeGFY3iPs9GyyGOisVqKsQ84r_WEE3FF8rbojMkO0uDk4sxADxvznxVGluFZFR3GuvXPIaNKeIdzGyeIqN60PqhJ_JMFWTxLK59f05wF9RFnYSk/s1600/media+baru.jpeg" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-membuat-blog-berkualitas-seo-dan.html">Cara Membuat Blog Berkualitas dan Disukai Google</a></div></div></li>

<li><div class="item-content"><div class="item-thumbnail"><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVaf6vSeXljo3CARnMELOVWgwv2u5YfdNnzWlUq9OspYrQLM3f9ASYNowjuLO4b-vuY2zE4dXCA4OSprn-BMC9clRkCUTvRv2f1PGln9ZqecU8uhUhLHzmpCYUNxgdlnylpRP6rzJ-aQc/s1600/jurnalistik+-+jurnalisme.png" /> </a></div><div class="item-title"><a href="http://forumblogindo.blogspot.com/2015/04/cara-memilih-template-blogspot-yang.html">Cara Memilih Template Blog yang Benar Disukai Google</a></div></div></li>

</ul></div>

10. Cek perubahan blog Sobat.
11. Alhamdulillah, sudah berhasil (sambil senyum Guys)

***.Note:

Ganti warna merah dengan alamat URL link internal atau eksternal dari blog sobat (misalkan link Url Artikel populer sobat).
Ganti tanda # dengan alamat URL gambar Sobat yang ingin tampilkan.

Langkah di atas menjadikan menu Featured Post akan terlihat di setiap page/halaman ketika dibuka. Jika menginginkan hanya muncul di halaman homepages saja, silakan lakukan modifikasi tambahan di bawah ini:

Langkah Memasang Featured Post Metro Ul Style (Muncul di Home Page)

1. Baca do'a

2. Masuk akun blogger > Template > Edit Html

3. Cari kode [CTRL+F] <b:section class='main' id='main' showaddelement='yes'>

4. Bagi pengguna Template Pro Adsence V1, tampilan lengkapnya akan seperti di bawah ini:

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='HTML6' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url== data:blog.homepageUrl'>

<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>

5. Tambahkan kode yang berwarna merah persis seperti format kode di atas

6. Save template

7. Lihat perubahan blog Sobat.

8. Alhamdulillah

Demikian tips membuat blog semakin edukatif dan informatif serta user friendly. Semoga menjadi berkualitas blog Sobat. Jika ada yang belum faham, silakan berdiskusi dengan Ane di forum blogger ini. Salam blogger.

(http://forumblogindo.blogspot.com/)

Sumber:

http://www.komunikasipraktis.com/2014/11/stylish-featured-post-image-for-blogger.html

9 Blog Berpenghasilan Tertinggi di Indonesia dari Google Adsense

techzend.com Sobat blogger. Kemarin telah kita ketahui bahwa pendapatan para blogger di Indonesia tahun 2015 ini memang tidak bisa dianggap remeh. Karenanya mereka menjadikan blog sebagai rutinitas pekerjaan sehari-hari. Bisa dibayangkan, hanya cukup duduk manis, ambil poisi paling enak, serta berhadapan dengan sebuah laptop/ PC disandingkan dengan segelas kopi hangat, kita bisa mendapatkan penghasilan yang insyallloh halal thoyyiban. Kali ini akan kita lanjutkan bahasan tentang info 9 blog berpenghasilan tertinggi di Indonesia dari Google Adsen s e . Kenapa saya ulas hanya pada fokus yang berpenghasilan dari Google Adsence? Ya karena memang rata-rata para blogger menggunakan GA sebagai pemasukankan utama mereka. Seperti halnya kita tahu, ada juga yang mendapatkan penghasilan blog dari pemasangan iklan dan affiliasi . Blog Berpenghasilan Terbesar di Indonesia Data yang saya sampaikan kali ini, hanya berdasarkan hasil survei serta ulasan dari beberapa sumber lain. Setelah mel...

appfacebook

Pesquisar este blog