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

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

و الصلاة و السلام على أشرف المرسلين

لا يخفى على أحد أهمية مظهر المدونة في كسب الزوار و جذبهم .. اليوم معنا إضافة جديدة و هي عبارة عن قائمة أفقية رائعة بتقنية css3, سهلة التعديل, نمر الآن إلى كيفية إضافتها :

نذهب كالعادة من مدونة بلوجر إلى قالب في القائمة في الجانب .. ثم نختار تحرير html, ثم نبحث عن ]]></b:skin>

و نضيف قبله الكود التالي :

??/*===MBL METRO UI Menu==*/

body {


ont-family:sans-serif;


f
}

a {


ation:none;

}

.mblm
text-deco
retromenu {

width:960px;


een and (max
margin:auto;

}

@media sc
r-width:960px) {

.mblmetromenu {


 */

.MblMe
width:100%;

}

}


/* MblMetroMen
utroMenu {

position:relative;

}

.om-nav {



display:none;

}

position:absolute;

width:100%;

z-index:999;
.om-ctrlbar {


padding:0px
width:100%;

height:48px;

}

.om-ctrlitems {

margin:auto;

;


ctrlitem {


height:48px;

display:inline-block;

text-align:center;

}

.om
-height:48px;

width:48px;

display:none;

cursor:pointer;

float:left;


ty=50)" !imp
opacity:0.5;

-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opac
iortant;

filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }


rosoft.Alpha(Opacity
.om-ctrlitem:hover {

opacity:0.8;

-ms-filter: "progid: DXImageTransform.Mi
c=80)" !important;

filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }


osoft.Alpha(Opacity=
.om-activectrlitem {

opacity:1 !important;

-ms-filter: "progid: DXImageTransform.Mic
r100)" !important;

filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }

.om-controlitems {


ft;

}

.om-
width:960px;

margin:auto;

}

.om-controlitem {

height:48px;

cursor:pointer;

}

.om-closenav {

float:l
emovenext {

float:right;

}

.om-itemholder {

margin:auto;

padding:20px 0px;

}


999;

left:0;

top:0;

}

.om-movenex
@media screen and (max-width:960px) {

.om-closenav {

position:absolute;

z-index:
9t {

position:absolute;

z-index:9999;

right:0;

top:0;

}

.om-controlitems {

width:100%;

}

.om-itemholder {


:5px;

floa
width:100%;

}

}

.om-centerblock {

display:inline-block;

}

.om-item {

display:none;

}

.om-showitem {

margi
nt:left;

display:none;

}

/* END MblMetroMenu */


/* TILE BUTTONS */

/* Standar Buttons */

.tile-bt {

text-align:center;



.tile-bt img {
cursor:pointer;

width:90px;

height:90px;

}

.tile-bt a {

display:block;

padding-top:12px;

text-decoration: !important;

}


nt-size:12px;

paddin
margin:0 auto 0 auto;

padding-bottom:5px;

height:48px;

width:48px;

position:relative;

display:block;

}

.tile-bt span {

f
og-bottom:10px;

display:block;

}

.tile-bt:active {

opacity:0.5;

}

/* End Standard Buttons */



/* Large Buttons */

.tile-bt-large {


important;


width:190px;

height:90px;

line-height:90px;

text-align:center;

cursor:pointer;

}

.tile-bt-large a {

display:block;

text-decoration: 
!}

.tile-bt-large img {

vertical-align: middle;

margin:auto;

padding:0px;

position:relative;

width:48px;

height:48px;

}

.tile-bt-large span {


large {

text-align:cen
vertical-align: middle;

display:inline;

}

.tile-bt-large:active {

opacity:0.5;

}

/* End Large Buttons */

/* Extralarge Buttons */

.tile-bt-extr
ater;

cursor:pointer;

width:190px;

height:190px;

}

.tile-bt-extralarge a {

display:block;

padding-top:52px;

text-decoration: !important;

}

.tile-bt-extralarge img {




display:block;

}


margin:0 auto 0 auto;

padding-bottom:22px;

height:80px;

width:80px;

position:relative;

display:block;

}

.tile-bt-extralarge span {

font-size:14px;

padding-bottom:20px
;.tile-bt-extralarge:active {

opacity:0.5;

}

/* End Extralarge Buttons */


/* END TILE BUTTONS */


/* SHADOW LIST */

.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {


 #fff;

-ms-box-shadow:0p
/*display:inline-block;*/

}

.shadow-white:hover {

box-shadow:0px 0px 6px 3px #fff;

-webkit-box-shadow:0px 0px 6px 3px #fff;

-moz-box-shadow:0px 0px 6px 3px #fff;

-o-box-shadow:0px 0px 6px 3p
xx 0px 6px 3px #fff;

}

.shadow-blue:hover {

box-shadow:0px 0px 6px 3px #38D1F7;

-webkit-box-shadow:0px 0px 6px 3px #38D1F7;

-moz-box-shadow:0px 0px 6px 3px #38D1F7;

-o-box-shadow:0px 0px 6px 3px #38D1F7;


x 6px 3px #AACA37;

-ms-box-shadow:0px 
-ms-box-shadow:0px 0px 6px 3px #38D1F7;

}

.shadow-green:hover {

box-shadow:0px 0px 6px 3px #AACA37;

-webkit-box-shadow:0px 0px 6px 3px #AACA37;

-moz-box-shadow:0px 0px 6px 3px #AACA37;

-o-box-shadow:0px 0
p0px 6px 3px #AACA37;

}

.shadow-red:hover {

box-shadow:0px 0px 6px 3px #E81750;

-webkit-box-shadow:0px 0px 6px 3px #E81750;

-moz-box-shadow:0px 0px 6px 3px #E81750;

-o-box-shadow:0px 0px 6px 3px #E81750;

-ms-box-shadow:0px 0px 6px 3px #E81750;




}

.shadow-black:hover {

box-shadow:0px 0px 6px 3px #444;

-webkit-box-shadow:0px 0px 6px 3px #444;

-moz-box-shadow:0px 0px 6px 3px #444;

-o-box-shadow:0px 0px 6px 3px #444;

-ms-box-shadow:0px 0px 6px 3px #444;

}

/* END SHADOW LIST */

/* BACK
GROUND LIST */

/* Solid Colors */

.solid-blue { background:#00BBE2; }

.solid-blue-2 { background:#2C84EE; }

.solid-darkblue { background:#044E94; }

.solid-violetred { background:#781766; }

.solid-red { background:#E51400;}


; }

.solid-coral { background:#CD5B
.solid-red-2 { background:#E81750; }

.solid-pink { background:#FF539B; }

.solid-purple { background:#D02090; }

.solid-orange { background:#FB8F02; }

.solid-orange-2 { background:#FF6600; }

.solid-orange-3 { background:#DD5F3
745; }

.solid-green { background:#67B239; }

.solid-green-2 {background:#96BF01; }

.solid-darkgreen { background:#016C38; }

.solid-olive { background:#999900}

.solid-grass { background:#CDCD00; }

.solid-darkred { background:#5F0000; }


}

.floatright { float:right; }

.n
.solid-gold { background:#FEE9AE; }

.solid-yellow { background:#F7D100; }

.solid-black { background:#000; }

.solid-smoke { background:#F5F5F5; }

/* End Solid Colors */


/* MISC */

.clearspace { clear: both; }

.floatleft { float:left;
 one { display: none !important; width:0px !important; }

.light-text {

color:#fff;

}

.dark-text {

color:#1e1e1e;

}

.gradient {

background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */


55,0.3) 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */

back
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,
2ground: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */

background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */

}



.margin-5 { margin:5px; }

ثم نعود من جديد إلى المدونة .. و نختار تخطيط ثم إضافة أداة .. ثم نختار Html/Javascript, ونضيف الكود التالي :

??<div class="mblmetromenu">

<div class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu" data-navid="om-nav">

<a class="gradient" href="aaaaaaaa" target="_blank">

<img alt="?????? ???????" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<div class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu" data-navid="om-nav">

<a class="gradient" href="aaaaaaa">

<img alt="?????? ?????" src="tttttt">

<span class="light-text"> xxxxx </span>

</a>

</div>

<div class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu" data-navid="om-nav2">

<a class="gradient" href="aaaaaaa">

<img alt="????? ?????" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<a href="http://www.ar-tech.tk" target="_blank" title="مدونة عماد الرافعي">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhZ0jI1m2sp6h68tiC3UzzkDYvN3tQC92X239TAhlzFMR1tmLEr-vDBYR6obsmjDUgKdjoOrwxBeRUQxh6xUjj3e6Z9uQ47kraHjMry_fvz6aRK2DZKOOkwdbU7l68se8N5cHt12y-5dDA/s1600/picasion.com_d5af0346ee8f5cd3f88a33fef5ea6b13.gif" border="0" alt="مدونة عماد الرافعي" style="position:absolute; top: 0px; right: 0px;" /></a>

<div class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu" data-navid="om-nav">

<a class="gradient" href="aaaaaa">

<img alt="?????" src="tttttt">

<span class="light-text">     xxxxx    </span>

</a>

</div>

<div class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu" data-navid="om-nav2">

<a class="gradient" href="aaaaaaaa">

<img alt="???????" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<div class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu" data-navid="om-nav2">

<a class="gradient" href="aaaaaaaa">

<img alt="??? ????" src="ttttttt">

<span class="light-text"> xxxxxxx </span></a>

</div>

<div class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu" data-navid="om-nav2">

<a class="gradient" href="aaaaaaa">

<img alt="youtube" src="tttttt">

<span class="light-text"> xxxxxxx </span>

</a>

</div>

<div class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu" data-navid="om-nav2">

<a class="gradient" href="aaaaaaa">

<img alt="Facebook" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<div class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu" data-navid="om-nav">

<a class="gradient" href="aaaaaaaa">

<img alt="???? ???????????" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<div class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu" data-navid="om-nav2"><a class="gradient" href="aaaaaaa">

<img alt="???????" src="tttttt">

<span class="light-text"> xxxxxx </span>

</a>

</div>

<div class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu" data-navid="om-nav">

<a class="gradient" href="aaaaaaa" target="_blank">

<img alt="????? ???????" src="tttttt">

<span class="light-text"> xxxxxxx </span>

</a>

</div>

ثم غير xxxxxx إلى أسماء التقسيمات.

و غير tttttt إلى روابط الصور.

و غير aaaaa إلى روابط التقسيمات.

و غير ؟؟؟؟؟؟؟ إلى أسماء الصور لتضمينها في محركات البحث .

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

أي مشكل يواجهك .. أكتبه في تعليق .. و سأصلحها شخصيا .. 

دمتم بود .

شجعنا بلايك أو بمشاركة على المواقع الإجتماعية

Tweet

Sharing Widget by Imad Rafai

عن التدوينة :

عن المدون

أنا عماد الرافعي من المغرب .. هدف المدونة هو نشر المعرفة بعيدا عن الربح
للتواصل معي :
- - -

روابط التدوينة قابلة للنسخ و اللصق :

Url :

Html :

BBC :