Paglikha Tab Menu Bar na may Easy on Blogspot

Kung magbabayad ka ng pansin sa mga display jadipintar.com blog, makikita ang isang serye ng mga asul na kahon na may isang puting papel na naglalaman ng isang listahan ng mga item sa menu tulad ng; SALAM ko du'a, panalangin AAYUNO ko mamatay ako ako MANA ko Kiamat, etc., (hitsura bago ito, ngayong makita model 2 under-pula) at kung ang cursor ay hinawakan, ay pinagsama screen na naglalaman ng maraming mga pamagat ng article, na iyon ay tinatawag Menu at Sub-Menu bar. Ang menu at sub-menu bar ay kailangan upang maghanap para sa impormasyon batay sa kategorya o sub-menu. Ginagawa ring Nagbibigay sub menu bar ng lahat ng mga pamagat ng artikulo ay maaaring ipakita sa screen sa mga mata; aming blog lumitaw nang mas pang-agham, organisado at simple. Kung ikaw ay interesado sa pag-install ito sa blog, na nangangahulugan na ang mga tao na sa tingin sistematikong at nagustuhan keteraturan.Selamat subukan. Hakbang sa Pag-install - I-click Design - Pumili at piliin ang I-edit ang HTML Template - Piliin / click ang Magpatuloy - Piliin ang / mag-click Palawakin Widget Templates Search scrift sumusunod:

<div class = 'main-outer'> or <div id = 'main-wrapper'> or <div id = 'main'> Upang gawin itong mas madali, i-click lamang F3 sa keyboard at pagkatapos ay piliin ang isa scrift itaas. Batay sa aking karanasan pagkatapos flipping sa pamamagitan ng impormasyon sa www.google.com pagkatapos pagtutugma ay: div class = 'main-outer'> Ito ay maaaring maging iba mula sa iba pang mga template ... Sa sandaling maaari mong kopyahin at ilagay ang sumusunod na scrift lamang sa itaas na hinahangad scrift mas maaga: <style> / * - Horizontal Menu + Sub Menu-- * / # cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;} # cat-nav a {color: # eee; text-decoration: none; text-shadow: # 033 148 1px 0px 0px; border-right: 1px solid # 156 994;} # cat-nav a: hover {color: # fff; } # cat-nav li: hover {background: # 000; } # cat-nav a span {font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-style: normal; font-weight: 400; color: # fff; text-shadow: none;} # cat-nav .nav-description {display: block; } # cat-nav a: hover span {color: # fff; } #secnav, #secnav ul {position: relative; z-index: 100; margin: 0; padding: 0; list-style: none; line-height: 1; background: # 0d5e88; } #secnav a {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: 700; font-size: 14px; display: block; z-index: 100; padding: 0 15px; line-height: 35px; text-decoration: none;} #secnav li {float: left; width: auto; height: 35px;} #secnav ul li {position: absolute; left: -999em; width: 200px; top: 35px} #secnav li ul li {height: 30px; border-top: 1px solid # fff; } #secnav li ul li a {font-family: Verdana, Geneva, sans-serif; width: 180px; line-height: 30px; padding: 0 10px; font-size: 11px; font-style: normal; font-weight: 400; color: # eee; } #secnav ul ul li {margin: -30px 0 0 180px; } #secnav li: hover ul ul, #secnav li: hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul {left: -999em; } #secnav li: hover ul, #secnav li li: hover ul, #secnav li li li: hover ul, #secnav li.sfhover ul, li #secnav li.sfhover ul, li #secnav li.sfhover ul li {left: auto; } #secnav li: hover, # secnav li.hover {position: static; } # cat-nav #secnav {width: 100%; margin: 0 auto;} </ style> <div id = 'cat-nav "> <ul class = 'fl' id = 'secnav'> <li> <a href='#'> Home </a> </ li> <li> <a href='#'> Menu 1 </a> </ li> <li> <a href='#'> Menu 2 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu2 a </a> </ li> <li> <a href='#'> Sub Menu2 b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu3 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu3a </a> </ li> <li> <a href='#'> Sub Menu3b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu4 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu4a </a> </ li> <li> <a href='#'> Sub Menu4b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu5 </a> </ li> </ ul> </ div>

paliwanag: 1. Paano ipasok ang mga URL address: Palitan ang # (bughaw) na may link / url na gusto mo. Ito ay maaaring maging isang pag-post ng link o label (kategorya) na umiiral sa iyong blog. 2. Paano sumulat ng pamagat ng menu o ang pamagat ng pag-post: Palitan ang teksto sa asul na may pangalan ng menu at sub pangalan ng menu na gusto mo. 3. Paano baguhin ang lapad ng menu: mangyaring hanapin ang code:

# cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;} ---> the 3rd line. Then add the code (width: 900px) between {and}, so that it becomes: # cat-nav {background: # 156,994; width: 900px; margin: 015px; padding: 0; height: 35px;} 900px figures only as an example, please change the number 900 to the size of the width you want, can also replace 900px code with code 100%. 4. To adjust the height menu please replace the number 35 on the code above 35px height you want. 5. To add or subtract the number of menu, please copy and paste or delete scripts with green color block (1 serving menu), the number of sub-menus can be added according to taste, for example submenu ..c, d, e, f, and so on. 6. To change the color, background and font, note the following scripts. [1]. <style> [2]. / * - Horizontal Menu + Sub Menu-- * / [3]. # cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;} [4]. # cat-nav a {color: # eee; text-decoration: none; text-shadow: 0px 1px # 033 148 .......... A. Changing the background color menu: Please replace colors on a third line that I give red color, with the color you like, please click on the color code list. B. Change the text color / font, please replace Warina on line 4 that I give a green color with the color that you like (change the code only). C. Changing the model letters (font), notice scripts ranked 14th; replace purple paper with your favorite font type, [14]. #secnav a {font-family: Georgia, "Times New Roman", Times, serif; font- - Then click the Preview scrift first to make sure it is correct. - Then keep / save. Suggestion * Back up your template before the change / add scrift above, to be used again if there is a problem with the addition of srcritf above. * To eliminate the appearance of a double display to the Main Page, - Then follow the following advice: - Go to Menu Page - Then select the page view by selecting the "do not show" - Save the settings, the main page will show itself in accordance with scrift we type earlier. Blogs can be published ... If through this way that we share not succeed, try try again patiently friend. if many times it can not, a friend can be consulted via the comments section below. Tips On Setting Sub Menu Layout / Side Bar Blog After the tutorial on installing menu and sub menu on page article, this time still install menu and subnya, but on the outside of the post pages (side bar), do: 1. Log into your blogger dashboard 2. Select the Layout or Lay Out 3. Click the Add Gadget / Add a Gadget 4. Choose HTML / JAVASCRIPT. (Leave field blank title gadget name, and then copy and paste the code below into the HTML column available) <div id = "RickyMenu"> <div id = "Rickybox"> <ul id = "punch"> <li> <a href="#"> Home </a> </ li> <li> <a href="#"> Sample Page </a> <ul> <li> <a href="#"> Sub Page # 1 </a> <ul> <li> <a href="#"> Sub Sub Page # 1 </a> </ li> <li> <a href="#"> Sub Sub Page # 2 </a> </ li> <li> <a href="#"> Sub Sub Page # 3 </a> </ li> </ ul> </ li> <li> <a href="#"> Sub Page # 2 </a> </ li> <li> <a href="#"> Sub Page # 3 </a> </ li> <li> <a href="#"> Sub Page # 4 </a> </ li> <li> <a href="#"> Sub Page # 5 </a> </ li> </ ul> </ li> <li> <a href="#"> Sample Post </a> </ li> <li> <a href="#"> Blog Page </a> </ li> </ ul> </ div> </ div> I-edit ang lahat ng mga pangalan ng menu ayon sa iyong kagustuhan. Huwag kalimutang palitan ang # sa mga URL na gusto mong 5. I-click ang I-save / I-save Ayusin ang posisyon ng mga gadget ang mga pahalang na drop down menu kung saan mo gusto, at pagkatapos ay i-click ang I-save ang button SETTING sa kanang tuktok ng screen. Kung nagsagawa ka ng mga hakbang sa itaas nang tama, makikita mo ang isang horizontal drop down menu kung saan mo gusto. Para sa Pagdaragdag ng Item sa pahalang drop down menu ay napaka-simple: Mangyaring mahanap sa dulo may isang code na tulad nito: <li> <a href="#"> Blog Page </a> </ li> </ ul> Right at the top </ ul>Maaari nakapasok bagong menu, at ganito ang hitsura: <li> <a href="#"> Blog Page </a> </ li> <li> <a href="LINK BARU"> TEXT NEW </a> </ li> </ ul> Kung higit sa isang karagdagang menu ay ganito ang hitsura <li> <a href="#"> Blog Page </a> </ li> <li> <a href="LINK NEW 1"> TEXT NEW 1 </a> </ li> <li> <a href="LINK NEW 2"> TEXT NEW 2 </a> </ li> <li> <a href="LINK NEW n"> TEXT NEW n </a> </ li> </ ul> Kung ang isa sa mga karagdagang menu ay may isang sub menu, pagkatapos ay tingnan ang code</ li> ay nagmula menu upang buksan ang isang bagong lugar para sa sub-menu sa menu <li> <a href="#"> Blog Page </a> </ li> <li> <a href="LINK NEW 1"> TEXT NEW 1 </a> </ li> <li> <a href="LINK NEW 2"> TEXT NEW 2 </a> <li> <a href="LINK NEW SUB MENU SUB MENU 1"> 1 </a> </ li> <li> <a href="LINK 2"> NEW SUB MENU SUB MENU 2 </a> </ li> </ li> <li> <a href="LINK NEW n"> TEXT NEW n </a> </ li>

Kamusta mga kaibigan sa lahat ng oras na ito info Nice Katotohanan Nice ay ibahagi kung paano lumikha ng isang sub menu bar sa blog. Sub bar na lubhang kailangan para sa anumang mga tunay na blogger menu. Para sa mga bisita na ito ay kinakailangan din upang maghanap para sa impormasyon batay sa mga kategorya sa sub-menu bar. Nagbibigay sub menu bar ring gumawa ng iyong blog hitsura mas gwapo, regular, at praktikal (hindi makalat). Ang mga hakbang na kaugnay sa pag-edit ng HTML. Para sa mga blogger beginners ay maaaring mahanap ito mahirap, ngunit ang tunay na ito ay tunay madali. Sundin ang mga hakbang namin ilarawan sa ibaba. Ok, pagkatapos ng isang sigla talk. Suriin ito Hayaan ... Narito ang mga hakbang na dapat gawin: I-click ang Menu Design Piliin ang Menu Template at piliin ang I-edit ang HTML Piliin / click menu Magpatuloy Pumili / mag-click ang Expand Widget Templates

or

or

Search scrift following: Upang gawin itong mas madali, i-click lamang ang ctrl + F sa keyboard at pagkatapos ay piliin ang isa scrift itaas. Batay sa aking karanasan pagkatapos flipping sa pamamagitan ng impormasyon sa www.google.com pagkatapos pagtutugma ay: div class = 'main-outer' & gt ;. Ito ay maaaring maging iba mula sa iba pang mga template ... Sa sandaling maaari mong kopyahin at ilagay ang sumusunod na scrift lamang sa itaas na hinahangad scrift mas maaga:

<style> / * - Horizontal Menu + Sub Menu-- * / # cat-nav {background: # 156,994; margin: 15px 0; padding: 0; height: 35px;} # cat-nav a {color: # eee; text-decoration: none; text-shadow: # 033 148 1px 0px 0px; border-right: 1px solid # 156 994;} # cat-nav a: hover {color: # fff; } # cat-nav li: hover {background: # 000; } # cat-nav a span {font-family: Verdana, Geneva, sans-serif; font-size: 11px; font-style: normal; font-weight: 400; color: # fff; text-shadow: none;} # cat-nav .nav-description {display: block; } # cat-nav a: hover span {color: # fff; } #secnav, #secnav ul {position: relative; z-index: 100; margin: 0; padding: 0; list-style: none; line-height: 1; background: # 0d5e88; } #secnav a {font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-weight: 700; font-size: 14px; display: block; z-index: 100; padding: 0 15px; line-height: 35px; text-decoration: none;} #secnav li {float: left; width: auto; height: 35px;} #secnav ul li {position: absolute; left: -999em; width: 200px; top: 35px} #secnav li ul li {height: 30px; border-top: 1px solid # fff; } #secnav li ul li a {font-family: Verdana, Geneva, sans-serif; width: 180px; line-height: 30px; padding: 0 10px; font-size: 11px; font-style: normal; font-weight: 400; color: # eee; } #secnav ul ul li {margin: -30px 0 0 180px; } #secnav li: hover ul ul, #secnav li: hover ul ul ul, #secnav li.sfhover ul ul, #secnav li.sfhover ul ul ul {left: -999em; } #secnav li: hover ul, #secnav li li: hover ul, #secnav li li li: hover ul, #secnav li.sfhover ul, li #secnav li.sfhover ul, li #secnav li.sfhover ul li {left: auto; } #secnav li: hover, # secnav li.hover {position: static; } # cat-nav #secnav {width: 100%; margin: 0 auto;} </ style> <div id = 'cat-nav "> <ul class = 'fl' id = 'secnav'> <li> <a href='#'> Home </a> </ li> <li> <a href='#'> Menu 1 </a> </ li> <li> <a href='#'> Menu 2 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu2 a </a> </ li> <li> <a href='#'> Sub Menu2 b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu3 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu3a </a> </ li> <li> <a href='#'> Sub Menu3b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu4 </a> <ul id = 'sub-custom-nav "> <li> <a href='#'> Sub Menu4a </a> </ li> <li> <a href='#'> Sub Menu4b </a> </ li> </ ul> </ li> <li> <a href='#'> Menu5 </a> </ li> </ ul> </ div>

Paliwanag: Palitan ang # (bughaw) na may link / url na gusto mo. Ito ay maaaring maging isang pag-post ng link o label (kategorya) na umiiral sa iyong blog. Palitan ang papel na asul na kulay sa mga menu at sub menu na gusto mo. Ang bawat sub-menu ay maaaring idagdag o ibawas bilang ninanais. 7. Pagkatapos i-click i-preview ito upang siguraduhin na ito ay tama scrift. Pagkatapos i-save / i-save. HTML editing at isara ito. Tip: i-back up ang iyong mga template bago ang pagbabago / magdagdag scrift sa itaas, na gagamitin muli kung may problema sa ang pagdaragdag ng srcritf itaas. 8. Upang alisin ang hitsura ng Dabel ipakita ang Main Page, Pagkatapos ay sundin ang mga sumusunod na mungkahi: Pumunta sa Pahina Menu Pagkatapos ay piliin ang view ng pahina sa pamamagitan ng pagpili ng "hindi ipakita" I-save ang mga setting, ang pangunahing pahina ay magpapakita ng kanyang sarili alinsunod sa scrift type namin nang mas maaga. Maaaring ma-publish Blog ... Kung sa pamamagitan ng paraang ito na hindi namin ibahagi magtagumpay, subukan subukan muli matiyagang kaibigan. kung maraming beses na ito ay hindi, maaari kumunsulta sa isang kaibigan na may Impormasyon Nice Katotohanan Nice pamamagitan ng seksyon ng komento sa ibaba.

Tweet

Artikel keren lainnya:

Ditulis: Deta Haka Exsaputra.v pada tanggal