hits counter
الرئيسيةس .و .جبحـثالتسجيلدخول
دعم شباب الآن: لدينا 8248 موضوع ، و 1991 عضو ، آخر عضو مسجل : نغم سات فمرحباُ به.



قائمة اعلى الموقع رائعة جدا يمكنك اظهارها واخفائها ووضع معلومات وروابط بداخلها
avatar
THE QM
إدارة الموقع
 
المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22
موضوع: قائمة اعلى الموقع رائعة جدا يمكنك اظهارها واخفائها ووضع معلومات وروابط بداخلها









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


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


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



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





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

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



في ورقة CSS

الكود:
#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

</style>






في ورقة CSS




الكود:
/*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();

});



});








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


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



<div id='toppanel'>

<div id='panel'>






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


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




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

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



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


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


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

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


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



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


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

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








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



كن بالقرب :
follow me @HDagash


التعليقات
mo'emn fox
avatar
داعم متميز
داعم متميز

المشاركات : 159
القسم المفضل : لم يحدد
سجل في : 05/08/2011
النقاط : 11



 ممكن الشرح الصحيح لتركيب الكود على احلى منتدى وضبط الاكواد لانها غير مضبوطة



 
THE QM
avatar
إدارة الموقع

المشاركات : 7657
القسم المفضل : تطوير المواقع
سجل في : 13/06/2008
النقاط : 22



 ضع الجافا سكربت في الهيدر

قبل الوسم </body>





كن بالقرب :
follow me @HDagash


mo'emn fox
avatar
داعم متميز
داعم متميز

المشاركات : 159
القسم المفضل : لم يحدد
سجل في : 05/08/2011
النقاط : 11



 الاكواد فى الموضوع مش محطوطة صح ملخبطة



تفضّل شارك بتعليقك

دعم شباب  :: تطوير المواقع والمنتديات :: تطوير المواقع :: عالم الاكواد :: اكواد jQuery والJava Script-