إظهار و إخفاء 3 إضافات في قائمة واحدة

18‏/03‏/2011








السلام عليكم و رحمة الله تعالى وبركاته

موضوعنا اليوم هو كيفية إظهار و إخفاء 3 إضافات في قائمة واحدة لمدونات Blogger  

بمكتبة ال jquery فهذه المكتبة صغيرة تستطيع بها فعل أشياء كثيرة وبكفائه عالية،



تحميل (Download) مثال (Demo)




أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط  ثم تصميم  

ثم تحرير HTML
 
ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. 

ثالثا : ضع علامة في خانة توسيع القوالب .

ابحث عن  هذا الوسم اذا كانت مدونتك تحتوي على الاطار العلوي

NAVBAR

فان من الافضل حذفها و ذالك بالبحث عن هذا الوسم



]]></b:skin>



و نضع قبله تماما هدا الكود



<style type="text/css">

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

</style>




الان ننتقل الى الأهم..


البحث عن هذا الوسم




]]></b:skin>




و نضع قبله تماما هدا الكود



/*Sliding Login Panel with jQuery 1.3.2*/





/*

Name: Sliding Login Panel with jQuery 1.3.2

Author: Jeremie Tisseau

Author URI: http://web-kreation.com/

Date: March 26, 2009

Version: 1.0



Copyright 2009 Jeremie Tisseau

"Sliding Login Panel with jQuery 1.3.2" is distributed under the GNU General Public License version 3:

http://www.gnu.org/licenses/gpl-3.0.html

*/



/***** clearfix *****/

.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;}



/* Panel Tab/button */

.tab {

   background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_b.png) repeat-x 0 0;

height: 42px;

position: relative;

    top: 0;

    z-index: 999;

}



.tab ul.login {

display: block;

position: relative;

   float: right;

   clear: right;

   height: 42px;

width: auto;

   font-weight: bold;

line-height: 42px;

margin: 0;

right: 150px;

   color: white;

   font-size: 80%;

text-align: center;

}



.tab ul.login li.left {

   background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_l.png) no-repeat left 0;

   height: 42px;

width: 30px;

padding: 0;

margin: 0;

   display: block;

float: left;

}



.tab ul.login li.right {

   background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_r.png) no-repeat left 0;

   height: 42px;

width: 30px;

padding: 0;

margin: 0;

   display: block;

float: left;

}



.tab ul.login li {

text-align: left;

   padding: 0 6px;

display: block;

float: left;

height: 42px;

   background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/tab_m.png) repeat-x 0 0;

}



.tab ul.login li a {

color: #15ADFF;

}



.tab ul.login li a:hover {

color: white;

}



.tab .sep {color:#414141}



.tab a.open, .tab a.close {

height: 20px;

line-height: 20px !important;

padding-left: 30px !important;

cursor: pointer;

display: block;

width: 100px;

position: relative;

top: 11px;

}



.tab a.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left 0;}

.tab a.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left 0;}

.tab a:hover.open {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_open.png) no-repeat left -19px;}

.tab a:hover.close {background: url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_close.png) no-repeat left -19px;}



/* sliding panel */

#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;

}



#panel {

width: 100%;

height: 190px;

color: #999999;

background: #272727;

overflow: hidden;

position: relative;

z-index: 3;

display: none;

}



#panel h1 {

font-size: 1.6em;

padding: 5px 0 10px;

margin: 0;

color: white;

}



#panel h2{

font-size: 1.2em;

padding: 10px 0 5px;

margin: 0;

color: white;

}



#panel p {

margin: 5px 0;

padding: 0;

}



#panel a {

text-decoration: none;

color: #15ADFF;

}



#panel a:hover {

color: white;

}



#panel a-lost-pwd {

display: block;

float: left;

}



#panel .content {

width: 960px;

margin: 0 auto;

padding-top: 15px;

text-align: left;

font-size: 0.85em;

}



#panel .content .left {

width: 280px;

float: left;

padding: 0 15px;

border-left: 1px solid #333;

}



#panel .content .right {

border-right: 1px solid #333;

}



#panel .content form {

margin: 0 0 10px 0;

}



#panel .content label {

float: left;

padding-top: 8px;

clear: both;

width: 280px;

display: block;

}



#panel .content input.field {

border: 1px #1A1A1A solid;

background: #414141;

margin-right: 5px;

margin-top: 4px;

width: 200px;

color: white;

height: 16px;

}



#panel .content input:focus.field {

background: #545454;

}



/* BUTTONS */

/* Login and Register buttons */

#panel .content input.bt_login,

#panel .content input.bt_register {

display: block;

float: left;

clear: left;

height: 24px;

text-align: center;

cursor: pointer;

border: none;

font-weight: bold;

margin: 10px 0;

}



#panel .content input.bt_login {

width: 74px;

background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_login.png) no-repeat 0 0;

}



#panel .content input.bt_register {

width: 94px;

color: white;

background: transparent url(https://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/bt_register.png) no-repeat 0 0;

}



#panel .lost-pwd {

display: block;

float:left;

clear: right;

padding: 15px 5px 0;

font-size: 0.95em;

text-decoration: underline;

}







/*newsletter*/





#newsletter { }



#newsletter p { font-size:14px; font-weight: bold; color: #555; float:left; padding:8px 5px 0px 30px; }

#newsletter form { float:right; padding:0 30px 0 0;  }

#newsletter form input.email { width:150px; color:#888; border: 1px solid #ddd; padding:5px 8px 4px; height: 32px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius:3px; box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.1); }

#newsletter form input.submit { margin:0 0 0 5px; padding:0; background: url(http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/images/btn-submit.png) no-repeat; width:89px; height: 31px; border:0; cursor: pointer; color:#fff; text-shadow: 0 -1px 0px #777; font-family: sans-serif; font-weight: bold; font-size:13px;  }

#newsletter form input.submit:hover { opacity:0.85; }





/*fade-spin-css3-jquery*/

#followIcons a  {

display:inline-block;

width:48px;

height:48px;

text-indent:-3000px;

background-position:0 0;

background-repeat:no-repeat;

z-index:2000;

overflow:hidden;

position:3;

}

#followIcons a  {

-webkit-transition-duration: 0.8s;

-moz-transition-duration: 0.8s;

-o-transition-duration: 0.8s;

transition-duration: 0.8s;

-webkit-transition-property: -webkit-transform;

-moz-transition-property: -moz-transform;

-o-transition-property: -o-transform;

transition-property: transform;

}



  #iconRSS    { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/RSS.png); }

    #iconTwitter  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/twitter.png); }

  

    #iconDelicious  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/delicious.png); }

    #iconFacebook  { background-image:url(http://cdn2.iconfinder.com/data/icons/grunge/48/facebook.png); }

  



/*submenu*/

  

#submenu {

width: 160px;

float: left;

}

#submenu2 {

width: 160px;

float: right;

}

#submenu ul, #submenu2 ul{

font-family: Arial, Helvetica, sans-serif;

list-style-type:none;

margin:0;

padding:0;

}

#submenu ul li a, #submenu2 ul li a {

background:url(http://cdn2.iconfinder.com/data/icons/circular%20icons/bullet_green.png) center left no-repeat;

margin:0;

padding:3px 3px 3px 18px;

}

#submenu li, #submenu2 li {display: inline;}

#submenu a, #submenu2 a{

color: #FFFFFF;

text-decoration: none;

font-size: 13px;

display: block;

padding: 3px;

width: 160px;

}

#submenu a:link, #submenu a:visited, #submenu2 a:link, #submenu2 a:visited {

color: #999;

text-decoration: none;

}

#submenu a:hover, #submenu2 a:hover {

color: #FFFFFF;

}


رابعا :


 
ابحث عن  هذا الوسم


</head>


نقوم بتضليله و نعوضه بهذا الكود

 


</head>

<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/jquery-1.3.2.min.js' type='text/javascript'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'/>

<script>jQuery(document).ready(function() {



/*

* Create Spinning, Fading Icons with CSS3 and jQuery for blogger.com

* Script combined from http://davidwalsh.name

* used By khaled ( http://blogspacetech.blogspot.com )

*/





  // "Globals" - Will make things compress mo-betta

  var $random = function(x) { return Math.random() * x; };

  var availableWidth = 150, availableHeight = 25;



  // Get the proper CSS prefix

  if(jQuery.browser.webkit) {

    cssPrefix = "webkit";

  }

  else if(jQuery.browser.mozilla) {

    cssPrefix = "moz";

  }

  else if(jQuery.browser.opera) {

    cssPrefix = "o";

  }



  // Apply opacity

  var zIndex = 1000;



  // Randomize each link

  jQuery.each(jQuery("#followIcons a"),function(index) {

    var startDeg = $random(360);

    var element = jQuery(this);

    var resetPlace = function() {

      element.fadeTo(200,0.6).css("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)");

    };

    element.attr("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex).hover(function() {

      element.fadeTo(250,1).css("zIndex",++zIndex).css("-" + cssPrefix + "-transform","rotate(0deg)");

    },resetPlace);

    resetPlace();

  });



});

</script>





    <link href='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/css/style.sliding-panel.css' media='screen' rel='stylesheet' type='text/css'/>

  



   <!-- PNG FIX for IE6 -->

   <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->

<!--[if lte IE 6]>



<script type="text/javascript" src="http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/supersleight-min.js"></script>

<![endif]-->



<script src='http://dl.dropbox.com/u/17686000/blogspacetech/sliding-panel/js/slide.js' type='text/javascript'/>




خامسا :

 

الان ننتقل الى الخطوة الاخيرة

 

و نبحث عن هذا الوسم


<body>

 

او هذا الوسم

 
 

<body expr:class='"loading" + data:blog.mobileClass'>

 

و نضع بعد احد الوسم الذي وجدته هذا الكود:




<!--top sliding menu -->

<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>



<!-- First section -->

<div class='left' style='width:250px !important'>



<h4>To connect</h4>

<p>للتواصل عبر الشبكات الاجتماعية او الاشتراك في خلاصات RSS</p>



     <div id='followIcons'>

  <a href='http://feeds2.feedburner.com/blogspacetech' id='iconRSS'>RSS Feed</a>

  <a href='http://twitter.com/infokhaled31' id='iconTwitter'>@infokhaled31 Twitter</a>



  <a href='http://del.icio.us/' id='iconDelicious'>infokhaled31</a>

  <a href='http://facebook.com/infokhaled31' id='iconFacebook'>infokhaled31 Facebook</a>

</div>

</div>



<!-- Section Two -->

<div class='left' style='width:330px !important'>

<h4>Categories</h4>



<div id='submenu'>

<ul>

<li><a href='your URL here'>The first link</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>



</ul>

</div>

<div id='submenu2'>

<ul>

<li><a href='your URL here'>Second link</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>

<li><a href='your URL here'>Link, corresponding</a></li>




</ul>

</div>





</div>



<!-- Section Three -->

<div class='left right'>



<h4>إشترك في القائمة البريدية ليصلك جديدنا</h4>





<div id='newsletter'>

                               
<form action='http://feedburner.google.com/fb/a/mailverify' class='newsletter-form' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspacetech', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>

<input class='email' gtbfieldid='3' name='email' onblur='if (this.value == "") {this.value = "Enter email address";}' onfocus='if (this.value == "Enter email address") {this.value = "";}' type='text' value='Enter email address'/>



<input name='uri' type='hidden' value='blogspacetech'/>

<input name='title' type='hidden' value='Placeholder'/>

<input name='loc' type='hidden' value='en_US'/>

<input class='submit' name='submit' type='submit' value='Submit'/>
</form>

</div>



</div>

</div>

</div>





<div class='tab'>

<ul class='login'>

<li class='left'/>

<li>!  مرحبا  بالضيف </li>

<li class='sep'>|</li>

<li id='toggle'>

<a class='open' href='#' id='open'>show /إظهار </a>

<a class='close' href='#' id='close' style='display: none;'>Hide / إخفاء</a>

</li>

<li class='right'/>

</ul>

</div>

</div>

<!-- Fin top sliding menu -->






أخيرا :  استعرض مدونتك ثم احفظ قالبك






 شرح المعلومات الأساسية للمكتبة و مبدا عملها





$(document).ready(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();

});



});







قبل كل شيء التطبيق كان على div

و العناصر التي قمت بمطابقتها اي التاثير عليها



<div id='toppanel'>

<div id='panel'>




في ملف الجافاسكريبت السابق سوف تجد بعض الخصائص..

و شرحها كالتالي و على الترتيب :


open  : تستخدم لإظهار جميع العناصر التي تمت مطابقتها

close  : تستخدم لاخفار جميع العناصر التي تمت مطابقتها

toggle : تستخدم للإظهار والاخفار في آن واحد

slideDown : تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر)

slideUp : تستخدم لإخفاء العناصر بتغير الارتفاع (سوف تنزلق للاعلى وتحتفي)

slideDown :  تستخدم لإظهار العناصر بتغير خاصية الارتفاع (سوف تنزلق للاسفل وتظهر) 

slideToggle :  تستخدم للاخفاء بالانزلاق للاعلى و الاظهار بالنزلاق للاسفل بالعتماد على الارتفاع

كما يمكن اضافة هذه الخواص

fadeIn : سوف تظهر تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا

fadeOut :  سوف تختفي تدريجيا بتغير الخاصية opacity "الشفافية" تدريجيا 





هذا كل شيئ أتمنى لكم الاستفادة.



مصدر    : web-kreation