معهد خبراء بلوجر - اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر

السلام عليكم اخوانى اعضاء معهد خبراء

الف شكر لمساعدتكم فى مدنتى الشخصيه مدونة بلوجر توب

انا اتحدث معكم وانا على الفراش وارج الدعا من انسان مسلم لشفائيه بعد ان جد الكثير فى المدونة بمتابعه الاضافات واشكر الاخت مى على الاتمام فى المدونة واشكر كل من شارك فى المدونة اما بعد سااشرح لكم اضافة جميله جداا من الاخت مى وجد هذا الاضافة فى مدونتى ثم اشرح ليكم الاضافة هيا
اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر

http://1.1.1.5/bmi/img02.arabsh.com/...414360fb03.png

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

لقد وجد هذا الاضافة فى مدونة ابو اياد واعجبتنى ارجو المتابعه

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

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

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

ثم تحرير HTML

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

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

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

NAVBAR

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

كود بلغة HTML:

]]></b:skin>

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

كود بلغة HTML:

  <style type="text/css">



#navbar-iframe {



height:0px;



visibility:hidden;



display:none;



}



</style>

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

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

كود بلغة HTML:

]]></b:skin>

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

كود بلغة HTML:

  /*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;



}

رابعا :

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

كود بلغة HTML:

[HTML]</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='http://bilokr.googlecode.com/files/jquery-1.3.2.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://bilokr.googlecode.com/files/slide.css' media='screen' rel='stylesheet' type='text/css'/>







<script src='http://bilokr.googlecode.com/files/slide.js' type='text/javascript'/>

خامسا :

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

و نبحث عن هذا الوسم
<body> او هذا الكود
<body expr:class='"loading" + data:blog.mobileClass'>
و نضع بعد احد الوسم الذي وجدته هذا الكود:



<div id='toppanel'>

<div id='panel'>

<div class='content clearfix'>



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



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



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

[/HTML]

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

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

كود بلغة HTML:

 $(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

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

كود بلغة HTML:

   <div id='toppanel'>



<div id='panel'>

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

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

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

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

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

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

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

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

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

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

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

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

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

:: خاتمة ::
إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا