اضف قائمة جانبية وعائمة بتقنية css لمدونات بلوجر
هده الاضافة كباقي الاضافات التى تكون عائمة علئة المدونة وعملها واضح وهو التسهيل على الزوار تصفح بعض الأشياء في مدونتك والتي تريد انت ان تضهرها لزوارك لان هده الاضافة تكون ضاهرة للكل وخصوصا أن الاضافة بتقنية css ادن فهده هي الاضافة هي التي تبحث عنها لمدونتك ,حال هده الاضافات أنها عملية ولاتأخد مساحة من مدونتك .ويمكنك تركيبها بسهولة وخفة
هكدا ستضهر الاضافة عند التأشير عليها
طريقة التركييب
لاتنسى اخد نسخة احتياطية للقالب
1.لوحة التحكم
2.تخطيط أوتصميم
3. ثم تحريرhtml
4.توسيع القالب
ثم ابحث عن الكود التالي :بالضغط على alt + f
ثم مباشرة فوقه أضف الكود التالي
قم بحفض القالب الان
المرحلة التانية
غير روابط مدونتي التي بالأحمر الى الروابط التي تريد استعمالها
ثم يمكنك تغير الكلمات التي بالأزرق لكن يفضل تركها كما هي لان كل كلمة تتماشى و أيقونتها في الاداة
7- ثم احفض الأداة
ومبروك عليك
هكدا ستضهر الاضافة عند التأشير عليها
طريقة التركييب
لاتنسى اخد نسخة احتياطية للقالب
1.لوحة التحكم
2.تخطيط أوتصميم
3. ثم تحريرhtml
4.توسيع القالب
ثم ابحث عن الكود التالي :بالضغط على alt + f
ثم مباشرة فوقه أضف الكود التالي
<div dir="ltr" style="text-align: left;">/* CSS Style for Horizontal Menu - info @ http://widget-blogs.blogspot.com*/ <br />#hor { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#hor li { <br />float:left; <br />padding:5px; <br />} </p> <p>#hor a { <br />display:block; <br />height: 12px; <br />text-indent:-999em; <br />} </p> <p>#hor a.home { <br />width:46px; <br />background:url(vHome.gif) no-repeat 0 0; <br />} </p> <p>#hor a.download { <br />width:94px; <br />background:url(vDownload.gif) no-repeat 0 0; <br />} </p> <p>#hor a.contact { <br />width:74px; <br />background:url(vContact.gif) no-repeat 0 0; <br />} </p> <p>/* CSS Style for Vertical Menu */ </p> <p>#ver { <br />list-style:none; <br />padding:0; <br />margin:0; <br />} </p> <p>#ver li { <br />padding:2px; <br />} </p> <p>#ver li a { <br />display:block; <br />height:12px; <br />text-indent:-999em; <br />} </p> <p>#ver a.home { <br />width:47px; <br />background:url(hHome.gif) no-repeat 0 0; <br />} </p> <p>#ver a.download { <br />width:95px; <br />background:url(hDownload.gif) no-repeat 0 0; <br />} </p> <p>#ver a.contact { <br />width:74px; <br />background:url(hContact.gif) no-repeat 0 0; <br />} </p> <p>.clear { <br />clear:both; <br />} </p> <p>*{ <br />/* A universal CSS reset */ <br />margin:0; <br />padding:0; <br />} </p> <p>#navigationMenu body{ <br />font-size:14px; <br />color:#666; <br />background:#111 no-repeat; </p> <p>/* CSS3 Radial Gradients */ <br />background-image:-moz-radial-gradient(center -100px 45deg, circle farthest-corner, #444 150px, #111 300px); <br />background-image:-webkit-gradient(radial, 50% 0, 150, 50% 0, 300, from(#444), to(#111)); </p> <p>font-family:Arial, Helvetica, sans-serif; <br />} </p> <p>#navigationMenu li{ <br />list-style:none; <br />height:39px; <br />padding:2px; <br />width:40px; <br />} </p> <p>#navigationMenu span{ <br />/* Container properties */ <br />width:0; <br />left:38px; <br />padding:0; <br />position:absolute; <br />overflow:hidden; </p> <p>/* Text properties */ <br />font-family:'Myriad Pro',Arial, Helvetica, sans-serif; <br />font-size:18px; <br />font-weight:bold; <br />letter-spacing:0.6px; <br />white-space:nowrap; <br />line-height:39px; </p> <p>/* CSS3 Transition: */ <br />-webkit-transition: 0.25s; </p> <p>/* Future proofing (these do not work yet): */ <br />-moz-transition: 0.25s; <br />transition: 0.25s; <br />} </p> <p>#navigationMenu a{ <br />background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9HaezE0sWGWGX5bBa0GerCIdjCIj1UnJ5kgmDXyKJthfuAM5A8PIeTUPD9DSsBqa8YTxrs22eIlSd0dD6Fy37jXHADEtG6Jq-z1e6ejRDyMsHrbPY7taxq2W0yUMUZvS682K3fERY9FQ/s1600/navigation.jpg') no-repeat; </p> <p>height:39px; <br />width:38px; <br />display:block; <br />position:relative; <br />} </p> <p>/* General hover styles */ </p> <p>#navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; } <br />#navigationMenu a:hover{ <br />text-decoration:none; </p> <p>/* CSS outer glow with the box-shadow property */ <br />-moz-box-shadow:0 0 5px #9ddff5; <br />-webkit-box-shadow:0 0 5px #9ddff5; <br />box-shadow:0 0 5px #9ddff5; <br />} </p> <p>/* Green Button */ </p> <p>#navigationMenu .home { background-position:0 0;} <br />#navigationMenu .home:hover { background-position:0 -39px;} <br />#navigationMenu .home span{ <br />background-color:#7da315; <br />color:#3d4f0c; <br />text-shadow:1px 1px 0 #99bf31; <br />} </p> <p>/* Blue Button */ </p> <p>#navigationMenu .about { background-position:-38px 0;} <br />#navigationMenu .about:hover { background-position:-38px -39px;} <br />#navigationMenu .about span{ <br />background-color:#1e8bb4; <br />color:#223a44; <br />text-shadow:1px 1px 0 #44a8d0; <br />} </p> <p>/* Orange Button */ </p> <p>#navigationMenu .services { background-position:-76px 0;} <br />#navigationMenu .services:hover { background-position:-76px -39px;} <br />#navigationMenu .services span{ <br />background-color:#c86c1f; <br />color:#5a3517; <br />text-shadow:1px 1px 0 #d28344; <br />} </p> <p>/* Yellow Button */ </p> <p>#navigationMenu .portfolio { background-position:-114px 0;} <br />#navigationMenu .portfolio:hover{ background-position:-114px -39px;} <br />#navigationMenu .portfolio span{ <br />background-color:#d0a525; <br />color:#604e18; <br />text-shadow:1px 1px 0 #d8b54b; <br />} </p> <p>/* Purple Button */ </p> <p>#navigationMenu .contact { background-position:-152px 0;} <br />#navigationMenu .contact:hover { background-position:-152px -39px;} <br />#navigationMenu .contact span{ <br />background-color:#af1e83; <br />color:#460f35; <br />text-shadow:1px 1px 0 #d244a6; <br />} </p> <p>/*End menu css - info @ http://chamelcool.blogspot.com */
قم بحفض القالب الان
المرحلة التانية
2. تخطيط او تصميم
3.عناصر الصفحة
4. اضف اداة
6.اختار Html/Javascript
ملاحضة :
غير روابط مدونتي التي بالأحمر الى الروابط التي تريد استعمالها
ثم يمكنك تغير الكلمات التي بالأزرق لكن يفضل تركها كما هي لان كل كلمة تتماشى و أيقونتها في الاداة
7- ثم احفض الأداة
ومبروك عليك
1 التعليقات:
مجهود رائع واضافه حلوه
شكرااا
http://abda3design.blogspot.com/
إرسال تعليق
ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.