قائمة بتقنية css3 لاقسام مدونة بلوجر بالايكونات المعبره

الخميس، 4 أغسطس 2011

قائمة بتقنية css3 لاقسام مدونة بلوجر بالايكونات المعبره

8:19 ص Mobile Bein 6 تعليقات نشر في: اضافات css

السلام عليكم ورحمة الله وبركاته,, كما وعدتكم بانى سوف اقوم بطرح سيلا من الاضافات والدروس لمدونة بلوجر هذا الشهر,

فليس من عادتى التقطير على من يسعى لتحسين شكل ومستوى واداء مدونته ووضغ اضافه كل شهر مثلما يفعل البعض.

في مدونة تقارب ستجد تحديثات جديده كل يوم واضافات ودروس متنوعه لتحسين مدونة بلوجر وظهورها بشكل انيق.

اضافة اليوم او درس اليوم يتحدث عن القائمه الموجوده فوق رسائل المدونه وتحت الهيدر مباشرة وغالبا مايضع

المدونين فيها روابط تسميات واقسام مدونتهم او رابط اتصل بنا وما الى شابه,, على كل حال الجميع يعرف فائدة

تلك القائمه فهمي بلا شك تسهل علي القراء والزوار والمتابعين الوصول السريع الي اقسام مدونتك..

واليوم اثناء تجولي في احد المواقع رايت قائمه قمة في الاناقه والجمال واحببت ان اشارككم اياها وهى كما تروها بالصورهبالاعلى.

والصوره توضح شكل القائمه اثناء مرور الماوس علي احد الاقسام فيها وشكل القوائم المنسدله التي تتدلى منها حقيقة روعه روعه.

بالتاكيد اعجبتك هيا معي نطبقها سويا علي مدونة بلوجر اقصد مدونتك انت ---->>>>

* سجل الدخول الي لوحة تحكم مدونتك.

* اضغط علي تصميم ثم تحرير HTML.

* ابحث عن هذا الكود <head> بواسطة CTRL+F.

* انسخ الكود الموجود بالاسفل وضعه بعد هذا الكود مباشرة <head>

<link href="https://4636338866364619332-a-1802744773732722657-s-sites.googlegroups.com/site/mauganj1/megamenu.css" rel="stylesheet" type="text/css"></link>

* الان قم بحفظ قالب مدونتك.

* قم بالذهاب مره اخرى الي عناصر تصميم الصفحه.

* انت الان في --->>> عناصر تصميم الصفحه!!!.

* قم باختيار اداه جديده ولكن حاول ان يكون موضع الاداه اسفل الهيدر وفوق رسائل المدونة.

* لا تنسى ان تكون الاداه من هذا النوع HTML/javascript.

* ضع الكود الموجود في الاسفل داخل الاداه الجديده.

<ul id="css3menu" class="topmenu" style="position: relative;top: -25px">
 <li class="topfirst"><a href="#" title="Item 0"><img src="http://santabanta.mywapblog.com/files/clock.png" alt="Item 0"/>Item 0</a></li>
 <li class="topmenu"><a href="#" title="Item 1"><span><img src="http://santabanta.mywapblog.com/files/attachment.png" alt="Item 1"/>Item 1</span></a>

 <div class="submenu" style="width:276px;">
 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 0"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 0"/>Item 1 0</a></li>
  <li><a href="#" title="Item 1 1"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 1</a></li>
  <li><a href="#" title="Item 1 2"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 2</a></li>
  <li><a href="#" title="Item 1 3"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 3</a></li>
 </ul></div>

 <div class="column" style="width:33.33%"><ul>
  <li><a href="#" title="Item 1 4"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 4</a></li>
  <li><a href="#" title="Item 1 5"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 5</a></li>
  <li><a href="#" title="Item 1 6"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 6</a></li>
  <li><a href="#" title="Item 1 7"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 7</a></li>
 </ul></div>
 <div class="column" style="width:33.33%"><ul>

  <li><a href="#" title="Item 1 8"><img src="http://santabanta.mywapblog.com/files/accept.png" alt="Item 1 8"/>Item 1 8</a></li>
  <li><a href="#" title="Item 1 9"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 9</a></li>
  <li><a href="#" title="Item 1 10"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 10</a></li>
  <li><a href="#" title="Item 1 11"><img src="http://santabanta.mywapblog.com/files/accept.png"/>Item 1 11</a></li>
 </ul></div></div>

 </li>

 <li class="topmenu"><a href="#" title="Item 2"><img src="http://santabanta.mywapblog.com/files/chart-pie.png" alt="Item 2"/>Item 2</a></li>
 <li class="toplast"><a href="#" title="Item 3"><img src="http://santabanta.mywapblog.com/files/lock.png" alt="Item 3"/>Item 3</a></li>
</ul>