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

Like THIS :

Share this article to: Facebook Twitter Google+ Linkedin Technorati Digg

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku