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 ]
Label:

Textarea dan contoh tampilannya

  • Textarea Model biasa
<textarea cols="20" rows="2">Masukkan teks sobat disini</textarea>
  • Textarea dengan huruf berwarna
<textarea cols="20" rows="2" style=" color:#0022FF;">Masukkan teks sobat disini</textarea>
  • 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 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 cols="30" rows="2" style="border:5px solid #FF0000; color:#0022FF;">Masukkan teks sobat disini</textarea>
  • 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 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
<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
<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
<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 ]
Label:

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 ]
Label: ,

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 :

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 ]
Label:

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 ]
Label:

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 ]
Label:

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 ]
Label: ,

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 ]
Label:

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 ]
Label:

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 ]
Label: ,

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 ]
Label:

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 ]
Label:

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 ]
Label:

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 ]
Label:

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 ]
Label: