بسم الله الرحمن الرحيم
والصلآة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته .
مساء الخير اجمعين :)
قائمه تحت الناف بار بشكل خورافي لمدونة بلوجر - menu under navbar Beautiful for blogger
اليوم واثناء تصفحي في المواقع , وجدت إضافة جميله فعلا فعلا , وهي قائمه توضع تحت الناف بار , الاضافة اخذتها من الموقع وجلبتها هنا لكي تستفيدوا منها واستفيد انا ايضا .
والصلآة والسلام على اشرف الانبياء والمرسلين سيدنا محمد عليه وعلى اله افضل الصلآة واتم التسليم
السلآم عليكم ورحمة الله وبركاته .
مساء الخير اجمعين :)
قائمه تحت الناف بار بشكل خورافي لمدونة بلوجر - menu under navbar Beautiful for blogger
اليوم واثناء تصفحي في المواقع , وجدت إضافة جميله فعلا فعلا , وهي قائمه توضع تحت الناف بار , الاضافة اخذتها من الموقع وجلبتها هنا لكي تستفيدوا منها واستفيد انا ايضا .
مايميز الاداة :
- مصنوعه فقط بالـ CSS "بدون اي تدخلات من الجيكويري"
- خفيفه ولآ تؤثر في حجم الصفحه .
- الوان هادئه وخفيفه على العين .
- منظر انيق .
حسننا نبداء في تركيبها .
اولآ : شاهد صورة :
ثانيا : شاهد مثال مباشر :
طريقة التركيب :
- ادخل مدونتك .
- التخطيط .
- إضافة اداة HTML/JavaScript.
- انسخ هذا الكود والصقه ( مع تعديل ما سأذكره اسفل الكود ) :
<style>
.category {
width: 182px;
float: left;
border-top: 8px solid #CCC;
display:block
margin: 0px;
padding: 6px 10px 15px 10px;
background: #FFF;
font-size: 1.2em;
font-family: georgia, times new roman, verdana;
font-weight: bold;
cursor: pointer;
text-shadow: 0 0 2px #CCC;
letter-spacing: inherit;
}
.category p {
margin: 0px;
font-family: Tahoma, 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size: 11px;
font-weight: normal;
color: #444;
letter-spacing: .03em;
}
#middle {
margin: 0 auto;
background: #FAFAFA;
width: 1010px;
border-left: 1px solid #F8F8F8;
border-right: 1px solid #F8F8F8;
}
#cat-4 {border-top: 8px solid #FF95F9;}
#cat-4:hover {background: #FF95F9;}
#cat-5 {border-top: 8px solid #9CFFB1;}
#cat-5:hover {background: #9CFFB1;}
#cat-6 {border-top: 8px solid #FF6767;}
#cat-6:hover {background: #FF6767;}
#cat-8 {border-top: 8px solid #9CDBFF;}
#cat-8:hover {background: #9CDBFF;}
#cat-9 {border-top: 8px solid #FFD29C;}
#cat-9:hover {background: #FFD29C;}
.category span.cat_title, #front-popular h3, #front-list .cat_title, #gallery h3 {
text-transform: lowercase;margin: 0;}
</style>
<div class='clearfloat' id='middle'>
<div class='category' id='cat-4' onclick='window.location.href='http://your-website.com/';'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-5' onclick='window.location.href='http://your-website.com/';'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-6' onclick='window.location.href='http://your-website.com/';'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-8' onclick='window.location.href='http://your-website.com/';'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div>
<div class='category' id='cat-9' onclick='window.location.href='http://your-website.com/';'>
<span class='cat_title'>اسم-الموضوع</span><p>وصف-الموضوع</p></div></div>
التعديلات على الكود :
- ابحث عن ( اسم-الموضوع )
- ابحث عن ( وصف-الموضوع )
- ابحث عن ( http://your-website.com )
واستبدلهم بما ترغب
ملاحظه : الاداة لم تكن لمدونات بلوجر - ولاكن قمت بتعديلها واضافة بعض التعديلات لكي تتناسب مع مدونات بلوجر
رجائي الخاص : عن النقل ذكر المصدر.
رجائي الخاص : عن النقل ذكر المصدر.
هذا كل شيء , اذا اعجبتك الإضافه فـ فضلا قدر جهدي واضف تعليق :)
ليست هناك تعليقات:
إرسال تعليق