Responsive Simple Metro Mini Template

Responsive Simple Metro Mini Template - Masih melanjutkan tentang design sederhana dari Metro Mini Template kali ini saya berikan kembali template Flat metro dengan design yang simple dan sederhana untuk template gaya metro style. Hanya sedikit perubahan pada template ini yaitu penambahan multiple drop down menu pada bagian atas blog dan tampilan blog post view.

Fitur Template :

1. Responsive Design portable semua browser
2. Multi drop down menu
3. Tooltip related post
4. Voice search
5. Breadcrumb SEO Friendly
6. Loading blog cepat

• PREVIEW

• DOWNLOAD

Costum menu template :

Cari kode-kode dibawah ini dan ganti tanda # dengan URL yang ingin anda pasang.

 <div id='cssmenu'>
<ul>
   <li class='active'><a expr:href='data:blog.homepageUrl'><span><i class='icon-home'/> HOME</span></a></li>
   <li class='has-sub'><a href='#'><span><i class='icon-link'/> LINK</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>LINK 1</span></a>
            <ul>
               <li><a href='#'><span>LINK 1.1</span></a></li>
               <li><a href='#'><span>LINK 1.2</span></a></li>
               <li class='last'><a href='#'><span>LINK 1.3</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>LINK 2</span></a>
            <ul>
               <li><a href='#'><span>LINK 2.1</span></a></li>
               <li><a href='#'><span>LINK 2.2</span></a></li>
               <li class='last'><a href='#'><span>LINK 2.3</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span><i class='icon-user'/> ABOUT</span></a></li>
   <li class='last'><a href='#'><span><i class='icon-envelope'/> Contact</span></a></li>
</ul>
</div>

<div class='top-menu'>
   <ul id='top-menu'>              
     <li><a href='#'>MENU 1</a></li>              
     <li><a href='#'>MENU 2</a></li>              
     <li><a href='#'>MENU 3</a></li>              
     <li><a href='#'>MENU 4</a></li>              
     <li><a href='#'>MENU 5</a></li>          
   </ul>

Demikian sedikit tentang template blog sederhana Responsive Simple Metro Mini Template.
Happy Blogging

Awesome Breadcrumb SEO Friendly

Setelah sebelumnya saya pernah memberikan artikel tentang menu breadcrumb metro style yang mungkin akan lebih pas dan cocok buat kalian yang menggunakan template blog gaya metro style. Kini saya akan memberikan sedikit tips membuat navigasi breadcrumb agar blog lebih seofriendly, mungkin kalian semua sudah sering melihat beberapa tips - tips seperti ini di internet. Namun disini ada sedikit yang berbeda dengan menu breadcrumb yang saya berikan, yaitu menggunakan fitur font awesome bootstrap. Untuk tampilannya kira kira seperti gambar diatas.

Langsung saja kita masuk ke cara pemasangan di Blog :

Masukkan kode dibawah ini sebelum kode </head>

<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>

Kemudian Tambahkan kode CSS dibawah ini sebelum ]]></b:skin>

.breadcrumbs{padding:0px 5px 5px 0;margin-bottom:10px;margin-top:0px;font-size:11px;color:#5B5B5B;}

Lalu cari Kode <b:includable id='main' var='top'> dan ganti dengan kode dibawah ini :

<b:includable id='breadcrumb' var='posts'><b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'><i class="icon-home"></i> HOME</a></span>
<b:loop values='data:post.labels' var='label'>
<i class="icon-check"></i> <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
<i class="icon-check"></i> <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Unlabelled</span> <i class="icon-check"></i> <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'><i class="icon-home"></i> HOME</a></span> <i class="icon-check"></i> <span>Posts filed under <data:blog.pageName/></span>
</b:if>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>
<b:include data='posts' name='breadcrumb'/>

Terakhir Save template.

Fungsi dari navigasi breadcrumb ini agar semua label dapat ditampilkan dalam pencarian di search engine, untuk melihat hasilnya silakan check di http://www.google.com/webmasters/tools/richsnippets
Jika anda berhasil akan tampak seperti gambar dibawah ini :

Demikian sedikit tips blog kali ini semoga bisa bermanfaat

Responsive Flat Metro Mini Template

Setelah hampir sebulan penuh ga ada aktivitas blogging karena pulang ke Negeri Tercinta, alhamdulillah sekarang bisa aktif kembali dengan peralatan ala kadarnya dan koneksi yang kurang maksimal karena quota yang dibatasi. Masih seperti artikel artikel sebelumnya tentang template blog metro windows, kali ini saya persembahkan Responsive Flat Metro Mini untuk anda sekalian. Template blog ini sebagai kelanjutan dari template metro mini dengan design responsive yang hampir udah 100% ke semua browser.

Untuk fitur dari template ini adalah sebagai berikut :

1. Mendukung semua perangkat browser internet ( Responsive )
    Check di http://www.responsinator.com/
2. Design 2 kolom berada disebelah kanan
3. Warna yang ngejreng sesuai thema blog Metro Style
4. Dilengkapi dengan 2 mode komentar ( Facebook dan Blogger )
5. Widget social media sharing
6. Loading blog cepat teruji di GTMetrix Page speed 91%, Yslow Grade 71%

• PREVIEW

• DOWNLOAD

Jika ingin memodifikasi template ini anda bisa menggunakan tutorial yang masih berbau metro style yang ada pada blog ini agar tampilannya bisa lebih maksimal. Atau jika anda ingin menambahkan kotak search anda bisa menggunakan widget dibawah ini :

<style>
#vn-search-box {
    background: none repeat scroll 0 0 #fafafa;
    border: none;
    padding: 10px;
    width: 120px;
}
#vn-search-btn {
    background: none repeat scroll 0 0 #e74c3c;
    border: 0 none;
    border-radius: 0 0 0 0;
    color: #FFFFFF;
    font-weight: 700;
    padding: 10px;width: 70px;
}
</style>
<form id="searchthis" action="/search" style="display:inline;" method="get">
<input id="vn-search-box" name="q" size="40" type="text" placeholder="  Type your text here "/>
<input id="vn-search-btn" value="Search" type="submit"/>
</form>

Demikian artikel tentang responsive flat metro mini template blog yang saya berikan semoga bisa bermanfaat, Salam BLOGGER.

Membuat Pesan Alert Metro Style

Setelah membuat template blog dengan gaya Metro Style sudah saatnya kita untuk menambahkan pesan yang anda tuliskan dalam sebuah postingan blog, agar para pembaca dapat dengan mudah memahami maksud dari informasi yang anda sajikan . Termasuk cara untuk menunjukkan kesalahan , pemberitahuan , informasi dan keberhasilan pesan dengan gaya yang tepat . Dalam posting ini ada kode CSS sederhana untuk menambahkan kotak Siaga mengagumkan dalam blogger .
Ini adalah campuran dari HTML sederhana dan tag CSS . Yang akan menciptakan efek yang mengagumkan untuk Anda . Dapatkan tampilan pada berbagai jenis bar pemberitahuan .

1 . Pesan Kesalahan

Pesan Informasi

2 . Pesan Peringatan

Pesan Peringatan

Fungsi tanda - tanda tersebut untuk memperjelas maksud dari sebuah informasi  yang anda berikan dalam postingan blog, baik itu tips maupun tutorial.

Untuk pemasangan di blog :

Tambahkan kode css berikut ini sebelum kode ]]></b:skin>

.info, .success, .warning, .error {
background-repeat: no-repeat;
background-position: 10px center;
border: 1px solid;
margin: 10px 0;
padding: 14px 9px 14px 48px;
}
.info {
color: #0D81E9;
background-color: #C8E9F8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHEMTAIE3rC24YVkjktX1nYVsV9ha0YeFTpTBms_E6-mfv6vYC53Oyr45WKnuib2PSmmvCDti8UIgYAX_8AHgc6j6iXiwH-pkm0U9yivAU-OIcLjnTVYZdsBC_QA00P9MDO-2ouLWHFoQ/s1600/tbm_info.png');
}
.success {
color: #0D8F07;
background-color: #E5FAC3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU-wf3R41xAIyfNHoE4730Mn72Prxc-yp_6cuMOHQf3VrhkoelRZQEnX10n5nGDoOpR4X00ZcVaNe050_pCVgEwGsuoZ9hVZJ_-G046oJfEYWjHoyChMjIghrdbQqi_S5E3inWTxi-Res/s1600/tbm_success.png');
}
.warning {
color: #DD8500;
background-color: #EBDCA3;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2Uv61B9Miq89Zpd2K253XK9RN7Tf1i_rhBzquDn4ZsBcza3EqrtYUaVe4cNU-mBEhEXu76f4nGjOGYJ9K_Ypm9PpweL1Jjvj2BkOXJzsLLSz8nA4VefKsqAYkjIKhbS2OF-a8qJQuyAE/s1600/tbm_warning.png');
}
.error {
color: #DF000C;
background-color: #F5C8C8;
background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvEcIMm5SIqH5ELBDcWbfVrXfjrUiDczKCMgDm2F97KaIzwkqOfeqhX2Iw3gkfv3-0GEwBW0G9MCYVWx-Ke5UP2wz04gCi3aiGd1A1UqZBbnxckuR78hGoRUZz0Sk3q4U2J36Bx1XJvgM/s1600/tbm_error.png');
}

Kemudian untuk menampilkan pada postingan blog :

Masuk dalam Mode HTML, lalu masukkan kode dibawah ini sesuai dengan pesan yang ingin ditampilkan.

<div class="info">Pesan Informasi</div>
<div class="success">Pesan Sukses</div>
<div class="warning">Pesan Peringatan</div>
<div class="error">Pesan Error</div>

Anda hanya perlu mengganti tulisan ( Pesan Informasi, Pesan Sukses, Pesan Peringatan, Pesan Error ) dengan kalimat yang ingin anda sampaikan pada postingan blog.

Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
Enjoy Blogging