Cara Membuat Menu Floating Keren Di Samping Blog

15:10:00
Cara Membuat Menu Floating Keren Di Samping Blog


Selamat datang agan atau aganwati kali ini bertemu dengan saya di pertemuan kali ini, kali ini saya akan memberikan sedikit tips tentang blogging yaitu tutorial membuat menu navigasi floating keren di samping kiri blog. Menu navigasi floating merupakan menu pada blog yang dimodifikasi dengan muncul ketika diarahkan pointer pada menu tersebut sehingga akan menampilkan menu yang sudah anda atur sedemikian rupa.


Ditambah juga dengan efek floating yang memungkinkan menu tersebut dapat tampil dengan efek float atau mengambang dalam pengertian bahasa. Sehingga anda juga dapat memanfaatkan daerah kosong pada template yang anda gunakan apabila pada bagian kiri template anda terdapat bagian yang kosong dapat anda manfaatkan untuk dipasang menu berikut.


Berikut tutorial untuk membuat menu floating keren di samping kiri blog :

Demo

Cara Membuat Menu Floating Keren Di Samping Kiri Blog



Langkah

1. Login ke akun blog anda masing-masing,

2. Pada dashboard pilih menu template,

3. Temukan kode ]]></b:skin> , dengan cara
Ctrl
+
F
,

4. Setelah itu copy script di bawah ini, lalu paste tepat di atas kode ]]></b:skin>,

 /* MENU NAVIGASI (FLOATING) Blog RenaldyWays */
.menu {text-shadow:none;position: fixed;height: 100%;width: 83px;background: #2c3e50;transition:width 1s;overflow: hidden;font-family: 'Offside', sans-serif;z-index: 99;left:0;top:0}
.menu:hover {width: 270px;}
.menuItem span {position: absolute;left:80px;top:40px;transition:color 1s;color:rgba(255,255,255,0);}
.menu:hover .menuItem  span {color:rgba(255,255,255,1);}
.menuItem {color:#fff;position: relative;padding: 40px;transition:border .5s, background .2s;}
.menuItem a {color:#fff;}
.menuItem:hover {background: #34495e;cursor: pointer;}
.satu {border-left:5px solid #16a085;}
.satu:hover{border-left:20px solid #16a085;}
.dua {border-left:5px solid #2980b9;}
.dua:hover {border-left:20px solid #2980b9;}
.tiga {border-left:5px solid #8e44ad;}
.tiga:hover {border-left:20px solid #8e44ad;}
.empat {border-left:5px solid #e67e22;}
.empat:hover {border-left:20px solid #e67e22;}
.lima {border-left:5px solid #e74c3c;}
.lima:hover {border-left:20px solid #e74c3c;}
.enam {border-left:5px solid #16a085;}
.enam:hover{border-left:20px solid #16a085;} 


5. Selanjutnya cari kode </body> dengan cara
Ctrl
+
F
, lalu copy script di bawah ini, lalu paste tepat di atas kode </body>,

 <div class='menu'>
<div class='menuItem satu'><i class='fa fa-home icon-large'/><span><a href='http://renaldyways.blogspot.com/'>Home</a></span></div>
<div class='menuItem dua'><i class='fa fa-comments icon-large'/><span><a href='http://renaldyways.blogspot.com/p/var-servicedomainwww.html'>Contact Us</a></span></div>
<div class='menuItem tiga'><i class='fa fa-bug icon-large'/><span><a href='http://renaldyways.blogspot.com/error404'>Bugs</a></span></div>
<div class='menuItem empat'><i class='fa fa-life-ring icon-large'/><span><a href='http://renaldyways.blogspot.com/p/blog-page.html'>Privacy Policy</a></span></div>
<div class='menuItem lima'><i class='fa fa-exchange icon-large'/><span><a href='http://renaldyways.blogspot.com/p/blog-page_6.html'>Link Exchange</a></span></div>
<div class='menuItem enam'><i class='fa fa-bullhorn icon-large'/><span><a href='http://renaldyways.blogspot.com/p/forum-on-blog.html'>Forum On Blog</a></span></div>
</div> 


6. Setelah itu cari kode </head> dengan cara
Ctrl
+
F
,

7. Lalu copy script di bawah ini, setelah itu paste tepat di atas kode </head>,

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


Jika sudah terdapat script tersebut dalam blog Anda, maka tidak perlu ditambahkan!


8. Simpan template.


Demikian artikel tentang cara membuat menu floating keren di samping kiri blog semoga artikel ini membantu anda, jangan lupa like, share dan google+nya, serta tinggalkan komentar anda, terima kasih.

Share this

I'm CEO & Founder in http://caritema.com & http://renaldyways.blogspot.com/


Artikel Menarik Lainnya

Artikel Selanjutnya
Next Post
Artikel Sebelumnya
Previous Post
Cara style text di komentar Disqus dan Blogger:
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
  • Untuk menggunakan emoji di bawah ini cukup copy kode tersebut dan beri jarak 1 spasi untuk menampilkan emoji pada kolom komentar Blogger.
Parser Kode
FAQ
Emotikon

Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger Emoticon Kaskus di Blogger
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

24 Comments

Tsani Aziz 29 October 2014 at 21:30

gan apa nama tombol yang ada diatas blog agan (info) tersebut ?

Renaldy Ramadani 29 October 2014 at 21:32

Message info :D minta dibuatin kaga? kalo pengen langsung ke sini gan --->http://renaldyways.blogspot.com/p/request-artikel.html

Muhammad Royan Firdaus 28 November 2014 at 18:03

gan font awesomenya kok gak bekerja?

Renaldy Ramadani 28 November 2014 at 20:36

script jquerynya jangan double,,, sama versi jquerynya diperbaharui :D :fb:like

Anonymous 7 January 2015 at 20:17

Template blog ini apa ya

Renaldy Ramadani 7 January 2015 at 20:18

subculture gan coba agan cek di http://renaldyways.blogspot.com/2014/10/download-template-blog-premium.html

ardana arya 22 February 2015 at 20:48

Edaaaan Keren banget gan template nya .. bagi dooong .. :ilovekaskus

Renaldy Ramadani 25 February 2015 at 05:15

Thanks gan :3 maaf templatenya private :genit

Endra Deev 1 March 2015 at 12:28
This comment has been removed by the author.
Endra Deev 1 March 2015 at 12:29

Gan,gimana buat tampilannya supaya rapi seperti di blog agan ini.

Endra Deev 1 March 2015 at 12:44

GAN, cara mengatur jaraknya supaya rapi seperti diblog ini gimana.

Renaldy Ramadani 2 March 2015 at 11:14

ngatur jarak apa gan? :bingung

Renaldy Ramadani 2 March 2015 at 11:16

tampilan apa gan ? :bingung

Khaerul usman 2 March 2015 at 18:14

keren gan...

Renaldy Ramadani 3 March 2015 at 14:54

ok gan :2thumbup

Khaerul usman 15 April 2015 at 02:53

gan cara agar menunya tetap gimna gan, kya blog agan gitu.. ? yg di sebelah kiri

Renaldy Ramadani 15 April 2015 at 18:07

http://renaldyways.blogspot.com/2015/01/cara-membuat-sidebar-menu-vertikal.html ini gan monggo :3 :2thumbup

Praditya Putra 10 May 2015 at 12:25

Di blog saya koq gak ada kode gan?

Praditya Putra 10 May 2015 at 12:27

Di blog saya koq gak ada kode gan?

Praditya Putra 10 May 2015 at 12:27

Di blog saya koq gak ada kode gan?

Praditya Putra 10 May 2015 at 12:27

Di blog saya koq gak ada kode gan?

Renaldy Ramadani 10 May 2015 at 14:25

kode yang mana gan? :bingung

Illıllı Farhan Illıllı 17 June 2015 at 05:30

:berduka Tutorial Nya Kgk Bisa Karena Blogger Lagi DOWN :ngakak

Renaldy Ramadani 17 June 2015 at 11:07

apa iya gan :matabelo