-->
إغلاق القائمة
اضافة قائمة منسدلة متجاوبة لمدونة بلوجر من التخطيط + محرك بحث رائع

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

    • السلام عليكم ورحمة الله وبركاته
    الطريقة الصحيحة لأضافة قائمة منسدلة لمدونات بلوجر عن طريق كود قائمة منسدلة لبلوجر
    القائمة المنسدلة تعد من افضل الإضافات التي يجب ان تقوم بتركيبها في مدونتك فهي تعمل على تخفيف شكل الأقسام بالمدونة وجميع المجالات المتشابهة معاً ، كما انه يوجد اقبال شديد عليها ولهذا سنقوم بشرح تركيب افضل القوائم المنسدلة لبلوجر فهذه القائمة المنسدلة تتميز بأنها متجاوبة مع جميع المتصفحات ولا يوجد مشاكل في تشغيلها كما انها تعمل على الكمبيوتر واللاب توب والهواتف النقالة والتابلت وهذا لانها مصممة بأحدث التقنيات في تصميم الويب وتعد من افضل القوائم الريسبونسيف الحالية والخاصة بمدونات بلوجر فقط ، كما انها سهلة التخصيص ويمكنك التعديل عليها بسهولة.
    • طريقة تركيب القائمة المنسدلة لبلوجر :
    ولكن أولاً اذا لم يكن قالب غير متجاوب مع الهاتف فلن تفيدك هذه القائمة في شيء ، فهي تحتاج الى قوالب حديثة متجاوبة مع اغلب الشاشات حتي تعمل بشكل جيد.
    للمعاينة اضغط هنا
    للتركيب : قم بالدخول الى لوحة تحكم بلوجر وقم بأختيار عنصر القالب ومن ثم اختر تحرير الـ HTML الخاص به ، بعدها ابحث عن هذا الرمز بواسطة ctrl+f من الكيبورد ، الرمز هو :
    ]]>
     بعدها قم بأضافة هذا الكود فوق الرمز السابق الذي وجدناه مباشرةْ :
    /***********************************************************/
    /*main-menu
    ---------------------------------*/
    .main-menu { box-shadow: 0px 2px 10px #000; border-bottom: 4px solid #0076c9; background-color: #285179; position: relative; height: 58px; margin-bottom: 5px; } li.searchbutton a { color: #fff; } .Home { float: right; text-decoration: none; font-size: 18px; font-weight: 700; background: #09f; line-height: 100%; text-align: center; cursor: pointer; color: #fff; padding: 18px 18px; } li.searchbutton { float: left; text-decoration: none; font-size: 18px; font-weight: 700; background: #09f; line-height: 100%; text-align: center; cursor: pointer; color: #fff; padding: 18px 18px; } .main-menu ul li a:hover { background: #008de7; color: #fff; box-shadow: inset 0px -60px 0px #09f; } .main-menu ul li a { color: #fff; display: block; font-size: 18px; padding: 10px 14px; transition: 0.3s; font-weight: bold; } .main-menu ul li { float: right; font-family: 'DroidKufi bold' , Tahoma; } span.sb { cursor: pointer; } span.sc { cursor: pointer; } #sub-menu li { float: none; display: block; } #sub-menu { position: absolute; top: 56px; z-index: 99999; width: 250px; background: #243748; display: none; } #sub-menu li a { color: #ffffff; line-height: 40px; border-bottom: 0px solid #eee; padding: 4px 10px; transition: 0.2s; } #sub-menu li a:before { content: "\f053"; font-family: Fontawesome; padding-left: 7px; position: relative; background: transparent; } #sub-menu li a:hover { background: #0099cc; color: #ffffff; } #sub-menu li:first-child a { background: none!important; } #sub-menu li:first-child a:hover { background: #0099cc!important; color: #ffffff;} #sub-menu li a:hover { background: #0099cc; color: #ffffff;} .main-menu ul li:hover #sub-menu {display:block; } #searchWrap { width: 100%; height: 100%; position: fixed; top: 0; left: 0; opacity: 0; visibility: hidden; z-index: 999999; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); background-color: rgba(255,255,255,.94); text-align: center; -webkit-transition: all ease-in-out .25s; -moz-transition: all ease-in-out .25s; -ms-transition: all ease-in-out .25s; -o-transition: all ease-in-out .25s; transition: all ease-in-out .25s; } .closeSearch { position: absolute; right: 20px; top: 20px; font-size: 22px; } .closeSearch i{ color: #fefefe; background: #243748; display: block; width: 35px; height: 35px; line-height: 35px; text-align: center; transition: .3s; border-radius: 50%; margin-left: 10px; } .openSearch{visibility:visible!important;opacity:1!important;transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} #searchBar:focus{outline:none;-webkit-box-shadow:0 3px 0 0 #243748;-moz-box-shadow:0 3px 0 0 #243748;box-shadow:0 3px 0 0 #243748} #searchBar { position: absolute; top: 45%; font-size: 40px; text-align: center; width: 50%; background-color: transparent; -webkit-box-shadow: 0 3px 0 0 rgba(0,0,0,.1); -moz-box-shadow: 0 3px 0 0 rgba(0,0,0,.1); box-shadow: 0 3px 0 0 rgba(0,0,0,.1); border: 0; text-align: center; font-size: 15px; padding: 20px; color: #212121; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; font-family: inherit; position: absolute; left: 0; right: 25%; top: 30%; } #searchBar:focus{outline:none}
     .searchbutton.active {background:transparent;} #search {z-index:99;position:fixed;top:0;right:0;left:0;bottom:0;background:rgba(0,0,0,0.9);opacity:0; visibility:hidden;transform:scale(1.2);transition:all 600ms cubic-bezier(0.23,1,0.32,1);} #search.active { opacity: 1; visibility: visible; transform: scale(1); z-index: 999; margin: 0;} #search .input {border-radius: 8px;position: absolute; width: 100%; background: #09f; height: 100px; max-width: 800px; top: 0; right: 0; left: 0; bottom: 0; margin: auto;}
    #search .input .search { float: right; border: 0; outline: 0; background: transparent; width: 89.9%; margin-right: 10px; color: rgba(255, 255, 255, 0.7); font: 40px 'DroidKufi-Regular'; }
     #search .input .submit {border-radius: 8px; cursor: pointer; float: right; border: 0; background: #0076c5; font-size: 35px; color: #fff; height: 100px; padding: 18px; transition: all .3s ease-out;} #search .input .submit:hover { color: #0076c5; background: #fff;} #search #close { cursor: pointer; position: absolute; width: 50px; height: 50px; border: 0; background: rgb(255, 255, 255); border-radius: 8px; right: 30px; top: 30px; text-align: center;color: #09f; font-size: 20px;}.Text .widget-content:before{content:'\f10e';font-family:fontawesome;font-size:16px;color:#3498db;padding-left:5px}.Text .widget-content:after{content:'\f02c';font-family:fontawesome;font-size:16px;color:#3498db;padding-left:5px} .footer-columen h2:before {content: "\f192 ";display: block;font-family: FontAwesome;font-style: normal;background: #fff;padding: 5px;font-weight: normal;line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;color: #e4e4e4;position: absolute;bottom: -15px;right: 50%;margin-right: -15px;z-index: 9;}
    /* التجاوب
    --------------------------- */
    .selectnav {display:none;} @media screen and (max-width : 1150px){ } @media screen and (max-width : 1000px){ .sizewrap { width: 100% !important; } #nav1 {display:none;} #selectnav1 { border: 0; display: block !important; width: 100%; background: #ffffff; color: #243748; font-size: 15px; padding: 8px 8px; border-radius: 3px; margin-top: 7px; margin-bottom: 6px; font-family: 'DroidKufi bold' , Tahoma; } #nav { display:none; } #selectnav2 { border: 0; display: inline-block !important; background: #ffffff; width: 100%; color: #243748; font-size: 13px; padding: 8px 8px; border-radius: 3px; margin-top: 0px; font-family: 'DroidKufi bold' , Tahoma; } #selectnav1 { float: right!important; width: 66%!important; right: 6px; top: -2px; position: relative; } #ads {display:none;} } @media screen and (max-width: 345px){ #selectnav1 { width: 58%!important; } #menu-left ul li a { width: 28px!important; padding-top: 7px!important; margin-left: 6px!important; height: 34px!important; } } @media screen and (max-width: 291px){ #selectnav1 { width: 58%!important; } #menu-left ul li a { width: 28px!important; padding-top: 7px!important; margin-left: 6px!important; height: 34px!important; } }
    @media only screen and (max-width: 880px){ #search, #search .input .submit { width: 30%!important;} } @media only screen and (max-width: 684px){ #search, #search .input .submit { float: none!important; width: 100%!important; margin: 0px !important;} }
    /***********************************************************/
    • بعد دلك تبحث عن و تلصق هدا الكود اسفل