|
|
|
|
أدوات الموضوع | انواع عرض الموضوع |
09-26-2012, 06:10 PM | #1 |
مدون نشيط
|
اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر
السلام عليكم اخوانى اعضاء معهد خبراء
الف شكر لمساعدتكم فى مدنتى الشخصيه مدونة بلوجر توب انا اتحدث معكم وانا على الفراش وارج الدعا من انسان مسلم لشفائيه بعد ان جد الكثير فى المدونة بمتابعه الاضافات واشكر الاخت مى على الاتمام فى المدونة واشكر كل من شارك فى المدونة اما بعد سااشرح لكم اضافة جميله جداا من الاخت مى وجد هذا الاضافة فى مدونتى ثم اشرح ليكم الاضافة هيا اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر السلام عليكم و رحمة الله تعالى وبركاته لقد وجد هذا الاضافة فى مدونة ابو اياد واعجبتنى ارجو المتابعه موضوعنا اليوم هو كيفية إظهار و إخفاء 3 إضافات في قائمة واحدة لمدونات Blogger بمكتبة ال jquery فهذه المكتبة صغيرة تستطيع بها فعل أشياء كثيرة وبكفائه عالية أولا : من لوح تحكم مدونتك انتقل إلى صفحة التخطيط ثم تصميم ثم تحرير HTML ثانيا : قبل إجراء أي تعديل احفظ نسخة احتياطية من القالب لاستعادتها عند الضرورة. ثالثا : ضع علامة في خانة توسيع القوالب . ابحث عن هذا الوسم اذا كانت مدونتك تحتوي على الاطار العلوي NAVBAR فان من الافضل حذفها و ذالك بالبحث عن هذا الوسم
و نضع قبله تماما هدا الكود كود بلغة HTML:
<style type="text/css"> #navbar-iframe { height:0px; visibility:hidden; display:none; } </style> الان ننتقل الى الأهم.. البحث عن هذا الوسم
و نضع قبله تماما هدا الكود كود بلغة 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:
$(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 "الشفافية" تدريجيا هذا كل شيئ أتمنى لكم الاستفادة :: خاتمة :: إذا أعجبتكم الإضافة لا تبخلوا علينا من الضغط على زر لايك الفايسبوك و شكرا
__________________
مدونة بلوجر توب أضافات بلوجرقوالب مجانى ادوات بلوجر أشهار مدزنتك مجانى ربط المدونة http://bilokr.blogspot.com |
09-26-2012, 08:14 PM | #2 |
مدون جديد
تاريخ التسجيل: Sep 2012
المشاركات: 14
|
رد: اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر
__________________
|
09-26-2012, 10:15 PM | #3 |
مدون نشيط
|
رد: اضافة اداةإظهار و إخفاء 3 إضافات في قائمة واحدة فى مدونة بلوجر
شكرا على مرورك الطيب
__________________
مدونة بلوجر توب أضافات بلوجرقوالب مجانى ادوات بلوجر أشهار مدزنتك مجانى ربط المدونة http://bilokr.blogspot.com |
مواقع النشر (المفضلة) |
الذين يشاهدون محتوى الموضوع الآن : 1 ( الأعضاء 0 والزوار 1) | |
أدوات الموضوع | |
انواع عرض الموضوع | |
|
|
المواضيع المتشابهه | ||||
الموضوع | كاتب الموضوع | المنتدى | مشاركات | آخر مشاركة |
اضافة رسالة انبثاقية تظهر للزائر مرة واحدة شكل جديد مع اكثر الاضافات تم تحديث الاضافة | السيد ابو جبل | إضافات وأدوات بلوجر | 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 |
الساعة الآن 07:46 AM - بتوقيت جرينتش
المعهد غير مسؤول عن أي اتفاق تجاري أو
تعاوني بين الأعضاء فعلى كل شخص تحمل مسؤولية نفسه تجاه ما يقوم به من بيع وشراء وإتفاق وإعطاء معلومات مدونته التعليقات المنشورة لا تعبر عن رأي معهد خبراء البلوجر ولا نتحمل أي مسؤولية قانونية حيال ذلك (ويتحمل كاتبها مسؤولية النشر) |