Showing posts with label Blog Design. Show all posts
Showing posts with label Blog Design. Show all posts

Cara Membuat Menu Float Fixed di Bagian Footer Dengan CSS3 2012

// 69 comments

Notifikasi Penting
Maaf, UnlimitSoft mengalami sedikit masalah internal, dan tidak terupdate. Dipindahkan sementara ke www.Newsinfopedia.org



Menu Footer Fixed

Siang ini menjelang sore, kita akan belajar membuat menu Footer Fixed dengan meggunakan CSS3. Dan menurut saya ini adalah menu yang ringan-ringan saja, juga bagus dan elegan dengan blog. Kenapa menggunakan CSS3? ini agar tampilan menu lebih bergaya dinamis, dan lebih terlihat bentuk tombolnya, juga agar loading tidak berat.

Baiklah, mari kita menuju tempat eksekusi. Pertama login ke Blogger kalian. (Blogger dengan tampilan baru)

Maaf tidak ada DEMO.
> Klik tab 'Template' > 'Edit HTML' > 'Proceed'
> Cari kode : ]]></b:skin>
> Lalu tambahkan Script berikut diatasnya :



> Cari lagi kode </body>, dan masukan Script ini diatas tag tersebut :


<div id='menu_footer'> <ul id='footer_menu'>
<!-- Begin Footer Menu --> <li class='imgmenu'>
<a href='#'><span>Home</span></a></li>
 <!-- This Item is an Image, the "span" is hidden via CSS -->
 <li><a href='#'>Services</a></li> <li>
<a href='#'>Portfolio</a></li> <li>
<a href='#'>Friends</a></li> <li>
<a href='#'>Blog</a></li> <li>
<a href='#'>Testimonials</a></li> <li>
<a href='#'>Contact</a></li> </ul>
 <!-- End Social Icons --> <ul id='social_icons'>
 <!-- Social Icons -->
 <!-- The span is the text appearing on hover, use the tooltip class in the link --> <li>
<a href='#'><img alt='' src='http://2.bp.blogspot.com/-NygdyapXfJA/T3gG1lJB1-I/AAAAAAAAAFY/UwPnES_pLAg/s1600/twitter.png'/><span>Twitter</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-2ePfpVW_2ns/T3gGu3VlY1I/AAAAAAAAAEw/lMPHXCnQPMk/s1600/digg.png'/><span>Digg</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-Mb22rlTFtTs/T3gGxnYnH3I/AAAAAAAAAFA/H-E2Xy1Mvv0/s1600/flickr.png'/><span>Flickr</span></a></li> <li><a href='#'><img alt='' src='http://2.bp.blogspot.com/-l1msgXw1ZBk/T3gGwOPZWXI/AAAAAAAAAE4/sUPiaOA5j2c/s1600/facebook.png'/><span>Facebook</span></a></li>
 </ul>
 </div>

Teks berwarna Merah silakan kalian edit atau ubah sesuai kesukaan kalian.

Dan langkah terakhir, klik

Sekian tutorialnya, semoga bermanfaat bagi kawan-kawan blogger sekalian.


[boot] Membuat menu float fixed pada blog, cara membuat menu fixed footer, cara membuat menu fixed pada footer blog, membuat menu melayang fixed footer, cara membuat menu melayang dibagian footer blog, cara membuat menu fixed float di footer blog.
Continue→