قائمة منسدلة احترافية في بلوجر
إضافة ألقائمه المنسدلة الاحترافية على بلوجر هادي الإضافة تعد من أهم الإضافات في مدونتك وهي الشى الرئيسي في المدونات ويمكنك وضع أكثر من أقسام في هادي ألقائمه و الزائر يتمكن بالتنقل من قسم إلى أخر بكل سهوله فهادي ألقائمه تعطي الزائر الارتياح في المدونة وبقائه لمده أطول وهي عبارة عن قائمه تنسدل إلى أسفل وتعطي المدونة شكلن جميل ويمكن جمع عدة أقسام في لأنن واحد في الانسدال وأدا كان لديك العديد من الأقسام في مدونتك فيمكنك من خلال هادي القائمة تجميعها بشكل لائق في المدونة.شرح تركيب ألقائمه المنسدلة الاحترافية على بلوجر
الأول : الذهاب إلى المدونة تخطيط
الثاني : إضافة أداة HTML/JavaScript
الثالث : ضع الكود التالي:
<style>/* Horizontal menu with 2 columns
----------------------------------------------- */
#menucol {width:940px;height:37px;background-image: -moz-linear-gradient(top, #666666, #000000);background-image: -webkit-gradient(linear, right top, right bottom, color-stop(0.00, #666666), color-stop(1.0, #000000));filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#666666,endColorStr=#000000);border-bottom:1px solid #666666;border-top:1px solid #666666;margin:0 auto;padding:0 auto;overflow:hidden;}#topwrapper {width:940px;height:40px;margin:0 auto;padding:0 auto;}.clearit {clear: both;height: 0;line-height: 0.0;font-size: 0;}#top {width:100%;}#top, #top ul {padding: 0;margin: 0;list-style: none;}#top a {border-left:1px solid #333333;text-align:right;display: block;text-decoration: none;padding:10px 12px 11px;font:bold 14px Arial;text-transform:none;color:#eee;}#top a:hover {background:#000000;color:#F6F6F6;}#top a.submenucol {background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhM_u0-_YHxsBAarODTloMYia9Q5c69S0Ba3_3KRvyYKEt9mysrAeoQez4d5VGq83aN6jwfENUrZ73jba5ETtufw7CymFQubbTfpIfLWlojXwFZc68V7lUJoRds8CKJSzguUSWJ3Ln1Xo/s1600/arrow_white.gif);background-repeat: no-repeat;padding: 10px 24px 11px 12px;background-position: left center;}#top li {float: right;position: relative;}#top li {position: static !important;width: auto;}#top li ul, #top ul li {width:300px;}#top ul li a {text-align: right;padding: 6px 15px;font-weight: normal;text-transform: none;border: none;font-family: DroidKufi-Bold;margin: -6px 0 0 0px;font-size: 12px;}#top li ul {z-index:100;position: absolute;display: none;background-color:#F1F1F1;margin-right:-80px;padding:10px 0;border-radius: 0px 0px 6px 6px;box-shadow:0 2px 2px rgba(0,0,0,0.6);filter:alpha(opacity=87);opacity:.87;}#top li ul li {width:150px;float:right;margin:0;padding:0;}#top li:hover ul, #top li.hvr ul {display: block;}#top a{font-family: DroidKufi-Bold;margin: -6px 0 0 0px;font-size: 12px;}#top li:hover ul a, #top li.hvr ul a {color:#333;background-color:transparent;text-decoration:none;}#top ul a:hover {text-decoration:underline!important;color:#444444 !important;}@font-face {font-family: 'DroidKufi-Bold';font-style: normal;font-weight: 700;src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot);src: url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.eot?#iefix) format('embedded-opentype'),url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff2) format('x-woff2'),url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.woff) format('woff'),url(//themes.googleusercontent.com/static/fonts/earlyaccess/droidarabickufi/v3/DroidKufi-Bold.ttf) format('truetype');}</style><div id='menucol'><div id='topwrapper'><ul id='top'><li><a href='http://arts2017.blogspot.com/'>الرئيسية</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط</a></li><li><a class='submenucol' href='#'>تجربي فقط</a><ul><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li></ul></li><li><a class='submenucol' href='#'>تجربي فقط</a><ul><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li></ul></li><li><a class='submenucol' href='#'>تجربي فقط</a><ul><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط 5.8</a></li></ul></li><li><a href='http://arts2017.blogspot.com'>تجربي فقط</a></li></ul><br class='clearit'/></div></div>
التعديل
1-قم بتغير ما في اللون الأزرق إلى اسم القسم2-قم بتغير ما في اللون الأحمر إلى رابط القسم
ليست هناك تعليقات:
إرسال تعليق