Membuat Tabs Shortcode dengan jQuery di Blog
06 May 2015
Membuat Tabs Shortcode di Blog - Ini adalah tabs yang sangat unik menurut saya karena HTML untuk memunculkannya menggunakan coding/html yang sangat unik dan berbeda dari biasanya.
Pada umumnya html seperti ini
Tab ini bisa di rubah kolomnya sebanyak apapun, tab ini juga bisa di masukan gambar, tag pre, tag code, tag quote dan masih banyak keunggulan tabs ini.
Selain itu tabs ini juga responsive dan bisa di letakan di manapun, bisa di sidebar, di postingan dan bahkan juga bisa di pasang di komentar.
<tab> berbeda dengan tabs ini yang kode htmlnya seperti ini [tab], dan tab ini sangat simple dan mudah untuk di modifikasi sendiri, tabs ini menggunakan sedikit fungsi jQuery yang membuat Tabs ini semakin keren.Tab ini bisa di rubah kolomnya sebanyak apapun, tab ini juga bisa di masukan gambar, tag pre, tag code, tag quote dan masih banyak keunggulan tabs ini.
Selain itu tabs ini juga responsive dan bisa di letakan di manapun, bisa di sidebar, di postingan dan bahkan juga bisa di pasang di komentar.
Supaya lebih jelas mengenai tutorial ini sobat bisa melihat demonya dengan mengklik tombol di bawah ini.
Nah menarik bukan? Jika sobat tertarik untuk memasang Tabs keren ini ikuti tutorial di bawah ini...
Nah pertama jQuery dahulu nih, letakan script jQuery ini di atas
</head> atau </body><script src="https://8579a835711466b329532f888fdef8b5efd2a89d.googledrive.com/host/0B495PN79xGJ6Q1VRQVhfeTVlREk/shortcodes.js" type="text/javascript"></script>
Jika jQuery sudah terpasang sekarang tambahkan code CSS (Style) di bawah ini tepat di atas
]]></b:skin> atau </style>/* CSS Tabs Shortcode */
.sc-tab ul.tabset.tabs li a.active{
border-bottom: 1px solid #1C98E1;
border-top: 3px solid ##1C98E1;
padding: 8px 10px 10px 10px;
background: #1C98E1;
color: #fff;
border-left: 1px solid #1C98E1;
border-right: 1px solid #1C98E1;
}
.sc-tab ul.tabset.tabs li a:hover {
background: #1C98E1;
color: white;
border-color: #1C98E1;
}
.sc-tab ul.tabset.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.sc-tab ul.tabset.tabs li {
float: left;
margin: 0px 4px 0px 0px;
border-right: 1px solid #EEE;
}
.sc-tab ul.tabset.tabs li a {
color: #666;
text-decoration: none;
font-family: oswald, arial;font-size: 14px;
}
.sc-tab .tab-box {
clear: both;
position: relative;
z-index: 50;
top: 3px;
}
.sc-tab .tab_content {
display: none;
border: 1px solid #EEE;
padding: 1em;
border-bottom: 3px solid #1C98E1;
box-shadow: 2px 4px 6px #EEE;
font-family: arial;
font-size: 14px;
}
.sc-tab ul.tabset.tabs li a {
padding: 10px;
display: block;
border: 1px solid #EEE;
background: #fbfbfb;
position: relative;
z-index: 100;
}jQuery dan CSS sudah terpasang.. sekarang tinggal menambahkan html untuk memunculkannya..
[tab]
[content title="Tabs 1"] Your Content In Tabs 1 Here!!! [/content]
[content title="Tabs 2"] Your Content In Tabs 2 Here!!! [/content]
[content title="Tabs 3"] Your Content In Tabs 3 Here!!! [/content]
[/tab]
HTML yang sangat sederhana bukan?
Silahkan dikreasikan lagi agar Tabs Shortcode tersebut menjadi menarik dan cocok di pasang di blog bertema apapun.
Baca Juga : Membuat Pure CSS Tabs untuk Blogger
Semoga Tutorial kali ini bermanfaat.. :)
Silahkan dikreasikan lagi agar Tabs Shortcode tersebut menjadi menarik dan cocok di pasang di blog bertema apapun.
Baca Juga : Membuat Pure CSS Tabs untuk Blogger
Semoga Tutorial kali ini bermanfaat.. :)