Metro UI Style untuk Postingan di Blogger

Tweet

Metro UI Style untuk Postingan di Blogger - Metro Style memang menjadi gaya yang kesan di sebuah situs. Disini kita akan mambahas bagaimana membuat Metro UI Style untuk Postingan di Blogger.

Cara Membuat Metro UI Style untuk Postingan di Blogger:

1. Buka akun blogger Anda
2. Masuk ke menu template > edit HTML
3. Cari kode dibawah ini:

]]></b:skin>

     4.  Diatasnya pastekan kode dibawah ini :

#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/AVvXsEhmPtfLeYgRaDyEHzqZDWE92R3MJPu9uodqzJWoBJdJKUUO53kXHo85_1XrwNZxY_POp26lleZMfbP3BLRehK7jS6OG740Z5JH5mbo1tGQ5p2N0vfTh9-c5Y322ryrW7itfkVCQQ31dMbU/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 Anda

    6.  Lalu terapkan metro style dimana saja sesuka Anda dengan kode dibawah ini :

<div id="featured-post">
<ul>
<!--Featured Post 1>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 1 end-->
<!--Featured Post 2>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 2 end-->
<!--Featured Post 3>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 3 end-->
<!--Featured Post 4>
<li>
<div class="item-content">
<div class="item-thumbnail">
<a href="post url"><img src="image url" /> </a></div>
<div class="item-title">
<a href="post url">Post Title</a></div></div></li><!Featured Post 4 end-->
</ul>

Keterangan Kode :

1. Ganti post url dengan url artikel
2. Ganti image url dengan url gambar
3. Ganti Post title dengan judul artikel

Maka, demikianlah artikel Metro UI Style untuk Postingan di Blogger semoga dapat membantu Anda untuk lebih paham. Terima kasih telah membaca artikel diatas.