قائمة منسدلة احترافية على مدونة بلوجر BLOGGER متوافقة مع الهواتف المحمولة
السلام عليكم ورحمة الله و بركاته متتبعي برامج انترنت و اخبارك
نت أهلا بكم في هذا الموضوع الذي
يخص ادوات بلوجر حيث سنرى كيفية اضافة قائمة منسدلة احترافية على مدونة بلوجر BLOGGER متوافقة مع الهواتف المحمولة
و في هذا سنقوم بشرح كيفية اضافة هذا الستيل الخاص و الاحترافي الى
مواقعكم و مدونات بلوجر Blogger
بالتفصيل .....
ملاحظة
مهمة: لا انصحكم باستخدام اكثر من قائمة منسدلة واحدة
في مدونتكم خاصة اذا لم تكون لديكم معارف و خبرة في هذا المجال ، لانها عادة ما
تسبب اخطاء في صفحات المدونات اذا زاد عددها عن القائمة الواحدة.........
للعلم ان هذه
القائمة المنسدلة الاحترافية التي سنسردها لكم و نشرخها بالتفصيل من البداية الى
النهاية، متوافقة مع اجهزة الهاتف المحمولة بمختلف انواعها و احجامها ، و هي
متجاوبة مع التابلات بكل انواعها و احجامها ايضا، بصفة خاصة ، لهذا ما عليك
الى اتباع الشرح التالي ........
اخي الكريم لا
تنسى ان تضع تعليقك اسفل الموضوع اذا اعجبك هذا الموضوع ....
شكل القائمة
المنسدلة المعنية:
لاحظ وجود زر
الترجمة و هو مضاف لترجمة فورية لصفحاتك ........
لهذا سنقوم
بهذا العمل من خلال مرحلتين اساسية حتى نضيف القائمة في اعلى الصفحة بشكل سليم
.....
المرحلة
الاولى:
01 – افتح مدونتك
بلوجر Blogger
.
02- اختر منها قالب
.
ثم من المدونة
اختر القالب، لتظهر لك صفحة القالب، و منها انقر على تحرير HTML لتغيير
المدونة الى اكواد HTML .......
انقر مرة
واحدة بداخل النموذج HTML و من لوحة المفاتيح ااضغط على CTRL+F يطهر لك مكان للبحث، قم بالبحث على الكود
التالي: ]]></b:skin>
و هذا
بكتابة هذا الكود (]]></b:skin>)
بداخل مربع البحث ثم انسخ الكود CSS الموالي الخاص بالقائمة المنسدلة السابقة، فوق
هذا الكود مباشرة، و CSS CSS هو كما يلي:
#menu{background:#464646;color:#eee;height:35px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none}
#menu ul{height:35px}
#menu li{float:right;display:inline;position:relative;font:bold 13px Arial;}
#menu li a{color:#ccc}
#menu a{display:
block;line-height:35px;padding:0 14px;text-decoration:none;color:#333;}
#menu li:hover > a,#menu li a:hover{color:#fff}
#menu input{display:none;
margin:0 0;padding:0 0;width:80px;height:35px;opacity:0;cursor:pointer}
#menu label{font:bold 30px Arial;
display:none;width:35px;height:36px;line-height:36px;text-align:center}
#menu label span{font-size:13px;position:absolute;left:35px}
#menu ul.menus{height:auto;overflow:hidden;width:180px;background:#fff;position:
absolute;z-index:99;display:none;border:1px solid #ccc;border-top:none;color:#333}
#menu ul.menus a{color:#333}
#menu ul.menus li{display:block;width:100%;font:12px Arial;text-transform:none;}
#menu li:hover ul.menus{display:block}
#menu a.prett,#menu a.trigger2{padding:0 27px 0 14px}
#menu li:hover > a.prett,#menu a.prett:hover{background:#fff;color:#333}
#menu a.prett::after{content:"";
width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee
transparent transparent transparent;position:absolute;top:15px;right:9px}
#menu ul.menus a:hover{background:#BABABA;}
#menu a.trigger2::after{content:"";
width:0;height:0;border-width:5px 6px;border-style:solid;border-color:
transparent transparent transparent #eee ;position:absolute;top:13px;left:9px}
@media screen and (max-width: 768px){
#menu{position:relative}
#menu ul{background:#838383;
position:absolute;top:100%;left:0;right:0;z-index:3;height:auto;display:none;}
#menu ul.menus{width:100%;position:static;border:none}
#menu li{display:block;float:none;width:auto;text-align:right}
#menu li a{color:#fff}
#menu li a:hover{color:#333}
#menu li:hover{background:#BABABA;color:#333;}
#menu li:hover > a.prett,#menu a.prett:hover{background:#BABABA;color:#333;}
#menu ul.menus a{background:#BABABA;}
#menu ul.menus a:hover{background:#fff;}
#menu input,#menu label{position:absolute;top:0;left:0;display:block}
#menu input{z-index:4}
#menu input:checked + label{color:white}
#menu input:checked ~ ul{display:block}
}
المرحلة الثانية:
في
هذه الخطوة هي آخر مرحلة لادراج القائمة المنسدلة بشكل سليم ، حيث سنختار مكان وضع
هذه القائمة في موقع مدونة بلوجر blogger
الخاص بنا .........
و
نحن نريد اضافتها في اعلى الصفحة لهذا فان مكانها هو قسم الهيدر header من المدونة ، حيث بنفس طريقة البحث عن السماء و
الاكواد بداخل كود HTML
الخاص بصفحتنا، نبحث عن الكود التالي </header> ، حيث سنفتح له تقسيم خاص به <div> حتى لا يختلط مع بقية الاقسام و يتم اضافته
بدون مشاكل..........
بعد
البحث عن الكود (</header>)
، نضع فوقه مباشرة الكود التالي الخاص بالقائمة المنسدلة و هو كما يلي:
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>القائمة</span></label>
<ul>
<li><a href='/' title="Home">الرئيسية</a></li>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a class='prett' href='#' title="وصف">قائمة 1</a>
<ul class='menus'>
<li><a href='#' title="وصف">تعديل 1</a></li>
<li><a href='#' title="وصف">تعديل 2</a></li>
<li><a href='#' title="وصف">تعديل 3</a></li>
</ul>
</li>
<li><a href='#' title="وصف 2">قائمة 2</a></li>
<li><a class='prett' href='#' title="وصف">تعديل 1</a>
<ul class='menus'>
<li><a href='#' title="وصف 1">تعديل 1</a></li>
<li><a href='#' title="وصف 2">تعديل 2</a></li>
<li><a href='#' title="وصف 3">تعديل 3</a></li>
</ul>
</li>
<li><a class='trigger2' href='#' onclick='window.open
('http://translate.google.com/translate?u='+encodeURIComponent(location.href)
+'&amp;langpair=id%7cen&amp;hl=en'); return false;'
rel='nofollow' target='_blank' title='English'>ترجمة</a></li>
</ul>
</nav>
ملاحظة مهمة: قم
بوضع روابط موقعك بما يناسب روابطك انت على مدونتك في المكان (#)
الموجود بعد
الكلمة href='#' ..........
حيث
هذا هو الكود الخاص بالترجمة كما يلي:
<a class='trigger2' href='#' onclick='window.open('http://translate.google.com/
translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7cen&amp;hl=en');
return false;' rel='nofollow' target='_blank' title='English'> ترجمة </a>
نامل ان يكون
الموضوع قد نال إعجابكم وإذا كان لديك أي إستفسار لا تتردد في طرحه من خلال
التعليق اسفل الموضوع.....
قومو
بوضع بريدكم على مدونتنا ليصلكم كل جديد
الى هنا نكون قد قدمنا لكم هذا
الوضوع ليكون اضافة في سرح المعرفة اتمنى ان يكون في متناول الجميع ....
اذا واجهتك أي مشكل او تسائل
ضعه في تعليق اسفل الموضوع و سنجيبكم على كل التسائلات باذن الله ....
ان اعجبك الموضوع لا تنسى بمتابعتنا
بالنقر على متابعة بالبريد الالكتروني في اسفل الموضوع حتى يصلكم كل جديد في موقع برامج
انترنت و اخبارك نت ...
يمكنكم
متابعة ايضا المواقع التالية كمصدر لاهم المعلومات .....
زورو المواقع التالية
111
ليست هناك تعليقات