Cara membuat Tab View dengan animasi gulung blog

Menu TAB view 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.

Mungkin sedikit tips dapat membantu yaitu dengan membuat Tab View . Siang ini saya akan membagi ilmu tentang Cara Membuat Tab View dengan animasi gulung. Wow ?? penasaran ?? langsung ke TKP.

Pertama :
1. Silahkan Log in ke Blog Sobat
2. Masuk ke tab perancangan lalu pilih edit HTML
3. Seperti Biasa centang "Expand widget templates" untuk menghindari apabila terjadi kesalahan.
4. Silahkan cari kode ]]></b:skin> Tekan CTRL+F untuk mengeluarkan kotak pencarian

5. Setelah berhasil ketemu kode diatas silahkan letakkan kode dibawah ini, tepat di atas kode ]]></b:skin>

Klik untuk melihat

.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}

6. Lalu letakkan kode dibawah ini tepat di atas kode </head>

Klik untuk melihat

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script type='text/javascript'>var starttab=0;var endtab=2;var sidebarname="sidebar";</script><script src='https://masolis-javascript.googlecode.com/svn/trunk/tabber.js' type='text/javascript'/>

7. Terakhir save template sobat.
Jika ada salah kata maafkanlah. jangan lupa Follow Blog ini juga, matur nuwun.