اضافة رائعة بتقنية css

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

ويوفر مصمم نماذج بلوجر طرق تقليدية وبسيطة لتصميم القوائم ولكن أود أن أقدم لكم قائمة بشكل جديد ومختلف وهي إضافة القوائم الرأسية بشكل أيقونات ثابتة لأقسام المدونة ويمكن وضعها فاي مكان بالقالب.

الخطوات التالية هي مثالية بالنسبة للمبتدئين الذين لديهم أقل عن معرفة لغة HTML الإرشادات التالية هي واضحة للغاية بحيث يمكن لأي شخص بسهولة تطبيقها. اتبع التعليمات التالية بشكل صحيح.
الخطوة الأولي : إضافة الجزء الأول CSS:

انتقل إلى لوحة التحكم توجه إلى صفحة >> القالب > ثم> تحرير HTML

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

الآن قم بالبحث عن ]]></b:skin> ثم قبله مباشرة ألصق الكود الآتي:

للبحث اضغط على CTRL+F




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




















body {







a {













font-family:sans-serif;





}



.mblmetromenu {








text-decoration:none;
}
 width:960px;



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



margin:auto;
}
 .mblmetromenu {
 width:100%;
 }
}




 position:relative;


/* MblMetroMenu */
.MblMetroMenu {
}
.om-nav {
 position:absolute;



 height:48px;


width:100%;
 z-index:999;
 display:none;
}
.om-ctrlbar {
 width:100%;
}



 display:inline-block;



.om-ctrlitems {
 margin:auto;
 padding:0px;
 height:48px;
 text-align:center;
}



 opacity:0.5;


.om-ctrlitem {
 height:48px;
 width:48px;
 display:none;
 cursor:pointer;
 float:left;



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


-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;
.om-ctrlitem:hover {
 opacity:0.8;



.om-activectrlitem {


-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;
 filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }
 opacity:1 !important;



 margin:auto;


-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;
 filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }
.om-controlitems {
 width:960px;
}
.om-controlitem {
 height:48px;
 cursor:pointer;
}
.om-closenav {



  z-index:9999;


float:left;
}
.om-movenext {
 float:right;
}
.om-itemholder {
 margin:auto;
 padding:20px 0px;
}
@media screen and (max-width:960px) {
 .om-closenav {
  position:absolute;
  z-index:9999;
  left:0;
  top:0;
 }
 .om-movenext {
  position:absolute;
  right:0;



/* Standar Buttons */


top:0;
 }
 .om-controlitems {
  width:100%;
 }
 .om-itemholder {
  width:100%;
 }
 }
.om-centerblock {
 display:inline-block;
}
.om-item {
 display:none;
}
.om-showitem {
 margin:5px;
 float:left;
 display:none;
}
/* END MblMetroMenu */

/* TILE BUTTONS */



 display:block;


.tile-bt {
 text-align:center;
 cursor:pointer;
 width:90px;
 height:90px;
}
.tile-bt a {
 display:block;
 padding-top:12px;
 text-decoration: !important;
}
.tile-bt img {
 margin:0 auto 0 auto;
 padding-bottom:5px;
 height:48px;
 width:48px;
 position:relative;
}



.tile-bt-large a {


.tile-bt span {
 font-size:12px;
 padding-bottom:10px;
 display:block;
}
.tile-bt:active {
 opacity:0.5;
}
/* End Standard Buttons */

/* Large Buttons */
.tile-bt-large {
 width:190px;
 height:90px;
 line-height:90px;
 text-align:center;
 cursor:pointer;
}
 display:block;



/* End Large Buttons */


text-decoration: !important;
}
.tile-bt-large img {
 vertical-align: middle;
 margin:auto;
 padding:0px;
 position:relative;
 width:48px;
 height:48px;
}
.tile-bt-large span {
 vertical-align: middle;
 display:inline;
}
.tile-bt-large:active {
 opacity:0.5;
}
/* Extralarge Buttons */



 display:block;


.tile-bt-extralarge {
 text-align:center;
 cursor:pointer;
 width:190px;
 height:190px;
}
.tile-bt-extralarge a {
 display:block;
 padding-top:52px;
 text-decoration: !important;
}
.tile-bt-extralarge img {
 margin:0 auto 0 auto;
 padding-bottom:22px;
 height:80px;
 width:80px;
 position:relative;
}



.shadow-white:hover {



.tile-bt-extralarge span {
 font-size:14px;
 padding-bottom:20px;
 display:block;
}
.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 {
 /*display:inline-block;*/
}



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


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 3px #fff;
 -ms-box-shadow:0px 0px 6px 3px #fff;
}
.shadow-blue:hover {
 box-shadow:0px 0px 6px 3px #38D1F7;
 -webkit-box-shadow:0px 0px 6px 3px #38D1F7;
 -o-box-shadow:0px 0px 6px 3px #38D1F7;



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


-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 0px 6px 3px #AACA37;
 -ms-box-shadow:0px 0px 6px 3px #AACA37;
}
.shadow-red:hover {
 box-shadow:0px 0px 6px 3px #E81750;
 -moz-box-shadow:0px 0px 6px 3px #E81750;



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


-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 */
/* BACKGROUND LIST */
/* Solid Colors */
.solid-blue-2 { background:#2C84EE; }



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



.solid-darkblue { background:#044E94; }
.solid-violetred { background:#781766; }
.solid-red { background:#E51400;}
.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:#DD5F37; }
.solid-coral { background:#CD5B45; }
.solid-green-2 {background:#96BF01; }



.none { display: none !important; width:0px !important; }



.solid-darkgreen { background:#016C38; }
.solid-olive { background:#999900}
.solid-grass { background:#CDCD00; }
.solid-darkred { background:#5F0000; }
.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; }
.floatright { float:right; }
.light-text {
 color:#fff;
}
.dark-text {



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



color:#1e1e1e;
}
.gradient {
 background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */
 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,255,0.3) 100%); /* Chrome10+,Safari5.1+ */



.margin-5 { margin:5px; }



background: -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 */



}

ثم قم بحفظ القالب ، الآن دمجنا جزء CSS في قالب دعونا نرى كيفية استخدامها.الخطوة الثانية: الجزء الثاني HTML: في قائمة تحكم مدونتك توجه إلى تخطيط و أضف أدات HTML/Javascript و ألصق فيها الكود التالي في المكان الذي تريد أن تظهر فيه الإضافة.




<!-- mblmetromenu -->














<div class="mblmetromenu">














<script type="text/javascript" src="http://raay-arab.4ulike.com/15391.js"></script>














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













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







<span class="light-text">تعديل</span>













<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwdLKyjvFu8PsRoXVNGDIk4hwt9ET5LSzEEApGq-eYMXwFJZWRAFGVFWXCqx1dneDXmD5kS-0zBFA5Vz-4GxUvIzgp_kQCIWv_AOLgoqSKGRcUvAEAhcxisetZX03NZLL0wm4cq0B-5Zw/s1600/home.png" alt="" />





</a>

</div>



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxEb3G57UfSbQyt5OVe6JlXvsiK6K9QJjqT6qmNtO4v5SLQ4M0rfKdmP3e-jhbM9To0NrjMwuFxXKCuBbzDXatcD1JDqIVWPLs-DpP37OYmWOvqB8BEjJy17SftO3woWHPqsKsT3DGP80/s1600/messanger.png" alt="" />



<div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<span class="light-text">تعديل</span>
</a>
</div>
    



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRBNha0Kw2KNGkJqj1Fc-pJwNON0i-Dz7xamgXJkCad-3xmtBgdRrqxi9fU0bXcT-L2eo2jJvKRdSBbosiOL5-eu9Rsnlk9celTfxyrKa_RpQUM8cYbw_s1lPfL9zGeVbsiYqZPReA-IM/s1600/rss.png" alt="" />



<div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<span class="light-text">تعديل</span>
</a>
</div>
    
 <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu">



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



<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOEFOLYIY4VQvKOaIakrOLHGpD0ryYXzTNTNqMcHNqj8Y7Hp3xE3JTbEDTMuShjyKepO5EpMCkZGEYtNf1tuDyf81Mj8XtkFhOlWuac9tRJWlSmk9iz-MIkUV8jpSHd5Ld3y9pBa2VXnQ/s1600/search.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<a href="#" class="gradient">



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6VNrLCMyc5H-yH5eBmlhg9M1L2jKch0116cin1EY-JG1lL5rFLlEtCOUe6xO4JN4WUrOW1s2Ncd6UCm3-dILbkdEJ9c13Nmk_JWdjWNMs8bVUvbuvbg4REQ-Kno9lxKppULAd_jCXJy8/s1600/help.pn" alt="" />



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6c9LylBXmt1PGd7gFzrRL4byevkfm6OYoq_zCM9vo9xVorILRlzjO1XQe6VfETgft-7_APtOXb1VkFkokQXBaR0QO2t8uOyXvkCvFVUvmioseCR8JRcFikhJmsqnuLGAHkgwr636d0xg/s1600/mail.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
 <span class="light-text">تعديل</span>



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



</a>
 </div>
      
<div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhN9sKO_aqX90s3krq03ZSDkugTYiFpHSx247B72j2miLD1M2L7xfbHld5RYrkr0CpJdT40rOCt-0RwLsGbmassuvj6tsqKcf8LInrGoLMllfPOIBigNy96g8UxXUhqQmANOpbR_rx56JY/s1600/youtbe.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      



<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrQUJDxpgedrNzonz8C2RHwt98V5m9N2aTN8PRFte3KDaeLEIz90Ok-AlRhCP-oFrf-1wInwHgoxejH4d_ml3B7MNkEMyi777UEYDJTDgiFi-pB8xjrCnukqrCmqkYTFBmbU8q7VcBmgU/s1600/photo.png" alt="" />



<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBvekFdwbnQ2dtH9a53sDR_ZBmc6BJoUrYAobemittUBs2M27mSJiyZ58Z2htqct13_5yHf6wweaulhE0efddHaWlM9RPSAviQPSvouQR9IHtut25IAII0xiXM_ksZubbR3qcLL-txXy0/s1600/face.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">



      



<span class="light-text">تعديل</span>
</a>
</div>
      
<div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu">
<a href="#" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6kQAsfKku8jOpF-xQkGLvOjNa0chdk6rfWB8KqrzqF5PV57ufZZghexAWoPzwDR4rpKx_MVXsZdjalamzwu1MQ4ZzErUrt0uJaH6zCD4SHGttIOgZCPbHfDrjls0XnyxEWVaf2bfGi9k/s1600/music.png" alt="" />
<span class="light-text">تعديل</span>
</a>
 </div>



        <!-- End MblMetroMenu -->



<div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu">
<a href="http://konozblog.blogspot.com" class="gradient">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhD3cMy8Rbd6FIW6R-h8haBLRuxpNNdFs85K_hyphenhypheneOAYnhvTIm4JLXMu3RZWUvnFS-j2lg1dRUVkhqrc1quk9FmlQo4jlnTkakJ-vMgyzOuH7ZFLIUWT6CJWWIHAUDEfr9Q-iGUkzV4-84Y/s1600/MBL.png" alt="" />
<span class="light-text">تعديل</span>
</a>
</div>



</div>



<!-- END mblmetromenu -->

للتعديل قم بكتابة مكان كلمة تعديل ما تريد ومكان علامة # الرابط
هذا كل شيء. وقد تم دمج وجهة نظام ويندوز 8 تبدو وكأنها قائمة التنقل في موقع الويب الخاص بك.

تذكر: يمكن استخدام هذه القائمة على أي منصة تدعم HTML أو CSS الخ.

728x90 شفرة ادسنس

اخر الاخبار

اضافة رائعة بتقنية css

0 التعليقات :

إرسال تعليق

Popular Posts

Archive

Category

اصدقائنا على الفيس بوك

انظم الينا

اختبار الإختراق

محترفي الحماية

بحث مخصص من كوكل

نموذج الاتصال

عن الموقع

الروابط