1. Masuk ke akun blogger dan klik drop down.
2. lalu pilih Template
3. Kemudian Klik Edit HTML
4. lalu cari kode ]]></b:skin>
5. untuk mempermudah pencarian tekan CTRL + F
6. Paste Kode Di bawah ini tepat sebelum kode ]]></b:skin>
ul.dropdown li a {
display: block;
padding: 3px 8px;
}
ul.dropdown li {
padding: 0;
}
ul.dropdown li.dir {
padding: 7px 20px 7px 12px;
}
ul.dropdown ul li.dir {
padding-right: 15px;
}
ul.dropdown ul a {
padding: 4px 5px 4px 12px;
}
ul.dropdown ul a:hover {
padding: 3px 5px 3px 11px;
border: solid 1px #ddd;
background-color: #eee;
font-weight: bold;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown li {
float: left;
min-height: 1px;
line-height: 1.3em;
vertical-align: middle;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
}
ul.dropdown ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 1px;
left: 99%;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
ul.dropdown {
font: bold 12px Arial, Helvetica, sans-serif;
}
ul.dropdown li {
padding: 3px 12px;
background-color: #000;
color: #fff;
}
ul.dropdown li.hover,
ul.dropdown li:hover {
background-color: #222;
}
ul.dropdown a:link,
ul.dropdown a:visited { color: #fff; text-decoration: none; }
ul.dropdown a:hover { color: #fff; text-decoration: underline; }
ul.dropdown a:active { color: #fff; }
/* -- level mark -- */
ul.dropdown ul {
margin-left: -6px;
width: 170px;
padding-bottom: 9px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEs6BQ44Juno8gx-ZLiMYbiEY53yWl4zyZyok9tpsd1BdykhHjn9d7Q7i9GtqcIx-UvEDIkfHFdnCEbpNVIP7mnINtihAp1RVSwgtYL1r0bU3Vwzi590bG4eTc5IV3dq7e3-ZV4aFyfyg/s1600/dropdown_pane.png) 0 100% no-repeat;
color: #000;
font-size: 11px;
font-weight: normal;
}
ul.dropdown ul li {
background-color: transparent;
color: #000;
}
ul.dropdown ul li.hover,
ul.dropdown ul li:hover {
background-color: transparent;
}
ul.dropdown ul li.empty {
padding: 12px 12px 7px !important;
font-weight: bold;
}
ul.dropdown ul a:link,
ul.dropdown ul a:visited { color: #000; }
ul.dropdown ul a:hover { color: #000; text-decoration: none; }
ul.dropdown ul a:active { color: #000; }
/* -- level mark -- */
ul.dropdown ul ul {
display: none;
}
/* -- Supporting class `dir` -- */
ul.dropdown *.dir {
padding-right: 12px;
background-image: none;
background-position: 100% 50%;
background-repeat: no-repeat;
}
7. Klik Simpan Template
8. lalu sobat pergi ke Tata Letak --> Tambah Gadget --> HTML Javascript
9. Paste Kode di bawah ini :
<ul class="dropdown dropdown-horizontal" id="nav">
<li><a href="Your Link URL">Home</a></li>
<li><a class="dir" href="Your Link URL">Solutions</a>
<ul>
<li class="empty">Industries</li>
<li><a href="Your Link URL">Broadcast and media</a></li>
<li><a href="Your Link URL">Education</a></li>
<li><a href="Your Link URL">Financial services</a></li>
<li><a href="Your Link URL">Government</a></li>
<li><a href="Your Link URL">Life sciences</a></li>
<li><a href="Your Link URL">Manufacturing</a></li>
<li class="empty">Solutions</li>
<li><a href="Your Link URL">Consumer photo</a></li>
<li><a href="Your Link URL">Mobile</a></li>
<li><a href="Your Link URL">Print publishing</a></li>
<li><a href="Your Link URL">Pro photography</a></li>
<li><a href="Your Link URL">Professional video</a></li>
<li><a href="Your Link URL">Applications</a></li>
<li><a href="Your Link URL">Communication</a></li>
<li><a href="Your Link URL">Learning</a></li>
<li><a href="Your Link URL">Web conferencing</a></li>
<li><a href="Your Link URL">Web publishing</a></li>
<li><a href="Your Link URL">All solutions ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Products</a>
<ul>
<li><a href="Your Link URL">Acrobat Connect Pro</a></li>
<li><a href="Your Link URL">Acrobat family</a></li>
<li><a href="Your Link URL">Adobe AIR</a></li>
<li><a href="Your Link URL">After Effects</a></li>
<li><a href="Your Link URL">ColdFusion</a></li>
<li><a href="Your Link URL">Creative Suite family</a></li>
<li><a href="Your Link URL">Dreamweaver</a></li>
<li><a href="Your Link URL">Flash</a></li>
<li><a href="Your Link URL">Flex</a></li>
<li><a href="Your Link URL">Illustrator</a></li>
<li><a href="Your Link URL">InDesign</a></li>
<li><a href="Your Link URL">Enterprise Suite</a></li>
<li><a href="Your Link URL">Mobile products</a></li>
<li><a href="Your Link URL">Photoshop family</a></li>
<li><a href="Your Link URL">Adobe Premiere Pro</a></li>
<li><a href="Your Link URL">Scene7 OnDemand</a></li>
<li><a href="Your Link URL">All products ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Support</a>
<ul>
<li><a href="Your Link URL">Support home</a></li>
<li><a href="Your Link URL">Customer Service</a></li>
<li><a href="Your Link URL">Knowledgebase</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Training</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Documentation</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Communities</a>
<ul>
<li class="empty">By user</li>
<li><a href="Your Link URL">Designers</a></li>
<li><a href="Your Link URL">Developers</a></li>
<li><a href="Your Link URL">Educators</a></li>
<li><a href="Your Link URL">Partners</a></li>
<li class="empty">By resource</li>
<li><a href="Your Link URL">Adobe Labs</a></li>
<li><a href="Your Link URL">Adobe TV</a></li>
<li><a href="Your Link URL">Forums</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li><a href="Your Link URL">Blogs</a></li>
<li><a href="Your Link URL">Experience Design</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Company</a>
<ul>
<li><a href="Your Link URL">About Adobe</a></li>
<li><a href="Your Link URL">Press</a></li>
<li><a href="Your Link URL">Investor Relations</a></li>
<li><a href="Your Link URL">Corporate Affairs</a></li>
<li><a href="Your Link URL">Careers</a></li>
<li><a href="Your Link URL">Showcase</a></li>
<li><a href="Your Link URL">Events</a></li>
<li><a href="Your Link URL">Contact Adobe</a></li>
<li><a href="Your Link URL">Become an affiliate</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Downloads</a>
<ul>
<li><a href="Your Link URL">Downloads home</a></li>
<li><a href="Your Link URL">Trial downloads</a></li>
<li><a href="Your Link URL">Updates</a></li>
<li><a href="Your Link URL">Exchange</a></li>
<li class="empty">Readers and Players</li>
<li><a href="Your Link URL">Get Adobe Reader</a></li>
<li><a href="Your Link URL">Get Flash Player</a></li>
<li><a href="Your Link URL">Get Adobe AIR</a></li>
<li><a href="Your Link URL">Get Shockwave Player</a></li>
<li><a href="Your Link URL">Get Media Player</a></li>
<li><a href="Your Link URL">More ›</a></li>
</ul>
</li>
<li><a class="dir" href="http://www.bloggertrix.com/">Store</a>
<ul>
<li><a href="Your Link URL">Store home</a></li>
<li><a href="Your Link URL">Software</a></li>
<li><a href="Your Link URL">Fonts</a></li>
<li><a href="Your Link URL">Books</a></li>
<li><a href="Your Link URL">Support programs</a></li>
<li><a href="Your Link URL">Your account</a></li>
<li><a href="Your Link URL">Volume licensing</a></li>
<li><a href="Your Link URL">Store offers</a></li>
<li><a href="Your Link URL">Other ways to buy ›</a></li>
</ul>
</li>
</ul>
10. Kemudian Simpan
Selesai..
Semoga Bermanfaat...
Tidak ada komentar:
Posting Komentar
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>