[ حصريا ] اضافة قائمة احترافية بتأثيرات رائعة الى مدونات بلوجر [ الشكل الثانى ]

[full_width]

اضافة قائمة احترافية بتأثيرات رائعة الى مدونات بلوجر

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

السلام عليكم و رحمة الله و بركاته و أهلا و سهلا بكم متابعينا الكرام فى هذه التدوينة ان شاء الله سوف أقدم لحضراتكم قائمة غاية فى الجمال و الأناقة و الروعة هذه القائمة الاحترافية لن تجد أكوادها ان شاء الله الا فى موسوعة بلوجر فنحن متميزون و كل شئ هنا حصريا ان شاء الله.

هذه القائمة الاحترافية تتميز بتأثيراته الاحترافية جدا و ذلك عند مرور الماوس على أى قسم من أقسام القائمة و هذه القائمة مثل التى توجد فى مدونة على نائل و هذه القائمة الاحترافية سوف تزيد من جمالية و أناقة مدونتك و بالتالى سوف يعود هذا على الزوار أى يجعل الزائر متابع جيد لمدونتك حيث أنه جمال الموقع من الأسباب الهامة فى جذب الزوار.

المعاينة

قوالب بلوجر إضافات بلوجر مسابقات و هدايا دروس بلوجر جديد فوتوشوب

طريقة التركيب على مدونات بلوجر

أولا قم بالذهاب الى قالب  و من ثم تحرير html 

ثانيا قم بالبحث عن الكود التالى

]]></b:skin>

و أضف بعده مباشرة الكود التالى

<style type='text/css'>
nav a {
position: relative;
display: inline-block;
margin: 0px 5px;
outline: none;
color: #fff;
text-decoration: none;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255,255,255,0.3);
font: normal 22px 'ge_dinar_oneregular' !important;
}
nav a:hover,
nav a:focus {
outline: none;
}
.ij-effect-20 a {
line-height: 2em;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
}
.ij-effect-20 a span {
position: relative;
display: inline-block;
padding: 5px 20px;
background: #E74C3C;
box-shadow: inset 0 3px #C0392B;
-webkit-transition: background 0.6s;
-moz-transition: background 0.6s;
transition: background 0.6s;
-webkit-transform-origin: 50% 0;
-moz-transform-origin: 50% 0;
transform-origin: 50% 0;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
transform-origin: 0% 50%;  color: white;
}
.ij-effect-20 a span::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
color: #E74C3C;
content: attr(data-hover);
-webkit-transform: rotateX(270deg);
-moz-transform: rotateX(270deg);
transform: rotateX(270deg);
-webkit-transition: -webkit-transform 0.6s;
-moz-transition: -moz-transform 0.6s;
transition: transform 0.6s;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
pointer-events: none;
}
.ij-effect-20 a:hover span,
.ij-effect-20 a:focus span {
background: rgba(203, 65, 50, 1);
}
.ij-effect-20 a:hover span::before,
.ij-effect-20 a:focus span::before {
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
transform: rotateX(0deg);
}
#FiXeD-Navigation {
position: fixed;
z-index: 99999999999999999999999999999999999999999999999999999999;
width: 100%;
margin: auto !important;
}
.menu-homex {
display: block;
height: 36px;
width: 800px;
margin: auto;
background: #fff;
border-bottom: 3px solid #E74C3C;
position: relative;
}
.menu-homex li {
display: block;
float: right;
position: relative;
}
.menu-homex li a {
font: bold 15px 'GE_DINAR_ONEREGULAR';
color: rgb(67, 90, 107);
padding: 5px 10px 7px;
display: block;
}
.home:before {
content: '';
position: absolute;
width: 28px;
height: 5px;
background: #fff;
top: 6px;
right: 6px;
box-shadow: 0 9px 0 #fff, 0 18px 0 #fff;
z-index:99999999999;
}
.home:after {
content: '';
display: block;
background: #E74C3C;
position: absolute;
z-index: 9999999;
height: 35px;
width:40px;
top: 0;
right: 0;
}
.home {
padding-right: 35px;
}
.home a {
color: #E74C3C !important;
}
li.t-nav:before {
content:  "\f053";
position: absolute;
right: 0;
display: block;
top: 11px;
font-family: fontawesome;
}
li.t-nav {
padding-right: 2px;
margin-right: 10px !important;
}
li.conta button {
font-size: 0px;
background: #E74C3C;
width: 35px;
height: 34px;
padding: 0px !important;
display: block;
}
li.conta button:before {
content:  "\f0e0";
color: #fff;
font: normal 18px 'fontawesome';
top: 8px;
text-align: center;
right: 9px;
position: absolute;
}
li.conta {
float: left !important;
text-align: right;
}
  </style>

الخطوة الأخيرة قم بالبحث عن المكان الذى تريد أن تظهر به القائمة و قم بلصق الكود التالى مع تغيير ما يناسبك

<nav class='ij-effect-20'>
<a href='http://smart-informatics.blogspot.com/search/label/قوالب بلوجر'><span data-hover='قوالب بلوجر'>
قوالب بلوجر
</span>
</a>
<a href='http://smart-informatics.blogspot.com/search/label/ إضافات بلوجر'><span data-hover='إضافات بلوجر'>
 إضافات بلوجر
</span>
</a>
<a href='http://smart-informatics.blogspot.com/search/label/مسابقات و هدايا'><span data-hover='مسابقات و هدايا'>
مسابقات و هدايا
</span>
</a>
<a href='http://smart-informatics.blogspot.com/search/label/دروس بلوجر'><span data-hover='دروس بلوجر'>
دروس بلوجر
 </span>
</a>
<a href='http://smart-informatics.blogspot.com/search/label/جديد'>
<span data-hover='جديد'>
جديد</span></a>
<a href='http://smart-informatics.blogspot.com/search/label/فوتوشوب'><span data-hover='فوتوشوب'>
فوتوشوب
</span>
</a>
</nav>

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