Loading ... ... Please wait!

Senin, 29 Desember 2008

Daftar Isi Slide in Top Bar

Saat membuka http://www.blogger.com/, coba pilih bahasa Indonesia, pada sisi kiri dibawah tulisan BLOG DI UPDATE PADA ..., tampak tulisan yang berubah-ubah setiap saat. Jika anda menaruh cursor di atasnya text tersebut akan link ke alamat blog saat di klik.

Sebenarnya trik tersebut bisa juga jadi solusi bagi pengguna blog yang ingin artikel lamanya tetap exist dan tampil pada layout halaman meskipun tak lagi jadi headline.

Jika ada yang tertarik menggunakannya, berikut adalah scriptnya :

<script type="text/javascript">

var delay = 4000;
var maxsteps=30;
var stepdelay=40;
var startcolor= new Array(255,255,255);
var endcolor=new Array(0,0,0);

var fcontent=new Array();

begintag='<div style="font: bold 11px verdana; padding: 2px;z-index:125">';

function srk(json) {
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++)
{
var entry = json.feed.entry[i];
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
fcontent[i]=json.feed.entry[i].title.$t.link(posturl);
}
}
closetag='</div>';

</script>
<script src="http://abgamal.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=srk"></script>

<script>
var fwidth='450px';
var fheight='10px';

var fadelinks=1;


var ie4=document.all&&!document.getElementById;
var DOM2=document.getElementById;
var faderdelay=0;
var index=0;


function changecontent(){
if (index>=fcontent.length)
index=0
if (DOM2){
document.getElementById("fscroller").style.color="rgb("+startcolor[0]+", "+startcolor[1]+", "+startcolor[2]+")"
document.getElementById("fscroller").innerHTML=begintag+fcontent[index]+closetag
if (fadelinks)
linkcolorchange(1);
colorfade(1, 15);
}
else if (ie4)
document.all.fscroller.innerHTML=begintag+fcontent[index]+closetag;
index++
}


function linkcolorchange(step){
var obj=document.getElementById("fscroller").getElementsByTagName("A");
if (obj.length>=1){
for (i=0;i<=obj.length-1;i++)
obj[i].style.color=getstepcolor(step);
}
}


var fadecounter;
function colorfade(step) {
if(step<=maxsteps) {
document.getElementById("fscroller").style.color=getstepcolor(step);
if (fadelinks)
linkcolorchange(step);
step++;
fadecounter=setTimeout("colorfade("+step+")",stepdelay);
}else{
clearTimeout(fadecounter);
document.getElementById("fscroller").style.color="rgb("+endcolor[0]+", "+endcolor[1]+", "+endcolor[2]+")";
setTimeout("changecontent()", delay);

}
}


function getstepcolor(step) {
var diff
var newcolor=new Array(3);
for(var i=0;i<=2;i++) {
diff = (startcolor[i]-endcolor[i]);
if(diff > 0) {
newcolor[i] = startcolor[i]-(Math.round((diff/maxsteps))*step);
} else {
newcolor[i] = startcolor[i]+(Math.round((Math.abs(diff)/maxsteps))*step);
}
}
return ("rgb(" + newcolor[0] + ", " + newcolor[1] + ", " + newcolor[2] + ")");
}

if (ie4DOM2)
document.write('<div id="fscroller" style="border:0px solid black;z-index:125;width:'+fwidth+';height:'+fheight+'"></div>');

if (window.addEventListener)
window.addEventListener("load", changecontent, false)
else if (window.attachEvent)
window.attachEvent("onload", changecontent)
else if (document.getElementById)
window.onload=changecontent

</script>


Bagian yang berwarna merah ganti dengan alamat blog anda,
kemudian buka TATA LETAK > TAMBAH GADGET > HTML/JAVASCRIPT >
Copy Paste script diatas

Kemudan di Save
Semoga sukses
Selanjutnya...

Minggu, 28 Desember 2008

Font Style Setting

Suatu saat saya ke warnet dekat rumah, kebetulan hari itu lagi naas, entah StarOne yang biasa saya gunakan untuk dial up internet lagi error, dku 5 nya yang tak nyambung atau handphone flexi yang jadi modem nya yang rusak.

Di warnet, seperti biasa setiap pagi saya buka internet, baca-baca berita penting di media indonesia atau sctv.co.id, habis itu baru buka blog. Ketika membuka blog (BLOG PROJECT), saya agak sedikit kaget, betul-betul hari itu naas lagi lagi menimpa. Blog yang sehari-harinya saya buat di laptop pribadi, ternyata di komputer lain justru terlihat aneh, huruf-hurufnya jadi besar-besar dan menyebabkan blog menjadi tidak balance dan tampak berantakan, tak tersusun rapi seperti di laptop saya. Saya coba-coba pindah tempat, di tempat lain malah bagus. Beberapa hari kemudian seorang kawan yang sempat membuka blog saya kirim sms, dia bilang di komputernya, blog saya hurufnya malah kecil-kecil sehingga sulit terbaca.

Karena penasaran coba-coba saya telusuri sendiri masalahnya, dan akhirnya saya ketemukan 2 problem utama pada css stylesheet nya yaitu:
1. Setting Posisi [suatu saat nanti akan dibahas secara detil]
2. Setting style font

Setelah masalahnya teratasi, tetap saja saya tak yakin, soalnya setting baik Posisi maupun Font pada Server Side kadang tidak match dengan setting pada computer client. Apalagi jika jenis browsernya berbeda, contohnya antara Internet explorer dengan Mozilla firefox. Jangan kaget ketika anda membuat blog anda di browser IE, malah berantakan saat dibuka di FireFox

FONT STYLE SETTING adalah solusi yang saya gunakan untuk mengatasinya. Dengan meletakkan FONT STYLE SETTING pada layout halaman, memberikan kemudian bagi pengunjung untuk mengatur sendiri ukuran huruf dari postingan tanpa mengubah setting pada server side, FONT STYLE SETTING ini hanya bersifat temporary karena di set pada Computer Client.

Jika anda juga tertarik untuk memanfaatkan fasilitas ini berikut ini adalah tag-tag htmlnya

Seperti biasa buka account anda di blogger.com, buka TATA LETAK > TAMBAH GADGET > TAMBAH JAVASCRIPT/HTML kemudian copy script berikut ini

<script>
function go1(){
if (document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value != "none") {
document.getElementById('main').style.fontSize=document.selecter2.select2.options[document.selecter2.select2.selectedIndex].value

}
}

function go2(){
if (document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value != "none") {
document.getElementById('main').style.fontFamily=document.selecter2.select3.options[document.selecter2.select3.selectedIndex].value

}
}
</script>
<form id="forma" name="selecter2" method="POST">
<select onchange="go2()" style="font-family:verdana;font-size:8pt" name="select3" size="1">
<option value="Times New Roman"/>Times New Roman
<option value="Arial"/>Arial
<option selected value="Book Antiqua"/>Book Antiqua
<option value="Bookman Old Style"/>Bookman Old Style
<option value="Century Gothic"/>Century Gothic
<option value="Comic Sans Ms"/>Comic Sans Ms
<option value="Tahoma"/>Tahoma
<option value="Trebuchet Ms"/>Trebuchet Ms
<option value="Verdana"/>Verdana
</select>
<select onchange="go1()" style="font-family:verdana;font-size:8pt" name="select2" size="1">
<option value="8px"/>8
<option value="9px"/>9
<option value="10px"/>10
<option value="11px"/>11
<option value="12px"/>12
<option value="14px"/>14
<option value="16px"/>16
</select>
</form>

Jika Anda tahu berapa ukuran default blog anda, bisa menyelipkan tag "selected" pada option select, begitu juga type huruf

misalnya
<option value="12px" selected/>12
<option value="Trebuchet Ms"/>Trebuchet Ms

kemudian Save
semoga berhasil
Selanjutnya...

Kamis, 25 Desember 2008

Shoutbox Berbasis Blogger

Akhirnya, setelah kurang lebih 2 hari berkutat dengan blog, mengutak-atik rahasia dibalik keterbatasan sebuah blogger. Malam ini, sudahlah, impian saya satu minggu belakangan ini - yang terus terang membuat tidur jadi tak nyenyak -, terwujud juga, meskipun masih ada satu dua yang belum terungkap dan memuaskan hati. Gak apa-apalah.

Shoutbox berbasis blogger malam ini ( 27-DES-2008 jam 10.20 WIB ) resmi di launching. Shoutbox ini mungkin bagi para penggila blogger, biasa-biasa saja, tidak secanggih buatan www.shoutmix.com yang paling banyak dimanfaatkan para netter untuk saling berinteraksi. Tapi terlepas dari itu, ada satu kepuasan tersendiri setelah memanfaatkan shoutbox ini.

Shoutbox berbasis blogger, maksudnya adalah shoutbox yang dibuat dengan memodifikasi sebuah blog dari blogger.com kemudian disulap jadi shoutbox. Koq Bisa...?

Prinsipnya sederhana saja, fasilitas inti dari blogger adalah Posting Artikel, bagian bawahnya ada bilik komentar yang bisa kita isi untuk mengomentari artikel tersebut. Nah bilik komentar ini yang kita otak-atik sedemikian rupa sehingga menjadi sebuah shoutbox berbasis blogger, sementara posting artikelnya kita buang saja. Itu saja.

Pekerjaan yang mungkin agak menyita pikiran dan waktu adalah menjelajahi tag-tag script blogger satu persatu, menerjemahkan maknanya, dan menyaring mana yang perlu diambil dan mana yang perlu dibuang sesuai kebutuhan.

Jika Anda mungkin saja tertarik untuk mengganti atau menambah shoutbox baru, barangkali shoutbox berbasis blogger ini bisa jadi pertimbangan anda.

Rahasianya :

Ikuti Langkah-langkah berikut:
Buka blogger.com, isi account anda

Setelah terbuka jendela admin, klik link Buat Blog, ikuti langkah-langkahnya sampai selesai, sampai mendapat alamat blog baru

Pada admin anda di blogger, pada alamat blog baru tersebut, buka TATA LETAK > PILIH TEMPLATE BARU > PILIH Sample II > SIMPAN TEMPLATE

Setelah itu buka Edit HTML, Centang pada Expand Template Widget, kemudian cari tag berikut body { , kemudian start dari tag tersebut ganti dengan script berikut sampai habis (ingat mengganti bukan menambah)

body {
margin:0;
font-family:Tahoma, Arial, sans-serif;
font-size:7pt;
background:$bgcolor;
color:$textcolor;
}

a:link {
color:$linkcolor;
text-decoration:none;
}

a:visited {
color:$visitedlinkcolor;
text-decoration:none;
}

a:hover {
color:$titlecolor;
text-decoration:underline;
}

a img {
border-width:0;
}

#outer-wrapper {
margin-top: 0px;
margin-$endSide: 1em;
margin-bottom: 0;
margin-$startSide: 0em;
}

h1 {
border-bottom:dotted 1px $bordercolor;
margin-bottom:0px;
color: $pagetitlecolor;
font: $pagetitlefont;
}

h1 a, h1 a:link, h1 a:visited {
color: $pagetitlecolor;
}

h2 {
margin:0px;
padding: 0px;
}

#main .widget {
padding-bottom:2px;
margin-bottom:20px;
border-bottom:dotted 0px $bordercolor;
clear: both;
}

#main .Header {
border-bottom-width: 0px;
}

h2.date-header {
padding-top:15px;
color:$footercolor;
padding-bottom:0px;
margin-bottom:0px;
font-size: 90%;
}

h3.post-title {
font-size: 140%;
color: $titlecolor;
}

.post {
padding-$startSide:5%;
padding-$endSide:10%;
}

.post-footer {
color:$footercolor;
}

#comments {
color:$textcolor;
padding-bottom:0px;
margin-bottom:0px;
font-weight:bold;
}

#comments .comment-footer {
font-size:1em;
font-weight:normal;
color:$footercolor;
margin-$endSide:10px;
display:inline;
padding-right:2px;
}

.comment-author {
margin-top: 1%;
}

.comment-body {
padding-top:1px;
font-size:1em;
font-weight:normal;
border-bottom:dotted 1px $bordercolor;
}

.deleted-comment {
font-style:italic;
color:gray;
}
.comment-link {
margin-$startSide:.6em;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.clear {
clear: both;
}

.profile-img {
float: $startSide;
margin-top: 0;
margin-$endSide: 5px;
margin-bottom: 5px;
margin-$startSide: 0;
}

body#layout #outer-wrapper {
margin-top: 0px;
margin-$endSide: 50px;
margin-bottom: 0;
margin-$startSide: 50px;
}

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

]]></b:skin>


<style>
html {
scrollbar-arrow-color: #333333;
scrollbar-base-color: #FFFFFF;
scrollbar-face-color: #F6F6F6;
scrollbar-shadow-color: #F6F6F6;
scrollbar-3dlight-color: #F6F6F6;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-track-color: #FFFFFF;
}
</style>

<script>

function resizeWindow()
{
document.getElementById(&#39;bodi&#39;).style.width=&quot;170px&quot;;
x=document.body.scrollHeight;
x=x+99999
window.scrollTo(0,x);
}


</script>

<script>
function smile()
{
var d=document.getElementsByTagName(&quot;em&quot;);
for (var i = 0; i &lt; d.length; i++)
{
d[i].innerHTML = d[i].innerHTML.replace(/:m/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9r7oLE7bjcZFYzUthDn77LP4hGk_bgYLBq_iU27Gpg29i68s-UEnOGx9I3fxQEljO0ScUiYy7cffu5eow9XJ6luOP-ZdMP2-qqga14uOM_q0gbfZuoy7tXjSl4L6sOnZbxtOwcD2sLlJ/s200/1.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:D/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8h3YZNMOMx5wsLmd2kkh-M-oxugjtzxFM2r1Xfdun2IMuQyvMpll9MVsnsZIfhtJKL_TXZx1ZSCPlP7qcY41uWvzQ5xw3LbpkhJ17EBtuMd0owNIDTOZwQxUgmYajput8mwF8PqgR645/s200/2.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:b/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiCojQ3D1zIcJfaY3pfcJN8bJOoH7ea1S9kQ_Xl2-wwn09Mub7W6IXd05PbR3nfDK2pKZAZ7crzH_9S0xfywj_rhTrdsmdjxDwROJDbnEbHscshQeRWFQgIhqo1iVCu07CPcog950mJRW/s200/3.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:c/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jxciF33XxcCC1ZL4SJxkBDXPXxusRe98dWEd5i53T2vrQGZk0pLgFvdurAkgbkKyzLKG-ZLVbXIp8X-cqesEbXVW3pZpvKoe4GL5izjA8me41uhGb_flC9gXmcJFohOovSKnbcwZGYBF/s200/4.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:p/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX5nX4rZBHCiIx2KTF7gKxyOVE6MXWMs7OjyxYe_XTcqy-jGPEod-X-jDeHd7Bqk06Z-kP3qnytUNvDPJtmLMzBfVZHQHrqGdxOkVAE20jBqNZL6YXuZ7VxbjxoJk8-Om-DNn468M3iv5W/s200/5.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:a/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZQwOplVx7pqk5hC3oCl3VUAM_LVgf6pFYIMqC9zt5Xj9y8a11tjxAT7LHOBKPYLLd14UKesHQin8C1hlI6mTIPZJKM079nkOofmm8Ux5KbEt0wGqsnPi_lJqTJ0VjqR8jEjAYGxli1tU/s200/6.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:k/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLoVRZuk71XaRSdJljxLJgPy0qhr2XTWTSFpPFnRXiOUUsT6TRSMik-kXznIidIZ8d5upJbq-1edKTcCOu8f0ZZj_5sO2LQdbJgrQI1PCrcuWRRHTmISvDa4MTXS1VxFF75KGjawdDceSq/s200/7.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:e/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3DOQ_Rt63seVUvzIP7_DJUi34IRKKWT_jMUsZ6_LczHT2RVvCO784NInc3mkQIRsxGUG2-3mBWwFRhjBL9WN_I9kXnlrt73pUViFFPIyBrXJIRloDKcjCEfafr18w3YiJ1kbxS914nd_/s200/8.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:f/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga21cDIuX9krmWZQZEp543D_z6dXAh3SHA1S6pQxTzJA2UCRAg-9CGcjPFwHDhCBCqfuZGKOkvSr0t6GSlkXspoySSVwcpwkiOiupGZfNWB8c4tgp4k4Znb58eDFRkZCIKt8_jAq46TXyC/s200/9.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:x/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Uww-bZ6Ktc-eTDsp7B7MGLA5Ps6AeB5WG2Y9aEoOLbHLG5vxn8JdaQkq-PFt_QDCfEjDBArAjZ7OFFmlxsyejhdtdLueWdWG6EcdU2UHbo_f_DvUshH-A3lttA828L3RNTzSINw9Osej/s200/10.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:o/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pbEjiU2TBwWw2F4-GnrN3XlHKuGu4KMYPgfXS3bBViBLwuKcE2Y6RpEnKZT2Zs24o1upl8vukKJehYRg0rfIj8svFIo6zeUnvnT1koero4-LKFPfRLOlAvz1LIUOi3Texr0Od1OZThFO/s200/11.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:L/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AoQDpHEXRRrA0RM6_MIfmooPNMxvn_hyBIMiSZT-uK17Aam5c6A6dgS0aMWiFvF9VQmMemynM8gc8ZTcsU64g3m83X95gfuD52Pdma3RxQ6t0EsLOC76abr0MlsEoYRY_sTztCYgxoum/s200/12.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:r/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQ1SadysKaY_sBLnnezoyS9hM54oklyHvU8031Sr6t8MeiR5ETVglKTONauvuD6ChMNBbNi00jizS0ZYqtmuGKsSYT5PiEMDlrfo79fVR7lzK0VO2DemUUhjZ6s5b21pt-IPFti8wPCYV/s200/13.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:y/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5v8tEMMzKj46xq9fsZX8NBVBaqyXGEsRDzyR5EJfhWfZi7TNH7s_cydHpeE8o_V-bIvyIVrzRpAguk6bt7BNSse4zyqERuiA1XkCckfnBfitC7IMKDyEBtKIDNLjSsGp0mDr2FOvaSO7m/s200/14.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:t/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LXbpM9jneyc3Owr0ZWDqVRGX17Zbc21CQZRGvIILwkQOvLIUJ2B8FIAJ4zlS1xB2LpQGFQDin8QwGPL7Eg76gzGjXgdHeQwq5ZyLARmcoPEtW7dqiDCLe9n_ey9smmhxoA_e3MlS4mGz/s200/15.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:s/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd0elpF_U7ut55ueuFeo04eSvqHVytPRrckfTA_cYNgOHKk9eyKvlVZJTo55DGT8R0CX6Goxz45DGfn3nbE3WU3tNJwg4HfiQITFyKCXsUewqTvT_AgHnETBCog6ttjzvjckeDqbC4czP/s200/16.gif' style='border:0; margin:0; padding:0;'/> &quot;);
d[i].innerHTML = d[i].innerHTML.replace(/:v/, &quot; <img id='new' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuK6KNxTKJUuI0JPEQYoflqJh5FBSqF4wJ34CfHVsvLaULkx71TIddCkJXW2v6Ee5PqHxT7fO2gXeAe86RpaGgaUMdCLfqMWIDYgeK2DRnAGS9Iu7C8IiWidnQsqiJHX7NWnKwbTOWnuGV/s200/17.gif' style='border:0; margin:0; padding:0;'/> &quot;);

}
}

</script>

</head>
<body id='bodi' onload='resizeWindow(),smile()'>
<div id='outer-wrapper'>
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='post' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='feedLinks'/>
<b:includable id='status-message'/>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='275' id='comment-editor' scrolling='no' src='' width='100%'/>
<data:post.iframeColorizer/>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<data:post.numComments/> <data:commentLabelPlural/>:
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>

<div id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<u><a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><data:comment.author/></a></u>
<b:else/>
<data:comment.author/>
</b:if>
</div>
<div class='comment-body'>
<em style='font-style: normal'><data:comment.body/></em>
</div>
<div class='comment-footer'>
<span class='comment-timestamp'>
<data:comment.timestamp/>
<b:include data='comment' name='commentDeleteIcon'/>
<br/><br/>
</span>
</div>
</b:loop>
</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>
<a name='tagi'/>
<p class='comment-footer' style='display:none'>

<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>

</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts hfeed'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>

</b:if>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
</b:if>
<b:if cond='data:post.includeAd'>
<data:adEnd/>
<data:adCode/>
<data:adStart/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/></b:includable>
</b:widget>
</b:section>
</div>
<a name='akhir'/>
</body>
</html>

Kemudian Simpan Template

Jika ada konfirmasi, bahwa ada beberapa bagian akan hilang, iyakah saja, jangan di cancel

Selanjutnya Buka Posting > Buat > pada judul beri nama tagboard > isi juga dengan text "tagboard "> Lalu klik tombol TERBITKAN ENTRI

Langkah selanjutnya adalah klik Edit Entri, klik Edit pada posting tagboard, pada alamat address diatas anda copy misalnya, contoh http://www.blogger.com/post-edit.g?blogID=159448502601129649&postID=7058609445779607059, catat kemudian simpan di mana saja (gunakan word atau notepad).

Jangan Lupa bagian yang berwarna merah ganti dengan https://www.blogger.com/comment.g?

Langkah berikutnya adalah Klik Dasbor, pilih Blog Utama anda (bukan blog yang baru saja dibuat), pilih TATA LETAK > ELEMEN HALAMAN > TAMBAH GADGET > JAVASCRIPT/HTML, beri judul (terserah anda), masukkan script berikut

<script>
function buka()
{
document.getElementById('senyum').style.display='block';
}

function tutup()
{
document.getElementById('senyum').style.display='none';
}

function urlb()
{
tagboard.location="http://blablablabla.blogspot.com/2008/12/tagboard.html";
}

</script>

<button style="font-size:8pt;font-family:verdana" onclick="buka()">smiley</button>&nbsp;<button style="font-size:8pt;font-family:verdana"
onclick="window.open('https://www.blogger.com/comment.g?blogID=373275764743544501&postID=1498817755825565850&isPopup=true','mywindow','width=400px, height=500px,scrollbars=yes,resizable=yes,left=200,top=100,screenX=200,screenY=100')" >input</button>&nbsp;<button style="font-size:8pt;font-family:verdana" onclick="urlb()">refresh</button>

<table id="senyum" style="position:relative;top:10px;left:10px;display:none" width="120px" height="200px" bgcolor="#ffffff">
<tr>
<td>:m</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF9r7oLE7bjcZFYzUthDn77LP4hGk_bgYLBq_iU27Gpg29i68s-UEnOGx9I3fxQEljO0ScUiYy7cffu5eow9XJ6luOP-ZdMP2-qqga14uOM_q0gbfZuoy7tXjSl4L6sOnZbxtOwcD2sLlJ/s200/1.gif"/></td>
<td>:D</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8h3YZNMOMx5wsLmd2kkh-M-oxugjtzxFM2r1Xfdun2IMuQyvMpll9MVsnsZIfhtJKL_TXZx1ZSCPlP7qcY41uWvzQ5xw3LbpkhJ17EBtuMd0owNIDTOZwQxUgmYajput8mwF8PqgR645/s200/2.gif"/></td>
</tr>
<tr>
<td>:b</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheiCojQ3D1zIcJfaY3pfcJN8bJOoH7ea1S9kQ_Xl2-wwn09Mub7W6IXd05PbR3nfDK2pKZAZ7crzH_9S0xfywj_rhTrdsmdjxDwROJDbnEbHscshQeRWFQgIhqo1iVCu07CPcog950mJRW/s200/3.gif"/></td><td>:c</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7jxciF33XxcCC1ZL4SJxkBDXPXxusRe98dWEd5i53T2vrQGZk0pLgFvdurAkgbkKyzLKG-ZLVbXIp8X-cqesEbXVW3pZpvKoe4GL5izjA8me41uhGb_flC9gXmcJFohOovSKnbcwZGYBF/s200/4.gif"/></td>
</tr>
<tr>
<td>:p</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX5nX4rZBHCiIx2KTF7gKxyOVE6MXWMs7OjyxYe_XTcqy-jGPEod-X-jDeHd7Bqk06Z-kP3qnytUNvDPJtmLMzBfVZHQHrqGdxOkVAE20jBqNZL6YXuZ7VxbjxoJk8-Om-DNn468M3iv5W/s200/5.gif"/></td><td>:a</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglZQwOplVx7pqk5hC3oCl3VUAM_LVgf6pFYIMqC9zt5Xj9y8a11tjxAT7LHOBKPYLLd14UKesHQin8C1hlI6mTIPZJKM079nkOofmm8Ux5KbEt0wGqsnPi_lJqTJ0VjqR8jEjAYGxli1tU/s200/6.gif"/></td>
</tr>
<tr>
<td>:k</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLoVRZuk71XaRSdJljxLJgPy0qhr2XTWTSFpPFnRXiOUUsT6TRSMik-kXznIidIZ8d5upJbq-1edKTcCOu8f0ZZj_5sO2LQdbJgrQI1PCrcuWRRHTmISvDa4MTXS1VxFF75KGjawdDceSq/s200/7.gif"/></td><td>:e</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ3DOQ_Rt63seVUvzIP7_DJUi34IRKKWT_jMUsZ6_LczHT2RVvCO784NInc3mkQIRsxGUG2-3mBWwFRhjBL9WN_I9kXnlrt73pUViFFPIyBrXJIRloDKcjCEfafr18w3YiJ1kbxS914nd_/s200/8.gif"/></td>
</tr>
<tr>
<td>:f</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga21cDIuX9krmWZQZEp543D_z6dXAh3SHA1S6pQxTzJA2UCRAg-9CGcjPFwHDhCBCqfuZGKOkvSr0t6GSlkXspoySSVwcpwkiOiupGZfNWB8c4tgp4k4Znb58eDFRkZCIKt8_jAq46TXyC/s200/9.gif"/></td><td>:x</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Uww-bZ6Ktc-eTDsp7B7MGLA5Ps6AeB5WG2Y9aEoOLbHLG5vxn8JdaQkq-PFt_QDCfEjDBArAjZ7OFFmlxsyejhdtdLueWdWG6EcdU2UHbo_f_DvUshH-A3lttA828L3RNTzSINw9Osej/s200/10.gif"/></td>
</tr>
<tr>
<td>:o</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pbEjiU2TBwWw2F4-GnrN3XlHKuGu4KMYPgfXS3bBViBLwuKcE2Y6RpEnKZT2Zs24o1upl8vukKJehYRg0rfIj8svFIo6zeUnvnT1koero4-LKFPfRLOlAvz1LIUOi3Texr0Od1OZThFO/s200/11.gif"/></td><td>:L</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7AoQDpHEXRRrA0RM6_MIfmooPNMxvn_hyBIMiSZT-uK17Aam5c6A6dgS0aMWiFvF9VQmMemynM8gc8ZTcsU64g3m83X95gfuD52Pdma3RxQ6t0EsLOC76abr0MlsEoYRY_sTztCYgxoum/s200/12.gif"/></td>
</tr>
<tr>
<td>:r</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMQ1SadysKaY_sBLnnezoyS9hM54oklyHvU8031Sr6t8MeiR5ETVglKTONauvuD6ChMNBbNi00jizS0ZYqtmuGKsSYT5PiEMDlrfo79fVR7lzK0VO2DemUUhjZ6s5b21pt-IPFti8wPCYV/s200/13.gif"/></td><td>:y</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5v8tEMMzKj46xq9fsZX8NBVBaqyXGEsRDzyR5EJfhWfZi7TNH7s_cydHpeE8o_V-bIvyIVrzRpAguk6bt7BNSse4zyqERuiA1XkCckfnBfitC7IMKDyEBtKIDNLjSsGp0mDr2FOvaSO7m/s200/14.gif"/></td>
</tr>
<tr>
<td>:t</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4LXbpM9jneyc3Owr0ZWDqVRGX17Zbc21CQZRGvIILwkQOvLIUJ2B8FIAJ4zlS1xB2LpQGFQDin8QwGPL7Eg76gzGjXgdHeQwq5ZyLARmcoPEtW7dqiDCLe9n_ey9smmhxoA_e3MlS4mGz/s200/15.gif"/></td><td>:s</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwd0elpF_U7ut55ueuFeo04eSvqHVytPRrckfTA_cYNgOHKk9eyKvlVZJTo55DGT8R0CX6Goxz45DGfn3nbE3WU3tNJwg4HfiQITFyKCXsUewqTvT_AgHnETBCog6ttjzvjckeDqbC4czP/s200/16.gif"/></td>
</tr>
<tr>
<td>:v</td><td><img id="new" style="border:0; margin:0; padding:0;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuK6KNxTKJUuI0JPEQYoflqJh5FBSqF4wJ34CfHVsvLaULkx71TIddCkJXW2v6Ee5PqHxT7fO2gXeAe86RpaGgaUMdCLfqMWIDYgeK2DRnAGS9Iu7C8IiWidnQsqiJHX7NWnKwbTOWnuGV/s200/17.gif"/></td>
</tr>
<tr><td colspan="2" align="right"><button onclick="tutup()">Tutup</button></td></tr>
</table>

<iframe width="190px" frameborder="0" src="http://blablablabla.blogspot.com/2008/12/tagboard.html#akhir" marginheight="0px" name="tagboard" height="400px" marginwidth="0px"></iframe>
<div style="font-size:10px;font-family:verdana" align="left">
**Tekan Tombol <b>Refresh</b> setelah <b>Input ShoutBox</b>**
</div>

Ganti bagian yang berwarna hijau dengan alamat blog anda; 2008, ganti dengan tahun sekarang, 12 ganti dengan bulan sekarang

Bagian yang berwarna biru ganti dengan alamat yang tadi anda simpan pada word/notepad

setelah itu anda simpan
SELAMAT MENCOBA SEMOGA BERHASIL
Selanjutnya...

Senin, 22 Desember 2008

Iframe menembus batas

Sebelum tertarik membuat blog, beberapa pekan sebelumnya, saya iseng-iseng searching ke berbagai komunitas blogger. Saya melihat berbagai keragaman blog mulai dari yang sederhana sampai yang begitu smart dan ciamik. Rupanya asyik juga memiliki blog. Akhirnya saya daftar ke blogger.com dan mendapatkan account sekaligus alamat blog. Begitu alamat saya buka, ternyata blog default yang disediakan betul-betul mentah dan tak menarik untuk dilanjutkan kembali. Tapi seperti kata pepatah "tak kenal maka tak sayang", maka mulailah iseng-iseng saya buka satu-persatu fasilitas widget/gadget yang disediakan dan tampilkan pada layout halaman blog. Hasilnya lumayan Ok, tapi masih jauh dari harapan.

Tak puas dengan fasilitas yang ada, coba-coba saya telusuri dan buka source htmlnya. Setelah mempelajari secara detil, ada yang menarik tapi ada juga yang tak menarik. Tak menariknya adalah Pertama : bahasa yang digunakan bukan bahasa HTML Murni yang lebih familiar tapi bahasa xml, Kedua : tak seperti lazimnya webspace gratisan seperti geocities atau tripod, blog sama sekali tak menyediakan fasilitas untuk membuat direktori atau file, sehingga tak memungkinkan kita membuat halaman yang beraneka ragam, satu-satunya fasilitas halaman adalah ketika anda melakukan posting, maka halaman akan otomatis terbentuk sendiri, Ketiga : fasilitas interaksi sangat minim, tak ada guestbook, counter, dan statistik pengunjung. Dan yang paling mengecewakan dari blogger adalah ternyata blogger tidak menunjang PHP dan MySQl. Bahasa yang sangat universal di dunia world wide web

Yang menarik dari blogger adalah fasilitas yang disediakan tidak terlalu kaku, kita masih diperkenankan untuk bereksperimen, html/javascript masih diperkenankan, meskipun dalam beberapa kali uji coba banyak javascript yang error saat di share ke blogger. Dengan diizinkannya html/javascript maka sebuah lubang terbuka untuk mengambil direktori dari sumber lain kemudian dishare baik secara langsung maupun tak langsung.

Contoh direktori langsung adalah counter,feedburner,pagerank dll yang di comot dari berbagai penyedia counter seperti sitemeter.com,feedburner,pagerank.com yang disusup masuk ke blog via tag-tag javascript.

Yang saya suka adalah menyusupkan direktori eksternal ke blogger secara tidak langsung menggunakan Iframe.

Iframe adalah semacam jendela buat blogger untuk melihat/memanfaatkan dunia luar (direktori ekternal) tanpa menggangu script-script blogger yang ada. Dengan Iframe, blogger akhirnya menjadi tanpa batas, semua fasilitas yang tak dsediakan secara default oleh blogger dapat di browse ke iframe. Hasilnya sungguh luar biasa. Contoh Tagboard/shoutbox, slide in page banner, iklan memanfaatkan iframe untuk share ke blogger.

saya sendiri memanfaatkan iframe untuk berbagai keperluan:
  • Membuat fasilitas user/members login, Yang Lagi Online, Private Message, Dan Posting Artikel yang berbasis PHP dan MySQL. Saya buat terlebih dahulu webside portal via penyedia free web hosting berbasis PHP + MySQL setelah itu saya jump ke blog via iframe.

  • Membuat Blog dalam blog. Artinya pada blog utama yang saya buat terdapat lagi blog lain yang saya sisip via iframe. Sehingga jika anda membuat 10 blog dengan tema yang berbeda. kesepuluh blog tersebut dapat anda tampilkan pada 1 blog saja.

  • Posting pada blogger tidak mengizinkan javascript, tag-tag yang diizinkan terbatas. Untungnya tag iframe masih di izinkan sehingga kita bisa buat artikel dengan menampilkan direktori eksternal pada postingan.


Selanjutnya...

Daftar Isi Scroll Bar

Daftar isi blog anda sudah terlalu banyak, anda malas melihatnya terlalu panjang ke bawah, sehingga seakan mengganngu penampilan blog anda. Jika Anda ingin mengakalinya sedemikian rupa agar tampak lebih simple tapi komplit, sebaiknya gunakanlah LAYER WITH SCROLLBAR. Prinsipnya, daftar isi blog dimasukkan ke dalam layer, kemudian layer kita atur lebar dan panjangnya, sehingga jika daftar isi melebihi panjang layer maka halaman secara otomatis di scroll dengan scrollbar.

Tag html layer adalah :

<ilayer clip="0,0,170,150" width="170" height="150">
<layer width="170" height="150"
bgcolor="lightyellow">
<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">

Disini anda masukkan script daftar isi anda

</div>
</layer>
</ilayer>

Selengkapnya adalah :
.......Bagian Awal Yang Harus Anda Copy Paste.....


<script>
function hyoga(json) {
document.write('<ilayer clip="0,0,170,150" width="170" height="150">');
document.write('<layer width="170" height="150" bgcolor="lightyellow">');


document.write('<div style="width:200px;height:250px;background-color:lightyellow;overflow:auto;display:block;font-family:trebuchet;font-size:11px;color:#000000;padding:5px">');

for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {


var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

if ("content" in entry) {

var postcontent = entry.content.$t;

} else if ("summary" in entry) {

var postcontent = entry.summary.$t;

} else

var postcontent = "";

var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

document.write('<font color="#006400"><b>');
document.write(posttitle);
document.write('</b></font>');


if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);
document.write('<br><br/>');
}

}



}
document.write('</div>');
document.write('</layer>');
document.write('</ilayer>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=hyoga"></script>



......Bagian Akhir yang harus anda copy paste....

Ganti tulisan yang berwarna merah dengan alamat blog anda di blooger.com, setelah itu buka webside http://www.blogger.com, isi account anda, buka Tata Letak > Tambah Gadget > Javascript/HTML >

Copy Paste script diatas kemudian save/simpan

Selanjutnya...

Senin, 15 Desember 2008

Daftar Isi Auto Scroll

Anda mungkin ingin menampilkan Daftar Isi Artikel yang sudah diposting, tertata secara berurut ke bawah pada sidebar blogger anda, tapi anda kurang sreg melihat daftar isi tersebut terlalu panjang kebawah. Tak perlu bingung. Anda dapat mensiasatinya dengan menggunakan MARQUEE VERTICAL WITH PAUSE, yaitu sroll secara automatis keatas (vertical) yang saat mouse diletakkan diatasnya (mouse over), tulisan berhenti scroll dan sebaliknya jika mouse keluar (mouse out), tulisan akan bergerak kembali. Seperti contoh yang terlihat pada RECENT COMMENT

Selain itu dengan tehnik yang sama, Daftar Komentar juga bisa anda buat seperti itu.

Tehniknya mudah
Pertama-tama, buka blogger.com. pilih Tata Letak > Tambah Gadget > HTML/Javascript >

Copy Pasta Script dibawah ini

<script>
function gml(json) {

document.write('<marquee scrolldelay="180" direction="up" onmouseover="this.stop()" width="170px" onmouseout="this.start()">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {

document.write('<p style="padding : 2px">');
var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

if ("content" in entry) {

var postcontent = entry.content.$t;

} else if ("summary" in entry) {

var postcontent = entry.summary.$t;

} else

var postcontent = "";

var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

document.write(posttitle);

if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</p>');
}


document.write('</marquee>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>


<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

Ganti tulisan yang berwarna merah dengan alamat blog anda di Blogger

kemudian simpan (save)

Untuk Daftar Komentar

script dibawah ini

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=gml"></script>

ganti dengan

<script src="http://infomediss.blogspot.com/feeds/comments/default?orderby=published&alt=json-in-script&callback=gml"></script>

tulisan yang berwarna merah ganti dengan alamat anda yang ada di blogger

kemudian Simpan (save)
Selanjutnya...

Minggu, 14 Desember 2008

Daftar Isi Slide in Page

Mungkin Anda tertarik membuat Daftar Isi Artikel yang anda posting ditampilkan secara slide in pada halaman layout anda, seperti contoh yang terlihat pada RECENT POST ini. Anda bisa menampilkan semua postingan anda, tanggal publish dan sekelumit informasi tentang artikel.

Untuk membuat Daftar isi Slide In Page, tidak terlalu sulit. Cukup menggunakan javascript. Dibawah ini adalah tag-tag scriptnya:

Langkah Pertama adalah buka blogger.com, masuk ke Tata Letak > Edit html

kemuadian sebelum tag </head> anda ketikkan script berikut


<style>#contentwrapper{width: 170px;height: 190px;border: 0px solid black;background-color: #ffffff;padding: 0px;}
.billcontent{width: 100%;display:block;}</style>


Lalu Tekan Simpan (Save)

Setelah itu buka Element Halaman > tambah gatget > add html/javascript, kemudian copy paste script dibawah ini

<script type="text/javascript">

var billboardeffects=["GradientWipe(GradientSize=1.0 Duration=0.7)", "Inset", "Iris", "Pixelate(MaxSquare=5 enabled=false)", "RadialWipe", "RandomBars", "Slide(slideStyle='push')", "Spiral", "Stretch", "Strips", "Wheel", "ZigZag"]

//var billboardeffects=["Iris"] //Uncomment this line and input one of the effects above (ie: "Iris") for single effect.

var tickspeed=5000 //ticker speed in miliseconds (2000=2 seconds)
var effectduration=500 //Transitional effect duration in miliseconds
var hidecontent_from_legacy=1 //Should content be hidden in legacy browsers- IE4/NS4 (0=no, 1=yes).

var filterid=Math.floor(Math.random()*billboardeffects.length)

document.write('<style type="text/css">\n')
if (document.getElementById)
document.write('.billcontent{display:none;\n'+'filter:progid:DXImageTransform.Microsoft.'+billboardeffects[filterid]+'}\n')
else if (hidecontent_from_legacy)
document.write('#contentwrapper{display:none;}')
document.write('</style>\n')

var selectedDiv=0
var totalDivs=0

function contractboard(){
var inc=0
while (document.getElementById("billboard"+inc)){
document.getElementById("billboard"+inc).style.display="none"
inc++
}
}

function expandboard(){
var selectedDivObj=document.getElementById("billboard"+selectedDiv)
contractboard()
if (selectedDivObj.filters){
if (billboardeffects.length>=2){
filterid=Math.floor(Math.random()*billboardeffects.length)
selectedDivObj.style.filter="progid:DXImageTransform.Microsoft."+billboardeffects[filterid]
}
selectedDivObj.filters[0].duration=effectduration/1000
selectedDivObj.filters[0].Apply()
}
selectedDivObj.style.display="block"
if (selectedDivObj.filters)
selectedDivObj.filters[0].Play()
selectedDiv=(selectedDiv<=totalDivs-2)? selectedDiv+1 : 0
setTimeout("expandboard()",tickspeed)
}

function startbill(){
while (document.getElementById("billboard"+totalDivs)!=null)
totalDivs++
if (document.getElementById("billboard0").filters)
tickspeed+=effectduration
expandboard()
}

if (window.addEventListener)
window.addEventListener("load", startbill, false)
else if (window.attachEvent)
window.attachEvent("onload", startbill)
else if (document.getElementById)
window.onload=startbill

</script>

<script>
function rp(json) {

document.write('<div id="contentwrapper">');
for (var i = 0; i <= json.feed.openSearch$totalResults.$t - 1; i++) {

document.write('<div id="billboard' + i + '" class="billcontent">');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;

if (i == json.feed.entry.length) break;

for (var k = 0; k <= entry.link.length - 1; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}

posttitle = posttitle.link(posturl);

var readmorelink = "(more)";

readmorelink = readmorelink.link(posturl);

var postdate = entry.published.$t;

var cdyear = postdate.substring(0,4);

var cdmonth = postdate.substring(5,7);

var cdday = postdate.substring(8,10);

var monthnames = new Array();

monthnames[1] = "Jan";

monthnames[2] = "Feb";

monthnames[3] = "Mar";

monthnames[4] = "Apr";

monthnames[5] = "May";

monthnames[6] = "Jun";

monthnames[7] = "Jul";

monthnames[8] = "Aug";

monthnames[9] = "Sep";

monthnames[10] = "Oct";

monthnames[11] = "Nov";

monthnames[12] = "Dec";

if ("content" in entry) {

var postcontent = entry.content.$t;

} else if ("summary" in entry) {

var postcontent = entry.summary.$t;

} else

var postcontent = "";

var re = /<\S[^>]*>/g;

postcontent = postcontent.replace(re, "");

document.write(posttitle);

if (showpostdate == true)
document.write('<br/>');
document.write(cdyear + ' ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
document.write('<br><br/>');
if (postcontent.length <= numchars -1) {

document.write(postcontent);

} else {

postcontent = postcontent.substring(0, numchars);

var quoteEnd = postcontent.lastIndexOf(" ");

postcontent = postcontent.substring(0,quoteEnd);

document.write(postcontent + '...' + readmorelink);

}

}

document.write('</div>');

}


document.write('</div>');

}
</script>

<script>

var showpostdate = true;

var showpostsummary = true;

var numchars = 150;

</script>

<script src="http://infomediss.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>


Yang berwarna biru anda ganti dengan alamat blog anda

setelah itu baru anda simpan (save)
Selanjutnya...

Sabtu, 13 Desember 2008

Daftar Isi Blogger Debug/error javascript

Jika Anda sempat membaca artikel saya tentang "Daftar Isi Blogger Tanpa direktori Eksternal", maka artikel ini merupakan kelanjutannya. Artikel itu saya buat karena ketika membuat daftar isi blogger, saya mencoba mengatur berapa jumlah judul postingan yang ingin saya tampilkan, saat itu artikel yang sudah saya posting ada 6, jadi pada setting scriptnya saya ubah seperti ini


<script>
var numposts = 6;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>

Pada layout halaman blog, tampaknya tak ada masalah, aman-aman saja,

Nah, saya coba-coba bereksperimen, bagaimana jika setting scriptnya saya ubah menjadi 100, seperti ini

<script>
var numposts = 100;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100;
</script>

kelihatannya tak ada masalah, tak ada yang aneh, daftar isi postingan tetap ditampilkan. Tapi tanpa sengaja saya melihat pada statusbar muncul kode seperti ini,



setelah saya klik muncul warning dengan kata-kata seperti ini
Error : 'title' is null or not an object

Ini menandakan bahwa sebenarnya telah terjadi kesalahan atau error javascript. Saya mencoba menelusuri kesalahannya, ternyata masalahnya begini : Jika anda mengganti nilai numposts kurang atau sama dengan jumlah postingan, maka tidak akan terjadi error, tapi jika anda mengganti nilai numposts lebih dari jumlah postingan akan terjadi error javascript.

Solusinya adalah
Pastikan nilai numposts selalu kurang atau sama dengan jumlah postingan anda, jangan pernah setting nilainya diatas jumlah postingan anda.

Jika jumlah posting sudah banyak dan sudah lupa mengingat jumlahnya berapa, anda bisa menggunakan kode script dibawah ini

json.feed.openSearch$totalResults.$t

dan ganti pada tulisan yang berwarna biru

for (var i = 0; i < numposts; i++)

jadi seperti ini

for (var i = 0; i < json.feed.openSearch$totalResults.$t ; i++)

Hanya masalahnya, judul postingan akan ditampilkan semua pada layout halaman blogger, jika jumlahnya masih kurang dari 50 postingan mungkin tak masalah, tapi bayangkan kalau jumlah postingan sudah melebihi 100 atau bahkan 1000, malah menjadi kurang sreg karena membuat halaman blog menjadi terlalu panjang kebawah. Jika hal tersebut terjadi, untuk mengatasinya saya memberikan 2 solusi :


  1. Batasi jumlah judul postingan pada daftar isi yang ingin ditampilkan sesuai selera anda, yang penting syaratnya nilainya jangan melebihi jumlah total postingan anda
  2. Buat Auto Scrolling Daftar Isi atau manual scrolling daftar isi atau Slide in Page Daftra Isi. Dengan Cara ini seluruh jumlah postingan berapa pun jumlahnya dapat ditampilkan dalam sebuah box kecil yang bisa diatur ukurannya sesuai selera. Jika ingin melihat judul postingan, anda cukup melakukan scrolling secara manual/autoscoll atau biarkan animasi slide yang mengubahnya sesuai interval waktu yang bisa kita setting sendiri.(Pembahasan Tentang hal ini dapat anda buka di artikel "Daftar Isi Scrolling page" atau "Daftar isi Slide in page").


Selanjutnya...

Daftar Isi Blogger Tanpa Direktori Eksternal

Ketika pertama kali membuat blog, saya berpikir bagaimana membuat daftar isi blog, karena setahu saya posting artikel pada blogger hanya mampu menampilkan maksimal 7 postingan dalam 1 halaman. Gadget bawaan blogger ada menyediakan fasilitas untuk menata postingan sesuai waktu (archives) dan kategori (label). Tapi belum ada fasilitas yang menampilkan judul postingan secara berurut pada layout halaman. Cari-cari di internet, akhirnya dapat tips dan trik membuat daftar isi, ternyata banyak blog yang mengulas tentang daftar isi. meskipun 80% diantaranya hanya copy paste saja. Salah satunya saya comot dan pasang diblog saya, berhasil. Scriptnya kira-kira seperti ini.
<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>

<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>

Script ini saya ambil dari Blog http://tips-trik-blog.blogspot.com/

Setelah saya perhatikan ternyata ada script yang disimpan/diambil dari direktori eksternal (lihat : tulisan berwarna merah). Saya berpikir, kenapa script tersebut mesti disimpan pada direktori eksternal yang justru bisa menambah beban loading, jika direktori internal juga bisa. Oleh karena itu kode-kode scriptnya saya buka. Cara membukanya adalah : buka jendela baru ketikkan alamat berikut

http://www.geocities.com/uddin_81/recent-post.js

Anda akan mendapatkan kode script seperti ini
contoh script :

function rp(json) {
document.write('<ul>');


for (var i = 0; i < numposts; i++) {

document.write('<li>');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;


if (i == json.feed.entry.length) break;


for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}


posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}

Kemudian pada bagian awal kode script tersebut saya tambahkan tag pembuka <script> dan bagian akhir saya tambahkan tag penutup </script> sehingga menjadi seperti ini.

<script>

function rp(json) {
document.write('<ul>');

for (var i = 0; i < numposts; i++) {
document.write('<li>');
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;

..............
.............. (dst)

document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}

</script>

Kemudian ganti script yang diambil dari direktori eksterna tadi (tulisan yang berwarna merah) dengan script diatas, sehingga selengkapnya menjadi seperti ini

<script>

function rp(json) {
document.write('<ul>');


for (var i = 0; i < numposts; i++) {

document.write('<li>');

var entry = json.feed.entry[i];

var posttitle = entry.title.$t;

var posturl;


if (i == json.feed.entry.length) break;


for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

posturl = entry.link[k].href;

break;

}

}


posttitle = posttitle.link(posturl);
var readmorelink = "(more)";
readmorelink = readmorelink.link(posturl);
var postdate = entry.published.$t;
var cdyear = postdate.substring(0,4);
var cdmonth = postdate.substring(5,7);
var cdday = postdate.substring(8,10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";

if ("content" in entry) {
var postcontent = entry.content.$t;
} else if ("summary" in entry) {
var postcontent = entry.summary.$t;
} else
var postcontent = "";
var re = /<\S[^>]*>/g;
postcontent = postcontent.replace(re, "");
document.write(posttitle);

if (showpostdate == true) document.write(' - ' + monthnames[parseInt(cdmonth,10)] + ' ' + cdday);

if (showpostsummary == true) {
if (postcontent.length < numchars) {
document.write(postcontent);
} else {
postcontent = postcontent.substring(0, numchars);
var quoteEnd = postcontent.lastIndexOf(" ");
postcontent = postcontent.substring(0,quoteEnd);
document.write(postcontent + '...' + readmorelink);
}
}
document.write('</li>');
}
document.write('</ul>');

}

</script>

<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


Ganti tulisan yang berwarna hijau dengan alamat blog anda.

Selanjutnya masuk ke Blogger.com, Klik Tata Letak (layout), Pilih Elemen Halaman, Klik Tambah Gatget, Klik Tambahkan Javascript/HTML

Kemudian Copy Paste script diatas (Tulisan berwarna biru), lalu Simpan Perubahan (save)

Jika anda ingin mengatur jumlah posting, sekelumit kata-kata dalam artikel, tgl posting, anda bisa mengatur sendiri dengan mengubah bagian ini

<script>
var numposts = 5;
var showpostdate = true;
var showpostsummary = true;
var numchars = 100; </script>
<script src="http://tips-trik-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script>


Keterangan
numposts : untuk menentukan jumlah postingan
showpostdate = true : untuk menampilkan waktu postingan, false: untuk menyembunyikan waktu postingan
showpostsummary = true : untuk menampilkan sekelumit tulisan; false : untuk menyembunyikan sekelumit tulisan
numchars : menentukan jumlah karakter pada showpostsummary



Selanjutnya...
 
 
 
 
 
 


CLOSE
MAIN MENU
REFRESH