Bomba Açılır Kapanır Sliding Login Panel!

Kodlar piyasada var kendime ait değil ancak kodları biraz düzenledim change avatar felan türkçeleştirdim biraz diyebiliriz.. Anlatımda bana aittir..

Öncelikle Demo:

Başlayalım:

Header şablonunu açın ve bu kodu silin;

{$welcomeblock}

Not ( Kod default temada vardır siz welcomeblokuda silebilirsiniz sadece )

Daha sonra bu kodu en üste ekleyin;

<script></script>
<script>
jQuery.noConflict();
jQuery(function($) {
// Expand Panel
$("#open").click(function(){
$("div#panel").slideDown("slow");

});

// Collapse Panel
$("#close").click(function(){
$("div#panel").slideUp("slow");
});

// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});

</script>

{$welcomeblock}

• 
  Open Panel
  Close Panel
  

Sonra temamızın global.css sini açıp #panel kodunu aratalım varsa silelim ve sona şu kodları ekleylim.

#panel {
background: none repeat scroll 0 0 #272727;
border: medium none;
color: #E2E2E2;
display: none;
overflow: hidden;
position: relative;
width: 98.7%;
z-index: 3;
font-size: 11px;
padding: 8px;
}
#panel a {
color: #15ADFF;
text-decoration: none;
}

#panel a:hover {
color: #FFFFFF;
}

#toppanel {
position: absolute; /*Panel will overlap content */
/*position: relative;*/ /*Panel will "push" the content down */
top: 0;
width: 100%;
z-index: 999;
text-align: center;
margin-left: auto;
margin-right: auto;
}

.tab {
background: url(http://st.10tl.net/tema/hatake/images/tab_b.png) repeat-x scroll 0 0 transparent;
height: 42px;
position: relative;
top:0px;

z-index: 999;
}

.tab a:hover.open {
background: url(http://st.10tl.net/tema/hatake/images/bt_open.png) no-repeat left -19px;
}

.tab a:hover.close {
background: url(http://st.10tl.net/tema/hatake/images/bt_close.png) no-repeat left -19px;
}

.tab ul.login {
clear: right;
color: white;
display: block;
float: right;
font-size: 80%;
font-weight: bold;
height: 42px;
line-height: 42px;
margin: 0;
position: relative;
right: 150px;
text-align: center;
width: auto;
}

.tab ul.login li.left {
background: url(http://st.10tl.net/tema/hatake/images/tab_l.png) no-repeat scroll left 0 transparent;
display: block;
float: left;
height: 42px;
margin: 0;
padding: 0;
width: 30px;
}

.tab ul.login li.right {
background: url(http://st.10tl.net/tema/hatake/images/tab_r.png) no-repeat scroll left 0 transparent;
display: block;
float: left;
height: 42px;
margin: 0;
padding: 0;
width: 30px;
}

.tab ul.login li {
background: url(http://st.10tl.net/tema/hatake/images/tab_m.png) repeat-x scroll 0 0 transparent;
display: block;
float: left;
height: 42px;
padding: 0 6px;
text-align: left;
}

.tab ul.login li a {
color: #15ADFF;
}

.tab ul.login li a:hover {
color: #FFFFFF;
text-decoration:none;
}

.tab a.open {
background: url(http://st.10tl.net/tema/hatake/images/bt_open.png) no-repeat scroll left 0 transparent;
}

.tab a.open, .tab a.close {
cursor: pointer;
display: block;
height: 20px;
line-height: 20px !important;
padding-left: 30px !important;
position: relative;
top: 11px;
width: 100px;
}

.tab a.close {
background: url(http://st.10tl.net/tema/hatake/images/bt_close.png) no-repeat scroll left 0 transparent;
}

.clear {
clear: both;height: 0;line-height: 0;
}

.clearfix:after {
content: ".";display: block;height: 0;clear: both;visibility: hidden;
}

.clearfix {
display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix {
height: 1%;
}

.clearfix {
display: block;
}

/* End hide from IE-mac */
.clearfix {
height: 1%;
}

.clearfix {
display: block;
}

.input-username {
background: url(http://st.10tl.net/tema/hatake/images/username.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

.input-password {
background: url(http://st.10tl.net/tema/hatake/images/password.png) no-repeat scroll left 50% #FFFFFF;
padding-left: 18px;
}

.bt_login {
background: url(http://st.10tl.net/tema/hatake/images/button_login.jpg) no-repeat scroll 0 0 transparent;
border: medium none;
cursor: pointer;
height: 20px;
width: 47px;
}

div#panel .button {
background: url(http://st.10tl.net/tema/hatake/images/buttonbg.jpg) repeat-x scroll left top #F1F1F1;
border: 1px solid #CCCCCC;
border-radius: 3px 3px 3px 3px;
color: #424242;
font: bold 11px Tahoma,Calibri,Verdana,Geneva,sans-serif;
padding: 3px 5px;
}

div#panel .button:hover {
background: none repeat scroll 0 0 #FFFFFF;
}

Sonrasında header_welcomeblock_guest i bunla değişin..

{$lang->login_username}:

{$lang->login_password}
login_password}'){this.value=''; this.style.color='black';}" "if (this.value == '') {this.value='{$lang->login_password}';}" />

{$lang->remember_me}


{$lang->welcome_current_time}

Chua có tà i kho?n ? {$lang->welcome_register}
— {$lang->lost_password}

Header_welcomeblock_memberı bunla;

{$lang->welcome_back}

{$lang->welcome_open_buddy_list} {$lang->welcome_pms} {$lang->welcome_pms_usage}

• Change Avatar • Change Signature • Change Email • Change Password • Edit Option

{$modcplink}{$admincplink}

Ve aynı işlemleri sırasıyla header_welcomeblock_member_admin ile header_welcomeblock_member_moderator kısımları için uyguluyoruz...

Admin için;



Mod için;



iyi kullanımlar :)