This is a simple drop-down login to add Facebook button to the top Navbar. After adding this simple CSS3 code you will get a drop-down login at the top right of your navbar.
In this article you will see how to add drop-down login using CSS3 and JQuery.
Live Demo
1. First go to Blogger.2. Create a New Blog to Test.
3. Add Simple Template to that Blog.
4. Go to Edit Html Copy the Code and paste the code in the template as shown below.
<html> <head> <title>Login With Facebook Top Navbar</title> <link href='https://dl.dropboxusercontent.com/u/43686494/style.css' rel='stylesheet' type='text/css'/> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js'/> <b:skin><![CDATA[/* ---------------------------------------------- /////////Coded By: Frinton Madtha/////////// //////////////Blogger Tutorial Demos//////// ---------------------------------------------- ]]></b:skin> </head> <body> <header class='cf'> <nav><ul> <li id='login'> <a href='#' id='login-trigger'> Login With Facebook<span>▼</span> </a> <div id='login-content'> <form> <fieldset id='actions'> <fb:login-button autologoutlink='true' max-rows='10' perms='user_likes, friends_likes' show-faces='true' size='large' width='250'>Login With Facebook<img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9BzM7F0pdlXgNvMNwnAd-ZtXBpjt5taHc9o8RQzBsUFoEtIN_qVqkrubJBTBHiCbhh3RA6v1vuHaGSN4B2eaQqFGySeR-YjWgGniwlBOKnU48QBKrAiiTRsoHdkET2EDgKsrAXt5cU628/s1600/22.gif'/></fb:login-button></fieldset> </form> </div></li> </ul> <script type='text/javascript'> $(document).ready(function(){ $('#login-trigger').click(function(){ $(this).next('#login-content').slideToggle(); $(this).toggleClass('active'); if ($(this).hasClass('active')) $(this).find('span').html('▲') else $(this).find('span').html('▼') }) });</script> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'/> </nav></header> <!--Start Please keep the Credits intact--> <div style='margin-top:400px; '> <center> <p class='author'>© by <b>Frinton Madtha Productions</b> Made With Love From India. Collaboration with<a href='http://frinmash.blogspot.com/'> FrinMash </a></p></center></div> <!-- End Please keep the Credits intact--> </body> </html>
After adding the code to your template you need to add Facebook app id script inside the of your blog.
Drop Down Login With Facebook
After Login With Facebook
Image: FrinMash
Simple Drop-Down Login With Facebook to Blogger Navbar
Reviewed by Frinton Madtha
on
October 04, 2013
Rating:
Reviewed by Frinton Madtha
on
October 04, 2013
Rating:
