Cara Membuat Top Menu Statis Melayang di atas Header Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfblPk9gBs3mbo39dESbmx_8m681JPyhcQCx3kl2pUt0KuM2TBz_l8SbI3iuGiJhZs4lGOc-6k0GM_gl5gs4T4Ga1ut4dkAbofSt9JsoFPigQSA4SQAjdR-6e3Ld90d1lYmDTJOUNTxB0M/s1600/sticky+static+menu+blogger.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Top Menu Statis Melayang di Atas Header Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfblPk9gBs3mbo39dESbmx_8m681JPyhcQCx3kl2pUt0KuM2TBz_l8SbI3iuGiJhZs4lGOc-6k0GM_gl5gs4T4Ga1ut4dkAbofSt9JsoFPigQSA4SQAjdR-6e3Ld90d1lYmDTJOUNTxB0M/s1600/sticky+static+menu+blogger.JPG" title="Cara Membuat Top Menu Statis Melayang di Atas Header Blog" /></a></div><b>TUTORIAL</b> tentang cara membuat top menu navigasi statis, sticky, atau melayang di atas header blog sudah beberapa kali di-share di blog <a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank">CB </a>ini, seperti  <a href="http://contohblognih.blogspot.com/2015/01/cara-membuat-header-bar-top-menu-mirip-facebook.html" target="_blank">Cara Membuat Header Bar (Top Menu) Mirip Facebook</a> dan<a href="http://contohblognih.blogspot.com/2014/06/Navigasi-Menu-Diatas-Header-Blog.html" target="_blank"> Cara Membuat Navigasi Menu di Atas Header Blog</a>.<br /><br />Yang dimaksud menu statis, sticky, atau melayang (floating) adalah navigasi menu yang tetap muncul saat halaman discroll ke bawah.<br /><br />Kali ini CB share tentang Cara Membuat Top Menu Statis Melayang di Atas Header Blog <b>plus Media Sosial</b>. Contohnya? <b><a href="http://templateblogseobaru.blogspot.com/" target="_blank">Lihat Demo</a></b>.<br /><br />Sticky menu merupakan salah satu trending di dunia desain situs web/blog saat ini.<br /><br /><b>Cara Membuat Top Menu Statis Melayang di Atas Header Blog</b><br />1. Template > Edit HTML<br />2. Copy + Paste kode berikut ini <u>di atas</u> kode <b><span style="color: red;">]]></b:skin></span></b><br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">/*--Sticky Navigation Menu Bar--*/<br />#MBL_wrapper .MBL_social_wrapper{margin-top: 15px;}<br /><br />#MBL_wrapper<br />{<br />width: 100%;<br />margin: auto;<br />background: #fff;<br />height: 50px;<br />border-top: 5px solid #2c2f32;<br />border-bottom: 1px solid #EBEBEC;<br />-webkit-box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);<br />-moz-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);<br />-o-box-shadow: 0 1px 0 #d2d2d3, 0 1px 3px rgba(0,0,0,.2);<br />box-shadow: 0 1px 0 #D2D2D3, 0 1px 3px rgba(0, 0, 0, .2);<br />position: fixed;<br />z-index: 999;<br />}<br /><br />#MBL_wrapper .topmenu.notice<br />{<br />float: left;<br />width: 500px;<br />margin-top: 15px;<br />color: #fff;<br />}<br /><br />#top_menu a<br />{<br />color: #fff;<br />}<br /><br />#top_menu<br />{<br />display: block;<br />float: left;<br />list-style: none;<br />margin-top: 12px;<br />}<br /><br />#top_menu li<br />{<br />display: inline-block;<br />margin-right: 15px;<br />font-family: 'Patua One', 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;<br />font-size: 14px;<br />text-transform: uppercase;<br />}<br /><br />#top_menu li ul<br />{<br />display: none;<br />}<br /><br />#boxed_wrapper<br />{<br />width: 980px;<br />margin: auto;<br />}<br /><br />.MBL_standard_wrapper<br />{<br />width: 960px;<br />margin: auto;<br />}<br /><br />.MBL_standard_wrapper.wide<br />{<br />width: 980px;<br />}<br /><br />.MBL_standard_wrapper.header<br />{<br />margin-bottom: 0px;<br />}<br /><br />.MBL_social_wrapper<br />{<br />width: auto;<br />float: right;<br />}<br /><br />#menuforall .MBL_social_wrapper<br />{<br />margin-top: 15px;<br />}<br /><br />.MBL_social_wrapper ul<br />{<br />list-style: none;<br />}<br /><br />.MBL_social_wrapper ul li<br />{<br />float: right;<br />margin-left: 5px;<br />}<br /><br />.MBL_social_wrapper ul li img<br />{<br />width: 24px;<br />}<br /><br />#MBL_menu_wrapper<br />{<br />width: 930px;<br />height: 50px;<br />padding: 0;<br />margin:auto;<br />}<br /><br />.mainmenu.notice<br />{<br />float: left;<br />width: 600px;<br />padding: 17px 0 10px 12px;<br />z-index: 999;<br />}<br /><br />#MBL_menu_wrapper .nav ul, #MBL_menu_wrapper .nav<br />{<br />list-style: none;<br />display: block;<br />float: left;<br />margin: 0 23px 0 5px;<br />width: 700px;<br />}<br /><br />#MBL_menu_wrapper .nav ul li, #MBL_menu_wrapper .nav li<br />{<br />display: block;<br />float :left;<br />margin: 0;<br />}<br /><br />#MBL_menu_wrapper .nav ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul<br />{<br />display: none;<br />list-style: none;<br />background: #000;<br />position:absolute;<br />padding: 0;<br />margin-top: 51px;<br />width: 200px;<br />height: auto;<br />z-index: 1000;<br />padding-top: 5px;<br />border-bottom: 5px solid #000;<br />border-left: 0;<br />}<br /><br />#MBL_menu_wrapper .nav ul li ul li ul, #MBL_menu_wrapper div .nav li ul, .main_nav li ul li ul<br />{<br />margin-left: 200px;<br />margin-top: 5px;<br />}<br /><br />#MBL_menu_wrapper .nav li ul li a, .nav li ul li a, #MBL_menu_wrapper .nav ul li.current_page_parent ul.sub-menu li.current_page_item a, .nav li.current-menu-parent ul.sub-menu li.current_page_item a<br />{<br />background: none;<br />}<br /><br />.main_nav li ul li<br />{<br />width: 100%;<br />}<br /><br />#MBL_menu_wrapper .nav li ul li a, #MBL_menu_wrapper .nav li.current-menu-item ul li a, #MBL_menu_wrapper .nav li ul li.current-menu-item a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a<br />{<br />color: #fff;<br />display: block;<br />width: 188px;<br />font-weight: bold;<br />line-height: 1em;<br />padding: 10px 0 10px 12px;<br />background: none;<br />}<br /><br />.main_nav ul, .main_nav<br />{<br />list-style: none;<br />margin: auto;<br />width: 600px;<br />height: 50px;<br />z-index: 999;<br />float: left;<br />border-left: 1px solid #EBEBEC;<br />}<br /><br />.main_nav ul li,  .main_nav li<br />{<br />display: block;<br />float :left;<br />margin: 0;<br />}<br /><br />.main_nav ul li a,  .main_nav li a<br />{<br />display: block;<br />float :left;<br />margin: 0 0 0 0;<br />padding: 18px 15px 14px 15px;<br />color: #2c2f32;<br />font-family: 'Patua One';<br />text-transform: uppercase;<br />font-size: 13px;<br />font-weight: 500;<br />border-right: 1px solid #EBEBEC;<br />}<br /><br />.main_nav ul li ul li a,  .main_nav li ul li a<br />{<br />width: 165px;<br />padding: 7px 19px 7px 16px;<br />border: 0;<br />font-size: 12px;<br />font-weight: normal;<br />color: #ccc;<br />font-family: 'Helvetica Neue', Helvetica, Arial,Verdana,sans-serif;<br />}<br /><br />.main_nav ul li ul li:last-child a,  .main_nav li ul li:last-child a<br />{<br />border-bottom: 0;<br />}<br /><br />.main_nav ul li a:hover,  .main_nav li a:hover, .main_nav ul li a.hover,  .main_nav li a.hover, .main_nav ul li a:active,  .main_nav li a:active, .main_nav li.current-menu-item a<br />{<br />color: #fff;<br />background: #1bc4de;<br />}<br /><br />.main_nav li:last-child a:hover, .main_nav li:last-child a.hover<br />{<br />border-right: 0;<br />}<br /><br />.main_nav li ul li a,  .main_nav li.current-menu-item ul li a,#MBL_menu_wrapper .nav ul li ul li a, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a,<br />{<br />display: block;<br />width: 170px;<br />line-height: 0.7em;<br />padding: 5px 0 5px 30px;<br />}<br /><br />.main_nav li ul li a:hover,  .main_nav li.current-menu-item ul li a:hover, .main_nav li ul li a.hover,  .main_nav li.current-menu-item ul li a.hover, #MBL_menu_wrapper .nav ul li.current-menu-item ul li a:hover, #MBL_menu_wrapper .nav ul li ul li.current-menu-item a:hover, .main_nav li ul li:last-child a:hover, .main_nav li ul li:last-child a.hover<br />}<br /><br /> div<br />{<br />margin:0;<br />padding:0;<br />border:0;<br />font-weight:inherit;<br />font-style:inherit;<br />font-size:100%;<br />font-family:inherit;<br />vertical-align:baseline;<br />}<br /><br />a<br />{<br />color: #2C2F32;<br />text-decoration: none;<br />-webkit-transition: color .2s linear, background .1s linear;<br />-moz-transition: color .2s linear, background .1s linear;<br />-ms-transition: color .2s linear, background .1s linear;<br />-o-transition: color .2s linear, background .1s linear;<br />transition: color .2s linear, background .1s linear;<br />}<br /><br />/* Font Face ----------------------------------------------- */<br />@font-face {<br />font-family: 'Patua One';<br />font-style: normal;<br />font-weight: 400;<br />src: local('Patua One'), local('PatuaOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/patuaone/v3/yAXhog6uK3bd3OwBILv_SLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');<br />}<br /><br />ul{<br />margin: 0;<br />padding: 0;<br />list-style: none;<br />}</div><br /><br />3. Copy + Paste kode berikut ini di bawah kode <b><span style="color: red;"><body> </span></b><br /><br /><i>Jangan lupa ganti tanda pagar (#) dengan link dan nama-nama menu-nya, juga link media sosialnya!</i><br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><!-- Begin Navigation --><br /><div id='MBL_wrapper'><br /><div class='MBL_standard_wrapper'><br /><div class='menu-main-menu-container'><ul class='main_nav' id='main_menu'><li class='menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-533' id='menu-item-533'><br /><br /><a href='#'>Home</a></li><br /><li><a href='#'>Blog</a></li><br /><li><a href='#'>About Us</a></li><br /><li><a href='#'>Advertise Here</a></li><br /><li><a href='#'>Contact Us</a></li><br /><li><a href='htto://cbbloggerlab.blogspot.com'>CBBloggerLab</a></li><br /></ul></div><br /><div id='menu_border_wrapper'></div><br /><div class='MBL_social_wrapper'><br /><ul><br /><br /><li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLTmB0WJ8Gzl_2UcDA5RKVHkCkvgtL8oytSBFYBUY4LVc9oi_g9nCjLGwvMDbdZ-HdU0AQHjYupowPbkyAbsvZ_jorMAls1omKybGcMbmiBLEZHMzEEznWyTMpgG4FSjb7PO8qs35uhf8w/s1600/facebook.png'/></a></li><br /><br /><li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixSv6PwuYKgcmbputh2ht0YkFrrQNns3tfwOhTGeANTq05gmFSKkyX9tfFE8JMDuLrVtWaRiP7s9hENo1IY6cGpRB5_AbcLM-64_g_R1xuC6FerwDEnj-QNtj9Y0WkYM3CZXnMYv-C_idh/s1600/twitter.png'/></a></li><br /><br /><li><a href='#' target='_blank' title='Google+'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyUdn7hdm8msjoAc-OJ75XASRbLuT_ht9ftmGgOtBIBBfU7ZJVS4dL1SCrH4CNXvYGkHtE3XdIOwOc4AeTtG7-w_jHrX5ApSn0ECUOQoVfFH9Hdp97z3nMezBwFHiljyNtkkJkCcHZ9XgN/s1600/google.png'/></a></li><br /><br /><li><a href='#' target='_blank' title='Linkedin'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcvDyCj3dp3onnb1KP0i-Byw56XQJgJsTY-uzXNf1kSOyCAxKQVfRjbQoaM_UMsFVp5G21dRgnaB9myt9UuvOxHLzfAIwsiijFZsmTubMzhzNIR_llKAbayyz-RvBqg4QBxuyduzmJa630/s1600/linkedin.png'/></a></li><br /><br /><li><a href='#' target='_blank' title='Pinterest'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXceL5_rTodGrhhQILJCLiNoirm6Hwde4u95AjDUnH2SgLy7SLFoFMCKMMbg3xb2zqFOtvg5iiySi1S5E5xdGd7-pBjtmgySLOESS1vxsn616LQOfI4bP9b4tCElYV1xWqTgPXHRB7IrTW/s1600/pinterest.png'/></a></li><br /><br /><li><a href='#' target='_blank'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2hBG6b6_QaL3PAhSZ20jkzLqz1yU2nTre1HAMJLjz5FcEoAWXRNuuVIs9eLx0gMiGdJgtrQKkprOl2cG3Ouhyt5-L3jx5Z6bW9E_cSOVzhCoDeYRLFZF-5_cwGJF1Fsc1PSQu5hJEOecj/s1600/rss.png'/></a></li><br /><br /></ul><br /></div><br /></div><br /></div><br /><!-- End Navigation --></div><br /><br />4. Tambahkan kode <span style="color: red;"><b>padding-top:50px</b> </span>di dalam kode <span style="color: red;">#header-wrapper</span>. Contohnya begini:<br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">#header-wrapper {<br /><div>overflow: hidden;<br /><span style="color: red;">padding-top:50px;</span><br />}</div></div><br />Bisa juga dengan menambahkan kode <b>margin-top:50px</b> di kode "<b>wrapper</b>" atau "<b>main-wrapper</b>" atau "<b>content-wrapper</b>". Intinya, kode ini untuk <u>memunculkan header</u> biar gak ketutup top menu statis melayang  yang baru saja kita buat.<br /><div><i><br /></i>Angka 50 bisa berkurang, bisa juga ditambah, tergantung "pas" tidaknya ukuran jarak header dengan top menu statis tadi!<br /><br />Good Luck!<br /><br /><i><span style="font-size: x-small;"><b>Sumber</b></span></i><br /><i><span style="font-size: x-small;">http://www.mybloggerlab.com/2012/12/how-to-create-sticky-floating-navigation-menu.html</span></i></div>

Cara Membuat Top Menu Statis Melayang di atas Header Blog

TUTORIAL tentang cara membuat top menu navigasi statis, sticky, atau melayang di atas header blog sudah beberapa kali di-share di blog CB i...

Baca selengkapnya »

Cara Membuat Navigasi Menu Blog ala Metro UI Windows 8

<b>SETELAH</b> share tentang <a href="http://contohblognih.blogspot.com/2015/01/cara-membuat-featured-posts-metro-ui.html" target="_blank">Cara Membuat Featured Posts Metro UI Style</a>, kali ini CB share Cara Membuat Navigasi Menu Blog ala Metro UI juga. Bagi yang belum paham, Metro UI itu merujuk pada tampilan menu Start Windows 8.<br /><br />Ini dia penampakan Navigasi Menu Metro UI Style. Demonya bisa dilihat di <a href="http://cbbloggerlab.blogspot.com/" target="_blank">CB Blogger Lab</a>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2s8pu6Z_x-bxHL5DkcD3xzBvZgWXTQzqHOO4mCQr3nE43yuUdQ_ZRolXoSbFjbJzR5yrWF_NGwcNJgms8bMt4ISCr9gVno6YIEynBdnRH7iM0HCfAcUUZG28x2a5Qw4d5QuFwGEt6R3F9/s1600/metro+ui+style+menu+blogger.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Navigasi Menu Blog ala Metro UI Windows 8" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2s8pu6Z_x-bxHL5DkcD3xzBvZgWXTQzqHOO4mCQr3nE43yuUdQ_ZRolXoSbFjbJzR5yrWF_NGwcNJgms8bMt4ISCr9gVno6YIEynBdnRH7iM0HCfAcUUZG28x2a5Qw4d5QuFwGEt6R3F9/s1600/metro+ui+style+menu+blogger.JPG" title="Navigasi Menu Blog ala Metro UI Windows 8" /></a></div><br />Dengan tampilan Navigasi Menu Blog ala Metro UI Windows 8 ini, maka blog Anda akan "unik", lain dari yang lain, kecuali yang lain itu juga sama-sama pang juga!<br /><br /><b>Ini dia cara memasangnya:</b><br />1. Template > Edit HTML<br />2. COPAS kode berikut ini di atas kode <b>]]></b:skin></b><br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">/*===MBL METRO UI Menu==*/<br /><br />body {<br /> font-family:sans-serif;<br />}<br />a {<br /> text-decoration:none;<br />}<br />.mblmetromenu {<br /> width:960px;<br /> margin:auto;<br />}<br />@media screen and (max-width:960px) {<br /> .mblmetromenu {<br /> width:100%;<br /> }<br />}<br /><br />/* MblMetroMenu */<br />.MblMetroMenu {<br /> position:relative;<br />}<br />.om-nav {<br /> position:absolute;<br /> width:100%;<br /> z-index:999;<br /> display:none;<br />}<br />.om-ctrlbar {<br /> width:100%;<br /> height:48px;<br />}<br />.om-ctrlitems {<br /> margin:auto;<br /> padding:0px;<br /> height:48px;<br /> display:inline-block;<br /> text-align:center;<br />}<br />.om-ctrlitem {<br /> height:48px;<br /> width:48px;<br /> display:none;<br /> cursor:pointer;<br /> float:left;<br /> opacity:0.5;<br /> -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=50)" !important;<br /> filter: alpha(opacity=50) !important; /* For IE8 and earlier */ }<br />.om-ctrlitem:hover {<br /> opacity:0.8;<br /> -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)" !important;<br /> filter: alpha(opacity=80) !important; /* For IE8 and earlier */ }<br />.om-activectrlitem {<br /> opacity:1 !important;<br /> -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)" !important;<br /> filter: alpha(opacity=100) !important; /* For IE8 and earlier */ }<br />.om-controlitems {<br /> width:960px;<br /> margin:auto;<br />}<br />.om-controlitem {<br /> height:48px;<br /> cursor:pointer;<br />}<br />.om-closenav {<br /> float:left;<br />}<br />.om-movenext {<br /> float:right;<br />}<br />.om-itemholder {<br /> margin:auto;<br /> padding:20px 0px;<br />}<br />@media screen and (max-width:960px) {<br /> .om-closenav {<br />  position:absolute;<br />  z-index:9999;<br />  left:0;<br />  top:0;<br /> }<br /> .om-movenext {<br />  position:absolute;<br />  z-index:9999;<br />  right:0;<br />  top:0;<br /> }<br /> .om-controlitems {<br />  width:100%;<br /> }<br /> .om-itemholder {<br />  width:100%;<br /> }<br /> }<br />.om-centerblock {<br /> display:inline-block;<br />}<br />.om-item {<br /> display:none;<br />}<br />.om-showitem {<br /> margin:5px;<br /> float:left;<br /> display:none;<br />}<br />/* END MblMetroMenu */<br /><br />/* TILE BUTTONS */<br />/* Standar Buttons */<br />.tile-bt {<br /> text-align:center;<br /> cursor:pointer;<br /> width:90px;<br /> height:90px;<br />}<br />.tile-bt a {<br /> display:block;<br /> padding-top:12px;<br /> text-decoration: !important;<br />}<br />.tile-bt img {<br /> margin:0 auto 0 auto;<br /> padding-bottom:5px;<br /> height:48px;<br /> width:48px;<br /> position:relative;<br /> display:block;<br />}<br />.tile-bt span {<br /> font-size:12px;<br /> padding-bottom:10px;<br /> display:block;<br />}<br />.tile-bt:active {<br /> opacity:0.5;<br />}<br />/* End Standard Buttons */<br /><br /><br />/* Large Buttons */<br />.tile-bt-large {<br /> width:190px;<br /> height:90px;<br /> line-height:90px;<br /> text-align:center;<br /> cursor:pointer;<br />}<br />.tile-bt-large a {<br /> display:block;<br /> text-decoration: !important;<br />}<br />.tile-bt-large img {<br /> vertical-align: middle;<br /> margin:auto;<br /> padding:0px;<br /> position:relative;<br /> width:48px;<br /> height:48px;<br />}<br />.tile-bt-large span {<br /> vertical-align: middle;<br /> display:inline;<br />}<br />.tile-bt-large:active {<br /> opacity:0.5;<br />}<br />/* End Large Buttons */<br />/* Extralarge Buttons */<br />.tile-bt-extralarge {<br /> text-align:center;<br /> cursor:pointer;<br /> width:190px;<br /> height:190px;<br />}<br />.tile-bt-extralarge a {<br /> display:block;<br /> padding-top:52px;<br /> text-decoration: !important;<br />}<br />.tile-bt-extralarge img {<br /> margin:0 auto 0 auto;<br /> padding-bottom:22px;<br /> height:80px;<br /> width:80px;<br /> position:relative;<br /> display:block;<br />}<br />.tile-bt-extralarge span {<br /> font-size:14px;<br /> padding-bottom:20px;<br /> display:block;<br />}<br />.tile-bt-extralarge:active {<br /> opacity:0.5;<br />}<br />/* End Extralarge Buttons */<br /><br />/* END TILE BUTTONS */<br /><br />/* SHADOW LIST */<br />.shadow-white, .shadow-black, .shadow-blue, .shadow-green, .shadow-red {<br /> /*display:inline-block;*/<br />}<br />.shadow-white:hover {<br /> box-shadow:0px 0px 6px 3px #fff;<br /> -webkit-box-shadow:0px 0px 6px 3px #fff;<br /> -moz-box-shadow:0px 0px 6px 3px #fff;<br /> -o-box-shadow:0px 0px 6px 3px #fff;<br /> -ms-box-shadow:0px 0px 6px 3px #fff;<br />}<br />.shadow-blue:hover {<br /> box-shadow:0px 0px 6px 3px #38D1F7;<br /> -webkit-box-shadow:0px 0px 6px 3px #38D1F7;<br /> -moz-box-shadow:0px 0px 6px 3px #38D1F7;<br /> -o-box-shadow:0px 0px 6px 3px #38D1F7;<br /> -ms-box-shadow:0px 0px 6px 3px #38D1F7;<br />}<br />.shadow-green:hover {<br /> box-shadow:0px 0px 6px 3px #AACA37;<br /> -webkit-box-shadow:0px 0px 6px 3px #AACA37;<br /> -moz-box-shadow:0px 0px 6px 3px #AACA37;<br /> -o-box-shadow:0px 0px 6px 3px #AACA37;<br /> -ms-box-shadow:0px 0px 6px 3px #AACA37;<br />}<br />.shadow-red:hover {<br /> box-shadow:0px 0px 6px 3px #E81750;<br /> -webkit-box-shadow:0px 0px 6px 3px #E81750;<br /> -moz-box-shadow:0px 0px 6px 3px #E81750;<br /> -o-box-shadow:0px 0px 6px 3px #E81750;<br /> -ms-box-shadow:0px 0px 6px 3px #E81750;<br />}<br />.shadow-black:hover {<br /> box-shadow:0px 0px 6px 3px #444;<br /> -webkit-box-shadow:0px 0px 6px 3px #444;<br /> -moz-box-shadow:0px 0px 6px 3px #444;<br /> -o-box-shadow:0px 0px 6px 3px #444;<br /> -ms-box-shadow:0px 0px 6px 3px #444;<br />}<br />/* END SHADOW LIST */<br />/* BACKGROUND LIST */<br />/* Solid Colors */<br />.solid-blue { background:#00BBE2; }<br />.solid-blue-2 { background:#2C84EE; }<br />.solid-darkblue { background:#044E94; }<br />.solid-violetred { background:#781766; }<br />.solid-red { background:#E51400;}<br />.solid-red-2 { background:#E81750; }<br />.solid-pink { background:#FF539B; }<br />.solid-purple { background:#D02090; }<br />.solid-orange { background:#FB8F02; }<br />.solid-orange-2 { background:#FF6600; }<br />.solid-orange-3 { background:#DD5F37; }<br />.solid-coral { background:#CD5B45; }<br />.solid-green { background:#67B239; }<br />.solid-green-2 {background:#96BF01; }<br />.solid-darkgreen { background:#016C38; }<br />.solid-olive { background:#999900}<br />.solid-grass { background:#CDCD00; }<br />.solid-darkred { background:#5F0000; }<br />.solid-gold { background:#FEE9AE; }<br />.solid-yellow { background:#F7D100; }<br />.solid-black { background:#000; }<br />.solid-smoke { background:#F5F5F5; }<br />/* End Solid Colors */<br /><br />/* MISC */<br />.clearspace { clear: both; }<br />.floatleft { float:left; }<br />.floatright { float:right; }<br />.none { display: none !important; width:0px !important; }<br />.light-text {<br /> color:#fff;<br />}<br />.dark-text {<br /> color:#1e1e1e;<br />}<br />.gradient {<br /> background: -moz-linear-gradient(-45deg,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 100%); /* FF3.6+ */<br /> background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0.3))); /* Chrome,Safari4+ */<br /> background: -webkit-linear-gradient(-45deg,  rgba(255,255,255,0) 00%,rgba(255,255,255,0.3) 100%); /* Chrome10+,Safari5.1+ */<br /> background: -o-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* Opera 11.10+ */<br /> background: -ms-linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* IE10+ */<br /> background: linear-gradient(-45deg,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 100%); /* W3C */<br />}<br />.margin-5 { margin:5px; }</div><br />3. COPAS kode berikut ini di bawah kode header atau di atas kode menu. Bisa juga menggantikan kode <b>menu</b> yang ada sebelumnya, <b>replace</b> saja dengan kode berikut ini:<br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><!-- mblmetromenu --><br /><div class="mblmetromenu"><br /><br /><div data-navid="om-nav" class="tile-bt-extralarge solid-violetred shadow-black margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5Jt1OOQ8cGNo0ut_YCUZhPY0Od2ZscgTXd0GAPLOoJsWYbncNIILagoZnMTa_n7VLgTTQYilP_QEf4FLKlFlxds0iIHAwT61a7dNtvY2GdJ1rfPOZMf5Jb0N4BRQymPXsLEhb8ge8kac/s1600/home.png" alt="" /><br /><span class="light-text">Homepage</span><br /></a><br /></div><br />   <br /><div data-navid="om-nav" class="tile-bt-large solid-coral shadow-red margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkfmv51sbueRjnInxsqb4B0_PgzTwp_n6PzCUZkzVOYiuYC4-dlTO9HaoIdtij4QQg5B8e-J42ZpSO2PyEYCxt0n3mJQ2WY5C6GKRDh7yf61R1T2hyphenhyphentr6ki1vWEX-IldKAhT7Gd1fxCU/s1600/messanger.png" alt="" /><br /><span class="light-text">About US</span><br /></a><br /></div><br />   <br /><div data-navid="om-nav2" class="tile-bt solid-purple shadow-blue margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlrqkM_ROdjPj99QALebZfMxjstlKVc8cbl2nV-AarpPRWuhuDwAYu9OgYR_mGtFmi5VUimHOWVQQjG9nGbn1NG4CjzDThV8o0zGq1vEp-Up87TIKsYSK8_pKfI4m1I1b-nEVpsWy2n8/s1600/rss.png" alt="" /><br /><span class="light-text">Rss Feeds</span><br /></a><br /></div><br />   <br /> <div data-navid="om-nav" class="tile-bt-large solid-red shadow-red margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_cqr7w5e_iqhITiai2zDzk6TIc6xQCfl04ZMoSfPQrlJLRYEgY4GjAM2sM0PpyJghi-3EgfOZcy-lOVXChDbHHQZWVW0vN7hpzrFJKyNXEesMEFVrpn0JxOv6vnmrTSVwVfHIxke-_vY/s1600/search.png" alt="" /><br /><span class="light-text">Search</span><br /></a><br /></div><br />     <br /> <div data-navid="om-nav2" class="tile-bt solid-darkred shadow-red margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTtDW8Ec5cXPvwnkxttSPECWx_W_OKjd8bjXBvWwrP-wqoamLxtrogMAodiQLzMwxe8PN40D6uFEnORNBb4TUuu506lGhI1IUAgn1gZpP1q11X5FtoveZjZf1Hp9-Oe6bWoQZPLlNOxDQ/s1600/mail.png" alt="" /><br /><span class="light-text">Contact US</span><br /></a><br /></div><br />     <br /><div data-navid="om-nav2" class="tile-bt solid-black shadow-black margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHiyJfSNZVN2eUcCGrqU8Xz-01canpDHBQuCWt7reVCe2ppVrQWvoiw5R5L1bRTWzyp4E8X4FWBRQqU8KduibeMCG0cHgxGwbj7-yhW1Z5bUabSWw-bizEaRoOB8jBKQAMvJWqV-kBzjs/s1600/help.pn" alt="" /><br /> <span class="light-text">Get HELP</span><br /></a><br /> </div><br />     <br /><div data-navid="om-nav2" class="tile-bt solid-orange shadow-black margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbPtPZ9EEIneJS64UnIJ6Smk9KQqdG1a6Hhobjf1bRZPpAco8UTh8yl6H3THXUrDASC4hUs6OnJCDKCA6X_PLVyQnNPcHhiEEwZ1EbvFeyt6k2xNbiH0-RM88ca3eVqUcdLRWV51GeCp8/s1600/youtbe.png" alt="" /><br /><span class="light-text">YouTube</span><br /></a><br /></div><br />     <br /><div data-navid="om-nav2" class="tile-bt solid-darkblue shadow-blue margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghtolS38Y-2ScE1JTxfFKJKyGrs6d9ZHlw6o1EKk_J2yurXuXmJ8x15gxwYp4QFSMDL49mdFALikdNpSQJHYwBAdCBu3mYLZDq7sR4f0qvgDekI3SHXuF0H4DUTewBa38eLX5r3OfUQNc/s1600/face.png" alt="" /><br /><span class="light-text">Facebook</span><br /></a><br /></div><br />     <br /><div data-navid="om-nav" class="tile-bt-large solid-blue shadow-blue margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOYvcjhBHpcyOr8IeBHRFSiHTrATX8luocvie__nCaV8ReS2Jl0ZGV27cYnwQ_zoIjOl9ArhLeUp3IHZBFeviIbLWd8oKhJqvGGH_uHjHprTYUDKblFFM1xKPJdFuqqCBDku3fSzxuIpc/s1600/photo.png" alt="" /><br /><span class="light-text">Photos</span><br /></a><br /></div><br />     <br /><div data-navid="om-nav2" class="tile-bt solid-olive shadow-green margin-5 floatleft MblMetroMenu"><br /><a href="#" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoVCfTdFSge1Os4-EyKzL055bxzbNA4SsyE5THhPVIjsevs5oq-ldX88BVmSunTrCdnAyZHWqcXKDDHSXydDlt6OaoOrHIfhGseZrn1Zxgqe3Hhlf9Pctg6Sa_h_sk73xu1ioeGgdPSi0/s1600/music.png" alt="" /><br /><span class="light-text">Music</span><br /></a><br /> </div><br />     <br /><div data-navid="om-nav" class="tile-bt-large solid-blue-2 shadow-blue margin-5 floatleft MblMetroMenu"><br /><a href="http://www.mybloggerlab.com" class="gradient"><br /><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoYfWBpNqPtdV9hzLyyn2shl04IOTSCWclxoHzteEUQCvc_ukCAbCW39nepXm-kcp187gXjVRSfD9WuWsmW3l9ep9VFB4v1jpdCXUWJJWq7mNX66YbPC5kXZtWF2a7M_8oGJTt-siIe8M/s1600/MBL.png" alt="" /><br /><span class="light-text">MyBloggerLab</span><br /></a><br /></div><br />        <!-- End MblMetroMenu --><br />  </div><br /><!-- END mblmetromenu --></div><br />4. Ganti link (#) dan nama-nama menunya sesuai dengan selera Anda.<br />4. Save!<br /><br />Selamat, kini tampilan navigasi menu Anda keren bingit, mirip tampilan "Windows 8 Metro Menu". Good Luck!<br /><br /><i><span style="font-size: x-small;">Sumber:</span></i><br /><i><span style="font-size: x-small;">http://www.mybloggerlab.com/2012/12/how-to-create-metro-ui-navigation-menu.html</span></i>

Cara Membuat Navigasi Menu Blog ala Metro UI Windows 8

SETELAH share tentang  Cara Membuat Featured Posts Metro UI Style , kali ini CB share Cara Membuat Navigasi Menu Blog ala Metro UI juga. Ba...

Baca selengkapnya »

Cara Mengubah Warna Tampilan Blog

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bPyA1BbT9C6DXD_2paiIh8r6IiAszcA-1Jckws76aHSFSf5eYFrQBAtvbC1Llx_czh2_JXvMv55zYu1DThgtFhnmkur8dM9HELonyYTZ1xU4IPTH4Cfh_aEZ0Kj0gtuwvbA4vjYcS13P/s1600/kode+warna+html.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Mengubah Warna Tampilan Blog" border="0" height="197" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-bPyA1BbT9C6DXD_2paiIh8r6IiAszcA-1Jckws76aHSFSf5eYFrQBAtvbC1Llx_czh2_JXvMv55zYu1DThgtFhnmkur8dM9HELonyYTZ1xU4IPTH4Cfh_aEZ0Kj0gtuwvbA4vjYcS13P/s1600/kode+warna+html.JPG" title="Cara Mengubah Warna Tampilan Blog" width="320" /></a></div><b>SALAH</b> satu masalah yang dihadapi "newbie" adalah Cara Mengubah Warna Tampilan Blog, misalnya warna latar belakang menu atau header dari hitam ke merah dst.<br /><br />Mengubah warna sangat mudah, yaitu tinggal ganti kode warna HTML-nya di template. (Lihat <a href="http://contohblognih.blogspot.com/p/kode-warna-html.html" target="_blank">Kode Warna HTML</a>).<br /><br />Contohnya, kita mau <b>mengubah warna background menu</b>:<br /><ol><li>Intip dulu di mana posisi kode warnanya dengan cara: arahkan cursor mouse ke bagian menu, lalu klik kanan, dan pilih "inspect element", maka akan muncul kode warna seperti #000 (hitam).</li><li>Template > Edit HTML </li><li>Cari (Ctrl+F) elemen yang akan diubah warnanya</li><li>Ganti dengan kode warna lainnnya, misalnya dari HITAM (#000) menjadi MERAH (#c00).</li></ol><div><br /></div><div><b>MENGUBAH WARNA HURUF</b></div><div>Semua warna di template blog bisa diubah. Sebagai contoh, kita akan mengubah jenis huruf, ukuran huruf, dan warnanya. Maka, temukan kode-kode seperti ini:</div><br /><div style="background-color: #eeeeee; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px; margin-bottom: 1em; padding: 0px;"><b style="color: #333333;">Mengubah Warna Huruf</b><br /><span style="color: #333333;">1. Template > Edit HTML</span><br /><span style="color: #333333;">2. Cari [CTRL+F] kode </span><b><span style="color: red;">body {</span></b><span style="color: #333333;">3. Biasanya akan ada kode warna sepoerti </span><span style="color: red;"><b>color:#333333</b></span><br /><span style="color: #333333;">4. Ubah menjadi, misalnya. </span><b><span style="color: red;">#ff0000</span></b><span style="color: #333333;"> </span></div><div><div style="background-color: #eeeeee; font-family: Arial, Helvetica, sans-serif; font-size: 13px; line-height: 24px; margin-bottom: 1em; padding: 0px;"><span style="color: #333333;"><b>Mengubah Jenis Huruf</b><br style="margin: 0px; padding: 0px;" />1. Template > Edit HTML<br style="margin: 0px; padding: 0px;" />2. Cari [CTRL+F] kode </span><span style="color: red;"><b>#outer-wrapper {</b></span><br /><span style="color: #333333;">3. Biasanya akan ditemukan kode seprti </span><span style="color: red;">font: 14px Arial; or font-family:Arial;</span><br /><span style="color: #333333;">4. Ganti saja jenis hurfnya menjadi, misalnya, <b>Georgia, Helvetica, Times, etc.</b></span></div></div><br /><div><b>INTINYA</b></div><div>Kode warna HTML berupa ANGKA, HURUF, atau kombinas ANGKA & HURUF, yang diawali dengan tanda pagar (<b>#</b>). Contohnya:</div><div><br /></div><div><table cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-spacing: 0px; border: 0px; box-sizing: border-box; color: #444444; font-family: Arial; font-size: 14px; line-height: 22.75px; margin: 0px 0px 1.2em; max-width: 100%; padding: 0px;"><tbody style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: black; border: 0px; box-sizing: border-box; color: white; margin: 0px; padding: 0px;">#000000<br />Black</td></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: rgb(255, 235, 205); border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;">#FFEBCD<br />Blanchedalmond</td></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: blue; border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;">#0000FF<br />Blue</td></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: rgb(138, 43, 226); border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;">#8A2BE2<br />Blueviolet</td></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: rgb(165, 42, 42); border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;">#A52A2A<br />Brown</td></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"></tr><tr style="border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;"><td style="background: rgb(222, 184, 135); border: 0px; box-sizing: border-box; margin: 0px; padding: 0px;">#DEB887<br />Burlywood</td></tr></tbody></table></div><div><a href="http://contohblognih.blogspot.com/p/kode-warna.html" target="_blank">Kode Warna Selengkapnya</a></div><div><br /></div><div><b>CARA MODIFIKASI TOTAL</b></div><div>Bagi pengguna template bawaan blogger (default blogger template), lebih mudah lagi. Bukan hanya mengubah warna, tapi hampir semua elemen bisa dimodifikasi: ukuran, warna, jenis huruf, sidebar, dll. </div><div><br /></div><div><b>Caranya</b>:</div><div>1. Template > klik "Customize" (bukan Edit HTML)</div><div>2. Panduan Lengkap ada di <a href="https://support.google.com/blogger/answer/176245?hl=en" rel="nofollow" target="_blank">Blogger Template Designer</a>.</div><br />Demikian Cara Mengubah Warna Tampilan Blog dan lainnya, dengan catatan: jangan habiskan waktu dan energi Anda ke desain tampilan, tapi fokuslah ke <a href="http://contohblognih.blogspot.com/2014/06/membuat-konten-blog-berkualitas.html" target="_blank">Konten Berkualitas</a> sebagaimana disarankan Google!<br /><br />Warna tidak pengaruh bagi indeks Google! Warna hanya masalah "selera" dan "estetika". Warna dan desain yang kita pilih dan sukai, belum tentu disukai pengguna. Good Luck!

Cara Mengubah Warna Tampilan Blog

SALAH satu masalah yang dihadapi "newbie" adalah Cara Mengubah Warna Tampilan Blog, misalnya warna latar belakang menu atau heade...

Baca selengkapnya »

Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu)

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvY1AEFD6Q8jMnzZjiKhDCUHmdaUKuULlqtrw7w4yt1-0g2XUzrzf__lKFZYYEpYY-2dhq6mdUlRYgTMulNUKJWurEp7gtRHjUTv0SipxkPbarzXkhCu5_aTyQEQN-7KK2jbvbDVNl-_j/s1600/Start+is+Back+Win+8+ke+Win+7.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu)" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkvY1AEFD6Q8jMnzZjiKhDCUHmdaUKuULlqtrw7w4yt1-0g2XUzrzf__lKFZYYEpYY-2dhq6mdUlRYgTMulNUKJWurEp7gtRHjUTv0SipxkPbarzXkhCu5_aTyQEQN-7KK2jbvbDVNl-_j/s1600/Start+is+Back+Win+8+ke+Win+7.JPG" title="Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu)" width="320" /></a></div><i><b>Cara memunculkan atau menampilkan Menu START di Windows 8 ala Win 7 & XP tanpa menghilangkan Start Menu Asli Win 8.</b></i><br /><b><br /></b><b>TAMPILAN</b> Windows 8 is OK, look good. Flat Metro UI Style! Tapi, bagi sebagian orang, termasuk<a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank"> CB</a>, yang sudah lama bangat terbiasa dengan Win 7 ke bawah, tampilan start menu Win 8 cukup "ribet". Beras lebih mudah menggunakan Start Menu alas Windows 7 seperti dulu.<br /><br />Maka, seperti biasa, Googling saja dan menemukan salah satu cara praktis Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu), yaitu hanya dengan satu klik: Start is Back!<br /><br />Tenang, tampilan Win 8 masih ada kok, gak hilang. Begitu kita install Start is Back, tampilan Win 8 kita akan seperti Win 7, ada tombol Start di kiri bawah monitor, namun saat muose kita arahkan ke kanan bawah, menu tampilan Win 8 masih ada. So.... aman!<br /><br />CB berbagi Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu) setelah mencobanya dan berhasil.<br /><h3><b>Cara Mengubah Tampilan Windows 8 ke Windows 7: Memunculkan Start Menu</b></h3>1. Buka situs <a href="http://startisback.com/" rel="nofollow" target="_blank">Start is Back</a><br />2. Klik <a href="http://startisback.com/#download-tab" rel="nofollow" target="_blank">Download</a> atau <a href="http://startisback.com/#download-tab" rel="nofollow" target="_blank">Get StartIsBack</a><br />3. Pilih versi Win 8 yang saat ini digunakan: <a href="http://www.startisback.com/StartIsBack_setup.exe" rel="nofollow" target="_blank">Win 8</a> atau <a href="http://www.startisback.com/StartIsBackPlus_setup.exe" rel="nofollow" target="_blank">Win 8.1</a><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NR0FwN39Cb7huEM7uiLoe7T8b2bhNueLadAhZaPfQ1fredyTouP8H0N6Vva9ePw-AxXNvk_9PVjT6yO89lFH7oMqP0znF2TSDhQIzqO_JXEKEuUb1qd_43cp2bJACBfKOkt-23MvPlLW/s1600/Start+Menu+Windows+8.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Windows 8 ke Windows 7 (Start Menu)" border="0" height="98" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_NR0FwN39Cb7huEM7uiLoe7T8b2bhNueLadAhZaPfQ1fredyTouP8H0N6Vva9ePw-AxXNvk_9PVjT6yO89lFH7oMqP0znF2TSDhQIzqO_JXEKEuUb1qd_43cp2bJACBfKOkt-23MvPlLW/s1600/Start+Menu+Windows+8.JPG" title="Windows 8 ke Windows 7 (Start Menu)" width="320" /></a></div><i><br /></i><i>Dengan klik salah satu tombol di atas, nanti file setup otomatis akan terdownload. </i><br /><br />4. <i>Double Click</i> file hasil download tadi<br />5. Lakukan setting seperlunya, sesuai selera.<br />6. Beres!<br /><br />Selamat! Start Menu sudah muncul di kiri bawah layar monitor komputerAnda!<br /><blockquote class="tr_bq"><b>Start menu is back!</b>The missing Windows 8 start menu is back. Get the most useful and authentic start menu for Windows 8 and Windows 8.1.</blockquote><b>KENAPA START MENU?</b><br /><div>Seperti dikemukakan di awal, ini menyangkut UX, User Experience. Soal kebiasaan, namun yang lebih penting adalah Start Menu membuat aktivitas blogging dll akan lebih cepat!</div><div><br /></div><div>Star Menu memudahkan dan mempercepat kita untuk membuka program/aplikasi yang sering diguakan, juga memudahkan Restart dan Shutdown.</div><div><br /></div><b>Genuine start menu:</b><br /><ol><li>Your faithful desktop friend which helps you:</li><li>Launch programs you use frequently</li><li>Open documents you're working on</li><li>Find stuff you're looking for</li><li>Go to system places in one click</li><li>Easily shut down your system</li><li>Feel at home with Windows 8</li></ol>StartIsBack fully integrates with Windows 8 and provides original Windows 7 start menu experience, enhanced with many new features as well.<br /><br />Jangan khawatir, katanya, Start is Back ini sepenuhnya mengintegrasikan Windows 8 dan Win 7 alias aman damai tanpa ada status tersangka yang bikin kisruh KPK-Polri!<br /><br /><b>APLIKASI LAIN</b><br />Jika cara di atas gagal --kayanya gak deh, jamin berhasil, kita bisa menggunakan aplikasi atau program lainnya, seperti <a href="http://www.startmenu8.com/index.html" rel="nofollow" target="_blank">Start Menu 8</a>, <a href="http://www.stardock.com/products/start8/" rel="nofollow" target="_blank">Stardock Start 8</a>, <a href="http://www.classicshell.net/" rel="nofollow" target="_blank">Classic Shell</a>,  dll.<br /><div><br /></div><div>Demikian share <a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank">CB</a> tentang mengubah tampilan Win 8 menjadi Win 7 dengan menampilkan Start Menu. Good Luck!</div>

Mengubah Tampilan Windows 8 ke Windows 7 (Start Menu)

Cara memunculkan atau menampilkan Menu START di Windows 8 ala Win 7 & XP tanpa menghilangkan Start Menu Asli Win 8. TAMPILAN Windows 8 ...

Baca selengkapnya »

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpfiwrUTxktBovcXQnL6cUq4UhQMCogUQ0HobfTrBGLL89Cfe_ejFpO7kvP2jbIX0RxyWngi7bOKz55ErPRR2atx2XxzPhZV1SEQ0E338QM2aBC1O1QQf5rm4E4sjTR3GUJz4ff0RKeHF/s1600/kotak+pencarian+plus+media+sosial+widget+blog.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Cara Membuat Kotak Pencarian plus Ikon Media Sosial" border="0" height="153" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLpfiwrUTxktBovcXQnL6cUq4UhQMCogUQ0HobfTrBGLL89Cfe_ejFpO7kvP2jbIX0RxyWngi7bOKz55ErPRR2atx2XxzPhZV1SEQ0E338QM2aBC1O1QQf5rm4E4sjTR3GUJz4ff0RKeHF/s1600/kotak+pencarian+plus+media+sosial+widget+blog.JPG" title="Cara Membuat Kotak Pencarian plus Ikon Media Sosial" width="320" /></a></div><b>CARA</b> memasang, menampilkan, atau membuat widget <b>Kotak Pencarian (Search Box) plus Ikon Media Sosial</b> di sidebar blog sangat mudah. Kita tinggal pasang kode.<br /><br />Contohnya ada di sidebar blog <a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank">CB</a>  ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di <a href="http://onlinenewstemplate.blogspot.com/" target="_blank">Online News Template</a> yang baru saja dipasang.<br /><br />Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.<br /><br />Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.<br /><br />Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.<br /><h3><b>Cara Membuat Kotak Pencarian plus Ikon Media Sosial</b></h3>1. Layout > Add a Gadget di sidebar paling atas.<br />2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.<br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><!-- SEARCH BOX --><br /><style><br />#search-box {position: relative;width: 100%;margin: 0;}<br />#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}<br />#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}<br />#search-box input[type=&quot;text&quot;]<br />{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}<br />#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}<br /></style><br /><div id='search-box'><br /><form action='/search' id='search-form' method='get' target='_top'><br /><input id='search-text' name='q' placeholder='Search here...' type='text'/><br /><button id='search-button' type='submit'><span>Search</span></button><br /></form><br /></div><br /><!-- SEARCH BOX END --><br /><br /><!-- SOCIAL PROFILE END --><br /><div class='widget-content'><br /><style><br />#socialwidget {width: 300px;margin:10px 1px 10px 1px;}<br />    .TZ-social{padding:0 5px 15px;}<br />    .TZ-social img:hover{opacity:0.8}<br />    .googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}<br />    .TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}<br />    .TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}<br />    #widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}<br />    .TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}<br />    .TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}<br />    </style><br />    <div id='socialwidget'><br />    <div class='TZ-social'><br />    <!-- social ico --><br />    <center><br /><br />    <a href='http://facebook.com/<span style="color: red;">cbblogger</span>' rel='nofollow' style='margin-right: 15px;' target='_blank'><br />    <img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1A8FkCO8WTNODqTFAhR0jRDQr0yVEvKzkZVO2UIWazrx-7OcjsnLQW3Ury0Q8FErLt35jD_pDV31jkAkSiscPmznqY4A9eGPVGFNlNy_o6jzXlFPHactYu4d0LmYMSeid4J2lNUSNvL0/s1600/facebook.png'/></a><br /><br />    <a href='http://twitter.com/<span style="color: red;">contohblog</span>' rel='nofollow' style='margin-right: 12px;' target='_blank'><br />    <img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje7hCodNNKx1wj9kPAXLce-EPqxOxRsgqt9a5qrpmNtB1Psv-LdWZDIKu4aZI_u5H06o3jTwO3TDirvQhhmybr9txLtdAOh4qlGV9tSt_rHoWWA-K7A0tov65OSjIFeJazykfNoNqMi5M/s1600/twitter.png'/></a><br /><br />    <a href='https://plus.google.com/<span style="color: red;">106869251529186655236</span>/posts' rel='me' style='margin-right: 12px;' target='_blank'><br />    <img alt='Google Plus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiBvuO0R6ex1ShJrHNka-7kuoC0I_26YqswpSn7UltE8y9PiNGIFkf3q2Cv6HYkS2JkfospmoAYRe24fOYCeVtAwtlmJcF8H-hq82rAeD4QO94TKdIilYayoPUF877xiREQfC11VTdB4U/s1600/gplus.png'/></a><br /><br />    <a href='http://www.pinterest.com/<span style="color: red;">cbblogger</span>' style='margin-right: 12px;' target='_blank'><br />    <img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ohZanVSYlStCkP7GZ33V6U9Jfve_seyUR_TFxlnHQZDDieh4QN6Q6o_lPA-qjAoTQkMUvZQABclT9EoOrvabrTIJI-pnpDnVAdVu66jwDGSJ7So-55acZJpe7XRp9FpeyhqXLKl2yU0/s1600/pinterest.png'/></a><br /><br />    <a href='http://feeds.feedburner.com/<span style="color: red;">contohblognih</span>' rel='nofollow' style='margin-right: 12px;' target='_blank'><br />    <img alt='RSS Feed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsIttBWgu8aYHkaWkRixp-a31seoFemkMspSyczYHj14-sY85LLko8_zPkOrfz71mMZ8jpBsSsdpvvRY4iyT6tPp7YoGEBMKvi08h4bsUHWteGlW8_zAChzfQUvQbLf808epq191XFpP4/s1600/rss.png'/></a><br /><br />    <a href='http://www.linkedin.com/in/<span style="color: red;">cbblogger</span>' rel='nofollow' style='margin-right: 12px;' target='_blank'><br />    <img alt='Linkedin' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiue9ifC-CYuOPrSaaJw0adFIK-iXTOGlos19PcMxsXVXFTVFyAJLgWWOzWoaGAjof7rp4SYYQ-_GisB0ioEYwAoV4oGBDfMnfA8mx_HgqwJ_JvBUDZyzWOn_sG2aFXFydT8UmhzVTFHU4/s1600/linkedin.png'/></a><br /><br />    </center><br />    </div><br />    </div><br /></div><br /><!-- SOCIAL PROFILE END --></div><br />3. Ganti ID yang berwarna merah dengan kepunyaan Anda.<br />4. Save!<br /><br />Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda!

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widget  Kotak Pencarian (Search Box) plus Ikon Media Sosial  di sidebar blog sangat mudah. Kita ti...

Baca selengkapnya »

Cara Membuat Related Post Berupa Gambar Thumbnail

<b>UNTUK </b>melengkapi posting <a href="http://contohblognih.blogspot.com/2015/01/widget-recent-posts-unik-untuk-blog.html" target="_blank">Cara Membuat Recent Post (Lates Post, Posting Terbaru) dengan Gambar</a> yang cocok buat blog foto dan toko online, kali ini CB share tentang Related Postnya (Posting Terkait) yang juga dengan gambar (thumbnail image).<br /><br />Jenis Posting Terkait ini HANYA berupa gambar. Judul akan muncul saat cursor mouse diarahkan ke gambar.<br /><br />Ini penampakan Related Posts dengan gambar yang sudah coba diterapkan dan berhasil di <a href="http://cbbloggerlab.blogspot.com/" rel="nofollow" target="_blank">CB Blogger Lab</a>.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvfC9H2e6RrlyrknPNrZvNhfSRN3jsGmgwaqBNkx5WplS8FiGITFYYOZQq-j3ERvPWHOVsFepa0K8-Z09tPUM6Vd78S5zQhDd9uPzcsi0MH4M7KUyfNXyzcWpKMlGMtRoHvpq3AtQXUpJ/s1600/Related+Post+Berupa+Gambar+Thumbnail.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Related Post dengan Gambar " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxvfC9H2e6RrlyrknPNrZvNhfSRN3jsGmgwaqBNkx5WplS8FiGITFYYOZQq-j3ERvPWHOVsFepa0K8-Z09tPUM6Vd78S5zQhDd9uPzcsi0MH4M7KUyfNXyzcWpKMlGMtRoHvpq3AtQXUpJ/s1600/Related+Post+Berupa+Gambar+Thumbnail.JPG" title="Cara Membuat Related Post dengan Gambar " /></a></div><br /><br />Untuk blogger biasa --bukan blog foto/toko online, sebaiknya tidak menggunakan Related Post dengan Thumbnail Image biar lebih cepat loadingnya.<br /><br />Related Post sendiri adalah bagian dari navigasi dan internal link blog yang bagus buat seo dan user. Google menganjurkan navigasi dan internal linking di halaman situs web. Related Post juga memudahkan user mencari informasi lain denga tag, label. atau topik yang sama.<br /><h3><b>Cara Membuat Related Post Berupa Gambar Thumbail di Blogger</b></h3>1. "Template" > "Edit HTML"<br />2. Copy & Paste kode berikut ini di atas kode <b><span style="color: red;">]]></b:skin></span></b><br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;">/* Related Posts dengan Gambar  */<br />.related-post .post-thumbnail {<br />z-index: 1;<br />position: relative;<br /><span style="color: red;">width: 98px;<br />height: 98px;</span><br />margin: 0;<br />display: block;<br />border-right: 1px solid #fff;<br />border-bottom: 1px solid #fff;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />-webkit-box-shadow: inset 2px 2px 5px #444;<br />-moz-box-shadow: inset 2px 2px 5px #444;<br />box-shadow: inset 2px 2px 5px #555;<br />}<br />.related-post {<br />float: left;<br />position: relative;<br /><span style="color: red;">width: 98px;<br />height: 98px;</span><br />margin: 0 10px 10px 0;<br />background: #F6F6F6;<br />-webkit-border-radius: 5px;<br />-moz-border-radius: 5px;<br />border-radius: 5px;<br />}<br />.related-post .related-post-title {<br />display: none;<br />float: left;<br />background: #000;<br />color: #fff;<br />text-shadow: none;<br />font-weight: bold;<br />padding: 10px;<br />position: absolute;<br />top: -20px;<br />left: 40px;<br />z-index: 2;<br />width: 200px;<br />-webkit-box-shadow: 0 0 2px #444;<br />-moz-box-shadow: 0 0 2px #444;<br />box-shadow: 0 0 2px #444;<br />}<br />.related-post:hover .related-post-title {display: block;}</div><div><br /><i>Keterangan:</i></div><div><i>Yang berwarna merah adalah ukuran gambar.</i><br /><br /><b>2. Cari (Ctrl+F) kode yang seprti berikut ini:</b><br /><br /><div style="background-color: #f2f2f2; border: 1px solid rgb(221, 221, 221); padding: 10px;"><span style="color: blue;"><div class='post-footer'></span><br /><span style="color: blue;"><div class='post-footer-line post-footer-line-1'/></span><br /><span style="color: blue;"><div class='post-footer-line post-footer-line-2'/></span><br /><span style="color: blue;"><div class='post-footer-line post-footer-line-3'/></span><br /><span style="color: blue;"></div></span><br /><span style="color: blue;"></div></span></div><div><br /></div><div><b>3. Copy & Paste kode berikut ini di bawah kode tersebut:</b><br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><div id='related-posts'><br /><b:if cond='data:blog.pageType == &quot;item&quot;'><br /><script type='text/javascript'>//<![CDATA[<br />var ry='<h3>Related Posts</h3>';rn='<h3>&nbsp;&nbsp;&nbsp;No related post available</h3>';rcomment='comments';rdisable='disable comments';commentYN='no';<br />var dw='';titles=new Array();titlesNum=0;urls=new Array();timeR=new Array();thumb=new Array();commentsNum=new Array();comments=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];titles[titlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if('thr$total' in d){commentsNum[titlesNum]=d.thr$total.$t+' '+rcomment}else{commentsNum[titlesNum]=rdisable};if(d.link[a].rel=="alternate"){urls[titlesNum]=d.link[a].href;timeR[titlesNum]=d.published.$t;if('media$thumbnail' in d){thumb[titlesNum]=d.media$thumbnail.url}else{thumb[titlesNum]='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH02_h7oKigTSEOFvTj_CaFYeBBTMMgacareXyysvE3YlAVXPUVZL116_W6_c1A-KqiYCRViAD_e9LnJXxUIZeRQQy4Jo2yAx0ddg155DJOmAjweagbjQgocz-Em51ZxVBen8e7je3eUjt/'};titlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);c=new Array(0);e=new Array(0);f=new Array(0);g=new Array(0);for(var a=0;a<urls.length;a++){if(!contains(b,urls[a])){b.length+=1;b[b.length-1]=urls[a];c.length+=1;c[c.length-1]=titles[a];e.length+=1;e[e.length-1]=timeR[a];f.length+=1;f[f.length-1]=thumb[a];g.length+=1;g[g.length-1]=commentsNum[a]}}urls=b;titles=c;timeR=e;thumb=f;commentsNum=g}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){var y=a.indexOf('?m=0');if(y!=-1){a=a.replace(/\?m=0/g,'')}for(var b=0;b<urls.length;b++){if(urls[b]==a){urls.splice(b,1);titles.splice(b,1);timeR.splice(b,1);thumb.splice(b,1);commentsNum.splice(b,1)}}var c=Math.floor((titles.length-1)*Math.random());var b=0;if(titles.length==0){dw+=rn}else{dw+=ry;dw+='<div class="clear"/></div><ul>';while(b<titles.length&&b<20&&b<maxresults){if(y!=-1){urls[c]=urls[c]+'?m=0'}if(commentYN=='yes'){comments[c]=' - '+commentsNum[c]}else{comments[c]=''};dw+='<div class="related-post"><div class="related-post-title">'+titles[c]+'</div><a href="'+urls[c]+'" rel="nofollow"><img border="0" class="post-thumbnail" alt="'+titles[c]+'" src="'+thumb[c]+'"/></a></div></div>';if(c<titles.length-1){c++}else{c=0}b++}dw+='</ul>'};urls.splice(0,urls.length);titles.splice(0,titles.length);document.getElementById('related-posts').innerHTML=dw};<br />//]]></script><br /><b:loop values='data:post.labels' var='label'><br /><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&quot;' type='text/javascript'/><br /></b:loop><br /><script type='text/javascript'><span style="color: red;">varmaxresults=5</span>;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script><br /></b:if><br /></div><br /><div class='clear'/></div><div><br /><i>Keterangan:</i><br /><div><i>Yang berwarna merah adalah jumlah Related Post atau Jumlah Thumbnail Image yang ingin ditampilkan.</i></div><br /><b>4. Baca basmalah biar berhasil dan berkah... dan Save Template!</b></div><div><br /></div><div>Mestinya, jika keempat langkah di atas dilakukan dengan baik dan benar, maka Related Post berupa Thumbnail Image (gambar) akan muncul di postingan blog. Good Luck!<br /><br /><i><span style="font-size: x-small;"><a href="http://www.mybloggerlab.com/2012/10/tooltips-related-post-widget-with-thumbnails.html" rel="nofollow" target="_blank">Sumber</a></span></i></div></div></div>

Cara Membuat Related Post Berupa Gambar Thumbnail

UNTUK melengkapi posting Cara Membuat Recent Post (Lates Post, Posting Terbaru) dengan Gambar yang cocok buat blog foto dan toko online, ka...

Baca selengkapnya »

Cara Membuat Tabbed Widget di Sidebar Blog

<div class="separator" style="clear: both; text-align: center;"></div><div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4vLs7MYmrjJQx4XiCNCbFY23x-G6w011wipR3z7iPBIGSO_HgC-YZuT8PjfqBEh9p_43bq_CPmC3eZOpomaDcmVUhiMveU_AA0BY5007YCRxzK9cizx35G1rz7alqM8WwcRBzTqZo1XM/s1600/Tabber+Widget+Blog.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="Tabbed Widget di Sidebar Blog" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC4vLs7MYmrjJQx4XiCNCbFY23x-G6w011wipR3z7iPBIGSO_HgC-YZuT8PjfqBEh9p_43bq_CPmC3eZOpomaDcmVUhiMveU_AA0BY5007YCRxzK9cizx35G1rz7alqM8WwcRBzTqZo1XM/s1600/Tabber+Widget+Blog.png" title="Tabbed Widget di Sidebar Blog" /></a></div><b>MEMBUAT</b> Tabbed Widget di Sidebar Blog bisa "menghemat" ruangan sidebar. Contohnya Tabber yang ada dalam ilustrasi gambar posting ini --<b>Popular Posts, Latest Post, Comments</b>. Keren 'kan?<br /><br />Widget seperti ini dalam istilah bahasa Inggrisnya disebut "<i>Multi Tabbed Widget".</i><br /><i><br /></i><b><a href="http://cbbloggerlab.blogspot.com/" target="_blank">Lihat DEMO</a></b></div><div></div><div><br />Di blog <a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank">CB</a> ini juga ada, tapi hanya dimunculkan di halaman depan dengan menampilkan "Terbaru", "Terpopuler", dan "Teraniaya".<br /><br />Tabber Widget ini termasuk Navigasi Blog sekaligus Internal Link yang sangat dianjurkan Google.</div><div></div><div><br />Internal Link atau Navigasi Menu akan memudahkan pengunjung mengeksplorasi konten blog.<br /> <h3><b>Cara Membuat Tabbed Widget di Sidebar Blog</b> </h3><div>1. Template > Edit HTML<br />2. Cari (Ctrl+F) kode <span style="color: red;"></head></span> dan Copy & Paste kode berikut ini tepat <b>di atas </b></head></div><div><br /></div><div><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><!-- Tabber Widget  --><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;"><script type='text/javascript'> </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">//<![CDATA[ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">document.write('<style type="text/css">.tabber{display:none;}<\/style>'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">function tabberObj(argsObj) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var arg; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.div = null; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classMain = "tabber"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classMainLive = "tabberlive"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classTab = "tabbertab"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classTabDefault = "tabbertabdefault"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classNav = "tabbernav"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classTabHide = "tabbertabhide"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.classNavActive = "tabberactive"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.titleElements = ['h2','h3','h4','h5','h6']; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.titleElementsStripHTML = true; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.removeTitle = true; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.addLinkId = false; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.linkIdFormat = '<tabberid>nav<tabnumberone>'; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  for (arg in argsObj) { this[arg] = argsObj[arg]; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.REclassMain = new RegExp('\\b' + this.classMain + '\\b', 'gi'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.REclassMainLive = new RegExp('\\b' + this.classMainLive + '\\b', 'gi'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.REclassTab = new RegExp('\\b' + this.classTab + '\\b', 'gi'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.REclassTabDefault = new RegExp('\\b' + this.classTabDefault + '\\b', 'gi'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.REclassTabHide = new RegExp('\\b' + this.classTabHide + '\\b', 'gi'); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabs = new Array(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (this.div) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.init(this.div); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.div = null; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">} </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.init = function(e) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  childNodes, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  i, i2, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  t, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  defaultTab=0, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  DOM_ul, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  DOM_li, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  DOM_a, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  aId, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  headingElement; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!document.getElementsByTagName) { return false; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (e.id) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.id = e.id; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabs.length = 0; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  childNodes = e.childNodes; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  for(i=0; i < childNodes.length; i++) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if(childNodes[i].className && </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">       childNodes[i].className.match(this.REclassTab)) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      t = new Object(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      t.div = childNodes[i]; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      this.tabs[this.tabs.length] = t; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      if (childNodes[i].className.match(this.REclassTabDefault)) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    defaultTab = this.tabs.length-1; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  DOM_ul = document.createElement("ul"); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  DOM_ul.className = this.classNav; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  for (i=0; i < this.tabs.length; i++) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    t = this.tabs[i]; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    t.headingText = t.div.title; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (this.removeTitle) { t.div.title = ''; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (!t.headingText) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      for (i2=0; i2<this.titleElements.length; i2++) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    headingElement = t.div.getElementsByTagName(this.titleElements[i2])[0];</span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (headingElement) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      t.headingText = headingElement.innerHTML; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      if (this.titleElementsStripHTML) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">        t.headingText.replace(/<br>/gi," "); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">        t.headingText = t.headingText.replace(/<[^>]+>/g,""); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      break; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (!t.headingText) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      t.headingText = i + 1; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_li = document.createElement("li"); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    t.li = DOM_li; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a = document.createElement("a"); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.appendChild(document.createTextNode(t.headingText)); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.href = "javascript:void(null);"; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.title = t.headingText; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.onclick = this.navClick; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.tabber = this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_a.tabberIndex = i; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (this.addLinkId && this.linkIdFormat) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      aId = this.linkIdFormat; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      aId = aId.replace(/<tabberid>/gi, this.id); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      aId = aId.replace(/<tabnumberzero>/gi, i); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      aId = aId.replace(/<tabnumberone>/gi, i+1); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      aId = aId.replace(/<tabtitle>/gi, t.headingText.replace(/[^a-zA-Z0-9\-]/gi, '')); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      DOM_a.id = aId; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_li.appendChild(DOM_a); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    DOM_ul.appendChild(DOM_li); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  e.insertBefore(DOM_ul, e.firstChild); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  e.className = e.className.replace(this.REclassMain, this.classMainLive); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabShow(defaultTab); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (typeof this.onLoad == 'function') { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.onLoad({tabber:this}); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.navClick = function(event) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  rVal, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  a, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  self, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  tabberIndex, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  onClickArgs; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  a = this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!a.tabber) { return false; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  self = a.tabber; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  tabberIndex = a.tabberIndex; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  a.blur(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (typeof self.onClick == 'function') { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    onClickArgs = {'tabber':self, 'index':tabberIndex, 'event':event}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    /* IE uses a different way to access the event object */ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (!event) { onClickArgs.event = window.event; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    rVal = self.onClick(onClickArgs); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (rVal === false) { return false; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  self.tabShow(tabberIndex); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return false; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.tabHideAll = function() </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var i; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  for (i = 0; i < this.tabs.length; i++) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.tabHide(i); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.tabHide = function(tabberIndex) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var div; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!this.tabs[tabberIndex]) { return false; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  div = this.tabs[tabberIndex].div; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!div.className.match(this.REclassTabHide)) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    div.className += ' ' + this.classTabHide; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.navClearActive(tabberIndex); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.tabShow = function(tabberIndex) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{</span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var div; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!this.tabs[tabberIndex]) { return false; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabHideAll(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  div = this.tabs[tabberIndex].div; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  div.className = div.className.replace(this.REclassTabHide, ''); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.navSetActive(tabberIndex); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (typeof this.onTabDisplay == 'function') { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    this.onTabDisplay({'tabber':this, 'index':tabberIndex}); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.navSetActive = function(tabberIndex) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{</span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabs[tabberIndex].li.className = this.classNavActive; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">tabberObj.prototype.navClearActive = function(tabberIndex) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{</span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  this.tabs[tabberIndex].li.className = ''; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">}; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">function tabberAutomatic(tabberArgs) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    tempObj, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    divs, </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    i; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!tabberArgs) { tabberArgs = {}; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  tempObj = new tabberObj(tabberArgs); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  divs = document.getElementsByTagName("div"); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  for (i=0; i < divs.length; i++) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    if (divs[i].className && </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    divs[i].className.match(tempObj.REclassMain)) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      tabberArgs.div = divs[i]; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      divs[i].tabber = new tabberObj(tabberArgs); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  return this; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">} </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">function tabberAutomaticOnLoad(tabberArgs) </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">{ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  var oldOnLoad; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!tabberArgs) { tabberArgs = {}; } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  oldOnLoad = window.onload; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (typeof window.onload != 'function') { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    window.onload = function() { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      tabberAutomatic(tabberArgs); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    }; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } else { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    window.onload = function() { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      oldOnLoad(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">      tabberAutomatic(tabberArgs); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    }; </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">} </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">/* Run tabberAutomaticOnload() unless the "manualStartup" option was specified */ </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">if (typeof tabberOptions == 'undefined') { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    tabberAutomaticOnLoad(); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">} else { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  if (!tabberOptions['manualStartup']) { </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">    tabberAutomaticOnLoad(tabberOptions); </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">  } </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">} </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;">//]]> </span><br /><span class="fullpost" style="color: #333333; display: inline; font-family: Lora, serif; font-size: 13px; line-height: 16.3800010681152px;"></script></span></div><br />3. Cari kode <span style="color: red;">]]></b:skin></span> dan Copas kode berikut ini di atasnya!<br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabberlive{</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    margin:0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding:5px;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    clear:both;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    background:#f8f8f8;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border:1px solid #DDD;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbernav {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    margin:0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding: 3px 0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    font-family:Arial,Helvetica,sans-serif;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    font-size:12px;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    font-weight:bold;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbernav li {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    list-style:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    margin:0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    display:inline;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbernav li a {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding:6px 0.5em;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    margin-right:1px;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border:1px solid #DDD;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border-bottom:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    background:#0084ce;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    text-decoration:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    color:#ffffff;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbernav li a:hover {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    color:#fff;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    background:#333;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border:1px solid #DDD;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    text-decoration:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    -webkit-transition: all .4s ease-in-out;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    -moz-transition: all .4s ease-in-out;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    -ms-transition: all .4s ease-in-out;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    -o-transition: all .4s ease-in-out;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    transition: all .4s ease-in-out;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbernav li.tabberactive a, .tabbernav li.tabberactive a:hover {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    background:#333;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    color:#fff;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border-bottom: 0px solid #ffffff;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabberlive .tabbertab {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding:5px;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border:0px solid #DDD;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border-top:0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    background:#ffffff;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabberlive .tabbertab h2,</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    .tabberlive .tabbertabhide {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    display:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbertab .widget-content ul{</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    list-style:none;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    margin:0 0 10px 0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding:0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">.tabbertab .widget-content li {</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    border-bottom:1px solid #ddd;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">    padding:2px 0 5px 0;</span><br /><span style="color: #333333; font-family: monospace; font-size: 13px; line-height: 16.3800010681152px;">}</span></div><br />4. Cari kode <b><span style="color: red;"><div id='sidebar-wrapper'></span></b> dan Copas kode berikut ini di bawahnya:<br /><br /><div style="background-color: #f2f2f2; border: 1px solid #ddd; padding: 10px; text-align: left;"><div style='clear:both;'/> <div class='tabber'><br /><b:section class='tabbertab' id='tab1' maxwidgets='1'/><br /><b:section class='tabbertab' id='tab2' maxwidgets='1'/><br /><b:section class='tabbertab' id='tab3' maxwidgets='1'/><br /></div></div><br /><i><b>Catatan:</b></i><br /><i>Kode di atas akan memunculkan Tiga Tabber Widget Baru di Sidebar bagian paling atas. </i><br /><i><br /></i>Jika ingin menampilkan Tabbed Widget ini di bawah widget yang sudah ada, maka Copas kode tersebut sebelum kode penutup <span style="color: red;"></div></span> pada kode elemen <span style="color: red;"><div id='sidebar-wrapper'></span> atau yang semisalnya (elemen <i>sidebar</i>), seperti dalam gambar di bawah ini:<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQNTFDCrhwMVVRMLmkUAYdCen0F6tG_kwuH-l2O8pFGDXrnAdplH4v14DBUmFSbjq2qmjQkhazzpf8S45661qRFXlxHlECJnKRa7WUzW1Z0vHLm_7aZROiJRlYJQQjlo6cErFe0W7MBoEb/s1600/Advanced+Multi+Tabbed+Widget+For+Blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt=" Tabbed Widget di Sidebar Blog" border="0" height="158" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQNTFDCrhwMVVRMLmkUAYdCen0F6tG_kwuH-l2O8pFGDXrnAdplH4v14DBUmFSbjq2qmjQkhazzpf8S45661qRFXlxHlECJnKRa7WUzW1Z0vHLm_7aZROiJRlYJQQjlo6cErFe0W7MBoEb/s1600/Advanced+Multi+Tabbed+Widget+For+Blogger.png" title=" Tabbed Widget di Sidebar Blog" width="400" /></a></div><br /><i>Untuk pengguna template New Johny Wuss, baik V1, V2, maupun V3, pemasangannya bisa seperti ini. Kodenya bukan <div <b>id</b>='sidebar-wrapper> tapi <div <b>class</b>='sidebar-wrapper></i><br /><i><br /></i><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvX4Po5XD683edFndarrxQ6DS34Utk2kZbw5sz2eqO7y51GISMjBeQzyrCUZCmEWvFlmZCyfoF8WyTfjg-S4qjIxulkCLSypAQ4BCX3F9CmxduZqJ767Ohm3cb_SbnAhhw4ddi9iOPCBk/s1600/Tabber+Widget+Johny+Wuss.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="tab sidebar widget blog johny wuss" border="0" height="118" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizvX4Po5XD683edFndarrxQ6DS34Utk2kZbw5sz2eqO7y51GISMjBeQzyrCUZCmEWvFlmZCyfoF8WyTfjg-S4qjIxulkCLSypAQ4BCX3F9CmxduZqJ767Ohm3cb_SbnAhhw4ddi9iOPCBk/s1600/Tabber+Widget+Johny+Wuss.JPG" title="tab widget blog johny wuss" width="400" /></a></div><i><br /></i><b>5. Save Template!</b><br /><br /><i>Sekarang tinggal mengisi tab yang sudah siap dimunculkan di Sidebar.</i><br />Di "Layout" akan tampak tiga widget baru yang masih kosong. Silakan diisi dengan Latest Post, Popular Post, Comment, atau widget apa saja yang dikehendaki.<br /><br /><b>Klik Layout > Add a Gadget > silakan pilih widget yang akan ditampilkan.</b><br /><br />Kode untuk Membuat Tabbed Widget di Sidebar Blog ini <a href="http://contohblognih.blogspot.com/" rel="nofollow" target="_blank">CB</a> ambil dari <a href="http://www.mybloggerbuzz.com/2014/12/advanced-multi-tabbed-widget-for-blogger.html" rel="nofollow" target="_blank">My Blogger Buzz</a> dan baru berani nge-<i>share</i> setelah sukses diterapkan. Good Luck!</div></div>

Cara Membuat Tabbed Widget di Sidebar Blog

MEMBUAT Tabbed Widget di Sidebar Blog bisa "menghemat" ruangan sidebar. Contohnya Tabber yang ada dalam ilustrasi gambar posting ...

Baca selengkapnya »