رئيسية المعهد
رئيسية المعهد  تواصل معنا  حقوق الملكية الفكرية  اربط مدونتك بنا  محول أكواد أدسنس

 

معرض قوالب معهد خبراء بلوجر - دليل مدونات بلوجر - موقع نشر بلوجر - اضافات بلوجر




العودة   معهد خبراء بلوجر > الدعم الفني > إضافات وأدوات بلوجر


إضافة رد
نسخ الرابط
نسخ للمنتديات
 
أدوات الموضوع انواع عرض الموضوع
قديم 09-26-2012, 06:10 PM   #1
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر

أنا : السيد ابو جبل




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

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

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





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

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

موضوعنا اليوم هو كيفية إظهار و إخفاء 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'/>





<!-- PNG FIX for IE6 -->

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

<!--[if lte IE 6]>



<script type="text/javascript" src="http://bilokr.googlecode.com/files/supersleight-min.js"></script>

<![endif]-->



<script src='http://bilokr.googlecode.com/files/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 -->[/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 "الشفافية" تدريجيا


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


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







الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس

مركز رفع موسوعة العربية
قديم 09-26-2012, 08:14 PM   #2
toofy
مدون جديد
 
تاريخ التسجيل: Sep 2012
المشاركات: 14
افتراضي رد: اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر

أنا : toofy




موضوع رائع يا الغالي


تحياتي

الدعم العربي

toofy غير متواجد حالياً   رد مع اقتباس
قديم 09-26-2012, 10:15 PM   #3
السيد ابو جبل
مدون نشيط
 
الصورة الرمزية السيد ابو جبل
 
تاريخ التسجيل: Jul 2012
الدولة: مصر
المشاركات: 272
إرسال رسالة عبر Yahoo إلى السيد ابو جبل
افتراضي رد: اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر

أنا : السيد ابو جبل




اقتباس:
المشاركة الأصلية كتبت بواسطة toofy مشاهدة المشاركة
موضوع رائع يا الغالي


تحياتي
شكرا على مرورك الطيب

الدعم العربي

السيد ابو جبل غير متواجد حالياً   رد مع اقتباس
إضافة رد

مواقع النشر (المفضلة)


الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1)
 
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة

الانتقال السريع

المواضيع المتشابهه
الموضوع كاتب الموضوع المنتدى مشاركات آخر مشاركة
اضافة رسالة انبثاقية تظهر للزائر مرة واحدة شكل جديد مع اكثر الاضافات تم تحديث الاضافة السيد ابو جبل إضافات وأدوات بلوجر 2 09-29-2013 08:04 PM
أفضل قائمة منسدلة على بلوجر (قائمة Mashable معربة) admin إضافات وأدوات بلوجر 8 06-12-2013 03:37 PM
اضافة قائمة المواقع الاجتماعية والاشتراك احترافية mostafa alwin إضافات وأدوات بلوجر 9 10-28-2012 12:23 AM
قالب مدونة jadid al yawm بنفس جديد و إضافات مطلوبة " قالب بلوجر بسيط ورائع " Ridartist قوالب بلوجر عربية ومعربة 0 10-14-2012 05:31 PM
زر إظهار/إخفاء التعليقات على مدونات بلوجر overboy دروس بلوجر 5 08-06-2012 03:14 AM





لتصفح أفضل وللاستفادة القصوى من خصائص المعهد ننصحكم باستعمال :

Powered by vBulletin® Copyright ©2000 - 2024 Dov By EGYNT.Co
new notification by 9adq_ala7sas
Developed By Marco Mamdouh
معهد خبراء بلوجر - 2012 Google
أعلن على المعهد : اتصل بنا - منتدي كنوز - الدعم العربي - قوالب بلوجر - او او انيمي
رئيسية المعهد
الساعة الآن 07:46 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو تعاوني بين الأعضاء
فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته
التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك
(ويتحمل كاتبها مسؤولية النشر)