: :

Navbar Bawah

Cari Blog Ini

Selasa, 01 November 2016

Cara Membuat Menu Mega Drop Down Horizontal


Cara membuat mega drop down menu blogspot horizontal
Apa itu menu mega drop down? menu yang bisa menampung link dengan jumlah yang sangat besar yang terbagi dalam beberapa kolom,menu mega drop down ini tidak hanya unggul dalam quota link akan tetapi menu super power ini juga power speed (load page cepat dan ringan) karena menggunakan kode css dengan kombinasi kode html,menu mega drop down tidak diragukan lagi untuk dapat mempercantik blog dengan kapasitas posting yang sangat banyak dan sangat tepat untuk seorang blogger profesional yang mempunyai disiplin dan kemauan besar untuk membuat blog dengan sempurna.

Mega Drop Down Browser Support

Menu mega drop down horizontal sudah teruji dibeberapa peramban diantaranya yaitu Opera, Safari, Mozilla, Google Chrome, dan internet explore jadi anda tidak perlu khawatir untuk melengkapi blog anda dengan menu mega drop down horizontal bila anda berminat untuk mempercantik blog.

Bagaimana cara Membuat Menu Mega Drop Down?

Untuk membuat menu mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi seorang blogger profesional untuk dapat membuatnya, karena pada dasarnya anda hanya perlu melakukan copy code, paste code, mengganti link tujuan, save dan selesai mudah bukan.Dibawah ini nanti akan saya jelaskan dengan sangat detail untuk membuat menu mega drop down dengan bagian bagian kode yang ada pada menu mega drop down. Sebelum anda melanjutkan anda bisa melihat DEMONYA

Cara Membuat Menu Mega Drop Down Horizontal

1.Copy kode mega drop down dibawah ini, untuk lebih mudahnya anda klik icon view source pada syntax highlighter dibawah ini untuk mengambil kodenya (kode menu mega drop down).

view source
print?
001<div id="menu">
002<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
003<div class="dropdown_2columns"><!-- Begin 2 columns container -->
004<div class="col_2">
005<h2>Welcome !</h2>
006</div>
007<div class="col_2">
008<p>Selamat datang di kangroni blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p>            
009<p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p>            
010</div>
011<div class="col_2">
012<h2>Cross Browser Support</h2>
013</div>
014<div class="col_1">
015<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6Gs4L2tNPczmkBwacLoNAgIxpm3_Li4ShMKQJsSHO1t7mcExqtnwO7IrQw7CEr4IN_TmwoaUctkJefFz6cMfHjQOjnP924wZA7NtzyszZFgpl2DAO6r_HH4iuRQTwrLOvx8mH6Gsi33t/s1600/browsers.png" width="125" height="48" alt="" />
016</div>
017<div class="col_1">
018<p>Mega drop down ini telah teruji dibeberapa peramban utama.</p>
019</div>
020</div><!-- End 2 columns container -->
021</li><!-- End Home Item -->
022<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
023<div class="dropdown_5columns"><!-- Begin 5 columns container -->
024<div class="col_5">
025<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
026</div>
027<div class="col_1">
028<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
029</div>
030<div class="col_1">
031<p>Kang roni blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
032</div>
033<div class="col_1">
034<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
035</div>
036<div class="col_1">
037<p>Kangroni blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
038</div>
039<div class="col_1">
040<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
041</div>
042<div class="col_5">
043<h2>Berikut adalah konten dengan gambar sisi</h2>
044</div>
045<div class="col_3">
046<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcc6J8FuQe_S22R6dgAcVDTXzd2BRtVkmply0aJqFhoYOH3PVMRfIWKfRo2l_k7Q3twiBSCir4SEwhkt3GQBJvSw-y-OTbihVGvjc_078_O5zBbTbiXnr1szDvzthmTRlZZdpYeEf2Spo/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
047<p>Kang roni blog Tutorial blog optimasi seo. Kunjungi dan dapatkan tutorial lengkap Membuat dan Mengganti Thema Syntax Highlighter Blog Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan.<a href="#">Read more...</a></p>
048<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOy5qlZWfRX7CgEOqESwj5j7i-W68CpvliBxJWRTlrm1i5Vu_kntFhR1UXZPJG8nyyRY9TMhGBan8iOkaCQqG4lw96aNYVATFuOp0IMtRTgQ2_uplMNdAbLOFOEkwbTz3LFNkNyFcEOBzH/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
049<p>Cara Mudah Menambah dan Membuat Cantik Footer Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang.<a href="#">Read more...</a></p>
050</div>
051<div class="col_2">
052<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</p>
053</div>
054</div><!-- End 5 columns container -->
055</li><!-- End 5 columns Item -->
056<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
057<div class="dropdown_4columns"><!-- Begin 4 columns container -->
058<div class="col_4">
059<h2>Ini adalah judul judul Post</h2>
060</div>
061<div class="col_1">
062<h3>Beberapa Links</h3>
063<ul>
064<li><a href="#">Kang roni blog</a></li>
065<li><a href="#">Tutorial</a></li>
066<li><a href="#">Optimasi</a></li>
067<li><a href="#">Seo Blog</a></li>
068<li><a href="#">Blogger Seo</a></li>
069</ul>  
070</div>
071<div class="col_1">
072<h3>Tautan lainnya</h3>
073<ul>
074<li><a href="#">Kang roni</a></li>
075<li><a href="#">Membuat</a></li>
076<li><a href="#">Cara buat</a></li>
077<li><a href="#">Menu blog</a></li>
078<li><a href="#">Drop down</a></li>
079</ul>  
080</div>
081<div class="col_1">
082<h3>Tautan lainnya</h3>
083<ul>
084<li><a href="#">Tutorial</a></li>
085<li><a href="#">Optimasi</a></li>
086<li><a href="#">Blogspot</a></li>
087<li><a href="#">Seo</a></li>
088<li><a href="#">Profesional</a></li>
089</ul>  
090</div>
091<div class="col_1">
092<h3>Tautan</h3>
093<ul>
094<li><a href="#">Design</a></li>
095<li><a href="#">Logo</a></li>
096<li><a href="#">Flash</a></li>
097<li><a href="#">Illustration</a></li>
098<li><a href="#">More...</a></li>
099</ul>  
100</div>
101</div><!-- End 4 columns container -->
102</li><!-- End 4 columns Item -->
103<li class="menu_right"><a href="#" class="drop">1 Column</a>
104<div class="dropdown_1column align_right">
105<div class="col_1">
106<ul class="simple">
107<li><a href="#">FreelanceSwitch</a></li>
108<li><a href="#">Creattica</a></li>
109<li><a href="#">WorkAwesome</a></li>
110<li><a href="#">Mac Apps</a></li>
111<li><a href="#">Web Apps</a></li>
112<li><a href="#">NetTuts</a></li>
113<li><a href="#">VectorTuts</a></li>
114<li><a href="#">PsdTuts</a></li>
115<li><a href="#">PhotoTuts</a></li>
116<li><a href="#">ActiveTuts</a></li>
117<li><a href="#">Design</a></li>
118<li><a href="#">Logo</a></li>
119<li><a href="#">Flash</a></li>
120<li><a href="#">Illustration</a></li>
121<li><a href="#">More...</a></li>
122</ul>  
123</div>
124</div>
125</li>
126<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
127<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
128<div class="col_3">
129<h2>Daftar di box</h2>
130</div>
131<div class="col_1">
132<ul class="greybox">
133<li><a href="#">FreelanceSwitch</a></li>
134<li><a href="#">Creattica</a></li>
135<li><a href="#">WorkAwesome</a></li>
136<li><a href="#">Mac Apps</a></li>
137<li><a href="#">Web Apps</a></li>
138</ul>  
139</div>
140<div class="col_1">
141<ul class="greybox">
142<li><a href="#">ThemeForest</a></li>
143<li><a href="#">GraphicRiver</a></li>
144<li><a href="#">ActiveDen</a></li>
145<li><a href="#">VideoHive</a></li>
146<li><a href="#">3DOcean</a></li>
147</ul>  
148</div>
149<div class="col_1">
150<ul class="greybox">
151<li><a href="#">Design</a></li>
152<li><a href="#">Logo</a></li>
153<li><a href="#">Flash</a></li>
154<li><a href="#">Illustration</a></li>
155<li><a href="#">More...</a></li>
156</ul>  
157</div>
158<div class="col_3">
159<h2>Berikut adalah beberapa contoh gambar</h2>
160</div>
161<div class="col_3">
162<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOy5qlZWfRX7CgEOqESwj5j7i-W68CpvliBxJWRTlrm1i5Vu_kntFhR1UXZPJG8nyyRY9TMhGBan8iOkaCQqG4lw96aNYVATFuOp0IMtRTgQ2_uplMNdAbLOFOEkwbTz3LFNkNyFcEOBzH/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
163<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
164<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcc6J8FuQe_S22R6dgAcVDTXzd2BRtVkmply0aJqFhoYOH3PVMRfIWKfRo2l_k7Q3twiBSCir4SEwhkt3GQBJvSw-y-OTbihVGvjc_078_O5zBbTbiXnr1szDvzthmTRlZZdpYeEf2Spo/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
165<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <a href="#">Read more...</a></p>
166</div>
167</div><!-- End 3 columns container -->
168</li><!-- End 3 columns Item -->
169</div>
170
171<style type="text/css">
172body, ul, li {
173 font-size:14px;
174 font-family:Arial, Helvetica, sans-serif;
175 line-height:21px;
176 text-align:left;
177}
178
179/* Navigation Bar */
180
181#menu {
182 list-style:none;
183 width:940px;
184 margin:30px auto 0px auto;
185 height:43px;
186 padding:0px 20px 0px 20px;
187
188 /* Rounded Corners */
189
190 -moz-border-radius: 10px;
191 -webkit-border-radius: 10px;
192 border-radius: 10px;
193
194 /* Background color and gradients */
195
196 background: #014464;
197 background: -moz-linear-gradient(top, #0272a7, #013953);
198 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));
199
200 /* Borders */
201
202 border: 1px solid #002232;
203
204 -moz-box-shadow:inset 0px 0px 1px #edf9ff;
205 -webkit-box-shadow:inset 0px 0px 1px #edf9ff;
206 box-shadow:inset 0px 0px 1px #edf9ff;
207}
208
209#menu li {
210 float:left;
211 text-align:center;
212 position:relative;
213 padding: 4px 10px 4px 10px;
214 margin-right:30px;
215 margin-top:7px;
216 border:none;
217}
218
219#menu li:hover {
220 border: 1px solid #777777;
221 padding: 4px 9px 4px 9px;
222
223 /* Background color and gradients */
224
225 background: #F4F4F4;
226 background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);
227 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));
228
229 /* Rounded corners */
230
231 -moz-border-radius: 5px 5px 0px 0px;
232 -webkit-border-radius: 5px 5px 0px 0px;
233 border-radius: 5px 5px 0px 0px;
234}
235
236#menu li a {
237 font-family:Arial, Helvetica, sans-serif;
238 font-size:14px;
239 color: #EEEEEE;
240 display:block;
241 outline:0;
242 text-decoration:none;
243 text-shadow: 1px 1px 1px #000;
244}
245
246#menu li:hover a {
247 color:#161616;
248 text-shadow: 1px 1px 1px #FFFFFF;
249}
250#menu li .drop {
251 padding-right:21px;
252 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMR60cystiPZ3zY08Hv3KvSbBwb_RwJGbCyRCfN-UeO13yJHnXsPJSslIN3osbxraWi5EcSsX2CPebUuZf4cih8E_5bA5CoJ7yKddLmugB3tQsV2zS6kFsxZ5R_wqs9iITdc_vDo3TuCl5/s1600/drop.png") no-repeat right 8px;
253}
254#menu li:hover .drop {
255 background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMR60cystiPZ3zY08Hv3KvSbBwb_RwJGbCyRCfN-UeO13yJHnXsPJSslIN3osbxraWi5EcSsX2CPebUuZf4cih8E_5bA5CoJ7yKddLmugB3tQsV2zS6kFsxZ5R_wqs9iITdc_vDo3TuCl5/s1600/drop.png") no-repeat right 7px;
256}
257
258/* Drop Down */
259
260.dropdown_1column,
261.dropdown_2columns,
262.dropdown_3columns,
263.dropdown_4columns,
264.dropdown_5columns {
265 margin:4px auto;
266 float:left;
267 position:absolute !important;
268 left:-999em; /* Hides the drop down */
269 text-align:left;
270 padding:10px 5px 10px 5px;
271 border:1px solid #777777;
272 border-top:none;
273
274 /* Gradient background */
275 background:#F4F4F4;
276 background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
277 background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));
278
279 /* Rounded Corners */
280 -moz-border-radius: 0px 5px 5px 5px;
281 -webkit-border-radius: 0px 5px 5px 5px;
282 border-radius: 0px 5px 5px 5px;
283}
284
285.dropdown_1column {width: 140px;}
286.dropdown_2columns {width: 280px;}
287.dropdown_3columns {width: 420px;}
288.dropdown_4columns {width: 560px;}
289.dropdown_5columns {width: 700px;}
290
291#menu li:hover .dropdown_1column,
292#menu li:hover .dropdown_2columns,
293#menu li:hover .dropdown_3columns,
294#menu li:hover .dropdown_4columns,
295#menu li:hover .dropdown_5columns {
296 left:-1px ;
297z-index:444 !important;
298    top:auto;
299}
300
301/* Columns */
302
303.col_1,
304.col_2,
305.col_3,
306.col_4,
307.col_5 {
308 display:inline;
309 float: left;
310 position: relative;
311 margin-left: 5px;
312 margin-right: 5px;
313}
314.col_1 {width:130px;}
315.col_2 {width:270px;}
316.col_3 {width:410px;}
317.col_4 {width:550px;}
318.col_5 {width:690px;}
319
320/* Right alignment */
321
322#menu .menu_right {
323 float:right !important;
324 margin-right:0px;
325}
326#menu li .align_right {
327 /* Rounded Corners */
328 -moz-border-radius: 5px 0px 5px 5px;
329    -webkit-border-radius: 5px 0px 5px 5px;
330    border-radius: 5px 0px 5px 5px;
331}
332#menu li:hover .align_right {
333 left:auto;
334 right:-1px;
335 top:auto;
336}
337
338/* Drop Down Content Stylings */
339
340#menu p, #menu h2, #menu h3, #menu div li {
341 font-family:Arial, Helvetica, sans-serif;
342 line-height:21px;
343 font-size:12px;
344 text-align:left;
345 text-shadow: 1px 1px 1px #FFFFFF;
346}
347#menu h2 {
348 font-size:21px;
349 font-weight:400;
350 letter-spacing:-1px;
351 margin:7px 0 14px 0;
352 padding-bottom:14px;
353 border-bottom:1px solid #666666;
354}
355#menu h3 {
356 font-size:14px;
357 margin:7px 0 14px 0;
358 padding-bottom:7px;
359 border-bottom:1px solid #888888;
360}
361#menu p {
362 line-height:18px;
363 margin:0 0 10px 0;
364}
365
366#menu li:hover div a {
367 font-size:12px;
368 color:#015b86;
369}
370#menu li:hover div a:hover {
371 color:#029feb;
372}
373.strong {
374 font-weight:bold;
375}
376.italic {
377 font-style:italic;
378}
379.imgshadow {
380 background:#FFFFFF;
381 padding:4px;
382 border:1px solid #777777;
383 margin-top:5px;
384 -moz-box-shadow:0px 0px 5px #666666;
385 -webkit-box-shadow:0px 0px 5px #666666;
386 box-shadow:0px 0px 5px #666666;
387}
388.img_left { /* Image sticks to the left */
389 width:auto;
390 float:left;
391 margin:5px 15px 5px 5px;
392}
393#menu li .black_box {
394 background-color:#333333;
395 color: #eeeeee;
396 text-shadow: 1px 1px 1px #000;
397 padding:4px 6px 4px 6px;
398
399 /* Rounded Corners */
400 -moz-border-radius: 5px;
401 -webkit-border-radius: 5px;
402 border-radius: 5px;
403
404 /* Shadow */
405 -webkit-box-shadow:inset 0 0 3px #000000;
406 -moz-box-shadow:inset 0 0 3px #000000;
407 box-shadow:inset 0 0 3px #000000;
408}
409#menu li ul {
410 list-style:none;
411 padding:0;
412 margin:0 0 12px 0;
413}
414#menu li ul li {
415 font-size:12px;
416 line-height:24px;
417 position:relative;
418 text-shadow: 1px 1px 1px #ffffff;
419 padding:0;
420 margin:0;
421 float:none;
422 text-align:left;
423 width:130px;
424}
425#menu li ul li:hover {
426 background:none;
427 border:none;
428 padding:0;
429 margin:0;
430}
431#menu li .greybox li {
432 background:#F4F4F4;
433 border:1px solid #bbbbbb;
434 margin:0px 0px 4px 0px;
435 padding:4px 6px 4px 6px;
436 width:116px;
437
438 /* Rounded Corners */
439 -moz-border-radius: 5px;
440 -webkit-border-radius: 5px;
441 border-radius: 5px;
442}
443#menu li .greybox li:hover {
444 background:#ffffff;
445 border:1px solid #aaaaaa;
446 padding:4px 6px 4px 6px;
447 margin:0px 0px 4px 0px;
448}
449
450.tabs-inner .widget li a {
451padding: 1px ;
452display:block !important;
453border: 1px solid  transparent !important ;
454}
455
456
457</style>
458<a href="http://roningasinanblog.blogspot.com/" title="OPTIMASI SEO" ><img src="http://img1.blogblog.com/img/blank.gif" /></a>

2.Selanjutnya buka akun blogger anda kemudian masuk pada Tata Letak -> Klik Tambah Gadget -> Kemudian klik/pilih HTMLJavascript untuk memasukkan kode mega drop down.
3.Simpan dan selesai.
Untuk mengenal kode kode di atas saya akan menjelaskan Bagian bagian Kode Mega Drop Down Horizontal.

1.Kode Menu Mega Drop Down pada Bagian Home.

view source
print?
01<li><a href="#" class="drop">Home</a><!-- Begin Home Item -->
02<div class="dropdown_2columns"><!-- Begin 2 columns container -->
03<div class="col_2">
04<h2>Welcome !</h2>
05</div>
06<div class="col_2">
07<p>Selamat datang di kangroni blog ! Ini adalah karya yang mengagumkan dari Mega Drop Down Menu.</p>            
08<p>Menu ini dilengkapi dengan berbagai macam gaya yang mengagumkan dan disiapkan untuk judul, daftar dll.</p>            
09</div>
10<div class="col_2">
11<h2>Cross Browser Support</h2>
12</div>
13<div class="col_1">
14<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV6Gs4L2tNPczmkBwacLoNAgIxpm3_Li4ShMKQJsSHO1t7mcExqtnwO7IrQw7CEr4IN_TmwoaUctkJefFz6cMfHjQOjnP924wZA7NtzyszZFgpl2DAO6r_HH4iuRQTwrLOvx8mH6Gsi33t/s1600/browsers.png" width="125" height="48" alt="" />
15</div>
16<div class="col_1">
17<p>Mega drop down ini telah teruji dibeberapa peramban utama.</p>
18</div>
19</div><!-- End 2 columns container -->
20</li><!-- End Home Item -->

2.Kode Menu Mega Drop Down pada Bagian 5 Columns

view source
print?
01<li><a href="#" class="drop">5 Columns</a><!-- Begin 5 columns Item -->
02<div class="dropdown_5columns"><!-- Begin 5 columns container -->
03<div class="col_5">
04<h2>Ini adalah contoh dari sebuah wadah besar dengan 5 kolom</h2>
05</div>
06<div class="col_1">
07<p class="black_box">Ini adalah kotak teks warna abu abu gelap. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
08</div>
09<div class="col_1">
10<p>Kang roni blog Tutorial blog optimasi seo blogspot. Kunjungi dan dapatkan tutorial lengkap.</p>
11</div>
12<div class="col_1">
13<p class="italic">Ini adalah contoh dari suatu teks miring. Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
14</div>
15<div class="col_1">
16<p>Kangroni blog:Untuk membuat mega drop down di blog sangat mudah bahkan anda tidak perlu menjadi blogger profesional.</p>
17</div>
18<div class="col_1">
19<p class="strong">Ini adalah contoh dari teks tebal. Menu mega drop down yang bisa menampung link dengan jumlah yang sangat besar.</p>
20</div>
21<div class="col_5">
22<h2>Berikut adalah konten dengan gambar sisi</h2>
23</div>
24<div class="col_3">
25<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcc6J8FuQe_S22R6dgAcVDTXzd2BRtVkmply0aJqFhoYOH3PVMRfIWKfRo2l_k7Q3twiBSCir4SEwhkt3GQBJvSw-y-OTbihVGvjc_078_O5zBbTbiXnr1szDvzthmTRlZZdpYeEf2Spo/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
26<p>Kang roni blog Tutorial blog optimasi seo. Kunjungi dan dapatkan tutorial lengkap Membuat dan Mengganti Thema Syntax Highlighter Blog Syntax highlighter atau perintah untuk membuat penyorotan stabilo dengan.<a href="#">Read more...</a></p>
27<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOy5qlZWfRX7CgEOqESwj5j7i-W68CpvliBxJWRTlrm1i5Vu_kntFhR1UXZPJG8nyyRY9TMhGBan8iOkaCQqG4lw96aNYVATFuOp0IMtRTgQ2_uplMNdAbLOFOEkwbTz3LFNkNyFcEOBzH/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
28<p>Cara Mudah Menambah dan Membuat Cantik Footer Footer blog adalah bagian paling bawah pada halaman blog yang mempunyai baerbagai fungsi diantaranya adalah sebagai tempat untuk menambahkan gadget yang.<a href="#">Read more...</a></p>
29</div>
30<div class="col_2">
31<p class="black_box">Ini adalah kotak hitam, Anda dapat menggunakannya untuk menyoroti beberapa konten. Cara Membuat Menu Cantik CSS Horizontal Drop down di bawah Header Blog Tutorial untuk mempercantik blog dengan membuat menu blogspot dari kode css akan Kang Roni jelaskan bagaimana cara membuatnya dibawah ini nanti.Kenapa memakai nama CSS Seo? Alasan kang roni memberi nama CSS Seo karena menu Horizontal.</p>
32</div>
33</div><!-- End 5 columns container -->
34</li><!-- End 5 columns Item -->

3.Kode Menu Mega Drop Down pada Bagian 4 Columns

view source
print?
01<li><a href="#" class="drop">4 Columns</a><!-- Begin 4 columns Item -->
02<div class="dropdown_4columns"><!-- Begin 4 columns container -->
03<div class="col_4">
04<h2>Ini adalah judul judul Post</h2>
05</div>
06<div class="col_1">
07<h3>Beberapa Links</h3>
08<ul>
09<li><a href="#">Kang roni blog</a></li>
10<li><a href="#">Tutorial</a></li>
11<li><a href="#">Optimasi</a></li>
12<li><a href="#">Seo Blog</a></li>
13<li><a href="#">Blogger Seo</a></li>
14</ul>  
15</div>
16<div class="col_1">
17<h3>Tautan lainnya</h3>
18<ul>
19<li><a href="#">Kang roni</a></li>
20<li><a href="#">Membuat</a></li>
21<li><a href="#">Cara buat</a></li>
22<li><a href="#">Menu blog</a></li>
23<li><a href="#">Drop down</a></li>
24</ul>  
25</div>
26<div class="col_1">
27<h3>Tautan lainnya</h3>
28<ul>
29<li><a href="#">Tutorial</a></li>
30<li><a href="#">Optimasi</a></li>
31<li><a href="#">Blogspot</a></li>
32<li><a href="#">Seo</a></li>
33<li><a href="#">Profesional</a></li>
34</ul>  
35</div>
36<div class="col_1">
37<h3>Tautan</h3>
38<ul>
39<li><a href="#">Design</a></li>
40<li><a href="#">Logo</a></li>
41<li><a href="#">Flash</a></li>
42<li><a href="#">Illustration</a></li>
43<li><a href="#">More...</a></li>
44</ul>  
45</div>
46</div><!-- End 4 columns container -->
47</li><!-- End 4 columns Item -->

4.Kode Menu Mega Drop Down pada Bagian 1 Columns

view source
print?
01<li class="menu_right"><a href="#" class="drop">1 Column</a>
02<div class="dropdown_1column align_right">
03<div class="col_1">
04<ul class="simple">
05<li><a href="#">FreelanceSwitch</a></li>
06<li><a href="#">Creattica</a></li>
07<li><a href="#">WorkAwesome</a></li>
08<li><a href="#">Mac Apps</a></li>
09<li><a href="#">Web Apps</a></li>
10<li><a href="#">NetTuts</a></li>
11<li><a href="#">VectorTuts</a></li>
12<li><a href="#">PsdTuts</a></li>
13<li><a href="#">PhotoTuts</a></li>
14<li><a href="#">ActiveTuts</a></li>
15<li><a href="#">Design</a></li>
16<li><a href="#">Logo</a></li>
17<li><a href="#">Flash</a></li>
18<li><a href="#">Illustration</a></li>
19<li><a href="#">More...</a></li>
20</ul>  
21</div>
22</div>
23</li>

5.Kode Menu Mega Drop Down pada Bagian 3 Columns

view source
print?
01<li class="menu_right"><a href="#" class="drop">3 columns</a><!-- Begin 3 columns Item -->
02<div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->
03<div class="col_3">
04<h2>Daftar di box</h2>
05</div>
06<div class="col_1">
07<ul class="greybox">
08<li><a href="#">FreelanceSwitch</a></li>
09<li><a href="#">Creattica</a></li>
10<li><a href="#">WorkAwesome</a></li>
11<li><a href="#">Mac Apps</a></li>
12<li><a href="#">Web Apps</a></li>
13</ul>  
14</div>
15<div class="col_1">
16<ul class="greybox">
17<li><a href="#">ThemeForest</a></li>
18<li><a href="#">GraphicRiver</a></li>
19<li><a href="#">ActiveDen</a></li>
20<li><a href="#">VideoHive</a></li>
21<li><a href="#">3DOcean</a></li>
22</ul>  
23</div>
24<div class="col_1">
25<ul class="greybox">
26<li><a href="#">Design</a></li>
27<li><a href="#">Logo</a></li>
28<li><a href="#">Flash</a></li>
29<li><a href="#">Illustration</a></li>
30<li><a href="#">More...</a></li>
31</ul>  
32</div>
33<div class="col_3">
34<h2>Berikut adalah beberapa contoh gambar</h2>
35</div>
36<div class="col_3">
37<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOy5qlZWfRX7CgEOqESwj5j7i-W68CpvliBxJWRTlrm1i5Vu_kntFhR1UXZPJG8nyyRY9TMhGBan8iOkaCQqG4lw96aNYVATFuOp0IMtRTgQ2_uplMNdAbLOFOEkwbTz3LFNkNyFcEOBzH/s1600/02.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
38<p>Kangroni blog :Prediksi/Estimate/prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page.<a href="#">Read more...</a></p>
39<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipcc6J8FuQe_S22R6dgAcVDTXzd2BRtVkmply0aJqFhoYOH3PVMRfIWKfRo2l_k7Q3twiBSCir4SEwhkt3GQBJvSw-y-OTbihVGvjc_078_O5zBbTbiXnr1szDvzthmTRlZZdpYeEf2Spo/s1600/01.jpg" width="70" height="70" class="img_left imgshadow" alt="" />
40<p>Prakiraan SEO Blogspot 2013 | Setiap mesin pencarian atau sering kita sebut mesin browsing seperti Google, Yahoo, Bing dll-nya akan selalu memperbaiki keakuratannya dalam memilih page. <a href="#">Read more...</a></p>
41</div>
42</div><!-- End 3 columns container -->
43</li><!-- End 3 columns Item -->
44</div>

6.Selanjutnya yaitu kode CSS yang bisa anda ubah untuk menyesuaikan tampilan antara menu mega drop down dengan tampilan blog,kode cssnya bisa anda lihat di atas dari mulai kode pada baris 171 sampai 458.
Label:
Top Bottom Close

0   komentar

Silakan Berikan Komentar Dengan:

1. Bahasa yang baik dan sopan .
2. Tidak disarankan menaruh link aktif .
3. Tidak mengandung unsur SPAM, SARA dan POR*O.

Cancel Reply
Langganan: Posting Komentar ( Atom )