2012-06-28

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




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

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





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

ثم تحرير 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 "الشفافية" تدريجيا 





هذا كل شيئ أتمنى لكم الاستفادة و يكون الموضوع عجبكوا

التسميات: ,

0 تعليقات:

إرسال تعليق

الاشتراك في تعليقات الرسالة [Atom]

<< الصفحة الرئيسية