Sabtu, 26 Juli 2014

[Tutorial] Cara Membuat Tab View Dalam Postingan Blog


[Tutorial] Cara Membuat Tab View Dalam Postingan Blog - Aktivitas blogging memang mengasyikkan, terutama ketika kita mendapatkan dan mampu mempelajari hal-hal baru. Misalnya, mempelajari cara cepat memasang tab view dalam postingan Blogger.

Mungkin sobat penasaran bagaimana caranya membuat tab view dalam postingan Blogger. Jika ya, maka sobat berada di halaman yang tepat. Tab View dapat digunakan pada postingan blog sobat agar terlihat lebih ringkas dan rapi. Berikut ini kami sampaikan tutorial membuat tab view dengan menggunakan kode script yang dapat sobat kopi di bawah ini.

Caranya:
1. Kopi kode script berikut ini dan paste ke bagian dalam HTML pada postingan Blogger.

<style type="text/css">
#tablist{
padding: 3px 0;
margin-left: 0;
margin-bottom: 0;
margin-top: 0.1em;
font: bold 12px Verdana;
}
#tablist li{
list-style: none;
display: inline;
margin: 0;
}
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid white;
border-bottom: none;
background: #f0f0f0;
}
#tablist li a:link, #tablist li a:visited{
color: white;
}
#tablist li a.current{
background: #008ddd;
color: #fff;
}
#tabcontentcontainer{
width: auto;
padding: 5px;
border-bottom: 1px solid #f0f0f0;
color: #fff;
}
.tabcontent{
display:none;
}

</style>

<script type="text/javascript">
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]
////////Stop editting////////////////
function cascadedstyle(el, cssproperty, csspropertyNS){
if (el.currentStyle)
return el.currentStyle[cssproperty]
else if (window.getComputedStyle){
var elstyle=window.getComputedStyle(el, "")
return elstyle.getPropertyValue(csspropertyNS)
}
}
var previoustab=""
function expandcontent(cid, aobject){
if (document.getElementById){
highlighttab(aobject)
detectSourceindex(aobject)
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
if (aobject.blur)
aobject.blur()
return false
}
else
return true
}
function highlighttab(aobject){
if (typeof tabobjlinks=="undefined")
collecttablinks()
for (i=0; i<tabobjlinks.length; i++)
tabobjlinks[i].style.backgroundColor=initTabcolor
var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}
function collecttablinks(){
var tabobj=document.getElementById("tablist")
tabobjlinks=tabobj.getElementsByTagName("A")
}
function detectSourceindex(aobject){
for (i=0; i<tabobjlinks.length; i++){
if (aobject==tabobjlinks[i]){
tabsourceindex=i //source index of tab bar relative to other tabs
break
}
}
}
function do_onload(){
var cookiename=(typeof persisttype!="undefined" && persisttype=="sitewide")? "tabcontent" : window.location.pathname
var cookiecheck=window.get_cookie && get_cookie(cookiename).indexOf("|")!=-1
collecttablinks()
initTabcolor=cascadedstyle(tabobjlinks[1], "backgroundColor", "background-color")
initTabpostcolor=cascadedstyle(tabobjlinks[0], "backgroundColor", "background-color")
if (typeof enablepersistence!="undefined" && enablepersistence && cookiecheck){
var cookieparse=get_cookie(cookiename).split("|")
var whichtab=cookieparse[0]
var tabcontentid=cookieparse[1]
expandcontent(tabcontentid, tabobjlinks[whichtab])
}
else
expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}
if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload
</script>


<ul id="tablist">
<li><a class="current" href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc1', this)"><span style="font-family: Verdana, sans-serif;">Synopsis</span></a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc2', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Screenshot</span></a></li>
<li><a href="http://www.blogger.com/blogger.g?blogID=2726093644608416144#" onclick="return expandcontent('sc3', this)" theme="black"><span style="font-family: Verdana, sans-serif;">Trailer</span></a></li>
<li><a href="http://www.blogger.com/search.#" onclick="return expandcontent('sc4', this)" target="_blank" theme="black"><span style="font-family: Verdana, sans-serif;">Download Film</span></a></li>
<li><a href="http://www.blogger.com/search.#" onclick="return expandcontent('sc4', this)" target="_blank" theme="black"><span style="font-family: Verdana, sans-serif;">Subtitle</span></a></li>
</ul>
<div id="tabcontentcontainer">
<div class="tabcontent" id="sc1">
<span style="font-family: Verdana, sans-serif;">Blog ini berisi mengenai kumpulan beberapa script untuk mempercantik tampilan blog anda agar pengunjung blog betah berlama-lama mencari informasi yang diperlukan dalam halaman blog anda.Semoga postingan yang yang saya berikan bisa bermanfaat untuk sobat blogger semua.</span></div>
<div class="tabcontent" id="sc2">
<span style="font-family: Verdana, sans-serif;"><a href="http://cahshare.blogspot.com/2014/07/bagaimana-cara-membuat-tab-view-di.html" target="_blank">Membuat kotak menu tab view</a>
<a href="http://alamatlinkanda.com/">Teks anda</a>
<a href="http://alamatlinkanda.com/">Teks anda</a></span></div>
<div class="tabcontent" id="sc3">
<span style="font-family: Verdana, sans-serif;"><a href="http://cahshare.blogspot.com/2013/02/cara-memblokir-situs-dengan-menggunakan.html">Cara Memblokir Situs Dengan Menggunakan Squid Keyword</a>
<a href="http://alamatlinkanda.com/">Teks anda</a>
<a href="http://alamatlinkanda.com/">Teks anda</a></span></div>
<div class="tabcontent" id="sc4">
<span style="font-family: Verdana, sans-serif;"><a href="http://cahshare.blogspot.com/2013/09/cara-menggunakan-meta-tag-seo-friendly.html" target="_blank">Script SMS gratis</a>
<a href="http://alamatlinkanda.com/">Teks anda</a>
<a href="http://alamatlinkanda.com/">Teks anda</a></span></div>
<div class="tabcontent" id="sc5">
<span style="font-family: Verdana, sans-serif;"><a href="http://filmsubindo.chatango.com/" target="_blank">Obrolan</a>
<a href="http://alamatlinkanda.com/">Teks anda</a>
<a href="http://alamatlinkanda.com/">Teks anda</a></span></div>
</div>

2. Jika sudah, maka Simpan dan lihat hasilnya

Semoga tutorial cara membuat tab view dalam postingan blog di atas dapat bermanfaat bagi sobat para blogger. Selanjutnya, kode di atas dapat disesuaikan dengan kebutuhan sobat. (bitebrands)



Related Posts

[Tutorial] Cara Membuat Tab View Dalam Postingan Blog
4/ 5
Oleh

1 komentar:

19 April 2016 01.24 delete

nice post gan ...
cuma lebih bagus lagi klo agan kasih penjelasan yg lebih lengkap lagi biar newbie kayak ane gampang mengaplikasikannya :v

Reply
avatar