إضافة الإيقونات بشكل انسيابي وجميل. إضافات css لمدونات بلوجر

بسم الله الرحمان الرحيم

مرحبا بكم في 

مدونة استفد

سأشرح لكم إن شاء الله طريقة سهلة لإضافة قائمة منسدلة للبلوجر وهي احترافية 

عندما تزور مدونة أو موقع ما. فغالبا ماتجد قائمة أو إيقونة

 تتبعك أينما ذهبت الصفحة. يعني لو كنت في أسفل 

الصفحة ترى الإيقونة. وإن كنت في الأعلى كذلك تراها. 

جميلة أليس كذلك. و إضافة هذا اليوم هي مثل ما سبق 

وقلته. وهي قائمة جانبية تبقى ثابثة وسط الصفحة.يعني 

ولو قام الزائر بالنزول لأسفل الصفحة فستبقى دائما القائمة 

أمام عينيه.

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

جداا.

أما الآن فبسم الله ننتقل لتطبيق الدرس:

1- ادخل لحسابك في البلوجر ثم تصميم - ثم تحرير html

ملاحظة:لابد أخي المدون أختي المدونة أن تأخذ نسخة احتياطية من القالب. حتى لو حدث خطأ ما سترجع للقالب المنسوخ.

2-  قم ابحث عن الكود التالي:

]]></b:skin> 

ثم الصق هذا الكود قبله

كود:

<div dir="ltr" style="text-align: left;">/* CSS Style for Horizontal Menu - info @ http://www.2-seo.com/vb*/ <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/AVvXsEi5Nt0BQT3pFWZuzmjDSv453kQNECF4qVn4JEiLxKhUmrqSxf8RgZ7vP0-MUttQU9zIMmEwgdJKcalNJdd55EPKL-jF-iXXybiut6w3FuJ2GXnAuAEScZmSCF9eduAlIgffqOqbqxT21-A/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://www.2-seo.com/vb */

3-قم بحفظ القالب. وانتقل إلى عناصر الصفحة.

4-قم بإضافة أداة html/javascript كما توضح الصورة:

5-ضع هذا الكود:

كود:

<div style='position: fixed; top: 40%; left: 0%;'/>      
<ul id="navigationMenu">       
<li>       
<a class="Home" href="

كود:

http://estafid.blogspot.com">       
<span>الرئيسية</span>       
</a>       
<li> 
</li>      
 
    <a class="about" href="http://estafid.blogspot.com">         
span>عن المدون</span>         
<
</a>         
i>    
</li> 
      <
l    
ss="services" href="http://estafid.blogspot.com">         
<a cl
a
span>خدمات</span>         
<
</a> 
/li> 
      
<<li>        
folio" href="http://estafid.blogspot.com">         
<a class="por
t
span>فهرس المدونة</span>         
<
</a>         
i>    
</li> 
      <
l    
ss="contact" href="http://estafid.blogspot.com"> 
<a cl
a
     <span>إتصل بنا</span>         
</a>         
</ul>         
</li>         
"http://widget-blogs.blogspot.com/"  rel="nofollow" target="_blank"><small>Get The Fixed Menu  Gadget</small></a>
</div><a  href
=

-أما الآن فقم بتغير ما لون بالأحمر بروابط مدونتك، وما لون 


بالأخضر بأسماء 

الروابط

7-قم بحفظ القالب. ثم اسحبها للأسفل ثم قم بالمعاينة 


بنفسك.

ومبروك عليك الإضافة

وإلى هنا ينتهي هذا الدرس الجميل جدا

أتمنى من الله العلي القدير أن يعجبكم الدرس.

لا تبخلو علينا بردودكم الحلوة والمشجعة

Tweet

Sharing Widget byestafid

يمكنك نسخ روابط هذه التدوينة
URL
HTML
BBCode

التصنيف : css