قائمة روابط متحركة بشكل جميل لمدونات البلوجر
بسم الله الرحمن الرحيم
مرحبا بكم في اضافة اخرى لمونات البلوجر اتمنا ان تنال اعجابكم
الأضافة هي قائمة روابط متحركة على جانب القالب (المدونة) على الجانب الأيسر بشكل جميل وجذا وطريقة العرض بشكل رائع وجميل ومتوافقة مع جميع القوالب والمتصفحات دون التأثير على عمل المدونة.
لمعاينة الأضافة اضغط هنا
لن اطول عليكم في الكلام سأبد بالشرح :.
اذهب الى المسار التالي
تخطيط >عناصر الصفحة > اضافة اداة > Html / Javascript
انسخ هذا الكود والصقه داخل الأداة
مرحبا بكم في اضافة اخرى لمونات البلوجر اتمنا ان تنال اعجابكم
الأضافة هي قائمة روابط متحركة على جانب القالب (المدونة) على الجانب الأيسر بشكل جميل وجذا وطريقة العرض بشكل رائع وجميل ومتوافقة مع جميع القوالب والمتصفحات دون التأثير على عمل المدونة.
لمعاينة الأضافة اضغط هنا
لن اطول عليكم في الكلام سأبد بالشرح :.
اذهب الى المسار التالي
تخطيط >عناصر الصفحة > اضافة اداة > Html / Javascript
انسخ هذا الكود والصقه داخل الأداة
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/prototype.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:right;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://i49.tinypic.com/121abrq.jpg);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="link 1">text 1</a></li>
<li><a href="link 2">text 2</a></li>
<li><a href="link 3">text 3</a></li>
<li><a href="link 4">text 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/effects.js" type="text/javascript"></script>
<script src="http://www.iblogerz.5gigs.net/sliding-side-bar-left/js/side-bar.js" type="text/javascript"></script>
<style>
body{
font-size:75%;
}
a{
outline: none;
}
a:active{
outline: none;
}
#sideBar{
text-align:right;
}
#sideBar h2{
color:#FFFFFF;
font-size:110%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold !important;
}
#sideBar h2 span{
font-size:125%;
font-weight:normal !important;
}
#sideBar ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#sideBar li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
color:#FFFFFF;
}
#sideBar li a{
width:100%;
}
#sideBar li a:link,
#sideBar li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:100%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
#sideBar li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: fixed;
width: auto;
height: auto;
top: 140px;
left:0px;
background-image:url(http://i49.tinypic.com/121abrq.jpg);
background-position:top right;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
float:left;
overflow:hidden !important;
width:200px;
height:320px;
}
#sideBarContentsInner{
width:200px;
}</style>
<div id="sideBar">
<div id="sideBarContents" style="display:none;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="link 1">text 1</a></li>
<li><a href="link 2">text 2</a></li>
<li><a href="link 3">text 3</a></li>
<li><a href="link 4">text 4</a></li>
</ul>
</div> </div>
<a id="sideBarTab" href="#"><img alt="sideBar" src="http://i46.tinypic.com/ao8h9u.jpg" title="sideBar"/></a>
</div>
*شرح الأوان*
الأحمر:. لوضع رابط النص الذي بالون الأخضر.
الأخضر:. لوضع نص لرابط الذي بالون الأحمر .
الأزرق:. لوضع عنوان لقائمة الروابط.
ملاحضة :. هذا كود css قابل للتعديل.
اي استفسار عن تركيب الأضافة او اي سؤال عن ظهور الأضافة انا جاهز للجميع
اخوكم مهند ناصر
الاشتراك في:
تعليقات الرسالة (Atom)
16 تعليق على قائمة روابط متحركة بشكل جميل لمدونات البلوجر
شكرا لك على هذه الأداة وعلى مجهودك ولكن المشكلة هى تغيير الأكواد فأرجو إيجاد أداة أسهل , وشكراً (أخوك محمد جمال)
مرحبا اخي محمد جمال شكرا على مرورك الأكثر من رااائع
بس اريد ان اسئلك اماذا تريد تغير الكود التغير يكوت بس في الروابط والطريقة سهلة واذا ما كا هذا قصدك اتمنا ان توضح اكثر وشكرا جزيلا اخوك مهند ناصر.
السلام عليكمـ
اضافة مميزة :)
شكرا لك ،،
بالتوفيق ،،
بارك الله فيك أستاذنا مهند . تم تشغيل الاداة وهى جميلة جدا بارك الله فيك . وفى انتظار جديدك إن شاء الله .
مدونة العبيد الفقير
http://mte31mte.blogspot.com/
nomo :. وعليكم السلام والرحمة والأكرام شكرا على مرورك وهذا من زوقك.
ابو مسلم :. اهلين اخي انت هذا من تواضعك اخي انت استذنا مدونتك لااائعة وتدوينات اروع والحمد لله على تفعيل الأَافة في مدونتك وتناسقة بشكل جميل شكرا للجميع على المرور الطيب.
اخوكم مهند ناصر
لم تنجح مع ياغالى
كوكتيل اهلا وسهلا فيك في مدونتي المتواضعة اخي انت اتيت بعد تغير قالب المدونة مباشرة وكان هناك بعض عدم الترتيب في الأكواد تم التصحيح جرب الأن وانشالله تنجح معك اخي.اخوك مهند ناصر
أخى للأسف كلما وضعت روابط لا تعمل للأسف عندى
ورود الحق: اهلا وسهلا في مدونتي لا اعلم بالزبط ما الذي حصلا معكي ولاكن الأضافة ما زالات تعمل في المعاينة ومع الذي جربو الأضافة مثل مدونة العبد الفقير المينة في احد التعليقات ولاكن ربما عند تغير الروابط يحدث خطء قلذلك انصح بستخدما النوت باد عند تغير الرابط والتأكد فقك بتغير الكلمات الموضحه في الأعلى فقط
مهند ناصر
استاذ مهند انا عملتها بس كل ما اضغط السهم اللي في السايد بار يفتحلي المدونه تاني ومبيظهرش الروابط اللي انا حاطاها
Dr/ walaa salah :اهلا بك اخي الكريم اخي اتوقع ان قالب مدونتك يحتوي على كود فتح الروابط بصفحه جديدة؟؟
فعلا انا عندي الكود ده لكن انا حزفته وطبقت الخطوات لكن لما بضغط على السايد بار مبيحصلش اي حاجه خالص
السلام عليكم اخي
اذا كنت انت من صمم الكود ..اريد ملفات الجافا لكي ارفعها من جديد فقد حذفت من الموقع المضيف والان لا تعمل لدي
شكرا اخى على الكود
لقد قمت بوضع الكود فى مدونتى وكان يعمل جيدا ولا توجد مشاكل
ولكنى منذ عدة ايام لاحظت انه لا يفتح حتى تظهر الروابط التى وضعتها
لا ادرى السبب
كنت قد غيرت خلفية الصورة برابط صورة اخرى وكان يعمل بعد ذلك جيدا ولكنه توقف الان
ليلى : للأسف لا املك الكود.
amly : نعم للأسف كود الجافا سكريبت تم حذفه من قبل الموقع الرئيسيي للأسف ولا املك الكود حاليا.
تحياتي
شكرا لك اخى مهند هل لى ان اسأل عن طريقة اخرى لوضع روابط البرامج الهامة لدى بخيث لا تؤثر على فتخ المدونة ويكون حجمها معقول
الروابط التى اضعها هى لبرامج الكتب والصوت
إرسال تعليق