MetroMinimalist Blogger Template

Template kali ini bertema minimalist,dan terinsprasi dengan konsep style Metro UI dari windows 8.karena saya rasa sudah ada yang membuat template metro UI untuk blogger dan terlalu mainstream,karena itu saya membuat dengan cara saya sendiri dan kreasi style saya sendiri dengan warna dasar putih,blueDark dan color-blueLight dan css yang digunakan pun sederhana,tentunya membuat template ini ringan dan fast loading.yang paling indentik dengan metro style pada template ini terletak pada Tipografi font ini sendiri yang sama dengan windows 8 ,Segoe UI Light.dan pada bagian posting gambar auto readmore,saya berikan juga CSS3 Filter saturasi dan di beri nilai 0.0 agar warna pada gambar menjadi hilang,tetapi menggunakan hover efek dan diberi nilai 1.1 agar warnanya timbul kembali,lalu pada bagian descripsi,dibuat hover efek juga,dan akan menampilkan tanggal,jumlah comment,author dan label posting.


Screenshot

*jika menggunakan browser Mozilla,efek filter saturasi tidak akan berfungsi karena belum mendukung kemampuan ini.

1. Pengaturan menu
Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


Contoh:

<li><a href='http://www.facebook.com'>Facebook</a></li>

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li data-role='dropdown'><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li data-role='dropdown'><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li data-role='dropdown'><a href='#'>Anime</a><ul>
<li><a href='#'>Winter</a></li>
<li><a href='#'>Summer</a></li>
<li><a href='#'>Spring</a></li>
</ul></li>
<li data-role='dropdown'><a href='#'>Staf</a><ul>
<li><a href='#'>Staf a</a></li>
<li><a href='#'>Staf b</a></li>
<li><a href='#'>Staf c</a></li>
</ul></li>
<li><a href='#'>Portfolio</a></li>
<li><a href='#'>Guestbook</a></li>
</ul>

2. Setting Social media facebook,twitter,g+,Rss
*ganti url linknya

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'/></li>
<li><a class='icon twitter' href='http://twitter.com/username/'/></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'/></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'/></li>
</ul>

3. Setting SEO/Meta tag

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Semoga bermanfaat,terima kasih ^^

Download via Dropbox

Download via Google Drive

Demo

Credit:Djogzs

Only Crazy Dreams | Rekreasi Dunia Maya
Published : 2013-01-27T09:48:00+07:00
Title : MetroMinimalist Blogger Template
Rating : 4.9 On 489544 reviews

Facebook Google+ Twitter Digg Reddit Linkedin Technorati