06 May 2015

Membuat Tabs Shortcode dengan jQuery di Blog

Tabs Shortcode

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> 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.. :)
Rhinokage Rio
Rhinokage Rio

Adalah seorang blogger yang suka mempelajari hal-hal yang baru seputar blog, template, SEO dan Bisnis Online. Untuk mempelajari Hal baru, membutuhkan kesabaran dan ketelitian dalam mempelajarinya.

Add Your Comments

  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
Konversi Code
Out Of Topic