Cara Mengganti navigasi Home, Previous Dan Next Page menjadi Angka

Mungkin sobat sudah bosan melihat Navigasi Home, Previous dan Next bawaan template.
dan untuk itu saya akan membagi 3 model bentuk Navigasi angka editan saya.

Tutorial I :

Pada Dashboard, Pilih Template
Klik Edit HTML
Cari Kode ]]></b:skin>
Copy paste script dibawah ini dan letakkan tepat di atas kode ]]></b:skin> tersebut

• Script untuk Navigasi berwarna merah

.showpageArea{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#FF0000; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #FF0000;color:#FF0000!important}
.showpage{margin:0}
.showpage:hover a{color:#FF0000!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #FF0000; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#FF0000; margin:0 2px 0 0; padding:5px 12px}

•  Script untuk Navigasi berwarna Ungu

.showpageArea{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea:hover{float:center; color:#7B00FF; font-size:12px; text-shadow:0 1px 1px black; margin:10px 0}
.showpageArea a{color:white}
.showpageNum a:hover,.showpage:hover{background:white; border:1px solid #7B00FF;color:#7B00FF!important}
.showpage{margin:0}
.showpage:hover a{color:#7B00FF!important}
.showpagePoint{background:white; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:white; border:1px solid #7B00FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: white; text-shadow:0 1px 1px black; background:#7B00FF; margin:0 2px 0 0; padding:5px 12px}

•  Script untuk Navigasi berwarna Biru

.showpageArea{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea:hover{float:center; color:#0022FF; font-size:12px; text-shadow:0 1px 1px #000000; margin:10px 0}
.showpageArea a{color:#FFFFFF}
.showpageNum a:hover,.showpage:hover{background:#FFFFFF; border:1px solid #0022FF;color:#0022FF!important}
.showpage{margin:0}
.showpage:hover a{color:#0022FF!important}
.showpagePoint{background:#FFFFFF; border:1px solid #e8e8e8; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpagePoint:hover{background:#FFFFFF; border:1px solid #0022FF; border-radius:5px; margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8; border-radius:5px; color: #FFFFFF; text-shadow:0 1px 1px #000000; background:#0022FF; margin:0 2px 0 0; padding:5px 12px}

Tutorial II :

Masih Pada menu edit HTML tadi
Cari kode </body>
Copy Paste kode script dibawah ini dan letakkan tepat diatas kode </body>

<!-- Start PageNavi by Dido Borneo -->
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<script type="text/javascript" src="https://sites.google.com/site/didopalangkaraya/project/PageNavi3.js"></script>
<!-- End PageNavi by Dido Borneo -->

Silahkan sobat ganti kata-kata Prev dan Next diatas apabila sobat ingin berkreasi

"Semoga Bermamfaat"

[ Baca Selengkapnya ]

Textarea dan contoh tampilannya

• Textarea Model biasa

Textarea Model biasa

<textarea cols="20" rows="2">Masukkan teks sobat disini</textarea>

• Textarea dengan huruf berwarna

Textarea dengan huruf berwarna

<textarea cols="20" rows="2" style=" color:#0022FF;">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid

Textarea dengan border solid

<textarea name="code" cols="20" rows="2" style="border:5px solid #FF0000; ">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid dan radius

Textarea dengan border solid dan radius

<textarea name="code" cols="30" rows="2" style="border:5px solid #FF0000; border-radius: 8px; ">Masukkan teks sobat disini</textarea>

• Textarea dengan border solid dan huruf berwarna

Textarea dengan border solid dan huruf berwarna

<textarea cols="30" rows="2" style="border:5px solid #FF0000; color:#0022FF;">Masukkan teks sobat disini</textarea>

• Textarea dengan background berwarna

Textarea dengan background berwarna

<textarea name="code" cols="30" rows="2" style="background:#00FF00;">Masukkan teks sobat disini</textarea>

• Textarea dengan background, border dan huruf berwarna

Textarea dengan background, border dan huruf berwarna

<textarea name="code" cols="30" rows="2" style="background:#00FF00; border:5px solid #FF0000; color:#ff6347; text-align:center;">Masukkan teks sobat disini</textarea>

• Textarea dengan Tombol Pilih semua

Textarea dengan Tombol Pilih semua

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Pilih semua"> </div><div align="center"></div><p align="center"><textarea style="width: 300px; height: 144px" name="txt" rows="100" wrap="virtual" cols="55">Masukkan teks sobat disini</textarea></p></div></form>

• Textarea Terblok Semua saat Dilewati cursor

Textarea Terblok Semua saat Dilewati cursor

<div>
<form name="Dido Blogger"><div align="center" style="margin-bottom: 0pt; margin-top: 0pt;">
<textarea ;="" cols="55" name="txt" onmouseover="this.form.txt.select()" rows="100" style="height: 50px; width: 300px;">Masukkan teks sobat disini</textarea></form>
</div> 

•  Text Area Yang Tidak Bisa Dihapus

Text Area Yang Tidak Bisa Dihapus

<div align="center"><textarea rows="2" cols="35" onclick="this.focus(); this.select();" readonly="">Masukkan Teks sobat Disini</textarea></div>

Keterangan :

• cols (kolom)  :  jumlah kolom atau lebar textarea
• rows (baris)   :  jumlah baris atau tinggi textarea
• untuk membuat textarea lebih menarik tampilannya, sobat bisa berkreasi sendiri dengan merubah jenis garis dan model bentuk dari border nya
  sebagai contoh dari jenis model dan bentuk border silahkan sobat lihat pada postingan saya sebelumnya disini dan juga disini (klik aja)

[ Baca Selengkapnya ]

Efek-efek pada Gambar

Efek Gambar bergetar

 
script kodenya :

<center><marquee align="center" behavior="alternate" direction="right" scrollamount="18" width="200px"><img src="Alamat URL Gambar Sobat" style="width: 190px;" /></marquee></center>

Cara Pemasangan :

• Pada Menu Tata Letak, Klik Tambahkan Gadget
• Pilih Edit HTML/Javascript
• Copy Paste script Diatas kedalamnya

Efek Gelap ke Terang

Tutorialnya :

• Pada Dashboard, pilih Template
• Klik Edit HTML
• Cari kode ]]></b:skin> ( Tekan CTRL+F untuk mempermudah pencarian ).
• Copy paste kode script di bawah ini dan letakan tepat di atas kode ]]></b:skin>

img {
filter:alpha(opacity=70); -moz-opacity:0.7; opacity: 0.7;
}
img:hover { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity 1.0;
}

Efek Terang Ke Gelap :

Cara Peletakkannya sama seperti diatas

Kode scriptnya :

img {
filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0;
}
img:hover { filter:alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7;
}

Efek Gelap ke Terang berfungsi untuk membuat efek gambar akan menjadi terang jika Cursor diarahkan,  dan akan menjadi gelap ketika cursor dijauhkan, begitu sebaliknya pada efek Terang Ke Gelap

Untuk efek-efek lain pada blog, silahkan klik disini untuk menuju postingan saya terdahulu

[ Baca Selengkapnya ]

Membuat bingkai pada Tulisan atau Posting

Dalam pembuatan bingkai tulisan atau postingan, Biasanya digunakan 3 jenis model seperti border, text area dan kotak scroll (overflow).
Berikut saya akan membagikan cara untuk pembuatan 3 jenis model tersebut :

Border

border atau garis yang mengelilingi tulisan yang fungsinya untuk memperindah tampilan dan juga sebagai pembatas tulisan.

Contoh border :

Isi Teks Anda Disini

Kodenya :

<div style="border: 3px solid #FF0000; margin: 5px 0px; padding: 10px; width: auto; height: auto; background-color:#ABABAB; text-align: left; font color:#1AFF00;">Isi Teks Anda Disini</div>

Keterangan:

• Border: 3px solid #FF0000; = Tebal garis border jenis solid 3px dengan kode warna border #FF0000
• Margin: 5px 0px; = Margin atas-bawah 5px dan margin kiri-kanan 0 px.
• Padding: 10px; = Jarak tulisan ke border adalah 10px.
• Perintah width: auto; height: auto; = agar lebarnya(width) mengikuti lebar kolom yang tersedia dan tinggi(height) mengikuti tulisan yang ada didalamnya.
  Untuk Perintah auto, sobat bisa menggantinya dalam bentuk pixel, misalnya: 100px.
• background-color:#ABABAB; = warna latar/gambar belakang tulisan dengan kode warna #ABABAB;
  silahkan ganti kode #ABABAB dengan none atau hapus saja perintahnya apabila ingin tanpa warna latar.
• text-align: left; = bentuk rata kiri.
• ganti sesuai selera dengan perintah right (Rata Kanan), center (Rata Tengah), atau justify (Rata kiri-kanan)
• font color:#1AFF00; = Warna Huruf  menggunakan kode #1AFF00

Textarea

Textarea atau kotak yang melingkupi daerah text itu berada.
Pada perintah dalam textarea tidak menggunakan width dan height melainkan memakai rows (baris) dan cols (kolom) untuk lebar dan tinggi.
Penggunaan kode rows dan cols efeknya akan sama dengan overflow,
yaitu jika text melebihi area baris dan kolom , maka akan dibuatkan scroll dan disembunyikan.

Contoh textarea :
Isi Teks Anda disini
Kodenya :

<textarea rows="5" cols="50">Isi Teks Anda disini</textarea>

Keterangan :

• rows="5" cols="50" artinya 5 baris dan lebar 50 kolom (tulisan yang melebihi 5 baris dan 50 kolom akan disembunyikan dan diberikan scroll)

• Untuk melihat contoh model textarea lainnya silahkan sobat baca di postingan saya yg lain Klik disini 

Overflow

Overflow artinya tulisan yang melebihi media yang tersedia.
Perintah dalam overflow, yaitu scroll, hide, dan auto.
 
Keterangan

• scroll = tulisan yang melebihi media akan dibuatkan scroll.
• hide = tulisan yang melebihi media akan disembunyikan.
• auto = tulisan yang melebihi media akan dibuatkan scroll dan sisanya akan disembunyikan.

Contoh :

Isi Teks Anda disini

Kodenya :

<div style="overflow:auto; border: 5px solid #FF0000; margin: auto; padding: 3px; width: 95%; height: 100px; background-color:#ABABAB; text-align: justify; font color:#1AFF00;">Isi Teks Anda disini</div>

Keterangan:

• Jika tulisan tersebut melebihi lebar 95% dari lebar container dan tinggi melebihi 100px maka akan dibuatkan scroll dan sisanya akan disembunyikan.

Catatan :
Perintah-perintah pada overflow sama dengan perintah pada border.

Untuk pemberian warna silahkan sobat lihat pada kode generator warna atau memasang generator warna pada blog sobat sendiri yang pernah saya posting sebelumnya disini

[ Baca Selengkapnya ]

Jenis-jenis Garis Border

Border Solid

Border Dotted

Border dashed

Border double

Border groove

Border Ridge

Border Inset

Border Outset

Keterangan :

Jenis-jenis border diatas saya buat dalam contoh penulisan teks berbingkai seperti kode dibawah ini :

<div style="border: 7px solid #FF0000; margin: 10px 0px; padding: 10px; width: auto; height: auto; text-align: center; font color:#00FF08;">Teks tulisan kita</div>

• 7px adalah nilai tebal dari border
• solid adalah jenis garis border
• Teks Tulisan kita adalah Teks yang kita beri border

Fungsi-fungsi kode border :

• Dotted = garis titik-titik
• Solid =  garis lurus
• Double = garis lurus double
• Border-top = garis bagian atas
• Border-bottom = garis bagian bawah
• Border-left = garis bagian kiri
• Border-right = garis bagian kanan

Catatan :
Untuk ukuran ketebalan border saya sarankan menggunakan ukuran diatas 2 px agar bentuk garis bordernya terlihat jelas

[ Baca Selengkapnya ]

Border Blog dan Model bentuknya

Contoh Border I

• Kodenya :
  -moz-border-radius-bottomright: 100px;
  border-bottom-right-radius: 100px;

Contoh Border II

• Kodenya :
  -moz-border-radius-topleft: 100px;
  border-top-left-radius: 100px;
  

Contoh Border III

• Kodenya :
  -moz-border-radius-bottomright: 50px 25px;
  border-bottom-right-radius: 50px 25px; 

Contoh Border IV

• Kodenya :
  -moz-border-radius: 1em 4em 1em 4em;
  border-radius: 1em 4em 1em 4em;

Contoh Border V

• Kodenya :
  -moz-border-radius: 25px 10px / 10px 25px;
  border-radius: 25px 10px / 10px 25px;  

Contoh Border VI

• Kodenya :
  -moz-border-radius: 35px;
  border-radius: 35px;

Contoh Border VII

• Kodenya :
  border-radius: 8px;

misalkan apabila kita ingin membuat bingkai pada tulisan atau postingan seperti ini

<div style="border: 1px solid #FF0000;
margin: 10px 0px; padding: 10px; width: auto; height: auto; text-align: center; color: #00FFFB;">Teks Kita Disini</div>

dan akan kita beri border model I dan Model II maka bentuknya scriptnya akan menjadi seperti ini

<div style="border: 1px solid #FF0000;

-moz-border-radius-bottomright: 100px;
border-bottom-right-radius: 100px;

-moz-border-radius-topleft: 100px;
border-top-left-radius: 100px; 

margin: 10px 0px; padding: 10px; width: auto; height: auto; text-align: center; color: #00FFFB">Teks Kita Disini</div>

Hasilnya akan seperti ini

Teks Kita Disini

NB :
apabila sobat tidak mau ribet dalam mencari model atau bentuk border sesuai keinginan sobat sendiri
silahkan sobat mampir ke situs software border generator disini

[ Baca Selengkapnya ]

3 widget burung twitter koleksiku

Model I	Model II	Model III

Sebelumnya saya pernah memposting tentang animasi burung twitter terbang diblog Klik disini.
dan sekarang saya akan membagi 3 widget burung twitter keren seperti contoh gambar diatas.

Tutorialnya :

• Pada menu tata letak, klik Tambahkan Gadget
• Pilih HTML/Java Script
• kemudian Copy Paste kode script pilihan sobat dibawah ini kedalamnya

Model I
<object data="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton1.swf" height="80" type="application/x-shockwave-flash" width="180"><param name="movie"
value="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton1.swf" />
<param name="allowscriptaccess" value="always"/><param name="menu" value="false"/><param name="wmode" value="transparent"/>
<param name="flashvars" value="username=Dido_Net"/><embed src="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton1.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="180" height="80" menu="false" wmode="transparent" flashvars="username=Dido_Net"></embed></object>

Model II
<object type="application/x-shockwave-flash" data="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton2.swf" width="100" height="100"><param name="movie" value="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton2.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=Dido_Net"></param><embed src="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton2.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="100" height="100" menu="false" wmode="transparent" flashvars="username=Dido_Net"></embed></object>

Model III

<object type="application/x-shockwave-flash" data="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton3.swf" width="200" height="200"><param name="movie" value="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton3.swf"></param><param name="allowscriptaccess" value="always"></param><param name="menu" value="false"></param><param name="wmode" value="transparent"></param><param name="flashvars" value="username=Dido_Net"></param><embed src="https://sites.google.com/site/didopalangkaraya/twitter/twitbutton3.swf" type="application/x-shockwave-flash" allowscriptaccess="always" width="200" height="200" menu="false" wmode="transparent" flashvars="username=Dido_Net"></embed></object>

NB : Ganti Tulisan yang berwarna merah Diatas dengan nama profil twitter sobat

[ Baca Selengkapnya ]

Cara Menghapus tulisan Diberdayakan oleh Blogger

Mungkin diantara Sobat semua ada yang tidak suka dengan Tulisan Diberdayakan oleh blogger atau Powered by blogger.
Untuk menghapus tulisan tersebut kita harus menghapus widget attribution tetapi terkadang langkah penghapusan widget attribution, sering terjadi  error.
Agar penghapusannya tidak error, Saya akan membagikan 2 cara yaitu dengan menggunakan kode css (Menyembunyikannya) dan Cara Penghapusan permanen.

Cara Pertama (menyembunyikan dengan Kode Css) :

• Pada Template, Klik Edit HTML
• Cari kode ]]></b:skin>
• Copy paste kode css dibawah ini tepat di atas Kode ]]></b:skin>

#Attribution1 {
height:0px;
visibility:hidden;
display:none
}

• Simpan template, dan lihat hasilnya

Cara Kedua (Penghapusan Permanen) :

• Pada Template, Pilih Edit HTML
• Cari kata Attribution1 (gunakan Ctr+F untuk mempermudah)
• Rubah locked='true' menjadi locked='false'

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>

• Simpan Template
• Kemudian Masuk ke Tata Letak
• Klik Edit pada Widget Attribution
• Klik Hapus

• Simpan Setelannya

[ Baca Selengkapnya ]

Cara Menghilangkan Rekomendasikan ini di Google

Ketika kita mengganti template atau membuat blog baru, Kita pasti melihat ada atribut bawaan Blogger seperti gambar diatas.
Mungkin Diantara Sobat-sobat semua, ada yang tidak suka dengan atribut bawaan tersebut dan untuk itu saya akan mencoba membagikan sedikit Tips cara untuk menghilangkannya.

Berikut Tutorialnya :

• Pada Halaman Dashboard, Klik Template.
• Pilih Edit HTML
• Cari salah satu dari kedua Script di bawah ini

Script I :

<div class='post-share-buttons goog-inline-block'>
<b:if cond='data:post.sharePostUrl'>
<b:include data='post' name='shareButtons'/>
</b:if>
</div>

Script II :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='clear:both;'/>
<div class='post-share-buttons'>
<b:include data='post' name='shareButtons'/>
</div>
<span class='reaction-buttons'>
<b:if cond='data:top.showReactions'>
<table border='0' cellpadding='0' width='100%'><tr>
<td style='font-size:12px;padding-top:2px;' valign='top'><span
class='reactions-label'><data:top.reactionsLabel/></span></td>
<td><iframe allowtransparency='true' class='reactions-iframe'
expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/></td>
</tr></table>
</b:if>
</span>
</b:if>

• HAPUS Salah Satu Script Diatas dari Template sobat

[ Baca Selengkapnya ]

Cara Memasang tombol Like dan Share pada Halaman Posting

Model I

Tutorial :

• Pada Dashboard, Pilh Template
• Klik Edit HTML
• Cari kode <p><data:post.body></p> atau <data:post.body/>
• Copy Paste Kode script Dibawah ini dan letakkan tepat dibawah kode diatas (setelahnya)

<!-- Start Code Show by Dido Borneo -->
<b:if cond='data:blog.url != data:blog.homepageUrl'>
<div style='border-top:1px solid #FE9A2E;border-bottom:1px solid #FE9A2E; padding:5px 0px 5px 0px;margin:10px 0px 7px 0px;width:100%;float:left;height:23px;'>
<div style='float:left;'>
<span class='st_twitter_hcount' displayText='Tweet'/><span class='st_facebook_hcount' displayText='Share'/><span class='st_email_hcount' displayText='Email'/><span class='st_sharethis_hcount' displayText='Share'/>
<script src='https://sites.google.com/site/didopalangkaraya/project/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher:&#39;63b83a98-def5-427f-ac7c-4b24bcff910d&#39;});</script>
</div>
</div>
</b:if>
<!-- End Code Show by Dido Borneo -->

 Model II

<!-- Start Code Show by Dido Borneo -->
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="https://sites.google.com/site/didopalangkaraya/project/addthis_widget.js"></script>
<!-- End Code Show by Dido Borneo -->

Catatan :

Apabila sobat ingin Widget ini berada dibawah Judul postingan sobat,
sobat cari aja kode <div class='post-header-line-1'/>
Copy Paste Kode scriptnya tepat kode tersebut

[ Baca Selengkapnya ]

Cara membuat Label cloud berputar di blog (Tag Cloud)

Label adalah pengelompokkan artikel blog dalam satu kategori, dan kemudian biasa di pasang di sidebar atau mungkin di bagian bawah template.
Bentuk dari Model-model label bermacam-macam, dan sekarang Kita akan membuat bentuk dari Model Label Berputar (Tag Cloud).
Berikut Tutorialnya

• Pada Halaman dasbor, Pilih TemplateKlik Edit HTML
• Cari kode :
  
  <b:section class='sidebar' id='sidebar' preferred='yes'>
• Copy Paste kode di bawah ini tepat dibawah Kode Diatas
  
  <b:widget id='Label99' locked='false' title='Tag Cloud' type='Label'>
  <b:includable id='main'>
  <b:if cond='data:title'>
  <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <script src='https://sites.google.com/site/didopalangkaraya/project/swfobject.js' type='text/javascript'/>
  <div id='flashcontent'></div>
  <script type='text/javascript'>
  var so = new SWFObject("http://sites.google.com/site/ruangsc/enes/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
  // uncomment next line to enable transparency
  //so.addParam("wmode", "transparent");
  so.addVariable("tcolor", "0x333333");
  so.addVariable("mode", "tags");
  so.addVariable("distr", "true");
  so.addVariable("tspeed", "100");
  so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
  so.addParam("allowScriptAccess", "always");
  so.write("flashcontent");
  </script>
  <b:include name='quickedit'/>
  </div>
  </b:includable>
  </b:widget> 

Keterangan

240 (Lebar kolom)
300 ( Tinggi kolom)
#ffffff (Warna backgroud )
0x333333 (Warna Huruf)
12 (Ukuran Huruf)

Apabila label cloud ini tidak berfungsi, silahkan sobat Cek Pengaturan Label Sobat
ganti label text menjadi label cloud

[ Baca Selengkapnya ]

Membuat Custom Page Not Found Pada blog

Custom Page Not Found ini Bukanlah hanya sekedar mempercantik Tampilan Page Not Foud tetapi juga berfungsi agar bila ada sesuatu yang error pada Blog kita, Misalkan ada link yang rusak atau yang sudah terhapus maka kita tidak lagi dialihkan ke blogger.com (Jadi kesimpulannya kita masih berada di halaman blog kita sendiri)

Berikut Tutorial Custom Page Not foundnya :

• Pada Halaman Dashboard, Klik Template
• Pilih Edit HTML
• Cari Kode  </body>
• Copy Paste Kode Script Dibawah Ini Tepat Diatas kode </body> tersebut :

<!-- Start Page Not Found By Dido Borneo -->  
 <b:if cond='data:blog.pageType == "error_page"'>
<style>
#error-not-found {
    background: #ff0000;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbABEx_j0SwJzl6SJ19evQJvfQgSJBcpI0x8JgqwD2G5BXkApTKXmJ3CB1Dj5e6gBUbWQXim_9ufz9RmmAexDJTHIkGJW1WI9O4SxIbd-026tsQRqzGN_LJ51E2tY5VDqNHhFyFlFAq8M/s1600/bg_body.gif)
no-repeat top center,-moz-radial-gradient(center 40%, circle cover, #ff0000 0%, #880000 100%);
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbABEx_j0SwJzl6SJ19evQJvfQgSJBcpI0x8JgqwD2G5BXkApTKXmJ3CB1Dj5e6gBUbWQXim_9ufz9RmmAexDJTHIkGJW1WI9O4SxIbd-026tsQRqzGN_LJ51E2tY5VDqNHhFyFlFAq8M/s1600/bg_body.gif)
no-repeat top center,-webkit-gradient(radial, center 40%, 0,  center 40%, 800, from(#ff0000), to(#880000) );   
        text-align:center;
        position:fixed;
        top:0px;
        right:0px;
        bottom:0px;
        left:0px;
        padding-top:270px;
        z-index:999999;
}
#error-not-found  h1 {
        font-size:640px!important;
        position:absolute;
        font-family:impact,sans serif!important;
        top:70px;
        left:50%;
        letter-spacing: -8px;
        margin-left:-502px!important;
        width:960px;
        z-index:-2;
        color:rgba(0,0,0,.09)!important;
}
#error-not-found  h2 {
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:81px;
        line-height:66px!important;
        letter-spacing: -3px;
        color:#fff!important;
        margin:0!important;
        padding:0!important;
}
#error-not-found p a,
#error-not-found p a:visited,
#error-not-found p a:hover{
        font-family:arial black,sans serif!important;
        text-transform:uppercase;
        font-size:56px;
        line-height:40px!important;
        border:none;
        font-weight: bold;
        color:rgba(0,0,0,.5)!important;
        margin:0!important;
        padding:0!important;
        text-decoration:none!important;
}
</style>
<div id='error-not-found'>
 <h1>404</h1> <h2>Ups..sorry</h2>
 <h2>Page Not Found</h2>
 <p> <a expr:href='data:blog.homepageUrl' title='home page'> Back Home page</a></p>
            </div>
</b:if>
<!-- end Page Not Found By Dido Borneo -->

• Perhatikan Tulisan Berwarna Merah Diatas
  Silahkan Sobat ganti apabila Sobat Ingin Membuat Kreasi sendiri

[ Baca Selengkapnya ]

5 Widget Kotak Pencarian Keren

Widget Kotak Pencarian Ini sangat mudah untuk dipasang, sobat hanya tinggal meletakkan Kode scriptnya pada gadget HTML/Java script.
Berikut Kode-kode script untuk pemasangan : 

Yellow Search

Scriptnya :

<style type="text/css">
#exe-searchbox{background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/Search%20Engine/YellowSearch_zps160bd3e7.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Black Search

Scriptnya :

<style type="text/css">
#exe-searchbox{background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/Search%20Engine/BlackSearch_zps0f1ac08b.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Blue Search 

Scriptnya :

<style type="text/css">
#exe-searchbox{background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/Search%20Engine/BlueSearch_zpsb508dbaf.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Green Search

Scriptnya :

<style type="text/css">
#exe-searchbox{background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/Search%20Engine/GreenSearch_zpsbaf53ea6.png)
no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

Red Search

Scriptnya :

<style type="text/css">
#exe-searchbox{background:url(http://i1009.photobucket.com/albums/af214/Dido_Canabis/Search%20Engine/RedSearch_zps6274064b.png) no-repeat scroll center center transparent;width:310px;height:100px;disaply:block;}
form#exe-searchform{display: block;padding-top:51px; padding-left:30px;;margin:0;}
form#exe-searchform #s{padding-top:3px; padding-left:1px; width: 208px; font-size:14px; vertical-align:top; border:none; background:transparent;}
form#exe-searchform #sbutton{padding-top:10px; padding-right:25px; height:15px; width:15x; border:none; background:transparent;}
</style>
<div id="exe-searchbox">
<form id="exe-searchform" action="/search" method="get">
<input type="text" id="s" name="q" value="Search Here..." onfocus='if (this.value == "Search Here...")
{this.value = ""}' onblur='if (this.value == "") {this.value = "Search Here...";}'/>
<input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton" />
</form>
</div>

[ Baca Selengkapnya ]

Cara Membuat Widget Tombol Perubah Warna Backgroud untuk Blog

Tutorialnya :

• Pada Menu Tata Letak
• Klik Tambah Gadget
• Pilih HTML/JavaScript.
• Kemudian Copy paste Kode script dibawah ini :

<center>
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>Pilih Warna Background Blog<table border="1" width="50" height="20">
<tr>
<td onclick="bgChange('#000000')" bgcolor="#000000">
</td>
<td onclick="bgChange('#FF0000')" bgcolor="#FF0000">
</td>
<td onclick="bgChange('#FF7700')" bgcolor="#FF7700">
</td>
<td onclick="bgChange('#0048FF')" bgcolor="#0048FF">
</td>
<td onclick="bgChange('#1AFF00')" bgcolor="#1AFF00">
</td>
<td onclick="bgChange('#FFFFFF')" bgcolor="#FFFFFF">
</td>
<td onclick="bgChange('#D900FF')" bgcolor="#D900FF">
</td>
<td onclick="bgChange('#00F7FF')" bgcolor="#00F7FF">
</td>
<td onclick="bgChange('#C4FF00')" bgcolor="#C4FF00">
</td>
<td onclick="bgChange('#5900FF')" bgcolor="#5900FF">
</td>
<td onclick="bgChange('#443D31')" bgcolor="#443D31">
</td>
<td onclick="bgChange('#999999')" bgcolor="#999999">
</td>
</tr></table>
<div class='clear'></div>
</center>

Keterangan :

• Untuk Tulisan Biru diatas dapat sobat Ganti dengan kreasi sobat
• Kode berwarna merah adalah kode variasi warna yang bisa sobat ganti dengan pilihan sobat sendiri

[ Baca Selengkapnya ]

Cara membuat background blog berubah secara otomatis (menurut hari)

Tutorialnya :

• Pada DashBoard, Klik Template
• Kemudian Pilih Edit HTML
• Cari kode </head>
• Copy Paste kode script di bawah ini dan letakkan tepat di atas kode </head>

<script type="text/javascript">
today = new Date();
day = today.getDay();
    sunday = "URL Gambar Sobat";
    monday = "URL Gambar Sobat";
    tuesday = "URL Gambar Sobat";
    wednesday = "URL Gambar Sobat";
    friday = "URL Gambar Sobat";
    thursday = "URL Gambar Sobat";
    saturday = "URL Gambar Sobat";
arday = new Array(sunday, monday, tuesday, wednesday, thursday, friday, saturday);
document.write("<style>body{background: url(" + arday[day] + "); background-repeat: repeat; background-attachment:fixed;}</style>");
</script>

[ Baca Selengkapnya ]

Cara menambah icon pada Judul Post, Related post dan Sidebar

Bagaimana Cara Merubah Tampilan Blog agar lebih indah dan menarik, salah satu caranya ialah dengan menambah icon/bullet Disamping Judul dan Related Post.

Berikut Tutorialnya :
Untuk Bullet Judul Posting

• Pada Halaman Dashboard, Pilih Template
• Klik Edit HTML 
• Cari kode yang mirip dengan kode dibawah ini

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}

• Kemudian Tambahkan kode berikut ke dalam nya

background:url(URL Bullet Sobat) no-repeat;
padding:0px 0px 05px 30px;

• Maka Hasilnya akan seperti ini

h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
background:url(URL Bullet Sobat) no- repeat;
padding:0px 0px 05px 30px;
}

Untuk Bullet pada Recent Post :

• Pada Halaman Dashboard  dan pilih Template
• Klik Edit HTML 
• Cari kode ]]></b:skin>
• Kemudian Copy Paste script dibawah ini tepat di atas Kode ]]></b:skin>
  
  /*-----Bullet list by Dido Borneo----*/
  .post ul li {
  list-style-image:url('URL Bullet Sobat');
  }

Untuk Bullet Sidebar

• Caranya sama seperti Bullet pada Recent Post, Pada Halaman Dashboard  dan pilih Template
• Klik Edit HTML 
• Cari kode ]]></b:skin>
• Kemudian Copy Paste script dibawah ini tepat di atas Kode ]]></b:skin>

/*-----Bullet Sidebar By Dido Borneo-----*/
.sidebar h2{
background:url(URL Bullet Sobat) no-repeat 10px 8px;
font: normal 25px 'Bodoni MT Poster Compressed',Trebuchet,sans-serif;
margin:0;
padding:0 10px 0 32px;
color:#ff0000;
}

• Berikut beberapa Alamat URL Bullet Koleksiku :

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/star_bullet_zps326ceea6.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/bullet_home_zps8adbb6ae.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/bahan/bullet_blue_arrow_zpsa8e58dea.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/Hawk_Animationkecil_zps3cfe6a4a.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/kupu2kecil_zpse43e3c63.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/author_zps17137839.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/close-button_zpsd7ba5e91.png

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/next2_zps221cae33.gif

http://i1009.photobucket.com/albums/af214/Dido_Canabis/Bullet/sonicspinkecil_zps4c96e639.gif

NB :

Buat sobat yang ingin memasang gambar bullet animasi  sendiri, Silahkan download Software aplikasi pengubah ukuran gambar animasi yang pernah saya posting dahulu
Klik aja disini

[ Baca Selengkapnya ]

Cara Membuat Menu Vertikal Dropdown

 

Menu vertikal Dropdown ini sangat Praktis karena Menu ini akan bergeser turun dengan sendirinya ketika Cursor Mouse diarahkan ke Menu.
Cara Pemasangannya juga gampang karena hanya menambahkan gadget pada Tata Letak jadi apabila terjadi kesalahan, kita dapat dengan mudah untuk menghapus atau memperbaikinya

Cara Pemasangannya :

• Pada Menu Tata Letak
• Klik Tanbahkan Gadget
• Pilih HTML/Javascript
• Copy Paste kode script dibawah ini kedalamnya :
  
  

<!---Start code show hide by;"Dido-Borneo.blogspot.com"---><style type="text/css">
* {
margin: 0px;
padding: 0px;
}
nav {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.5;
margin: 50px auto; /*for display only*/
width: 300px;
-webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.menu-item {
background: #fff;
width: 300px;
}
/*Menu Header Styles 1*/
.menu-item h4 {
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #9DB6D7;
}
.menu-item h4 a {
color: white;
display: block;
text-decoration: none;
width: 300px;
}
/*Menu Header Styles 2*/
.menu-item h4 {
border-bottom: 1px solid rgba(0,0,0,0.3);
border-top: 1px solid rgba(255,255,255,0.2);
color: #fff;
font-size: 15px;
font-weight: 500;
padding: 7px 12px;
background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.menu-item h4:hover {
background: #cc002c; /* Old browsers */
background: -moz-linear-gradient(top, #cc002c 0%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cc002c 0%,#6d0019 100%); /* IE10+ */
background: linear-gradient(top, #cc002c 0%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}
.alpha p {
font-size: 13px;
padding: 8px 12px;
color: #aaa;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul a {
margin-left: 20px;
text-decoration: none;
color: #0A0A0A;
display: block;
width: 250px;
}
/*li Styles*/
.menu-item li {
border-bottom: 1px solid #eee;
}
.menu-item li:hover {
background: #eee;
}
/*ul Styles*/
.menu-item ul {
background: #B2D8E0;
font-size: 13px;
line-height: 30px;
height: 0px; /*Collapses the menu*/
list-style-type: none;
overflow: hidden;
padding: 0px;
}
/*ul Styles*/
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
/*Animation*/
-webkit-transition: height 1s ease;
-moz-transition: height 1s ease;
-o-transition: height 1s ease;
-ms-transition: height 1s ease;
transition: height 1s ease;
}
.menu-item:hover ul {
height: auto;
}
</style>
<nav>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu I</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu I.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu I.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#">Menu II</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu II.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu II.e</a></li>
</ul>
</div>
<div class="menu-item">
<h4><a href="#" target="_blank"">Menu III</a></h4>
<ul>
<li><a href="URL Tujuan" target="_blank">Menu III.a</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.b</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.c</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.d</a></li>
<li><a href="URL Tujuan" target="_blank">Menu III.e</a></li>
</ul>
</div>
</nav>
<!---End code show hide by;"Dido-Borneo.blogspot.com"--->

NB : 

• Perhatikan Tulisan yang berwarna dan Tebal Pada Script, Ganti dengan kreasi sobat
• width: 300px = Ukuran Lebar Menu

[ Baca Selengkapnya ]

Cara menonaktifkan fungsi block pada blog (anti Block)

Mungkin sebagian dari sobat tidak ingin artikel/Postingnya di Copas Orang lain tanpa back link aktif dari sumber artikel yang di Copas

Berikut Saya akan Membagikan sedikit Script untuk mematikan fungsi Block Teks tersebut :

• Pada Halaman dasbor, Pilih Template
• Pilih Edit HTML
• Kemudian Cari kode <head> (Tekan F3 untuk mempercepat poses pencarian)
• Copas Script dibawah ini dan letakkan Tepat dibawah  kode <head>

<!-- Start Code Anti Block Teks By Dido Borneo -->
<SCRIPT type='text/javascript'>
if (typeof document.onselectstart!=&quot;undefined&quot;) {
document.onselectstart=new Function (&quot;return false&quot;);
}
else{
document.onmousedown=new Function (&quot;return false&quot;);
document.onmouseup=new Function (&quot;return true&quot;);
}
</SCRIPT>
<!-- END Code Anti Block Teks By Dido Borneo -->

[ Baca Selengkapnya ]

Membuat Recent Post Berupa Teks Berjalan di Blog

Recent Posts yang saya posting kali ini mungkin agak berbeda dengan Recent Posts pada umumnya.
Bentuk Recent Post ini berupa teks berjalan dari arah Kanan ke arah Kiri Blog.
Berikut Tutorialnya :

• Pada Menu Tata Letak, Klik Tambahkan Gadget
• Pilih HTML/Javascript
• Copy Paste Kode script dibawah ini ke dalamnya :

<!---Start End code widget Recent Post by;"Dido-Borneo.blogspot.com"--->
<script type='text/javascript'>
//<![CDATA[
function RecentPostsScrollerv2(json)
{
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
try
{
sMoqueeHTMLStart = "\<MARQUEE onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
if( nWidth)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
}
else
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
}
if( nScrollDelay)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
}
if(sDirection)
{
sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"";
if(sDirection == "left" || sDirection =="right")
{
//For left and right directions seperate the headilnes by two spaces.
sHeadlineTerminator = "&nbsp;&nbsp;";
}
else
{
//For down and up directions seperate headlines by new line
sHeadlineTerminator = "\<br/\>";
}
}
if(sOpenLinkLocation =="N")
{
sPostLinkLocation = " target= \"_blank\" ";
}
else
{
sPostLinkLocation = " ";
}
sMoqueeHTMLEnd = "\</MARQUEE\>"
sHeadLines = "";
for(var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++)
{
objPost = json.feed.entry[nFeedCounter];
for (var nCounter = 0; nCounter < objPost.link.length; nCounter++)
{
if (objPost.link[nCounter].rel == 'alternate')
{
sPostURL = objPost.link[nCounter].href;
break;
}
}
sHeadLines = sHeadLines + "\<b\>"+sBulletChar+"\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" + sHeadlineTerminator;
}
document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd )
}
catch(exception)
{
alert(exception);
}
}
//]]>
</script>
<script style="text/javascript"> var nMaxPosts = 20; var sBgColor; var nWidth;var nScrollDelay = 180; var sDirection="left"; var sOpenLinkLocation="Y"; var sBulletChar="•"; </script> <script style="text/javascript" src="http://dido-borneo.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2"></script>
<!---End code widget Recent Post by;"Dido-Borneo.blogspot.com"--->

Keterangan :

• var nMaxPosts = 20 adalah jumlah postingan terakhir.
• var nScrollDelay = 180 adalah kecepatan text.
• var sDirection="left" untuk text berjalan dari kanan ke kiri, ganti dengan right jika ingin text tersebut berjalan dari kiri ke kanan.
• var sOpenLinkLocation = "Y" untuk link pada halaman yang sama, ganti dengan "N" untuk membuka link pada jendela baru (new tab).
• var sBulletChar = "•" adalah icon kecil pada bagian depan setiap link, bisa diganti dengan apa saja sesuai selera.
• http://dido-borneo.blogspot.com adalah Nama Blog Saya ( Silahkan Ganti dengan Nama Blog Sobat )

[ Baca Selengkapnya ]