Membuat Panel Login Efek Slide

Memasang panel login pada sebuah website yang mempunyai member, memang sangat efektif. Bagai mana jika panel login di pasang di sebuah blog dengan tampilan gak kalah jauh dengan yang lain. Seperti pada gambar diatas, nampak cantik login panel dengan JQuery.

Disini ane cuma mempostingin cara membuat tampilan panel login, jadi sobat hanya menyesuaikan target loginnya. Untuk memasang panel tersebut, ikuti step by stepnya.....

Masuk ke akun blog sobat
Pilih Rancangan, Edit Html.
Cari kode </head>.
Letakan script berikut, diatas kode no.3
view plain print ?
1. <script src='<span style="color: #990000;">http://web-kreation.com/demos/Sliding_login_panel_jquery/js/jquery-1.3.2.min.js</span>' type='text/javascript'/><script style='display:none' type='text/javascript'>$(document).ready(function() {
3. // Expand Panel
4. $("#open").click(function(){
5. $("div#panel").slideDown("slow");
6. });
8. // Collapse Panel
9. $("#close").click(function(){
10. $("div#panel").slideUp("slow");
11. });
13. // Switch buttons from "Log In | Register" to "Close Panel" on click
14. $("#toggle a").click(function () {
15. $("#toggle a").toggle();
16. });
18. });
19. </script>
Cari kode ]]></b:skin>.
Letakan Script dibawah ini, di atas kode no.6
view plain print ?
1. /***** clearfix *****/
2. .clear {clear: both;height: 0;line-height: 0;}
3. .clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
4. .clearfix {display: inline-block;}
5. /* Hides from IE-mac \*/
6. * html .clearfix {height: 1%;}
7. .clearfix {display: block;}
8. /* End hide from IE-mac */
9. .clearfix {height: 1%;}
10. .clearfix {display: block;}
12. /* Panel Tab/button */
13. .tab {
14. background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_b.png) repeat-x 0 0;
15. height: 42px;
16. position: relative;
17. top: 0;
18. z-index: 999;
19. }
21. .tab ul.login {
22. display: block;
23. position: relative;
24. float: right;
25. clear: right;
26. height: 42px;
27. width: auto;
28. font-weight: bold;
29. line-height: 42px;
30. margin: 0;
31. right: 150px;
32. color: white;
33. font-size: 80%;
34. text-align: center;
35. }
37. .tab ul.login li.left {
38. background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_l.png) no-repeat left 0;
39. height: 42px;
40. width: 30px;
41. padding: 0;
42. margin: 0;
43. display: block;
44. float: left;
45. }
47. .tab ul.login li.right {
48. background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_r.png) no-repeat left 0;
49. height: 42px;
50. width: 30px;
51. padding: 0;
52. margin: 0;
53. display: block;
54. float: left;
55. }
57. .tab ul.login li {
58. text-align: left;
59. padding: 0 6px;
60. display: block;
61. float: left;
62. height: 42px;
63. background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/tab_m.png) repeat-x 0 0;
64. }
66. .tab ul.login li a {
67. color: #15ADFF;
68. }
70. .tab ul.login li a:hover {
71. color: white;
72. }
74. .tab .sep {color:#414141}
76. .tab a.open, .tab a.close {
77. height: 20px;
78. line-height: 20px !important;
79. padding-left: 30px !important;
80. cursor: pointer;
81. display: block;
82. width: 100px;
83. position: relative;
84. top: 11px;
85. }
87. .tab a.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left 0;}
88. .tab a.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_close.png) no-repeat left 0;}
89. .tab a:hover.open {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_open.png) no-repeat left -19px;}
90. .tab a:hover.close {background: url(http://web-kreation.com/demos/Sliding_login_panel_jquery/css/../images/bt_close.png) no-repeat left -19px;}
92. /* sliding panel */
93. #toppanel {
94. position: absolute;
95. top: 0;
96. width: 100%;
97. z-index: 999;
98. text-align: center;
99. margin-left: auto;
100. margin-right: auto;
101. }
103. #panel {
104. width: 100%;
105. height: 270px;
106. color: #999999;
107. background: #272727;
108. overflow: hidden;
109. position: relative;
110. z-index: 3;
111. display: none;
112. }
114. #panel h1 {
115. font-size: 1.6em;
116. padding: 5px 0 10px;
117. margin: 0;
118. color: white;
119. }
121. #panel h2{
122. font-size: 1.2em;
123. padding: 10px 0 5px;
124. margin: 0;
125. color: white;
126. }
128. #panel p {
129. margin: 5px 0;
130. padding: 0;
131. }
133. #panel a {
134. text-decoration: none;
135. color: #15ADFF;
136. }
138. #panel a:hover {
139. color: white;
140. }
142. #panel a-lost-pwd {
143. display: block;
144. float: left;
145. }
147. #panel .content {
148. width: 960px;
149. margin: 0 auto;
150. padding-top: 15px;
151. text-align: left;
152. font-size: 0.85em;
153. }
155. #panel .content .left {
156. width: 280px;
157. float: left;
158. padding: 0 15px;
159. border-left: 1px solid #333;
160. }
162. #panel .content .right {
163. border-right: 1px solid #333;
164. }
166. #panel .content form {
167. margin: 0 0 10px 0;
168. }
170. #panel .content label {
171. float: left;
172. padding-top: 8px;
173. clear: both;
174. width: 280px;
175. display: block;
176. }
178. #panel .content input.field {
179. border: 1px #1A1A1A solid;
180. background: #414141;
181. margin-right: 5px;
182. margin-top: 4px;
183. width: 200px;
184. color: white;
185. height: 16px;
186. }
188. #panel .content input:focus.field {
189. background: #545454;
190. }
192. /* BUTTONS */
193. /* Login and Register buttons */
194. #panel .content input.bt_login,
195. #panel .content input.bt_register {
196. display: block;
197. float: left;
198. clear: left;
199. height: 24px;
200. text-align: center;
201. cursor: pointer;
202. border: none;
203. font-weight: bold;
204. margin: 10px 0;
205. }
207. #panel .content input.bt_login {
208. width: 74px;
209. background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_login.png) no-repeat 0 0;
210. }
212. #panel .content input.bt_register {
213. width: 94px;
214. color: white;
215. background: transparent url(http://web-kreation.com/demos/Sliding_login_panel_jquery/images/bt_register.png) no-repeat 0 0;
216. }
218. #panel .lost-pwd {
219. display: block;
220. float:left;
221. clear: right;
222. padding: 15px 5px 0;
223. font-size: 0.95em;
224. text-decoration: underline;
225. }
Cari kode </body>.
Letakan kode berikut, diatas kode no.7
view plain print ?
1. 
2. <div id='toppanel'>
3. <div id='panel'>
4. <div class='content clearfix'>
5. <div class='left'>
6. <h1>Welcome In Creating Website</h1>
7. <h2>Contoh Sliding Login Dengan JQuery</h2>
8. <p class='grey'>Disamping ini adalah contoh Sliding Login menggunakan JQuery. Login Form Disamping hanya Contoh dan tidak dapat digunakan layaknya Login Form FB, Karena Blog ini terbuka untuk umum tanpa perlu mendaftar menjadi Member</p>
9. <h2>Tutorial Blog</h2>
10. <p class='grey'>Untuk membuatnya Silahkan : <a href='http://www.maskolis.co.cc/2011/02/membuat-sliding-loginregister-form.html' title='Download'>Pencet Sini</a></p>
11. </div>
13. <div class='left'>
14. <form action='#' class='clearfix' method='post'>
15. <h1 class='padlock'>Member Login</h1>
16. <label class='grey' for='log'>Username:</label>
17. <input class='field' id='log' name='log' size='23' type='text' value=''/>
18. <label class='grey' for='pwd'>Password:</label>
19. <input class='field' id='pwd' name='pwd' size='23' type='password'/>
20. <label><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/> Remember me</label>
21. <div class='clear'/>
22. <input class='bt_login' name='submit' type='submit' value='Login'/>
23. <a class='lost-pwd' href='#'>Lost your password?</a>
25. </form>
26. </div>
27. <div class='left right'>
28. <form action='#' method='post'>
29. <h1>Not a member yet? Sign Up!</h1>
30. <label class='grey' for='signup'>Username:</label>
31. <input class='field' id='signup' name='signup' size='23' type='text' value=''/>
32. <label class='grey' for='email'>Email:</label>
33. <input class='field' id='email' name='email' size='23' type='text'/>
34. <label>A password will be e-mailed to you.</label>
35. <input class='bt_register' name='submit' type='submit' value='Register'/>
36. </form>
37. </div>
39. </div>
40. </div>
41. 
42. 
43. <div class='tab'>
44. <ul class='login'>
45. <li class='left'/>
46. <li>Halo Semuanya</li>
47. <li class='sep'>|</li>
48. <li id='toggle'>
49. <a class='open' href='#' id='open'>Masuk | Daftar</a>
50. <a class='close' href='#' id='close' style='display: none;'>Tutup Panel</a>
51. </li>
53. <li class='right'/>
54. </ul>
55. </div>
56. 
57. </div>
58.
Klik save, untuk menyimpan dan.......

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

Artikel Membuat Panel Login Efek Slide ini dipublish oleh ALSYA pada hari . Semoga artikel ini dapat bermanfaat.Terimakasih atas kunjungan Anda silahkan tinggalkan komentar.sudah ada 0 komentar: di postingan Membuat Panel Login Efek Slide

Membuat Panel Login Efek Slide

Penulis : ALSYA ~ Sebuah blog yang menyediakan berbagai macam informasi

0 komentar:

Movie Categories

Blog Archive

Label