Cara Memasang Tombol Share Button Keren

Jadilah Umat Terbaik Dengan Saling Menasehati
Google+

Widget Metro UI  

Widget Metro UI untuk Blog


vivpos - Halo sahabat vivpos. Pada kesempatan yang baik ini, saya akan memberikan lagi konten yang tak kalah menariknya buat para blogger yang suka merias blog. Widget ini dinamakan Metro UI yang memiliki desain CSS yang super keren. Nah yang sudah gak sabar kali ini saya akan langsung mengulas tentang bagaimana cara pemasangannya. Yuk disimak ulasan dibawah ini.

1. Pertama pergi ke menu Template - Edit Html
2. Masukkan kode dibawah ini 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'/>

3. Cari kode </body> biasanya ini berada paling bawah, masukkan kode dibawah ini diatas kode tersebut

<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog Body.js" type="text/javascript"/>
3. Pergi ke menu Tata Letak - Tambah Gadet - Html/JavaScript
4. Masukkan kode dibawah ini
<script src="https://sites.google.com/site/samsurysites/nav-metro-ui-1/Modal Dialog Body.js" type="text/javascript"/>
<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</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>

5. Save/Simpan widget kamu.

Sangat mudah bukan? sekian artikel tentang Cara Memasang Tombol Share Button Keren, semoga menjadi ulasan dan referensi yang baik. Selamat mencoba. Sampai jumpa di konten selanjutnya.