Cara Membuat Tab View No Edit HTML

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <center> <!-- Begin: http://adsensecamp.com/ --> <script src="http://adsensecamp.com/show/?id=a6X8dvOv4CE%3D&cid=sO23aMPfjUo%3D&chan=CBtxjO0y5hw%3D&type=2&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript"> </script> <!-- End: http://adsensecamp.com/ --> </center> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size: large;">Menu TAB view</span> merupakan widget tambahan berbentuk tab. Jika kita menggunakannya maka akan menghemat ruang di bagian sidebar blog. Dulu ane pernah nge share <a href="http://agustya-blog.blogspot.com/2012/12/cara-membuat-tab-view-dengan-animasi.html">cara membuat menu tab view no edit HTML <b>Gaya Animasi Gulung</b></a>, <u>Sekarang ane mau nge share yang sangat sederhana namun keren.</u><br /><br />Monggo dilihat cara-caranya :</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;"><br /> </span><br /> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYJYJlh9SZTJDNWtw9PrPI_gH33fIYiVdE6z6TUzeyFERVskr7nrjbQ2skkv3OLSoiF7QdAtAd0lGwWZcPTipETROgwOURGo2iE9vvdZiJ2Lz0cJix110coLq9IT0vOPThNGuGhpf8vRd/s1600/Tab+View+No+edit+HTML.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Arial, Helvetica, sans-serif;"><img border="0" height="135" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhYJYJlh9SZTJDNWtw9PrPI_gH33fIYiVdE6z6TUzeyFERVskr7nrjbQ2skkv3OLSoiF7QdAtAd0lGwWZcPTipETROgwOURGo2iE9vvdZiJ2Lz0cJix110coLq9IT0vOPThNGuGhpf8vRd/s400/Tab+View+No+edit+HTML.jpg" width="400" /></span></a></div> <div class="separator" style="clear: both; text-align: center;"> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div> <div class="separator" style="clear: both; text-align: left;"> <b><span style="font-family: Arial, Helvetica, sans-serif;">Pertama :</span></b></div> <span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">1. Silahkan Log in ke Blog Sobat</span></span><br /> <div class="separator" style="clear: both; text-align: left;"> <span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">2. Kedua masuk ke Tab Tata Letak</span></span></div> <div class="separator" style="clear: both; text-align: left;"> <span style="background-color: white;"><span style="font-family: Arial, Helvetica, sans-serif; line-height: 16.78333282470703px; text-align: justify;">3. Klik tulisan " <b>Tambahkan Gadget</b> "</span></span></div> <div class="separator" style="clear: both; text-align: left;"> <span style="font-family: Arial, Helvetica, sans-serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">4. Scroll ke bawah dan pilih yang " </span></span><b>HTML/JavaScript</b> "</span></div> <span style="font-family: Arial, Helvetica, sans-serif;">5. Masukkan kode <b>di bawah</b> ini ke dalamnya</span><br /> <span style="font-family: Arial, Helvetica, sans-serif;">6. Secara Otomatis kode tersebut akan menjadi tag tab view blog anda</span><br /> <span style="background-color: white; color: #202020; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 20.15625px;"></span></div> <div> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div> <span style="font-family: Arial, Helvetica, sans-serif;"><br /></span></div> <textarea class="form-text" cols="80" name="txtSourceCodeJavascript" onclick="this.select();" readonly="" rows="10" style="height: 102px; margin: 2px; width: 565px;"><style type="text/css"> .blogtabs {padding: 0px !important;border: 0 solid #eeeee2;} .blogtabs h2 {float: left;margin: 0 2px 4px 0;font-size: 12px;padding: 3px 5px;border: 1px solid #bbb;overflow: hidden;position: relative;background: #eeeee2;cursor:pointer;} html .blogtabs h2.active {background: #fff;} .blogtabs .widget-content {border: 0px solid #bbb;padding: 10px;background: none;clear:both;margin:0;} .btab, #showtabs {display:none;} </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script> <script src="http://infonetmu.googlecode.com/files/SimpleTabViewJQuery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#showtabs').simpleBlogTab ({organictabs: 3}); }); </script> <br /> <div id="showtabs"> </div>

Notes : teman-teman juga bisa merubah atau menambahkan tab viewnya dengan cara mengedit kode di atas..

Itulah sedikit informasi dari saya, jika ada salah kata, saya mohon maaf, keep blogging sobat :)

Cara membuat Tab View dengan animasi gulung blog

<div dir="ltr" style="text-align: left;" trbidi="on"> <div dir="ltr" style="text-align: left;" trbidi="on"> <!-- Begin: http://adsensecamp.com/ --> <script src="http://adsensecamp.com/show/?id=a6X8dvOv4CE%3D&cid=sO23aMPfjUo%3D&chan=CBtxjO0y5hw%3D&type=2&title=3D81EE&text=000000&background=FFFFFF&border=000000&url=2BA94F" type="text/javascript"> </script> <!-- End: http://adsensecamp.com/ --> <span style="font-family: Times, Times New Roman, serif;"><br /></span></div> <div style="text-align: left;"> <span style="font-family: Times, Times New Roman, serif;"><span style="font-size: large;">Menu TAB view</span> merupakan widget tambahan berbentuk tab. Dengan cara menggunakan tab view kita dapat menghemat sidebar pada blog kita sehingga kita tidak perlu menambahkan banyak widget yang akhirnya pasti akan membuat blog kita jadi berat.<br /><br />Mungkin sedikit tips dapat membantu yaitu dengan membuat Tab View . Siang ini saya akan membagi ilmu tentang <i>Cara Membuat Tab View </i><u style="font-style: italic;">dengan animasi gulung. </u>Wow ?? penasaran ?? langsung ke TKP.</span></div> <div style="text-align: left;"> <span style="font-family: Times, Times New Roman, serif;"><br /></span></div> <div style="text-align: left;"> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBP-lZWMkNzV06XeauY5hq8TFEdDDK_TdPtE2EWgU-NG6cvVbSHMSLK4EmjE8IN3EwJaxtbKMkWBlSQM4ox6VXStWFsW3oYzKLOO1c3gotRbAgcVySVG4O-vTZ-i1zMHTU5w1i7QsWRZQr/s1600/tabview.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="font-family: Times, Times New Roman, serif;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBP-lZWMkNzV06XeauY5hq8TFEdDDK_TdPtE2EWgU-NG6cvVbSHMSLK4EmjE8IN3EwJaxtbKMkWBlSQM4ox6VXStWFsW3oYzKLOO1c3gotRbAgcVySVG4O-vTZ-i1zMHTU5w1i7QsWRZQr/s1600/tabview.jpg" /></span></a></div> <span style="font-family: Times, Times New Roman, serif;"><br /><b>Pertama :</b><br /><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">1. Silahkan Log in ke Blog Sobat<br />2. Masuk ke tab perancangan lalu pilih edit HTML<br />3. Seperti Biasa centang "Expand widget templates"<b> </b><u>untuk menghindari apabila terjadi kesalahan.</u></span></span></span><br /> <span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">4. Silahkan cari kode ]<b>]></b:skin></b> Tekan <b>CTRL+F</b><u> untuk mengeluarkan kotak pencarian</u></span></span></span></div> <div style="text-align: left;"> <span style="font-family: Times, Times New Roman, serif;"><span style="background-color: white;"><span style="line-height: 16.78333282470703px; text-align: justify;">5. Setelah berhasil ketemu kode diatas silahkan letakkan kode dibawah ini, tepat di <b>atas</b> kode <b>]]></b:skin></b></span></span></span></div> <div> <div style="margin-bottom: 2px;"> <span style="font-family: Times, Times New Roman, serif;"><i><b><small><br /></small></b></i> <i><b><small>Klik untuk melihat </small></b></i><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /> </span></div> <div style="border: inset; margin: 0px; padding: 6px;"> <div style="border: inset; margin: 0px; padding: 6px;"> <textarea class="form-text" cols="80" name="txtSourceCodeJavascript" onclick="this.select();" readonly="" rows="10" style="height: 102px; margin: 2px; width: 565px;">.widget-wrapper2{padding:10px}.widget-tab{font-family:Arial,Helvetica,sans-serif;padding:5px;padding-left:none}.widget-tab ul{margin:0;padding:0 0px}.widget-tab ul li{list-style:none;padding:4px 0;font-size:12px}.widget-tab ul li:last-child{border-bottom:none}.widget-tab ul li a{text-decoration:none;color:#3e4346}.widget-tab ul li a small{color:#8b959c;font-size:9px;text-transform:uppercase;font-family:Verdana, Arial, Helvetica, sans-serif;position:relative;left:4px;top:0}.tab-content ul li a:hover small{color:#baae8e}.active-tab{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiofs8iteb6hUpvexI6PJa5pwMgGuKkSA2N0TQXdd4EjYeCGLAQfIrts7pO-IkoM-G-PWLwi9shev3ZwDs16E6z5_RiwADNIYOUriUaxRu1GDLMe9J4Bjbt0bWZzL0GoZ6zWGd5qnswzmA/s1600/main.png) repeat-x scroll left top!important;color:#282E32!important}ul.tab-wrapper{margin:5px 0 4px;padding:10px 10px 0}ul.tab-wrapper li{border-bottom:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDGN_UNXKLTjZpM8MBD4TjxVXRyBxtKxvfRzqASCg488sRYI-Zb41MjXIb6QsUqDbhG-KtHZ1Bt82XNZwUl6SxLzxwSDveR9bR0OqKjtqg7WY5Yr02tvg68fwIZGv7wfdPBzdAjR9z2PQ/s1600/sidebar-bg.png) repeat-x top;color:#FFF;cursor:pointer;display:inline;font:bold 11px Arial;line-height:2em;list-style-image:none!important;list-style-position:outside!important;list-style-type:none!important;margin-right:1px;text-align:center;text-decoration:none;text-transform:uppercase;padding:8px 12px}