Да възродя малко темата с нещо от кухнята. Смених темата и какво да видя в мобилната версия нямало меню страници, защото някой не е дописал или направо си е оставил ръцете, с две думи псувах доста. За всички, които са с респонсибъл теми (на всички устройства да се показва симетрично и т.н, предполагам всеки знае) на блогър и решат, че ще им е от полза да заповядат, а ако някой оптимизира още нещата, ще стане още по-добре.
Така да започваме!
Меню страници за мобилни теми на блогър (работи само за ваши теми, фабричните предлагани от блогър не могат да се редактират).
Правите си нов widget (джаджа) и слагате вътре следният код:
Код:
<select name="formal1" id="menumobile1" onchange="javascript:handleSelect(this)">
<option style="display:none" />Меню
<optgroup label="Страници">
<option value="http://blogspot.com/" />Начална страница
<option value="http://blogspot.com/" />Страница 2
<option value="http://blogspot.com/" />Страница 3</optgroup>
<optgroup label="Страници категория 2">
<option value="http://blogspot.com/" />RSS абонамент
<option value="http://blogspot.com/" />Google+ профил
</optgroup></select>
<script type="text/javascript">
function handleSelect(elm)
{
window.location = elm.value+"";
}
</script>
Ако не се нуждаете от категории, изтрийте <optgroup label="Страници"> и <optgroup label="Страници категория 2"> и затварящите към тях два броя </optgroup>. За добавяне на още страници, просто добавете още редове и променете хипервръзките и имената срещу тях.
Направете си резервно копие и влезте в контролния панел. Отидете на шаблон, изберете редактиране на хтмл кода, намерете ]]></b:skin> и преди него сложете следния код:
Код:
#menumobile1 {display:none}
#menumobile1{width:100%; height:30px; font-size:14px;}
Така в десктоп версията на блога ви няма да се показва мобилното меню. Големината за самото меню е width:100% широчина и height:30px височина, а font-size:14px е големината на текста, променяйте ги по ваш вкус.
След като запазите промените, намерете в хтмл кода ви
и изберете за кои устройства да се показва менюто като поставите следният код точно под избраната от вас медия:
Код:
#menumobile1 {display:block;}
Аз съм избрал
Код:
@Media only screen and (max-width: 559px)
с максимална широчина от 559px, а за по-големи устройства работи десктоп менюто, което седи прилично.
Поздрави!
