Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger - Tempat Blogging

Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger

Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger - Dalam tutorial kali ini saya akan menjelaskan bagaimana menambahkan Menu Efek Bouncing menggunakan jQuery. menu ini memiliki efek Hover yang bagus. Setiap menu Warnanya Berbeda beda. Saya Menggunakan HTML dan jQuery untuk membuat menu ini, menu ini mudah untuk di tambahkan ke blogger anda, untuk melihat Menu Lainya klik disini.



1. Buka Akun "Blogger" anda.
2. Sekarang Pilih "Template".
3. Sekarang Anda dapat melihat Langsung pada blog, klik "EDIT HTML" Button.
4. Sekarang klik tombol Lanjutkan.
5. Cari tag ini dengan menggunakan Ctrl + F </ head>.
6. Paste kode di bawah Sebelum </ head> tag.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js?ver=3.2.1' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='https://mycodewebsite.googlecode.com/files/animated-menu.js' type='text/javascript'/>

7. Pergi ke blogger dan klik Layout
8. Klik Tambah Gadget dan pilih "HTML / Javascript"
9. Paste kode di bawah ini. 

 color:#FFFFFF;
font-size:15px;
 text-decoration:none;
}
p{
 padding:0px 5px;
}
 .subtext{
  padding-top:15px;
 }
/*Menu Color Classes*/
.green{background:#6AA63B url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ0SxiHlElYDUuGqtzLr6DzQ9KuCVLL4NzEZOom8uO7UhwBEkeT9aCTXSMyQutOktQEeMSS0fcvhCswzjnz0T9WkPJKrBHSTU2XXiwudA65HAtfn5_U54hIHEb0BsezJvtKEi4noBoF9k/s1600/btrix_green-item-bg.jpg') top left no-repeat;}
.yellow{background:#FBC700 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjVMk7vFraYJ15GFQeE7hAH35IYs7nhnhCThCqggoGbaN_TXViEt67PKlZP10iWoK1N30QcDLxcBCwU2-WYSi5BcJN1CpIUfypMk-_Dod-288UhbhlTRMt2aaOxe2cMhr40wMaOYAOsm8/s1600/btrix_purple-item-bg.jpg') top left no-repeat;}
.red{background:#D52100 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLF_vIoYp7PELNVKtip6YXK6MZnQpjTjLnLHM7JBABNOxbDQQU4E7tABDxRlJXmeC1i9CH4G5jRXVVutih8ONDokWymdg5JeN6ac9V3B6awHaGtWXe4GSZLQSSFR5ZWwtzyT1cWjOQ5yk/s1600/btrix_red-item-bg.jpg') top left no-repeat;}
.purple{background:#5122B4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCNbLNAqV-C__4oxh1rs7ynZaMukhwT0r6rSRJsth0xDoDaZaDWbdZR7_NDXT9pNNhV_rrU2Y6WLTMySZe6tXKhpoMXHmqGmg80s8teGZ_OyD1KpYqoAkvIJqdw1EQyjzkXSiIv9Q-Uo/s1600/btrix_blue-item-bg.jpg') top left no-repeat;}
.blue{background:#0292C0 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixg6SaglKQY4QwtDjOA5SxVbQV6FhF1cMcQweg-sHy84oTadnw0v7Hg8xI2G3DgrZBLMetcDdbCLbxmpb3sVcGGEZYloWzyeGvGHs8cKYI_0xF7luLkF2F-hj_eVwENYo5XgjIAjOZKdc/s1600/btrix_yellow-item-bg.jpg') top left no-repeat;}
</style>
<ul>
  <li style="overflow: hidden; height: 50px; display: block;" class="green">
   <p><a href="#">Home</a></p>
   <p class="subtext">The front page</p>
  </li>
  <li style="overflow: hidden; height: 48px; display: block;" class="yellow">
   <p><a href="#">About</a></p>
   <p class="subtext">More info</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="red">
   <p><a href="#">Contact</a></p>
   <p class="subtext">Get in touch</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="blue">
   <p><a href="#">Submit</a></p>
   <p class="subtext">Send us your stuff!</p>
  </li>
  <li style="overflow: hidden; height: 50px; display: block;" class="purple">
   <p><a href="#">Terms</a></p>
   <p class="subtext">Legal things</p>
  </li>
 </ul>
 <script type="text/javascript">
 var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
 document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
 </script>
 <script type="text/javascript">
 try {
 var pageTracker = _gat._getTracker("UA-6444047-1");
 pageTracker._trackPageview();
 } catch(err) {}</script>

Informations :
Ganti tanda # Link kamu.

10. Sekarang menyimpan HTML / Javascript '.

Sekian dulu tentang Artikel Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger semoga artikel di atas dapat membantu anda, dan bermanfaat bagi anda.


Show comments
Hide comments

4 Responses to "Memasang Menu Bar jQuery Efek Bouncing Keren untuk Blogger"

  1. thanks gan dah ngasih tau infonya.. tapi cuma 1 yg buat ane kesel, mw copast aja repot amat..

    ReplyDelete

Blog ini merupakan Blog Dofollow, karena beberapa alasan tertentu, sobat bisa mencari backlink di blog ini dengan syarat :
1. Tidak mengandung SARA
2. Komentar SPAM dan JUNK akan dihapus
3. Tidak diperbolehkan menyertakan link aktif
4. Berkomentar dengan format (Name/URL)

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Klik subscribe by email agar Anda segera tahu balasan komentar Anda

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

close