Kombinasi Menu Metro UI Dan Font Awesome

Kombinasi Menu Metro UI Dan Font Awesome - Menerapkan efek - efek unik untuk menu blog rasanya tidak akan habis untuk dibahas, seperti menu navigasi metro ui dan menu metro ui efek modal dialog. Ini sebagai pengembangan blog gaya metro style dan FontAwesome seperti artikel sebelumnya tentang FontAwesome Icon V3.2.1. Namun kali ini saya tidak menggunakan versi ini melainkan versi terbarunya versi 4.0.3 yang dikombinasikan dengan CSS3, agar penerapan template blog metro style lebih maksimal.

• DEMO

Untuk dapat menggunakannya silakan install font awesome versi 4.0.3 sebelum kode </head>

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

CSS

.wrap{width:95%;margin:0 auto;}
#menu {margin-bottom: 10px;}
#menu a { float: left;display: block;color: #fff;text-decoration: none;text-align:center;}
#menu a i {
    font-size:36px;
    display:block;
    text-align:center;
    padding-top:30px;
}
#menu .home,
#menu .random-post,
#menu .sitemap,
#menu .follow,
#menu .contact-me
{
    margin-right: 3px;
    height: 120px;
}

#menu a.home,
#menu a.random-post,
#menu a.sitemap,
#menu a.follow,
#menu a.contact-me
{
    margin-right: 3px;
    width: 11%;
   /* padding-top: 115px;*/
    padding-left: 20px;
    padding-right: 20px;
  /*  height: 35px;*/
}


#menu a.home {
    background: #27ae60;}
#menu a.random-post {
    background: #e67e22;}
#menu a.sitemap {
    background: #2980b9;}
#menu a.follow {
    background: #8e44ad;}
#menu .contact-me {
    background: #16a085;}

/* CSS3 Effects */
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
#menu  a:hover {
-webkit-transform: scale(0.85,0.85);
-moz-transform: scale(0.85,0.85);
-o-transform: scale(0.85,0.85);
-ms-transform: scale(0.85,0.85);
transform: scale(0.85,0.85);
}
#menu  a {
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
-ms-transition: all 0.4s linear;
transition: all 0.4s linear;
}
@media (max-width:768px){
    #menu a i{
        font-size:16px;
    }
    #menu .home,
    #menu .random-post,
    #menu .sitemap,
    #menu .follow,
    #menu .contact-me{
        height:73px;
    }
    #menu a.home,
    #menu a.random-post,
    #menu a.sitemap,
    #menu a.follow,
    #menu a.contact-me
    {width:22%;}
}

HTML

<div class="wrap">
      <div id="menu">
        <a class="home" href="#"><i class="fa fa-windows"></i>Home</a>
        <a class="random-post" href="#" ><i class="fa fa-random"></i>Random Post</a>
        <a class="sitemap" href="#"><i class="fa fa-sitemap"></i>Site Map</a>
        <a class="follow" href="#"><i class="fa fa-users"></i>Follow</a>
        <a class="contact-me" href="#"><i class="fa fa-envelope-o"></i>Contact Me</a>
        </div>
    </div>

Jika anda terlanjur menggunakan FontAwesome versi dibawah 4.0 anda bisa mengganti penulisan font pada HTML diatas, untuk format penulisannya seperti ini <i class="icon-windows"></i> dan seterusnya.

Demikian tips blog metro ui style kali ini, semoga bermanfaat dan memberikan inspirasi untuk terus mengembangkan blog dengan gaya terkini. Happy Blogging

Update Icon Font Awesome V. 3.2.1

Update Icon Font Awesome V. 3.2.1 - Untuk melengkapi artikel yang masih bernuansa blog metro ui style, kali ini saya memberikan contoh versi terbaru Icon fontAwesome versi 3.2.1. Untuk versi terbaru ini lebih lengkap dari versi sebelumnya  V.3.1.1, dengan icon - icon yang bisa kita terapkan untuk menggantikan gambar dengan icon unik ini. Dengan begitu kita sudah mendapatkan 1 point untuk optimasi SEO blog yaitu mengurangi http request untuk mempercepat loading blog.

Jika sebelumnya anda menggunakan versi :

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

Ganti dengan versi terbarunya dengan ini :

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

Untuk penerapannya di blog masih sama, dibawah ini contohnya :







Untuk penulisannya :

<i class="icon-windows icon-1x"></i>

<i class="icon-windows icon-2x"></i>

<i class="icon-windows icon-3x"></i>

<i class="icon-windows icon-4x"></i>

<i class="icon-windows icon-5x"></i>

Daftar list lengkapnya silakan anda kunjungi Font Awesome V.3.2

Demikian tentang icon font awesome semoga aktivitas blogging jadi lebih indah dan menyenangkan.
Happy Blogging

Efek Toggle Jquery UI Color Animasi

Efek Toggle Jquery UI  Color Animasi - Melanjutkan artikel menu metro ui efek modal dialog dan menu navigasi metro ui dengan gaya metro style, kali ini saya akan memberikan contoh penerapan Jquery UI untuk template blog metro style. Dengan demikian konsep blog akan jadi lebih komplit dengan gaya metro Ui yang berkembang saat ini.

• DEMO

CSS

    .toggler { width: 600px; height: 200px; position: relative; }
    #button { background:#2c3e50;color;#fff;padding: .5em 1em; text-decoration: none; }
    #effect { width: 300px; height: 160px; padding: 0.4em; position: relative;background: #fff; }
    #effect h3 { background:#2c3e50;color:#fff;margin: 0; padding: 0.4em; text-align: center; }

Java Script

  $(function() {
    var state = true;
    $( "#button" ).click(function() {
      if ( state ) {
        $( "#effect" ).animate({
          backgroundColor: "#27ae60",
          color: "#fff",
          width: 600
        }, 1000 );
      } else {
        $( "#effect" ).animate({
          backgroundColor: "#fff",
          color: "#000",
          width: 300
        }, 1000 );
      }
      state = !state;
    });
  });

HTML

<div class="toggler">
  <div id="effect" class="ui-widget-content ui-corner-all">
    <h3 class="ui-widget-header ui-corner-all">CONTOH ANIMASI</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim.
    </p>
  </div>
</div>

<a href="#" id="button" class="ui-state-default ui-corner-all">Klik INI</a>

Untuk bisa menggunakannya install / tambahkan kode dibawah ini sebelum </head>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

Saya memberikan contoh sederhana saja, untuk penerapannya silakan anda berkreasi sendiri agar tampilan lebih maksimal.

Demikian sedikit tips blog metro ui style yang saya berikan, semoga bermanfaat dan Enjoy Blogging

Inspect Element Untuk Edit HTML

Inspect Element Untuk Edit HTML - Mungkin bagi kalian sudah sering mendengar kata tersebut yaitu inspect element yang berada pada fungsi Right Click pada semua browser baik Google Chrome, IE. Firefox maupun Opera mini. Fungsinya dari Inspect Element ini adalah untuk melihat secara detail konsep dari sebuah website maupun blog, yang meliputi CSS dan HTML.

Nah udah tau kan fungsinya...!!!

Jika anda ingin edit template blog alangkah baiknya gunakan fitur ini agar lebih mudah melihat bagian mana yang akan kita edit nantinya. Cara penggunaannya pun cukup mudah dan simple hanya menyorotkan mouse pada bagian yang ingin kita edit kemudian klik kanan scroll kebawah dan klik Inspect element. Maka akan terbuka sekumpulan text HTML disebelah kiri dan Element Style ( CSS ) disebelah kanan sesuai dengan yang kita maksudkan dari sorotan mouse tadi. Untuk lebih jelasnya silakan lihat gambar dibawah ini :

Saya memberikan contoh melihat element dari diskripsi blog ini :

Artinya pada diskripsi tersebut dibentuk dari kode CSS sebelah kanan dan HTML sebelah kiri, jika anda ingin edit CSSnya cukup copy pada bagian CSS dan simpan di notepad dan ubahlah sesuai keinginan anda.
Cara seperti ini akan mempermudah proses edit HTML template pada blog maupun website.

Demikian sedikit tips blog tentang inspect Element, semoga bermanfaat

Menu Metro UI Efek Modal Dialog

Menu Metro UI Efek Modal Dialog - Setelah sebelumnya  widget navigasi metro ui  sebagai widget unik gaya metro style, kali ini saya akan mencoba lagi memberikan tips untuk kostumisasi pada menu diatas dengan sedikit efek Light box overlay menggunakan Modal dialog. Fungsinya sebagai pembungkus widget ataupun text dengan efek modal dialog yang berkembang saat ini seperti template blog metro windows ( blog gaya metro ui style ).

• DEMO

Untuk pemasanganya silakan perhatikan kode dibawah ini :

Masukkan sebelum </head>

<link href='https://sites.google.com/site/samsurysites/nav-metro-ui-1/Nav Menu.css' rel='stylesheet' type='text/css'/>

<link href='https://sites.google.com/site/samsurysites/nav-metro-ui-1/Nav Metro Modal Dialog.css' rel='stylesheet' type='text/css'/>

<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog.js" type="text/javascript"/>

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

Masukkan sebelum </body>

<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog Body.js" type="text/javascript"/>

Untuk pemasangan di blog silahkan Add Gadget >> HTML/Javascript >> dan Copas Kode dibawah Ini :

<div class="samsury-metronav">
<div class="tile-bt-large solid-coral shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-13" id="modal-13">
<div class="md-content">
<h3>
MENU <a class="md-close" href="">×</a></h3>
<div>
Silahkan Ganti Dengan Menu Di Blog Anda <br />
( Tapi Ingat Jangan Taruh Menu Makanan Ya )</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-13"><i class="icon-th-large icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
</div>
<div class="tile-bt solid-darkblue shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-8" id="modal-8">
<div class="md-content">
<h3>
<i class="icon-facebook"></i>
FACEBOOK <a class="md-close" href="">×</a></h3>
<div>
Jika perlu ganti tulisan ini dengan widget Fanpage Facebook Anda ( itupun kalau anda punya )</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-8"><i class="icon-facebook icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-red shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-1" id="modal-1">
<div class="md-content">
<h3>
<i class="icon-envelope"></i> CONTACT ME <a class="md-close" href="">×</a></h3>
<div>
Isilah dengan widget contact me
</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-1"><i class="icon-envelope icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt-large solid-purple shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav">
<div class="md-modal md-effect-4" id="modal-4">
<div class="md-content">
<h3>
<i class="icon-group"></i> FOLLOW <a class="md-close" href="">×</a></h3>
<div>
Anda bisa mengganti tulisan ini dengan Follower Blog Anda....!!!!
        </div>
</div>
</div>
<button class="md-trigger" data-modal="modal-4"><i class="icon-group icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-green shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-15" id="modal-15">
<div class="md-content">
<h3>
<i class="icon-google-plus"></i> CIRCLE <a class="md-close" href="">×</a></h3>
<div>
Google menyediakan widget ini, silakan pasang di sini...!!!</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-15"><i class="icon-google-plus icon-3x"></i></button>

<br />
<div class="md-overlay">
</div>
</div>
<div class="tile-bt solid-yellow shadow-black margin-5 floatleft SamsuryMetroMenu" data-navid="samsury-nav2">
<div class="md-modal md-effect-11" id="modal-11">
<div class="md-content">
<h3>
<i class="icon-user"></i> ABOUT ME<a class="md-close" href="">×</a></h3>
<div>
Aku Hanyalah seorang Blogger yang ingin mencoba mencoba dan terus mencoba dengan hal2 yang baru</div>
</div>
</div>
<button class="md-trigger" data-modal="modal-11"><i class="icon-user icon-3x"></i></button>
<br />
<div class="md-overlay">
</div>
</div>

Anda cukup mengganti tulisan merah dengan text/maupun widget yang ingin anda munculkan

Demikian tips blog metro ui style kali ini semoga bermanfaat

Popular Post Efek Snippet Sliding

Popular Post Efek Snippet Sliding - Seperti halnya widget metro drop down sliding untuk tips blog gaya metro ui style kali ini saya akan memberikan sedikit tips sederhana memodifikasi widget popular post. Mungkin bagi kalian semua sudah tidak asing lagi dengan widget yang satu ini, setiap blog pasti mempunyai widget popular post. Widget unik ini berfungsi untuk menampilkan artikel yang sering di buka atau dibaca oleh pengunjung blog, lebih tepatnya adalah artikel populer blog. Blogger menyediakan widget ini secara default, namun untuk tampilan disetiap blog bisa saja berbeda - beda. Sebenarnya untuk costumisasi widget ini kita hanya memerlukan kode CSS untuk merubah bentuk, warna dan efeknya.

Dibawah ini adalah contoh sederhana untuk kode CSSnya :

.popularposts .widget-content ul li{padding:0;position:relative}
.item-snippet {
font-size: 90%;
line-height: 1.2em;
position: absolute;
width: 200px;
background-color: #27ae60;color:#fff;
padding: 7px;
border: 1px solid #27ae60;
z-index: 2;
left: 300px;
top: 50%;
height: auto!important;
visibility: hidden;
opacity: 0;
transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;
-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}
.popularposts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}
.popularposts img{width:50px;height:50px}
.popularposts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

Kita hanya perlu menambahkan kode CSS ini  sebelum kode ]]><b:skin>

Untuk demonya bisa anda lihat pada Responsive Simple Metro Mini template.

Widget unik ini akan lebih pas dan cocok dengan template blog metro style.
Demikian sedikit tips blog yang saya berikan semoga bermanfaat.
Salam Blogger

Responsive Green Metro Mini Template

Responsive Green Metro Mini Template - Setelah sebelumnya memberikan contoh template :

Responsive Metro Mini Template
Responsive Flat Metro Mini template
Responsive Simple Metro Mini template

Kali ini saya akan mencoba share lagi tentang  template gaya metro style yang tentunya masih sebagai kelanjutan dari template2 sebelumnya. Tidak banyak perubahan pada template kali ini dan hampir sama cuma warna hijau yang dominan.

FITUR :

1. Responsive Design
2. Breadcrumb SEO Friendly
3. Loading Cepat di GTMetrix 91% 80%
4. Related Post
5. Sharing Button

• PREVIEW

• DOWNLOAD

Cara Costum Menu :

Anda cukup mencari kode dibawah ini dan ganti tanda # dengan URL dengan yang anda inginkan

<div id='top-nav'>
<div class='section' id='navtop'>
<ul id='menu-main1'>
<li class='selected'><a href='#'><i class='icon-home'/> Home</a></li>
<li><a href='#'><i class='icon-map-marker'/> Site Map</a></li>
<li><a href='#'><i class='icon-unlock-alt'/> Privacy</a></li>
<li><a href='#'><i class='icon-envelope'/> Contact</a></li>
</ul>
</div>
</div>

<div class='main-menu'>
<ul class='menu' id='menu-main'>
<li> <a class='home' href='#'>Home</a></li>
<li> <a href='#'>MENU 1</a>
<ul class='sub-menu'>
<li><a href='#'>MENU 1.1</a></li>
<li><a href='#'>MENU 1.2</a></li>
<li><a href='#'>MENU 1.3</a></li>
</ul>
</li>
<li> <a href='#'>MENU 2</a>
<ul class='sub-menu'>
<li><a href='#'>MENU 2.1</a></li>
<li><a href='#'>MENU 2.2</a></li>
<li><a href='#'>MENU 2.3</a></li>
</ul>
</li>
<li><a href='#'>MENU 3</a>
<ul class='sub-menu'>
<li><a href='#'>MENU 3.1</a></li>
<li><a href='#'>MENU 3.2</a></li>
<li><a href='#'>MENU 3.3</a></li>
</ul>
</li>
</ul>
</div>

Untuk pengembangan template silakan edit sendiri sesuai selera anda, baik widget maupun menu agar tampilan lebih maksimal.
Demikian sedikit ulasan tentang Responsive Green Metro Mini Template semoga bermanfaat.
Happy Blogging