Buat Menu Tab View Rotari

Buat Menu Tab View Rotari, ada banyak cara untuk mempercantik tampilan template blog kita satu satu di antaranya yaitu membuat menu tab view rotari. Dengan adanya menu tab view ini maka akan banyak ruang template yang bisa diringkas menjadi sedederhana. Pada posting kali ini akan di jelaskan cara membuat tab view yang bisa bergerak secara siklus tanpa berhenti, dan akan berhenti jika tab menu tersebut di klik dengan mouse. Pada tab menu ini bisa di isi dengan berbagai macam tampilan yaitu recent comments, recent post, blogroll shoutbox, foto dan lain-lain. Adapun cara membuat menu tab view rotari di blogger tersebut sebagai berikut :

1. Login ke blogger.

2. Klik Layout >> Edit HTML

3. Copy kode di bawah ini, lalu paste di atas kode ]]></b:skin>

.indentmenu{
font: bold 10px Arial;
width: 100%; /*leave this value as is in most cases*/

}

.indentmenu ul{
margin: 2px;
padding: 0;
float: left;
/* width: 80%; width of menu*/
background: transparent;
}

.indentmenu ul li{
display: inline;
}

.indentmenu ul li a{
float: left;
margin: 2px;
color:#0000cd; /*text color*/
padding: 5px 11px;
text-decoration: none;
border: 1px solid #ccc;
}

.indentmenu ul li a:hover{
background:#ddd;
}

.indentmenu ul li a:visited{
color: white;
}

.indentmenu ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
border: 1px solid #000000;
background:#5f9ea0;
}

.tabcontentstyle{ /*style of tab content container*/
border: 1px solid gray;
width: 320px;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}

@media print {
.tabcontent {
display:block !important;
}
}

4. Copy kode di bawah ini, lalu paste di atas kode </head>

<script type='text/javascript'>
//<![CDATA[
function ddtabcontent(tabinterfaceid){
this.tabinterfaceid=tabinterfaceid
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a")
this.enabletabpersistence=true
this.hottabspositions=[]
this.currentTabIndex=0
this.subcontentids=[]
this.revcontentids=[]
this.selectedClassTarget="link"
}

ddtabcontent.getCookie=function(Name){
var re=new RegExp(Name+"=[^;]+", "i");
if (document.cookie.match(re))
return document.cookie.match(re)[0].split("=")[1]
return ""
}

ddtabcontent.setCookie=function(name, value){
document.cookie = name+"="+value+";path=/"
}

ddtabcontent.prototype={

expandit:function(tabid_or_position){
this.cancelautorun()
var tabref=""
try{
if (typeof tabid_or_position=="string" && document.getElementById(tabid_or_position).getAttribute("rel"))
tabref=document.getElementById(tabid_or_position)
else if (parseInt(tabid_or_position)!=NaN && this.tabs[tabid_or_position].getAttribute("rel"))
tabref=this.tabs[tabid_or_position]
}
catch(err){alert("Invalid Tab ID or position entered!")}
if (tabref!="")
this.expandtab(tabref)
},

cycleit:function(dir, autorun){
if (dir=="next"){
var currentTabIndex=(this.currentTabIndex<this.hottabspositions.length-1)? this.currentTabIndex+1 : 0
}
else if (dir=="prev"){
var currentTabIndex=(this.currentTabIndex>0)? this.currentTabIndex-1 : this.hottabspositions.length-1
}
if (typeof autorun=="undefined")
this.cancelautorun()
this.expandtab(this.tabs[this.hottabspositions[currentTabIndex]])
},

setpersist:function(bool){
this.enabletabpersistence=bool
},

setselectedClassTarget:function(objstr){
this.selectedClassTarget=objstr || "link"
},

getselectedClassTarget:function(tabref){
return (this.selectedClassTarget==("linkparent".toLowerCase()))? tabref.parentNode : tabref
},

urlparamselect:function(tabinterfaceid){
var result=window.location.search.match(new RegExp(tabinterfaceid+"=(\\d+)", "i"))
return (result==null)? null : parseInt(RegExp.$1)
},

expandtab:function(tabref){
var subcontentid=tabref.getAttribute("rel")
var associatedrevids=(tabref.getAttribute("rev"))? ","+tabref.getAttribute("rev").replace(/\s+/, "")+"," : ""
this.expandsubcontent(subcontentid)
this.expandrevcontent(associatedrevids)
for (var i=0; i<this.tabs.length; i++){
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
}
if (this.enabletabpersistence)
ddtabcontent.setCookie(this.tabinterfaceid, tabref.tabposition)
this.setcurrenttabindex(tabref.tabposition)
},

expandsubcontent:function(subcontentid){
for (var i=0; i<this.subcontentids.length; i++){
var subcontent=document.getElementById(this.subcontentids[i])
subcontent.style.display=(subcontent.id==subcontentid)? "block" : "none"
}
},

expandrevcontent:function(associatedrevids){
var allrevids=this.revcontentids
for (var i=0; i<allrevids.length; i++){

document.getElementById(allrevids[i]).style.display=(associatedrevids.indexOf(","+allrevids[i]+",")!=-1)? "block" : "none"
}
},

setcurrenttabindex:function(tabposition){
for (var i=0; i<this.hottabspositions.length; i++){
if (tabposition==this.hottabspositions[i]){
this.currentTabIndex=i
break
}
}
},

autorun:function(){
this.cycleit('next', true)
},

cancelautorun:function(){
if (typeof this.autoruntimer!="undefined")
clearInterval(this.autoruntimer)
},

init:function(automodeperiod){
var persistedtab=ddtabcontent.getCookie(this.tabinterfaceid)
var selectedtab=-1
var selectedtabfromurl=this.urlparamselect(this.tabinterfaceid)
this.automodeperiod=automodeperiod || 0
for (var i=0; i<this.tabs.length; i++){
this.tabs[i].tabposition=i
if (this.tabs[i].getAttribute("rel")){
var tabinstance=this
this.hottabspositions[this.hottabspositions.length]=i
this.subcontentids[this.subcontentids.length]=this.tabs[i].getAttribute("rel")
this.tabs[i].onclick=function(){
tabinstance.expandtab(this)
tabinstance.cancelautorun()
return false
}
if (this.tabs[i].getAttribute("rev")){
this.revcontentids=this.revcontentids.concat(this.tabs[i].getAttribute("rev").split(/\s*,\s*/))
}
if (selectedtabfromurl==i || this.enabletabpersistence && selectedtab==-1 && parseInt(persistedtab)==i || !this.enabletabpersistence && selectedtab==-1 && this.getselectedClassTarget(this.tabs[i]).className=="selected"){
selectedtab=i
}
}
}
if (selectedtab!=-1)
this.expandtab(this.tabs[selectedtab])
else
this.expandtab(this.tabs[this.hottabspositions[0]])
if (parseInt(this.automodeperiod)>500 && this.hottabspositions.length>1){
this.autoruntimer=setInterval(function(){tabinstance.autorun()}, this.automodeperiod)
}
}

}

//]]>
</script>

5. Simpan template, dan masuk ke page elements >> add gadget, lalu copy paste kode dibawah ini pada kolom yang tersedia

<div style="float:left;margin:0px 0px 0px 0px;padding:0px;height:230px;">

<div id="pettabs" class="indentmenu">
<ul>
<li><a href="#" class="selected" rel="tab1">Comment</a></li>
<li><a href="#" rel="tab2"> New Post </a></li>
<li><a href="#" rel="tab3"> Blogroll </a></li>
<li><a href="#" rel="tab4">Tools</a></li>
</ul>
<br style="clear: left"/>
</div>

<div style="width:280px;text-align:justify;padding: 5px; margin-bottom:1em">

<div id="tab1" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab2" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab3" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda
</div></div>

<div id="tab4" class="tabcontent">
<div style="overflow:auto; padding:5px; width:100%; height:175px; border:1px solid #5f9ea0;">

Disini tempat URL anda

</div></div>

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2500)

</script></div></div>

6. Simpan template dan pembuatan menu tab view rotari selesai.

Modifikasi nama deretan tab dengan urutan tab seperti comments, new post, blogroll dan tools bisa di rubah sesuai dengan keinginan kita. Atau mau merubah yang lain silahkan rubah kode-kode yang ada di gadget tersebut.

Perhatikan kode di bawah ini

<script type="text/javascript">

var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2500)

</script>

Untuk mengatur lamanya waktu perpindahan dari satu tab ke tab yang lain tinggal mengganti nilai 2500 menjadi nilai yang lain. Misalnya 3000. Semakin besar nilainya maka semakin lama perpindahannya.

Untuk mengubah tinggi widget ganti angka 230px menjadi yang lain, dan untuk mengubah lebar widget ganti angka 280px menjadi yang lain.

Untuk mengubah tinggi blogroll ganti angka 175px menjadi yang lain.

Selamat mencoba, mau lihat contoh di blog ini memakai menu tab view rotari.

“Buat Menu Tab View Rotari”

“Buat Menu Tab View Rotari”

Buat Blogger Login Form di Blog

Buat Blogger Login Form Widget. Untuk mempercepat akses ke Blogger maka widget ini perlu dipasang di blog anda. Jadi dengan menambah dan menggunakan widget ini di blog anda, maka anda tidak perlu lagi login lewat browser karena untuk masuk ke dasbord blogger anda hanya perlu memasukkan username dan password lewat blog anda. Widget ini tidak memperberat loading blog karena widget ini berukuran kurang dari 1 kb. Adapun caranya sebagai berikut :

1. Masuk ke account Blogger
2. Masuk Layout >>Page Elements.
3. Pilih Add a Gadget tempat dimana Form Login ditaruh dan copy paste kode dibawah ini.

<div align="center">
<form id="start-login" action="https://www.google.com/accounts/ServiceLoginBoxAuth" name="login" onsubmit="onlogin()" method="post">
<input value="http://www.blogger.com/loginz?d=%2Fhome&p=http%3A%2F%2Fwww.blogger.com%2F" name="continue" type="hidden"/>
<input value="blogger" name="service" type="hidden"/>
<input value="8" name="nui" type="hidden"/>
<input value="8" name="naui" type="hidden"/><input value="2" name="fpui" type="hidden"/>
<input value="3" name="uilel" type="hidden"/>
<input value="true" name="skipvpage" type="hidden"/>
<input value="false" name="rm" type="hidden"/>
<input value="true" name="alwf" type="hidden"/>
<input value="http://www.blogger.com/login.g" name="roeu" type="hidden"/>
<input value="0" name="alinsu" type="hidden"/>
<input value="WbQ8QiJfUvA" name="GA3T" type="hidden"/>
<div><label for="Email"> Username: <br/>
<input id="Email" tabindex="1" value="" name="Email" size="20" type="text"/></label></div>
<div><label for="Passwd"> Password:<br/></label>
<input id="Passwd" tabindex="2" autocomplete="off" name="Passwd" size="20" type="password"/></div> <input id="signin-btn-ns" tabindex="0" value="Sign in" class="ubtn ubtn-block" name="submit" type="submit"/></form></div>
<br/>

Selamat mencoba.

“Buat Blogger Login Form di Blog”

“Buat Blogger Login Form di Blog”

Trik Buat Judul Blog Bergerak

Buat Judul Blog Bergerak. Ada banyak trik dan cara untuk membuat tampilan blog kita menjadi lebih menarik, dengan melakukan sedikit modifikasi HTML, kita bisa membuat model tampilan blog yang berbeda dengan blog yang lain. Salah satunya antara lain membuat judul blog yang bisa bergerak ke kiri atau ke kanan saat blog kita dibuka lewat browser, seperti blog ini. Langkah langkah untuk membuat Judul Blog Bergerak adalah sebagai berikut :

1. Login ke Blogger

2. Pada menu Dashboard klik Layout --> edit HTML.

3. Beri tanda checklist pada kolom Expand Template Widget.

4. Cari kode HTML seperti dibawah ini, biasanya letaknya di bagian atas dibawah kode <head>:

<title><data:blog.pageTitle/></title>

5. Ganti kode diatas dengan kode dibawah ini :

<b:include data='blog' name='all-head-content'/>
<script language='JavaScript'>
var txt="<data:blog.pageTitle/>";
var speed=100;var refresh=null;function move() { document.title=txt;
txt=txt.substring(1,txt.length)+txt.charAt(0);
refresh=setTimeout("move()",speed);}move();
</script>

6. Kode <data:blog.pageTitle/> bisa diganti dengan teks sesuka anda dan kecepatan gerak bisa diatur melalui angka 100 semakin besar angkanya akan semakin lambat gerakannya dan sebaliknya semakin kecil angkanya akan semakin cepat gerakannya.

Selamat mencoba.

“Trik Buat Judul Blog Bergerak”

“Trik Buat Judul Blog Bergerak”

Buat Nomor Kotak Komentar

Buat Nomor Kotak Komentar, adanya komentar dalam sebuah blog bisa mempermudah komunikasi antar sesama pengunjung blog atau admin blog. Jadi jika pengunjung tidak mengerti atau postingan admin ada yang salah bisa saling memberikan saran untuk pembetulan. Selain itu komentar bisa meningkatkan PR blog kita sehingga blog akan banyak dikunjungi orang. Pada posting ini akan dijelaskan cara buat nomor kotak komentar pada blogger, langkah-langkahnya sebagai berikut :

1. Masuk ke account Blogger
2. Masuk Layout >>Edit HTML dan beri centang di "Expand Widget Templates".
3. Cari kode dibawah ini :

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

4. Ganti dengan kode dibawah ini.

<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'>
<div class='' expr:id='data:comment.id'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
<span class='comment-number'>
<a expr:href='"#comment-" + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</div>
</b:loop>
</dl>

Perhatikan kode warna merah diatas adalah tambahan untuk memberi nomor pada komentar posting.

5. Pasang kode CSS dibawah ini diatas kode ]]></b:skin>

.numberingcomments{
float: right;
display: block;
width: 50px;
margin-right: 5px;
margin-top: -35px; /*posisi nomor komentar*/
text-align: right;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 30px;
font-weight: normal;
}
/*since the numbers are actually links, we need to force the color properties*/
.numberingcomments a:link, .numberingcomments a:visited {color: #445566 !important; text-decoration: none !important;}
.numberingcomments a:hover, .numberingcomments a:active {color: #FF9933 !important; text-decoration: none !important;

Selamat Memcoba

“Buat Nomor Kotak Komentar”

“Buat Nomor Kotak Komentar”

Readmore Otomatis Judul Postingan

Readmore Otomatis Judul Postingan, pada posting sebelumnya yaitu readmore satu halaman kita bisa memodifikasi cara memuat readmore yang lebih fleksibel yaitu Readmore dengan Judul Postingan. Maksudnya yaitu setiap kali kita posting kata readmore tersebut otomatis akan tergantikan dengan judul postingan kita, sehingga readmore kita akan tampak lebih variatif. Cara membuatnya adalah sebagai berikut :

Caranya sebagai berikut :

1. Buka account blogger.
2. Pilih "Layout" dan pilih "Edit HTML", centang "Expand Template Widget"
3. Cari kode [+/-] Readmore... dan [+/-] Summary... atau yang lainnya, seperti terlihat dibawah ini.

<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Readmore...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Summary...</a></p>
</span>
<script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
</b:if>

4. Jika sudah ketemu ganti dengan kode dibawah ini, ingat ganti kata [+/-] Readmore… dan [+/-] Summary… dengan kode dibawah ini.

&#8220;<data:post.title/>&#8221;

5. Save template, dengan memasang kode seperti diatas maka setiap kali kita posting judul paostingan akan menjadi pengganti readmore. Selamat mencoba.

“Readmore Otomatis Judul Postingan”

“Readmore Otomatis Judul Postingan”