منتديات شعراء
عزيزي الزائر / عزيزتي الزائرة يرجي التكرم بتسجبل الدخول اذا كنت عضو معنا
او التسجيل ان لم تكن عضو وترغب في الانضمام الي اسرة المنتدي
سنتشرف بتسجيلك
شكرا
ادارة المنتدي
pantherads
Review Widgets
تم افتتاح منتديات كلمات اغانى
وتم وقف النشاط فى منتديات شعراء
التسجيل من هنا

اعلانات
بحـث
 
 

نتائج البحث
 


Rechercher بحث متقدم

اعلانات
المواضيع الأخيرة
» لـــحـــظـة لــقــــــاء
الإثنين 10 ديسمبر 2012, 9:02 pm من طرف نانا محمد

» ليـــــــــــــــــــه كـــــــل النـــاس ظلمــــــــــانى
الإثنين 03 ديسمبر 2012, 9:01 pm من طرف نانا محمد

» أشهد يا بيتنا و سجل دمعتى
الأحد 25 نوفمبر 2012, 3:05 am من طرف نانا محمد

» كلوي كارداشيان تجلس على حضن سايمون كويل:"هل انتَ متحمس؟"
الخميس 22 نوفمبر 2012, 6:26 pm من طرف شاعر

» يـا دوحة المجد من فهرٍ ومن مضر
الخميس 22 نوفمبر 2012, 6:17 pm من طرف شاعر

»  ﻓـﻲ ﺍﻟـﺤُــﺐ ، ﻳُـﻠــﻐـﻰ ﺍﻟـﻤـﻨـﻄـﻖ
الخميس 22 نوفمبر 2012, 6:06 pm من طرف شاعر

» كلمات اغنية امال ماهر "رايح بيا فين " 2012
الخميس 22 نوفمبر 2012, 7:20 am من طرف شاعر

» « حبر العيون » راشد الماجد
الخميس 22 نوفمبر 2012, 7:18 am من طرف شاعر

»  الطيور المهاجرة.
الثلاثاء 20 نوفمبر 2012, 11:52 am من طرف الزهراء

المتواجدون الآن ؟
ككل هناك 0 عُضو متصل حالياً 0 عضو مُسجل, 0 عُضو مُختفي و 0 زائر :: 1 روبوت الفهرسة في محركات البحث

لا أحد

[ مُعاينة اللائحة بأكملها ]


أكبر عدد للأعضاء المتواجدين في هذا المنتدى في نفس الوقت كان 32 بتاريخ السبت 04 أغسطس 2012, 8:13 pm
احصائيات
alexa
فتحه اجباريه
اعلانات

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

استعرض الموضوع السابق استعرض الموضوع التالي اذهب الى الأسفل

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

مُساهمة من طرف شاعر في الأحد 19 أغسطس 2012, 5:32 am



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

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


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

أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم
[center]
ثم تحرير 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;

}




رابعا :





[center][center]ابحث عن هذا الوسم
الكود:
</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();

});       



});


[/center][/center]

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


و العناصر التي قمت بمطابقتها اي التاثير عليها
الكود:
<div id='toppanel'>

<div id='panel'>



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


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



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

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



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


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


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

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


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



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


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

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







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


إقرأ المزيد » إظهار و إخفاء 3 إضافات في قائمة واحدة | الفضاء التكنولوجي





[/center]
avatar
شاعر
Admin
Admin

عدد المساهمات : 859
نقاط : 2302
السٌّمعَة : 0
تاريخ التسجيل : 29/07/2012
العمر : 32

معاينة صفحة البيانات الشخصي للعضو http://mohammedsaber341985.blogspot.com/

الرجوع الى أعلى الصفحة اذهب الى الأسفل

استعرض الموضوع السابق استعرض الموضوع التالي الرجوع الى أعلى الصفحة


 
صلاحيات هذا المنتدى:
لاتستطيع الرد على المواضيع في هذا المنتدى