ستة قوائم افقيه لمدونات بلوجر بتنقنية الجيكويري وبلغة CSS3

تقنية الجي كويري الاخف من اي صيغ أكواد اخرى كما انها الاكثر اناقة ..اليوم لدينا 6 قوائم افقية في

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

او التصنيفات..

طريقة تركيب هذه الإضافة سهلة جدا لاضافة القائمة نمر بالمراحل الثلاث التالية :

1_ اضافة السكريبت

2_ اضافة تاثيرات css

3_ اضافة القائمة

1. اضافة السكريبت

من لوحة تحكم بلوجر اذهب لـ تصميم >> تحرير HTML ابحث عن :

</head>

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

الجيكويري في مدونتك فانت لستبحاجه لوضع الكود ذو اللون الاحمر)

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script src="http://code.helperblogger.com/lavalamp-menu.js" type="text/javascript"></script>

2. اضافة تاثيرات css

ابحث عن : ]]></b:skin>

ثم نلصق الكود اسفله فوقه مباشرة :

/*LAVALAMP

MENU BY http://www.helperblogger.com/ START*/ .lavalamp {

position: relative; border: 1px solid #d6d6d6; background: #fff;

padding: 15px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); border-radius : 10px;

-moz-border-radius : 10px; -webkit-border-radius : 10px;

background : -webkit-gradient(linear, left top, left bottom,

from(rgb(240,240,240)), to(rgb(204,204,204))); background :

-moz-gradient(linear, left top, left bottom, from(rgb(240,240,240)),

to(rgb(204,204,204))); height: 18px; font-family: calibri; }

.magenta { background : rgb(190,64,120); background :

-webkit-gradient(linear, left top, left bottom, from(rgb(190,64,120)),

to(rgb(177,24,91))); background : -moz-gradient(linear, left top, left

bottom, from(rgb(190,64,120)), to(rgb(177,24,91))); border: 1px solid

#841144; } .cyan { background : rgb(64,181,197); background :

-webkit-gradient(linear, left top, left bottom, from(rgb(64,181,197)),

to(rgb(7,165,187))); background : -moz-gradient(linear, left top, left

bottom, from(rgb(64,181,197)), to(rgb(7,165,187))); border: 1px solid

#2f8893; } .yellow { background : rgb(255,199,79); background :

-webkit-gradient(linear, left top, left bottom, from(rgb(255,199,79)),

to(rgb(255,188,43))); background : -moz-gradient(linear, left top, left

bottom, from(rgb(255,199,79)), to(rgb(255,188,43))); border: 1px solid

#c08c1f; } .orange { background : rgb(255,133,64); background :

-webkit-gradient(linear, left top, left bottom, from(rgb(255,133,64)),

to(rgb(255,107,24))); background : -moz-gradient(linear, left top, left

bottom, from(rgb(255,133,64)), to(rgb(255,107,24))); border: 1px solid

#c04f11; } .dark { background : rgb(89,89,89); background :

-webkit-gradient(linear, left top, left bottom, from(rgb(89,89,89)),

to(rgb(54,54,54))); background : -moz-gradient(linear, left top, left

bottom, from(rgb(89,89,89)), to(rgb(54,54,54))); border: 1px solid

#272727; } .magenta li a , .cyan li a, .yellow li a , .orange li a,

.dark li a{ color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.40); }

.lavalamp a { text-decoration: none; color: #262626;

line-height: 20px; } .lavalamp ul { margin: 0; padding: 0;

z-index: 300; position: absolute; } .lavalamp ul li {

list-style: none; float:left; text-align: center; }

.lavalamp ul li a { padding: 0 20px; text-align: center; }

.floatr { position: absolute; top: 10px; z-index: 50;

width: 70px; height: 30px; border-radius : 8px;

-moz-border-radius : 8px; -webkit-border-radius : 8px;

background : rgba(0,0,0,.20); -webkit-transition: all .4s

ease-in-out; -moz-transition: all .4s ease-in-out; } /*LAVALAMP

MENU BY http://www.helperblogger.com/ END*/

الآن إضغط على زر حفظ القالب 3. اضافة القائمة

من تصميم >> عناصر الصفحة

اضافة اداة (اسفل الهيدر)

اختر اداة HTML/JavaScript

انسخ ثم الصق الكود اسفله

<div class="lavalamp dark">

<ul>

<li class="active"><a href=""> Home </a></li>

<li><a href=" # ">About</a></li>

<li><a href=" # ">Blog</a></li>

<li><a href=" # ">Services</a></li>

<li><a href=" # ">Portfolio</a></li>

<li><a href=" # ">Contacts</a></li>

<li><a href=" # ">Back to Article</a></li>

<li><<a href=" # ">How it Works?</a></li>

</ul>

<div class="floatr"></div>

</div>

والان لم يتبقى سوى تخصيص القائمة :
استبدل # بروابط صفحاتك
استبدل Home ,About, Services ...بصفحاتك الخاصة حسب رغبتك
اما لتغيير لون القائمة استبدل <div class="lavalamp dark"> باللون المناسب في القوائم اسفله :

<div class="lavalamp">
<div class="lavalamp magenta">
<div class="lavalamp cyan">
<div class="lavalamp yellow">
<div class="lavalamp orange">
<div class="lavalamp dark">