اضافة قائمة أفقية بمدونة بلوجر

 إضافة قائمة أفقية بمدونة بلوجر

قبل أن نضيف أي كود  بمدونة بلوجر ، يجب أن نأخذ  نسخة إحتياطية من قالب المدونة ،  ولكي نضيف كود قائمة أفقية بمدونة بلوجر بمدونة بلوجر  نتبع الخطوات التالية :

طريقة التركيب

1- توجه للوحة التحكم الرئيسية لمدونتك

2- تصميم

3-تحريرhtml

4- توسيع للقالب

أما للمستخدمي لوحة التحكم الجديد

1 -لوحة التحكم الرئيسية بمدونتك

2-أختار من القائمة (قالب)

3- تحريرhtml

4- متابعة

5- توسيع قوالب عناصر واجهة المستخدم 

شرح تفصيلي لطريقة التركيب  بالنسبة لمحرر بلوجر  الحديث

1- ندخل الى لوحة تحكم المدونة .  

 2- نضغط على كلمة  قالب  من القائمة الجانبية   مثل الصورة التالية :

بعد الضغط على كلمة قالب سوف تظهر لنا شاشة مثل الصورة التالية:

 ومن  تلك الصورة السابقة نضغط على تحرير   HTML    ، لكي يظهر لنا الصورة التالية:  

3- نبحث عن الكود التالي (اضغط على CTRL + F من الكيبورد لظهور عملية البحث ):

]]></b:skin>

وبعد أن نجد الكود السابق نضع قبله مباشرة الكود التالي : 

#stickey_footer { /* This will make your footer stay where it is */ background: none repeat scroll 0 0 #1D1D1D; border: 1px solid rgba(0, 0, 0, 0.3); bottom: 0; font-family: Arial, Helvetica, sans-serif; height: 40px; right: 50%; margin:0 -490px 0 auto; padding: 0 10px; position: fixed; text-shadow: 1px 1px 1px #000000; width: 960px;} /* border curves */#stickey_footer { -moz-border-radius: 10px 10px 0px 0px; -webkit-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; }/* hover effect */#stickey_footer:hover { background: none repeat scroll 0 0 #2b2a2a;}/* shadow for the footer*/#stickey_footer { -moz-box-shadow:0px 0px 11px #191919; -webkit-box-shadow:0px 0px 11px #191919; box-shadow:0px 0px 11px #191919;}#footer_menu { margin: 0; padding: 0; width:auto;}#footer_menu li { list-style: none; float: right; font-size:13px; padding:12px 14px 14px 14px; border-left:1px solid rgba(0, 0, 0, 0.4); background: rgba(0, 0, 0, 0.1); }#footer_menu .imgmenu { padding:5px 14px 3px 8px; float:right; background:url"“http://1.bp.blogspot.com/-XLLTxGA_jqc/T9rcf8eKSiI/AAAAAAAAFZU/rMZVGE75Nug/s1600/home.png") 13px 5px no-repeat; width:36px; height:30px; border:none; border-left:1px solid rgba(0, 0, 0, 0.4); cursor:pointer; }#footer_menu li:hover { background:#202020; /* Fallback color for old browsers */ background: rgba(0, 0, 0, 0.3);}#footer_menu .imgmenu:hover { background:url"http://4.bp.blogspot.com/-E0_4VUI1muE/T9rchPsIuDI/AAAAAAAAFZc/sWD2KAI4d6U/s1600/home_hover.png") 13px 5px no-repeat;}#footer_menu li a { display: block; color: #cccccc; text-decoration: none;}#footer_menu li a:hover { color: #ffffff;}#footer_menu li span { display:none;}#stickey_footer #social_icons { float:left; /* social icons positions */ width:auto; margin:5px 15px 0px; padding:0px; overflow:hidden;}#stickey_footer #social_icons li { margin-left:12px; /* 12px is the space between each one of them */ float:right; width:24px; padding:0px; height:32px; list-style:none; _margin-left:0px; /* this is for IE6 only */}

4-  نضغط على زر حفظ التغيرات   لكي يتم حفظ القالب .

بعد ذلك 

بالنسبة لمستخدمي لوحة التحكم القديمة

يتم إختيار

تصميم 

ثم

أضافة أداة 

ثم

تهيئة HTML/JavaScript

أما بالنسبة لمستخدمي لوحة التحكم الجديدة

يتم إختيار

تخطيط

ثم

أضافة أداة 

ثم

تهيئة HTML/JavaScript

 

وبعد ذلك نقوم بإضافة الكود التالي داخل الأداة HTML/JavaScript  :

3 - ثم نضيف الكود التالي داخل الأداة :

  <div id="stickey_footer">
 <!– begin footer menu –>
<ul id="footer_menu">
 <li><a href="#"><span>الرئيسية</span></a></li>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 <li><a href="#">تعديل</a>
 </li></li></li></li></li></ul>
 <ul id="social_icons">
 <!–social icons –>
 <li><a href="http://twitter.com/username" ><img src='http://1.bp.blogspot.com/-N86wA4c0ocE/T9rfG1Tav0I/AAAAAAAAFZ0/VPLB2zMpTgs/s1600/twitter.png' alt="تويتر" /><span>Twitter</span></a></li>
 <li><a href="http://digg.com/username" ><img src='http://3.bp.blogspot.com/-s8zEJZ_OcnQ/T9rfIcRCDcI/AAAAAAAAFZ8/I34iNs4r-HU/s1600/digg.png' alt="digg" /><span>Digg</span></a></li>
 <li><a href="http://flickr.com/username" ><img src='http://1.bp.blogspot.com/-SUIS3JleQ6c/T9rfDektT-I/AAAAAAAAFZs/YLqS72DjGAA/s1600/flickr.png' alt="فلكر" /><span>Flickr</span></a></li>
<li><a href="https://plus.google.com/u/0/username" ><img src='http://3.bp.blogspot.com/-RBqQ8_hbAEE/UAXR5B26-_I/AAAAAAAADEc/wRvRUJG9NOs/s1600/g-plus-icon-32x32.png' alt="قوقل بلس" /><span>Flickr</span></a></li>
 <li><a href="http://fb.com/username" ><img src='http://4.bp.blogspot.com/-CykBbA-jWuE/T9rel2HNPTI/AAAAAAAAFZk/7Cd_h50FH70/s1600/facebook.png' alt="فيس بوك" /><span>Facebook</span></a></li>
 </!–social></ul></!–></div>

الأسماء المشار له بتظليل الأصفر هي أسماء وأقسام المدونة (عدلها بما يتوافق مع تسميات مدونتك)

# المشار له باللون الأزرق في الكود السابق نضع مكانه روابط الأقسام التي تضيفها .

username المشار له باللون الأحمر في الكود السابق هي أسماء صفحتك في فيس بوك .قوقل بلس. تويتر.فلكر

 جزى الله خيرا كل من ساهم فيه