Horizontal Bill Of Fare Amongst Sub-Tabs Inwards Ii Columns For Blogger

This is a real dainty horizontal bill of fare inwards which its sub-tabs are displayed inwards 2 columns together with is besides made amongst CSS, without whatever scripts.
This is a real dainty horizontal bill of fare inwards which its sub Horizontal bill of fare amongst sub-tabs inwards 2 columns for Blogger
The "advantage" together with thence to speak, is that the sub-tabs when arranged inwards 2 columns are non real long, together with thence it volition hold upwards great together with less infinite along. You tin run across an event here:


Adding H5N1 Horizontal Menu With Sub Tabs inwards Two Columns To Blogger

STEP 1: In Blogger, instruct to your "Layout" together with on the "Page Elements" section.
  • Click on the "Add a Gadget" link simply nether your header image
  • From the Gadget's List, choose "HTML/JavaScript" option.
STEP 2: Simply re-create together with glue this ENTIRE code into your widget. Note: Leave the "Title" department of this widget blank.
<div id='menucol'>
<div id='topwrapper'>
<ul id='top'>
<li><a href='http://YOUR URL HERE.com'>Tab 1 Title Here</a></li>
<li><a href='http://YOUR URL HERE.com'>Tab 2 Title Here</a></li>
<li><a class='submenucol' href='#'>Tab iii Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 3.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab four Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 4.6</a></li>
</ul>
</li>
<li><a class='submenucol' href='#'>Tab five Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.3</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.4</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.5</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.6</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.7</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 5.8</a></li>
</ul>
</li>
<li><a href='http://YOUR URL HERE.com'>Tab half dozen Title Here</a></li>

</ul>
<br class='clearit'/>
</div>
</div>
Customize your principal tabs yesteryear changing the Tab Titles to whatever y'all want. Include a URL for each 1 if y'all desire it to hold upwards 'clickable'. If not, y'all tin simply set a # sign where it says http://YOUR URL HERE.com

You tin add together or delete equally many of the principal tabs equally y'all need, simply brand certain to re-create the entire code for the principal tab for each additional tab y'all want:
<li><a href='http://YOUR URL HERE.com'>Tab seven Title Here</a>
<ul>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.1</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.2</a></li>
<li><a href='http://YOUR URL HERE.com'>Sub Tab 7.3</a></li>
</ul>
</li>
STEP 3: Now let's instruct a measuring farther together with add together the CSS fashion inwards our Template
  • Go to Template > Edit HTML
  • Click on the sideways arrow adjacent to <b:skin>...</b:skin> 

  • Then click anywhere within the code expanse together with search - using CTRL + F keys - for the ]]></b:skin> tag together with simply inwards a higher house ]]></b:skin> add together this code:
/* Horizontal bill of fare amongst 2 columns
----------------------------------------------- */
#menucol {
width:940px;
height:37px;
background-image: -moz-linear-gradient(top, #666666, #000000);
background-image: -webkit-gradient(linear, left top, left 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 enterprise #666666;
border-top:1px enterprise #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-right:1px enterprise #333333;
text-align:left;
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/AVvXsEipayLvTIOCfQ1zqcvDPNbXoqfeOeOHPTW4_K-thMiWBdZ9voyTWL2AIx-GqlieAgorKODe48142GRDRCitzQ7LL1u953rQ39e-97D0QTDKh9AKhH0fQMXZrA584rKDe5vJphweY7TsT40/s1600/arrow_white.gif);
background-repeat: no-repeat;
padding: 10px 24px 11px 12px;
background-position: correct center;
}
#top li {
float: left;
position: relative;
}
#top li {
position: static !important;
width: auto;
}
#top li ul, #top ul li {
width:300px;
}
#top ul li a {
text-align:left;
padding: 6px 15px;
font-size:13px;
font-weight:normal;
text-transform:none;
font-family:Arial, sans-serif;
border:none;
}
#top li ul {
z-index:100;
position: absolute;
display: none;
background-color:#F1F1F1;
margin-left:-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:left;
margin:0;
padding:0;
}
#top li:hover ul, #top li.hvr ul {
display: block;
}
#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;
}
  • Now honour (CTRL + F) this line:
/* Tabs
  • It volition besides bring unopen to picayune lines beneath:
/* Tabs
----------------------------------------------- */
  • And simply below these picayune lines, delete the code below until y'all achieve at:
/* Columns
----------------------------------------------- */
  • Instead of the code that y'all bring removed, add together this one:
#crosscol ul {z-index: 200; padding:0 !important;}
#crosscol li:hover {position:relative;}
#crosscol ul li {padding:0 !important;}
.tabs-outer {z-index:1;}
.tabs-inner {padding: 0 0px;}
See this screenshot for to a greater extent than info:
This is a real dainty horizontal bill of fare inwards which its sub Horizontal bill of fare amongst sub-tabs inwards 2 columns for Blogger
STEP 4: The terminal measuring is to Save the Template together with y'all are done!

Visit your spider web log to run across a beautiful navigation bill of fare simply below header.
If y'all bring whatever questions or bespeak help, piece of job out a comment below.

Popular posts from this blog

Telekiller - A Tool Session Hijacking In Addition To Stealer Local Passcode Telegram Windows

Image
H5N1 Tools Session Hijacking And Stealer Local passcode Telegram Windows. Features : Session Hijacking Stealer Local Passcode Keylogger Shell Bypass ii Step Verification Bypass Av (Coming Soon) Installation Windows git clone https://github.com/ultrasecurity/TeleKiller.git cd TeleKiller pip install -r requirements.txt python TeleKiller.py Dependency : python 2.7 pyHook pywin32 Video Tutorial Operating Systems Tested Windows 10 Windows 8.1 Windows 8 Windows 7 Contact WebSite Ultra Security Team: https://ultrasec.org Channel Telegram: https://t.me/UltraSecurity Thanks to Milad Ranjbar MrQadir Download TeleKiller
Read more

Efiguard - Disable Patchguard Together With Dse At Kicking Time

Image
EfiGuard is a portable x64 UEFI bootkit that patches the Windows kicking manager, kicking loader too center at kicking fourth dimension inward club to disable PatchGuard too Driver Signature Enforcement (DSE). Features Currently supports all EFI-compatible versions of Windows x64 e'er released, from Vista SP1 to Server 2019. Easy to use: tin live on booted from a USB stick via a loader application that automatically finds too boots Windows. The driver tin also live on loaded too configured manually using either the UEFI rhythm out or the loader. Makes extensive utilization of the Zydis disassembler library for fast runtime pedagogy decoding to back upwardly to a greater extent than robust analysis than what is possible amongst signature matching, which oftentimes requires changes amongst novel OS updates. Works passively: the driver does non charge or start the Windows kicking manager. Instead it acts on a charge of bootmgfw.efi yesteryear the firmware kicking ...
Read more

Cameradar V2.1.0 - Hacks Its Mode Into Rtsp Videosurveillance Cameras

Image
   An RTSP flow access tool that comes alongside its library Cameradar allows you lot to Detect opened upward RTSP hosts on whatever accessible target host Detect which device model is streaming Launch automated dictionary attacks to larn their stream route (e.g.: /live.sdp ) Launch automated lexicon attacks to larn the username in addition to password of the cameras Retrieve a consummate in addition to user-friendly study of the results Docker Image for Cameradar Install docker on your machine, in addition to run the next command: docker run -t ullaakut/cameradar -t <target> <other command-line options> See command-line options . e.g.: docker run -t ullaakut/cameradar -t 192.168.100.0/24 -l volition scan the ports 554 in addition to 8554 of hosts on the 192.168.100.0/24 subnetwork in addition to laid on the discovered RTSP streams in addition to volition output debug logs. YOUR_TARGET tin hold out a subnet (e.g.: 172.16.100.0/24 )...
Read more