Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

» » » widget flying menu navigasi animasi

Monday, August 26, 2013

widget flying menu navigasi animasi

Flaying navigasi animasi adalah suatu menu halaman blog yang memakai sistem animasi berjalan atau bergerak ke kanan, Semua menu diapresiasikan dengan bentuk gambar dan bergerak ke sebelah kiri dengan secara otomatis. Wdget Flaying Navigasi Animasi ini menganut sistem penulisan kode tag dan Script yang SEO Friendly dan Valid HTML 5 serta memiliki kode tag html dan script yang lumayan ringan, soal masalah responsive widget ini masih tergolong widget resolusi responsive jadi tidak mempengaruhi template responsive blog kesayangan anda. Postingan kali ini berawal dari ide seorang sahabat saya dari australia Jhon Cristian yang telah meminta tolong untuk dibuatkan Flaying navigasi yang berbentuk animasi atau bergerak agar lebih unik dan kren kata beliau, Akhirnya saya juga membuat postingan ini semoga sahabat saya yang disana senang atas hasil kerja saya. Oke untuk dapat mengetahui cara pemasangannya pada halaman blog anda, silahkan simak penjelasan dibawah ini dan silahkan lihat demonya pada link dibawah untuk melihat keunikan menu ini, saatnya kita menuju TKP.
Untuk melihat demonya silahkan KLIK DISINI lihat menu dibagian atas halaman.

Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda

/*****************************************
Name : Flaying Navigasi ANIMATE
By : Rivai Silaban | Blog Design
Update : 26/08/2013
******************************************/
.bdrs-container{width:100%;position:fixed;
top:0;
left:0;
z-index:9999;
border-bottom: 5px solid #D5DF0B;
box-shadow:0 2px 4px #333;
}
#BDRS-Fmenu img {
width:150px;
height: 50px;
}
#BDRS-Fmenu img:hover {
width:150px;
opacity:.5;
}
.scroll-img {
width: 100%;
height: 70px;
overflow: hidden;
font-size: 0;
background-color: #FFFFFF;
float: right;
}
.scroll-img ul {
width: 700px;
height: 600px;
margin: 0;
margin-left:30px;
}
.scroll-img ul li {
display: inline-block;
margin: 10px 30px 10px 35px;
}
#BDRS-Fmenu.scroll-img ul {
width: 1500px;
}
#bdrs-btn {
width: 100%;
position:absolute;
top:5;
right:0;
z-index:9999;
float: right;
}
#bdrs-btn .iconkanan {
color: #333333;
background-color: #0099FF;
padding:5px 5px 5px 20px;
border-radius:0 0 0 10px
}
#bdrs-btn .iconL {
float: left;
color: #CCCCCC;
padding:3px 15px;
border-radius:5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-shadow: 1px 1px 1px #CC0000;
background-color: #000000;
font-size: 12px;
}
#bdrs-btn .iconR {
float: right;
color: #CCCCCC;
padding:3px 15px;
border-radius:5px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: bold;
text-shadow: 1px 1px 1px #CC0000;
background-color: #000000;
font-size: 12px;
}/*** Blog Design CSS and ***/


Install Script


  1. Setelah anda selesai menyematkan CSSnya saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
  2. Pada Edit HTML template anda silahkan cari kode </head>
  3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>


    4. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://googledrive.com/host/0Bw9mMVirmSW0VGdsd01BdV9hMnM" type="text/javascript"></script>



  4. Script kode warna biru diatas adalah script Jquery. Bila template anda sudah memiliki script Jquery diatas versi Jquery diatas ( 1.10.2 ) atau sama berarti anda tidak perlu menyertakan script yang berwarna biru diatas. Bila script Jquery anda dibawah versi script Jquery diatas silahkan ganti dengan script Jquery berwarna biru diatas.

Install tag html


  • Setelah kode CSSnya sudah terpasang kini saatnya kita akan memasukkan kode tag htmlnya.
  • Copy code dibawah ini lalu pastekan dibawah kode " <body> "
    Pada halaman blog pasti mempunyai "<body>" jadi anda pastekan kode dibawah ini tepat dibawah kode<body> blog anda.
  • Save halaman anda dan lihat hasilnya, semoga bermanfaat.

<!-- Rivai Silaban | BLOG DESIGN Flaying navigasi start -->
<div class="bdrs-container">
<div class="body-content">
<div id="BDRS-Fmenu" class="scroll-img"><ul>
<li><a href="LINK ANDA " target="_blank" title="about"><img alt="about" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh146RvX1KsfVqkSAeP_L2TjxY2jB6KteRNvQNkdG1SLTYeRQz3FgBJtpel9eiHOmZxYGpEfuGlAO7zklG6AyvsK-2k3WqJnaJjAqAYHJ1ExfQobYDJZCZaSwJJtIlomINBTpoC5NxvmTk/s1600/about.png" title="about"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="sitemap"><img alt="sitemap" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_as0RyQVnZIBfavZr0u7dwYvpHQ_DBhHc08pM0wQCtTvc5Mopn_h_BxUNKg993FIuVUrFh6Yc9IMr5s5mA_IsPBL5KSp7ED6f98aro22z4xmdVBoXS06p43SWmHoeLPkx_itpXtdWHPk/s1600/sitemap.png" title="sitemap"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="tutorial"><img alt="tutorial" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOvldSQzhbEu43_zZwQ1ZIsT0wpV28jqUTGBuNj_-fLeH6JsKH_MNDM-6Y_Mvy6HJhjv_Tk_XeRdI-n0CC987slFPy2wKikRyNHVbv77__3mTXMpe4hvfdMyVWnrFmUJZJDgfElAvu8BM/s1600/blog-tutorial.png" title="tutorial"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="disclaimer"><img alt="disclaimer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRyMVGBC6bRdXY5sNtxUb3FXK7r-rjLrgezf6v7WjR3amXnc2kw2oIhKhJr2_8osEaGwxA6T6QRE4-zMACktsw-EBcPTctPpIkOfsPwZDukS4QMJQ8r8akM8Q932f9F3AM0Q2Piel8wPM/s1600/disclaimer.png" title="disclaimer"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="privacy policy"><img alt="privacy policy" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWuTxHIJiLnjV3TIUI4ZnK4OG55uLWsL8iBLeAoMbkaSIX2yd15p-tp8cPUvOEUz6AvzOL6BTwTZupdcWI9pce27SeDI8L2ttkJPs64-uwVm1pFiDzFqfMurLE6lS1LAHkusoddbAyYQM/s1600/privacy-policy.png" title="privacy policy"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="contact"><img alt="contact" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBIh9Ctp4wEJuc9TfbdOP1SWpQXpwckzg-gg5EFjAzTIhhxpP_KEy0LeaIvKGozAemyVRLZ2tgd6GuuoRHgrp8Wt4Tx7F6f_O-asZlyoTAdGg1Eg9YtvGAt9EVrXOG95hEugje9TkHQs8/s1600/CONTACT.png" title="contact"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="gplus"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUiBeo1BizZFqKpVtVPjfyGKmplbGyggOSD5FwqBKoyMCvPPHSE1UjxxGAgo2CiL3xjud_b6IFx0KxLTV70t_rKpF9ui-w9ERqNKWY2fJFBnVjIzbUoOGVcr6VBuI6ygM67moVV95KUBU/s1600/gplus.png" title="gplus"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgwKfPQZtiZKQPRfoBwDnDHSMLKjjDh_hgFRokgthgYFYbjaRXw1sueoKgLvtAnNYK8oovTa16-goSIfKJl_7wd5yuwM9wS2Ag-5Q2Lac5t-l8092atSaK4TARrDk2fNU1qFa6Rf4aMzo/s1600/facebook.png" title="facebook"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI_Tp_4pBFydEisPz9TfohoieZiWJqro5KwU5T01RbTPpXbCkLQlcutC-KGVxY_uZ-o5AzXKDmU-RS-__pNpbzwBlzn2yIj2oQgeax4yFZSwGLPtvoCJ-BPEBzIJu0INvlVd3fUNX_kY8/s1600/twitter.png" title="twitter"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="rss"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNMBHl9L_7b_XnKIgbznF8onSXb8-CUXaZMf6XRyH0OHak5bCqMGnNvQBhU-Jfm-KL6BNFW-bMd64N89icdatEgpJe-JaPoKu_r5-Ws_URJG9eA5W4Yvdf-2o6w4OKyyJ-WZvXelhTTuU/s1600/rss.png" title="rss"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="yu tube"><img alt="you tube" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4edYIqm3XRl8LM4OKz_oTlJe_fRLdEuUDybFZHlKtfSzb0uBTjHVGlwmne4xScaafBOMbC9N0u-EpEvNg17LGzflD8H0o_5hgKVAJvAjTGCZXRsIgYRJmOr4MKqbQ_3A8qOE2qP6zws0/s1600/you-tube.png"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="join Us"><img alt="join us" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhctx6fRw7lWpYLdlL-wIAgqqMEUtuSTx5jd4APpKEwUFpsBzUSnN50f6jsuWD3TxYIJPvPE7C9Q9C-yUPj-U7dmw3yMvmMe58KaVe12qGWdQ2VdKCU8fs21FfB0Cq_qQsj9pW0Xx7ECzs/s1600/joinus.png" title="join Us"/></a></li>
<li><a href="LINK ANDA" target="_blank" title="tukar link"><img alt="tukar link" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2qUpxgjtMigUaDZaCN2Wijn2GIH8CsPL8zym9sTQCEW6PChHaneXjuqdxRjTgjnjrXHQ4P5IuEE4QI8ejywUSWd-F7AV24mVlP1DKvOCBomZsfjCRsUf1J9c67U8g1UINWVdlHkeh1L4/s1600/exchange.png" title="tukar link"/></a></li>
</ul></div>
<div id="bdrs-btn" class="text-center">
<button class="iconL" id="BDRS-Fmenu-backward"> &lt;&lt; </button>
<button class="iconR" id="BDRS-Fmenu-forward"> &gt;&gt; </button>
</div></div></div>
<script>
$(function () {
$('#BDRS-Fmenu').scrollbox({
direction: 'h',
distance: 134
});
$('#BDRS-Fmenu-backward').click(function () {
$('#BDRS-Fmenu').trigger('backward');
});
$('#BDRS-Fmenu-forward').click(function () {
$('#BDRS-Fmenu').trigger('forward');
});
});
</script>
<br/>
<br/>
<!-- Rivai Silaban | BLOG DESIGN Flaying navigasi End -->

Keterangan Code
  • Tulisan kode warna MERAH ganti dengan link menu anda.
    Untuk title dan menu harus sama penulisannya biar lebih SEO Friendly lihat tulisan warna BIRU .
  • Tulisan warna HIJAU adalah link gambar menu.
  • Bila pada tampilan menu tidak sempurna atau masih terlalu dekat bahkan menutupi title atau judul halaman silahkan tambahkan kode <br/> dibawah kode warna biru seperti kode HTML diatas
  • Silahkan edit CSSnya sesuai dengan tampilan halaman blog anda.

Kesimpulan

Widget Flaying navigasi animasi ini termasuk menu yang unik dan masih langka untuk anda lihat dipasang di halaman blog. Semua script dan penulisan kode HTML serta CSSnya sudah diuji kelayakannya begitu juga dengan lisesinya memakai DMCA Protected dan Commont 3.0

Buat para teman teman bloger yang mengalami masalah dalam memasang widget flaying navigasi animasi ini, silahkan hubungi saya atau share bersama saya melalui form komentar dibawah.

Widget flaying navigasi animasi
Minggu, 25 Agustus 2013
By : Admin Blog Design | Rivai Silaban

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Unknown Update pada : 11:24 PM

4 comments :

  1. UnknownAugust 27, 2013 at 12:57 AM

    Salam Bang Rivai yang baik Hati..
    di kunjungan saya yang ke 2 menjumpai lagi
    Bang Rivai,..Artikel nya keren nh Bang Idzin simak yah..
    Salam sukses terus Bang,,.?

    OOT : Idzin saya mau pakai template POLOS Bang Rivai yah..?
    Pertanya,an : Bang gimana cara nya profil blog saya yang sudah pakai
    Google +, dan link nya bisa dengan link blog saya, seperti punya Bang Rivai..?
    Kalau gak keberatan, mohon di Jawab, atau reques artikel tentang link profil blogger
    Google + dengan link blog sendiri. terima kasih Bang mohon Bimbingan,
    http://karristaent.blogspot.com

    ReplyDelete
    Replies
    1. UnknownAugust 27, 2013 at 1:08 AM

      link Gplus seperti link blogspot maksudnya kayak link saat komentar atau gimana sob, saya kurang begitu memahami pertanyaannya sob tolong lebih dijelaskan lagi.

      Delete
    2. UnknownSeptember 1, 2013 at 12:08 AM

      Maksud Pertanya,an saya Bang?
      Bagaiman cara nya agar setiap saya komentar di blog
      Teman..? Link URL Profil saya selalu pakai Link Blog saya.

      Padahal saya sudah pakai script open ID ngambil dari artikel
      Bang Rivai tempo hari. tapi yang saya heran Bang..?
      Di setiap komentar saya. kadang2 muncul URL link blog saya
      di form komentar, tapi kadang2 Link URL Profil Google Plus

      yang saya Tanyakan kenapa bisa begitu..?
      Dan ada solusi nya gak Bang..? biar komentar saya pada blog
      Teman, selalu memakai URL Link Blogger saya sendiri..?
      Mohon di jawab yah Bang? terima kasih sebelum nya.

      Delete
    3. UnknownSeptember 1, 2013 at 12:34 AM

      oh solusinya hanya satu, blog kita tidak dipadukan ke Google plus dan profilnya tidak gplus tapi blogspot. memang terkadang server masih blom stabil soal Open id, semenjak adanya sistem profil Gplus. Untuk solusi saya rasa hanya itu saja bang, kembali memakai profil blogspot bukan gplus, tapi kita harus memiliki resiko, bahwa pemetaan sistem autor dan pengarang lebih sempurnah memakai gplus sebab profil blog masih belum mempunyai kemampuan sebagai author sesungguhnya. Sebab kita memakai sub domain.

      saran saya bang kalo soal itu tidak usah dipikirin bang, yah pake saja mana yang bisa baik itu Open Id atau akun gplus. Just happy fan

      Delete

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog

Find us on Google+ | Powered Blogspot

7 Maret © 2013 Rivai Silaban | BLOG DESIGN