Evo Magz v4.7

Hai Sobat Blogger ! masih belum bosan kan dengan artikel-artikel Rizaldi Priantama blog ini? jika belum,ayo kita ikuti tutorial blogger berikutnya,setelah sebelumnya membuat widget tombol share ke social media kali ini Rizaldi Priantama akan berbagi tutorial tentang cara membuat widget tombol gulung di sidebar blogger, jika masih bingung dengan apa yang saya katakan tentang tombol gulung,anda bisa melihat contoh gambarnya disini :

Nah,tombol ini berfungsi untuk merapikan tampilan blog yang kacau karena terlalu banyak widget di sidebar,dengan adanya widget ini,tampilan blog sobat akan terlihat lebih cantik,rapi,dan elegan,sesuai dengan fungsinya yaitu menggulung widget yang tidak diperlukan.Oke,jika sobat tertarik untuk membuat widget ini,Mari kita bahas dan kupas tuntas bersama disini.

1.) Baca Basmallah
2.) Masuk ke akun Blogger anda
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
3.) Centang tanda expand template widget
4.) Tekan Ctrl+F lalu cari kode ]]></b:skin>
5.) Lalu,letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

.tabs-widget{list-style:none;list-style-type:none;margin:0 0 10px 0;padding:0;height:26px}<br /> .tabs-widget li{list-style:none;list-style-type:none;margin:0 0 0 4px;padding:0;float:left}<br /> .tabs-widget li:first-child{margin:0}<br /> .tabs-widget li a{color:#4F4E42;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFF-yHkWHDEd_kh6MGp4weCS5fK0VikKjCJusubXZj0W2YFO3xPrN2b42j-GrVs5ZSofM54C7ZPyZqfJ9Ngo_-voRrAMW6QSh1ONvEA4BLf6ur5Y7UJ1XhumS4xNzum3hikn_AqOrpCs/s1600/tabs-bg.png) left top repeat-x;padding:5px 10px;font-family:Arial,Helvetica,Sans-serif;font-weight:normal;display:block;text-decoration:none;font-size:12px;}<br /> .tabs-widget li a:hover,.tabs-widget li a.tabs-widget-current{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaFF-yHkWHDEd_kh6MGp4weCS5fK0VikKjCJusubXZj0W2YFO3xPrN2b42j-GrVs5ZSofM54C7ZPyZqfJ9Ngo_-voRrAMW6QSh1ONvEA4BLf6ur5Y7UJ1XhumS4xNzum3hikn_AqOrpCs/s1600/tabs-bg.png) left -126px repeat-x;color:#fff;text-decoration:none}<br /> .tabs-widget-content{background:#fff;}<br /> .tabviewsection{margin-top:10px;margin-bottom:2px;}

6.) Jika sudah, cari kembali kode <div id='sidebar-wrapper'> atau <div id='rsidebar-wrapper'>

7.) Jika sudah ketemu dengan salah satu kode diatas,paste kode dibawah ini dibawahnya

Kode

<div class='tabviewsection'><script type='text/javascript'> jQuery(document).ready(function($){ $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show(); $(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show(); $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() { $("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a"); $(this).addClass("tabs-widget-current"); $(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide(); var activeTab = $(this).attr("href"); $(activeTab).fadeIn(); return false; }); }); </script><br /> <br /> <ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'><li><a href='#widget-themater_tabs-1432447472-id1'>Facebook</a></li> <li><a href='#widget-themater_tabs-1432447472-id2'>Chatbox</a></li> <li><a href='#widget-themater_tabs-1432447472-id3'>Blogger</a></li> </ul><br /> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'><br /> <b:widget id='HTML1' locked='false' title='Like Us on facebook' type='HTML'><br /> <b:includable id='main'><br /> <br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2> </b:if><br /> <div class='widget-content'> <data:content/><br /> </div><br /> <b:include name='quickedit'/><br /> </b:includable><br /> </b:widget><br /> </b:section> <br /> </div> <br /> <br /> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'><br /> <b:widget id='HTML3' locked='false' title='Chatbox' type='HTML'><br /> <b:includable id='main'><br /> <br /> <b:if cond='data:title != ""'><br /> <h2 class='title'><data:title/></h2> </b:if><br /> <div class='widget-content'> <data:content/><br /> </div><br /> </b:includable><br /> </b:widget><br /> </b:section> <br /> </div> <br /> <br /> <div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><b:section class='sidebar' id='sidebartab3' preferred='yes'><br /> <b:widget id='Followers1' locked='false' title='Sahabat' type='Followers'><br /> <b:includable id='main'><br /> <b:if cond='data:title != ""'><br /> <b:if cond='data:codeSnippet != ""'><br /> <h2 class='title'><data:title/></h2> <b:else/><br /> <b:if cond='data:totalFollowerCount != ""'><br /> <h2 class='title'><data:title/> (<data:totalFollowerCount/>)</h2> </b:if><br /> </b:if> <br /> </b:if>

8.) Jika sudah diletakkan , sobat bisa mengeditnya sesuai keinginan

Edit mode :

A. ganti tulisan Facebook,Chatbox,dan Blogger dengan nama tabview yang diinginkan
B. untuk mengganti konten yang ada di tabview bisa diisi lewat edit tata letak
Dan masih banyak kode-kode lain untuk diedit,silahkan utak-atik sendiri.

9.) Terakhir,simpan template dan lihat hasilnya

publish by : http://rizaldipriantama.blogspot.com

Rian SEO

Blogger yang senang mempelajari hal-hal baru seputar Blog, SEO dan Bisnis Online.

Cara membuat widget tombol gulung (Tab view) di sidebar blogger