Januari 2013 ~ AZZMAL BLOG

Home » Archives for Januari 2013

Senin, 28 Januari 2013

Scrip Jam dan Tanggal

Langsung saja.

Masuk ke Blog kamu, dan pilih Tab Template lalu klik Edit HTML.
Tekan Tombol F3 , untuk memudahkan mencari kata kunci
Pasang CSS Widget ini di atas ]]></b:skin>

.kotak-tanggal{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;right:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

.kotak-jam{line-height:1.28; text-align:left; direction:ltr; unicode-bidi:embed; display:block;font: normal normal 11px tahoma, verdana, arial, sans-serif;z-index:600;position:fixed;left:30px;width:100px;height:100px;bottom:108px;background:rgba(0,0,0,0.6);padding:10px;border:1px solid white}

Lalu klik Simpan

Sekarang kamu klik Tab Tata Letak, dan Tambahkan Gadget HTML/Javascript baru.
Pastekan Source kode Widget ini di situ.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

<div class='kotak-tanggal'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Tanggal2.js'></script></div>

<div class='kotak-jam'><script src='http://not-remove-admin.googlecode.com/files/Panel-W8-SM-Jam3.js'></script></div>

Setelah itu Simpan dan Lihat Hasilnya.
Lihat Demo

20.41 SISWONO No comments

Jam Digital pada Blog

Mempercantik tampilan blog memang perlu dan penting untuk menghilangkan kejenuhan.
Salah satunya yaitu dengan menambahkan jam digital.

Langkah-langkahnya seperti berikut :

- masuk ke blog anda, lalu masuk ke Dasbor

- klik Rancangan, lalu Tambah Gadget, dan pilih HTML/JavaScript

- copy script berikut :

- lalu paste pada Konten gadged tersebut, dan klik Simpan.

-------------------------------------------------------------------------------------------------------------------------

Untuk mengganti jenis jam yang lainnya,
caranya sangat gampang,

coba lihat kembali script di atas yang di cetak miring yaitu
free-flash-clock-152.swf

hanya mengganti angka 152 dengan angka yang anda inginkan, maka tampilan jam akan berubah. Contohnya, ganti dengan angka 36.
maka scriptnya seperti ini :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=80 wmode=transparent type=application/x-shockwave-flash></embed>

-------------------------------------------------------------------------------------------------------------------------

untuk merubah ukuran jam, lebih mudah lagi caranya,
lihat script yang tadi :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=80 wmode=transparent type=application/x-shockwave-flash></embed>

lihat tulisan
width=240 height=80

maksudnya yaitu lebar 240 dan tinggi 80,
maka ganti sesuai dengan yang kita inginkan.

contoh, ganti dengan lebar 240 dan tinggi 200,
maka scriptnya seperti ini :
<embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-36.swf width=240 height=200 wmode=transparent type=application/x-shockwave-flash></embed>

-------------------------------------------------------------------------------------------------------------------------
Dicoba ya.......

-------------------------------------------------------------------------------------------------------------------------

23.49 SISWONO 6 comments

Masuk akun blogger kamu.
Masuk Rancangan->Edit HTML->Expand Template Widget
Cari kode </body> (Ctrl+F)
Lalu Ambil kode dibawah ini dan taruh kode dibawah ini tepat diatas kode </body>

<!-- Start Shareaholic Sassy Bookmarks HTML (helperblogger.com)-->
<div class="shr_ss shr_publisher">

</div>
<!-- End Shareaholic Sassy Bookmarks HTML (helperblogger.com) -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type="text/javascript">
var SHRSS_Settings = {"shr_ss":{"src":"//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark","link":"","service":"5,7,2,313,38,201,88,74","apikey":"b87f5899d80a5edce8b5e55f58542ef0f","localize":true,"shortener":"bitly","shortener_key":"","designer_toolTips":true,"tip_bg_color":"black","tip_text_color":"white","viewport":true,"twitter_template":"${title} - ${short_link} via @Shareaholic"}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type="text/javascript">
(function() {
var sb = document.createElement("script"); sb.type = "text/javascript";sb.async = true;
sb.src = ("https:" == document.location.protocol ? "https://dtym7iokkjlif.cloudfront.net" : "http://cdn.shareaholic.com") + "/media/js/jquery.shareaholic-publishers-ss.min.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(sb, s);
})();
</script>

<!-- End Shareaholic Sassy Bookmarks script (helperblogger.com) -->

23.25 SISWONO 1 comment

Script Ym Buat Blogger

Pemilik blog atau website bisa menampilkan status online yahoo messenger dengan memasukan kode html di element html tambahan. Jadi pengunjung blog Anda bisa melihat apakah Anda tengah online atau tidak.

If you have a website or blog, you can provide an easy way for your visitors to get in touch with you over Yahoo! Messenger. To display an online presence indicator (OPI) badge, all you need to do is drop a little bit of code into your webpage. Then when visitors come to your site, they’ll see a badge displaying your online status, even when you’re signed out of Yahoo! Messenger.

Cara menampilkan status online yahoo mesenger gampang saja, Anda tinggal mencopy sedikit kode dibawah ini dan mengganti ID YM saya (hakimtea-online) dengan ID YM Anda, (Perhatian: ada dua ID YM yang harus Anda ganti):

<a href="http://messenger.yahoo.com/edit/send/?.target=joko_electro">
<img src="http://opi.yahoo.com/yahooonline/u=joko_electro/m=g/t=14/l=us/opi.jpg" alt="Status YM></a>

Anda bisa memilih tampilan status onlinenya seperti,
t=0

t=1

t=2

t=3

t=4

t=5

t=6

t=7

t=8

t=9

t=10

t=11

t=12

t=13

t=14

t=15

t=16

Dengan mengganti kode t=2 pada kode html di atas dengan kode pilihan Anda.
Selamat mencoba!!!

21.31 SISWONO 2 comments

Kode Warna

Silahkan plih warna yang disuka

18.15 SISWONO No comments

</div><center><form name="hcc" id="hcc">
<table style="border-collapse: collapse;" align="center" border="1" bordercolor="#cccccc" cellpadding="0" cellspacing="0"><tbody><tr><td><table align="center" border="0" cellpadding="0" cellspacing="1" width="375"><tbody><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190707">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0808">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b40404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0101">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa5858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f78181">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cece">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbefef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#191007">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a1b0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b240b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#61380b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a4b08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b45f04">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df7401">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff8000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe9a2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#faac58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7be81">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5d0a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6e3ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8ece0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbf5ef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#181907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#292a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#393b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5e610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#868a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#aeb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d7df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7fe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f4fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f3f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f7f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbfbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#101907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#243b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#38610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b8a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5fb404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#74df00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#80ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9afe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#acfa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bef781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3f6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ecf8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5fbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071907">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a0a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b610b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a08">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b404">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df01">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff00">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58fa58">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f781">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5a9">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6ce">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8e0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbef">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071910">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b6138">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a4b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b45f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01df74">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ff80">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efe9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6e3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbf5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071918">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a2a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b615e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#088a85">
</td><td onclick="Barva(this.bgColor)" bgcolor="#04b4ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#01dfd7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#00ffff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2efef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58faf4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81f7f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9f5f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cef6f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0f8f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#effbfb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#071019">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a1b2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b243b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b3861">
</td><td onclick="Barva(this.bgColor)" bgcolor="#084b8a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#045fb4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0174df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0080ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e9afe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#58acfa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#81bef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9d0f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cee3f6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0ecf8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#eff5fb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#070719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0a0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#08088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0404b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0101df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5858fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8181f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a9a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#cecef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e0e0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#efeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#100719">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1b0a2a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#240b3b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#380b61">
</td><td onclick="Barva(this.bgColor)" bgcolor="#4b088a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#5f04b4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#7401df">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8000ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#9a2efe">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ac58fa">
</td><td onclick="Barva(this.bgColor)" bgcolor="#be81f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d0a9f5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e3cef6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ece0f8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5effb">
</td></tr><tr height="24"> <td onclick="Barva(this.bgColor)" bgcolor="#190718">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a29">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b39">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b5e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a0886">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b404ae">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df01d7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff00ff">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2ef7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58f4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781f3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cef5">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0f7">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeffb">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#190710">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2a0a1b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#3b0b24">
</td><td onclick="Barva(this.bgColor)" bgcolor="#610b38">
</td><td onclick="Barva(this.bgColor)" bgcolor="#8a084b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#b4045f">
</td><td onclick="Barva(this.bgColor)" bgcolor="#df0174">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ff0080">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fe2e9a">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fa58ac">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f781be">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f5a9d0">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f6cee3">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f8e0ec">
</td><td onclick="Barva(this.bgColor)" bgcolor="#fbeff5">
</td></tr><tr height="24"><td onclick="Barva(this.bgColor)" bgcolor="#000000">
</td><td onclick="Barva(this.bgColor)" bgcolor="#0b0b0b">
</td><td onclick="Barva(this.bgColor)" bgcolor="#151515">
</td><td onclick="Barva(this.bgColor)" bgcolor="#1c1c1c">
</td><td onclick="Barva(this.bgColor)" bgcolor="#2e2e2e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#424242">
</td><td onclick="Barva(this.bgColor)" bgcolor="#585858">
</td><td onclick="Barva(this.bgColor)" bgcolor="#6e6e6e">
</td><td onclick="Barva(this.bgColor)" bgcolor="#848484">
</td><td onclick="Barva(this.bgColor)" bgcolor="#a4a4a4">
</td><td onclick="Barva(this.bgColor)" bgcolor="#bdbdbd">
</td><td onclick="Barva(this.bgColor)" bgcolor="#d8d8d8">
</td><td onclick="Barva(this.bgColor)" bgcolor="#e6e6e6">
</td><td onclick="Barva(this.bgColor)" bgcolor="#f2f2f2">
</td><td onclick="Barva(this.bgColor)" bgcolor="#ffffff">
</td></tr></tbody></table></td></tr></tbody></table><table align="center" border="0" cellpadding="0" cellspacing="2"><tbody><tr height="24"><td id="vzorec" height="24" width="24">
</td><td valign="bottom"><p>Kode warna : <input name="barva" id="barva" style="font-weight: bold; font-family: Verdana; height: 16px; width: 74px; font-size: 12px;" maxlength="7" size="9" type="text"></p></td></tr></tbody></table>
</form></center>

16.56 SISWONO No comments

Membuat Share Facebook dengan Counter di Blogger

Tombol share Facebook adalah cara sempurna untuk membagi postingan blog dan untuk menunjukkan jumlah saham yang telah dibuat untuk posting blog tertentu. Ada dua jenis dengan gaya yang berbeda, satu dengan tombol jumlah besar dan yang lainnya adalah tombol inline. Untuk menambahkannya ke Blogger pilih salah satu dari tombol share dibawah ini seperti yang disebutkan di bawah ini.

Facebook Share Button with Counter

<div style="float: right; margin: 4px;">
<a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Facebook Share Inline Button Counter

<div style="margin: 4px;">
<a name="fb_share" type="button_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>

Cara Membuat Facebook Share Button Ke Blogger :

Buka akun Blogger Anda
Masuk ke Menu Edit HTML > centang Expand Template Widget, cari kode dibawah ini :

<data:post.body/>

3. Pastekan kode button yang Anda inginkan pada diatas ataupun dibawah pada kode diatas.

Penjelasan
Dalam kode di atas, temukan kode "float: right;" . Jika Anda ingin memiliki ini di kiri dalam body postingan Anda, kemudian ubah kode menjadi "float: left;" atau menghapusnya seperti yang ditunjukkan pada tombol kedua.

Jika Anda ingin tombol share hanya dilihat di halaman postingan saja, teempatkan kode seperti dibawah ini :

<b:if cond='data:blog.pageType == "item"'>
<a name="fb_share" type="box_count" expr:share_url="data:post.canonicalUrl" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</b:if>

Mengubah ukuran Facebook Share Button :
Setelah peluncuran tombol berbagi terlalu banyak, tombol share Facebook terlihat agak over-size. Setelah CSS tweak kecil, tombol ini dapat diubah ukurannya agar sesuai dengan lebar tombol lainnya. Untuk melakukan hal ini temukan ]]></b:skin> dan diatasnya tambahkan kode :

.FBConnectButton_Text {
padding: 2px 4px 3px !important;
}

Atur padding sesuai dengan keadaan yang Anda inginkan.

15.28 SISWONO No comments

Script Kode Warna

<table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><table border="1" style="font-family: Verdana; font-size: 10pt" width="100%"><tbody>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>Antique_white</td><td bgcolor="#faebd7"></td><td>#FAEBD7</td></tr>
<tr><td>azure</td><td bgcolor="#f0ffff"></td><td>#F0FFFF</td></tr>
<tr><td>Bisque</td><td bgcolor="#ffe4c4"></td><td>#FFE4C4</td></tr>
<tr><td>blanched_almond</td><td bgcolor="#ffebcd"></td><td>#FFEBCD</td></tr>
<tr><td>cornsilk</td><td bgcolor="#fff8dc"></td><td>#FFF8DC</td></tr>
<tr><td>eggshell</td><td bgcolor="#fce6c9"></td><td>#FCE6C9</td></tr>
<tr><td>floral_white</td><td bgcolor="#fffaf0"></td><td>#FFFAF0</td></tr>
<tr><td>gainsboro</td><td bgcolor="#dcdcdc"></td><td>#DCDCDC</td></tr>
<tr><td>ghost_white</td><td bgcolor="#f8f8ff"></td><td>#F8F8FF</td></tr>
<tr><td>honeydew</td><td bgcolor="#f0fff0"></td><td>#F0FFF0</td></tr>
<tr><td>ivory</td><td bgcolor="#fffff0"></td><td>#FFFFF0</td></tr>
<tr><td>lavender</td><td bgcolor="#e6e6fa"></td><td>#E6E6FA</td></tr>
<tr><td>lavender_blush</td><td bgcolor="#fff0f5"></td><td>#FFF0F5</td></tr>
<tr><td>lemon_chiffon</td><td bgcolor="#fffacd"></td><td>#FFFACD</td></tr>
<tr><td>linen</td><td bgcolor="#faf0e6"></td><td>#FAF0E6</td></tr>
<tr><td>mint_cream</td><td bgcolor="#f5fffa"></td><td>#F5FFFA</td></tr>
<tr><td>misty_rose</td><td bgcolor="#ffe4e1"></td><td>#FFE4E1</td></tr>
<tr><td>moccasin</td><td bgcolor="#ffe4b5"></td><td>#FFE4B5</td></tr>
<tr><td>navajo_white</td><td bgcolor="#ffdead"></td><td>#FFDEAD</td></tr>
<tr><td>old_lace</td><td bgcolor="#fdf5e6"></td><td>#FDF5E6</td></tr>
<tr><td>papaya_whip</td><td bgcolor="#ffefd5"></td><td>#FFEFD5</td></tr>
<tr><td>peach_puff</td><td bgcolor="#ffdab9"></td><td>#FFDAB9</td></tr>
<tr><td>seashell</td><td bgcolor="#fff5ee"></td><td>#FFF5EE</td></tr>
<tr><td>snow</td><td bgcolor="#fffafa"></td><td>#FFFAFA</td></tr>
<tr><td>thistle</td><td bgcolor="#d8bfd8"></td><td>#D8BFD8</td></tr>
<tr><td>titanium_white</td><td bgcolor="#fcfff0"></td><td>#FCFFF0</td></tr>
<tr><td>wheat</td><td bgcolor="#f5deb3"></td><td>#F5DEB3</td></tr>
<tr><td>white</td><td bgcolor="#ffffff"></td><td>#FFFFFF</td></tr>
<tr><td>white_smoke</td><td bgcolor="#f5f5f5"></td><td>#F5F5F5</td></tr>
<tr><td>zinc_white</td><td bgcolor="#fdf8ff"></td><td>#FDF8FF</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cold_grey</td><td bgcolor="#808a87"></td><td>#808A87</td></tr>
<tr><td>dim_grey</td><td bgcolor="#696969"></td><td>#696969</td></tr>
<tr><td>grey</td><td bgcolor="#c0c0c0"></td><td>#C0C0C0</td></tr>
<tr><td>light_grey</td><td bgcolor="#d3d3d3"></td><td>#D3D3D3</td></tr>
<tr><td>slate_grey</td><td bgcolor="#708090"></td><td>#708090</td></tr>
<tr><td>slate_grey_dark</td><td bgcolor="#2f4f4f"></td><td>#2F4F4F</td></tr>
<tr><td>slate_grey_light</td><td bgcolor="#778899"></td><td>#778899</td></tr>
<tr><td>warm_grey</td><td bgcolor="#808069"></td><td>#808069</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>black</td><td bgcolor="#000000"></td><td>#000000</td></tr>
<tr><td>ivory_black</td><td bgcolor="#292421"></td><td>#292421</td></tr>
<tr><td>lamp_black</td><td bgcolor="#2e473b"></td><td>#2E473B</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alizarin_crimson</td><td bgcolor="#e32636"></td><td>#E32636</td></tr>
<tr><td>brick</td><td bgcolor="#9c661f"></td><td>#9C661F</td></tr>
<tr><td>cadmium_red_deep</td><td bgcolor="#e3170d"></td><td>#E3170D</td></tr>
<tr><td>coral</td><td bgcolor="#ff7f50"></td><td>#FF7F50</td></tr>
<tr><td>coral_light</td><td bgcolor="#f08080"></td><td>#F08080</td></tr>
<tr><td>deep_pink</td><td bgcolor="#ff1493"></td><td>#FF1493</td></tr>
<tr><td>english_red</td><td bgcolor="#d43d1a"></td><td>#D43D1A</td></tr>
<tr><td>firebrick</td><td bgcolor="#b22222"></td><td>#B22222</td></tr>
<tr><td>geranium_lake</td><td bgcolor="#e31230"></td><td>#E31230</td></tr>
<tr><td>hot_pink</td><td bgcolor="#ff69b4"></td><td>#FF69B4</td></tr>
<tr><td>indian_red</td><td bgcolor="#b0171f"></td><td>#B0171F</td></tr>
<tr><td>light_salmon</td><td bgcolor="#ffa07a"></td><td>#FFA07A</td></tr>
<tr><td>madder_lake_deep</td><td bgcolor="#e32e30"></td><td>#E32E30</td></tr>
<tr><td>maroon</td><td bgcolor="#b03060"></td><td>#B03060</td></tr>
<tr><td>pink</td><td bgcolor="#ffc0cb"></td><td>#FFC0CB</td></tr>
<tr><td>pink_light</td><td bgcolor="#ffb6c1"></td><td>#FFB6C1</td></tr>
<tr><td>raspberry</td><td bgcolor="#872657"></td><td>#872657</td></tr>
<tr><td>red</td><td bgcolor="#ff0000"></td><td>#FF0000</td></tr>
<tr><td>rose_madder</td><td bgcolor="#e33638"></td><td>#E33638</td></tr>
<tr><td>salmon</td><td bgcolor="#fa8072"></td><td>#FA8072</td></tr>
<tr><td>tomato</td><td bgcolor="#ff6347"></td><td>#FF6347</td></tr>
<tr><td>venetian_red</td><td bgcolor="#d41a1f"></td><td>#D41A1F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>beige</td><td bgcolor="#a39480"></td><td>#A39480</td></tr>
<tr><td>brown</td><td bgcolor="#802a2a"></td><td>#802A2A</td></tr>
<tr><td>brown_madder</td><td bgcolor="#db2929"></td><td>#DB2929</td></tr>
<tr><td>brown_ochre</td><td bgcolor="#87421f"></td><td>#87421F</td></tr>
<tr><td>burlywood</td><td bgcolor="#deb887"></td><td>#DEB887</td></tr>
<tr><td>burnt_sienna</td><td bgcolor="#8a360f"></td><td>#8A360F</td></tr>
<tr><td>burnt_umber</td><td bgcolor="#8a3324"></td><td>#8A3324</td></tr>
<tr><td>chocolate</td><td bgcolor="#d2691e"></td><td>#D2691E</td></tr>
<tr><td>deep_ochre</td><td bgcolor="#733d1a"></td><td>#733D1A</td></tr>
<tr><td>flesh</td><td bgcolor="#ff7d40"></td><td>#FF7D40</td></tr>
<tr><td>flesh_ochre</td><td bgcolor="#ff5721"></td><td>#FF5721</td></tr>
<tr><td>gold_ochre</td><td bgcolor="#c77826"></td><td>#C77826</td></tr>
<tr><td>greenish_umber</td><td bgcolor="#ff3d0d"></td><td>#FF3D0D</td></tr>
<tr><td>khaki</td><td bgcolor="#f0e68c"></td><td>#F0E68C</td></tr>
<tr><td>khaki_dark</td><td bgcolor="#bdb76b"></td><td>#BDB76B</td></tr>
<tr><td>light_beige</td><td bgcolor="#f5f5dc"></td><td>#F5F5DC</td></tr>
<tr><td>peru</td><td bgcolor="#cd853f"></td><td>#CD853F</td></tr>
<tr><td>rosy_brown</td><td bgcolor="#bc8f8f"></td><td>#BC8F8F</td></tr>
<tr><td>raw_sienna</td><td bgcolor="#c76114"></td><td>#C76114</td></tr>
<tr><td>raw_umber</td><td bgcolor="#734a12"></td><td>#734A12</td></tr>
<tr><td>sepia</td><td bgcolor="#5e2612"></td><td>#5E2612</td></tr>
<tr><td>sienna</td><td bgcolor="#a0522d"></td><td>#A0522D</td></tr>
<tr><td>saddle_brown</td><td bgcolor="#8b4513"></td><td>#8B4513</td></tr>
<tr><td>sandy_brown</td><td bgcolor="#f4a460"></td><td>#F4A460</td></tr>
<tr><td>tan</td><td bgcolor="#d2b48c"></td><td>#D2B48C</td></tr>
<tr><td>van_dyke_brown</td><td bgcolor="#5e2605"></td><td>#5E2605</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>cadmium_orange</td><td bgcolor="#ff6103"></td><td>#FF6103</td></tr>
<tr><td>cadmium_red_light</td><td bgcolor="#ff030d"></td><td>#FF030D</td></tr>
<tr><td>carrot</td><td bgcolor="#ed9121"></td><td>#ED9121</td></tr>
<tr><td>dark_orange</td><td bgcolor="#ff8c00"></td><td>#FF8C00</td></tr>
<tr><td>mars_orange</td><td bgcolor="#964514"></td><td>#964514</td></tr>
<tr><td>mars_yellow</td><td bgcolor="#e3701a"></td><td>#E3701A</td></tr>
<tr><td>orange</td><td bgcolor="#ff8000"></td><td>#FF8000</td></tr>
<tr><td>orange_red</td><td bgcolor="#ff4500"></td><td>#FF4500</td></tr>
<tr><td>yellow_ochre</td><td bgcolor="#e38217"></td><td>#E38217</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aureoline_yellow</td><td bgcolor="#ffa824"></td><td>#FFA824</td></tr>
<tr><td>banana</td><td bgcolor="#e3cf57"></td><td>#E3CF57</td></tr>
<tr><td>cadmium_lemon</td><td bgcolor="#ffe303"></td><td>#FFE303</td></tr>
<tr><td>cadmium_yellow</td><td bgcolor="#ff9912"></td><td>#FF9912</td></tr>
<tr><td>cadmium_yellow_light</td><td bgcolor="#ffb00f"></td><td>#FFB00F</td></tr>
<tr><td>gold</td><td bgcolor="#ffd700"></td><td>#FFD700</td></tr>
<tr><td>goldenrod</td><td bgcolor="#daa520"></td><td>#DAA520</td></tr>
<tr><td>goldenrod_dark</td><td bgcolor="#b8860b"></td><td>#B8860B</td></tr>
<tr><td>goldenrod_light</td><td bgcolor="#fafad2"></td><td>#FAFAD2</td></tr>
<tr><td>goldenrod_pale</td><td bgcolor="#eee8aa"></td><td>#EEE8AA</td></tr>
<tr><td>light_goldenrod</td><td bgcolor="#eedd82"></td><td>#EEDD82</td></tr>
<tr><td>melon</td><td bgcolor="#e3a869"></td><td>#E3A869</td></tr>
<tr><td>naples_yellow_deep</td><td bgcolor="#ffa812"></td><td>#FFA812</td></tr>
<tr><td>yellow</td><td bgcolor="#ffff00"></td><td>#FFFF00</td></tr>
<tr><td>yellow_light</td><td bgcolor="#ffffe0"></td><td>#FFFFE0</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>chartreuse</td><td bgcolor="#7fff00"></td><td>#7FFF00</td></tr>
<tr><td>chrome_oxide_green</td><td bgcolor="#668014"></td><td>#668014</td></tr>
<tr><td>cinnabar_green</td><td bgcolor="#61b329"></td><td>#61B329</td></tr>
<tr><td>cobalt_green</td><td bgcolor="#3d9140"></td><td>#3D9140</td></tr>
<tr><td>emerald_green</td><td bgcolor="#00c957"></td><td>#00C957</td></tr>
<tr><td>forest_green</td><td bgcolor="#228b22"></td><td>#228B22</td></tr>
<tr><td>green</td><td bgcolor="#00ff00"></td><td>#00FF00</td></tr>
<tr><td>green_dark</td><td bgcolor="#006400"></td><td>#006400</td></tr>
<tr><td>green_pale</td><td bgcolor="#98fb98"></td><td>#98FB98</td></tr>
<tr><td>green_yellow</td><td bgcolor="#adff2f"></td><td>#ADFF2F</td></tr>
<tr><td>lawn_green</td><td bgcolor="#7cfc00"></td><td>#7CFC00</td></tr>
<tr><td>lime_green</td><td bgcolor="#32cd32"></td><td>#32CD32</td></tr>
<tr><td>mint</td><td bgcolor="#bdfcc9"></td><td>#BDFCC9</td></tr>
<tr><td>olive</td><td bgcolor="#3b5e2b"></td><td>#3B5E2B</td></tr>
<tr><td>olive_drab</td><td bgcolor="#6b8e23"></td><td>#6B8E23</td></tr>
<tr><td>olive_green_dark</td><td bgcolor="#556b2f"></td><td>#556B2F</td></tr>
<tr><td>permanent_green</td><td bgcolor="#0ac92b"></td><td>#0AC92B</td></tr>
<tr><td>sap_green</td><td bgcolor="#308014"></td><td>#308014</td></tr>
<tr><td>sea_green</td><td bgcolor="#2e8b57"></td><td>#2E8B57</td></tr>
<tr><td>sea_green_dark</td><td bgcolor="#8fbc8f"></td><td>#8FBC8F</td></tr>
<tr><td>sea_green_medium</td><td bgcolor="#3cb371"></td><td>#3CB371</td></tr>
<tr><td>sea_green_light</td><td bgcolor="#20b2aa"></td><td>#20B2AA</td></tr>
<tr><td>spring_green</td><td bgcolor="#00ff7f"></td><td>#00FF7F</td></tr>
<tr><td>spring_green_medium</td><td bgcolor="#00fa9a"></td><td>#00FA9A</td></tr>
<tr><td>terre_verte</td><td bgcolor="#385e0f"></td><td>#385E0F</td></tr>
<tr><td>viridian_light</td><td bgcolor="#6eff70"></td><td>#6EFF70</td></tr>
<tr><td>yellow_green</td><td bgcolor="#9acd32"></td><td>#9ACD32</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>aquamarine</td><td bgcolor="#7fffd4"></td><td>#7FFFD4</td></tr>
<tr><td>aquamarine_medium</td><td bgcolor="#66cdaa"></td><td>#66CDAA</td></tr>
<tr><td>cyan</td><td bgcolor="#00ffff"></td><td>#00FFFF</td></tr>
<tr><td>cyan_white</td><td bgcolor="#e0ffff"></td><td>#E0FFFF</td></tr>
<tr><td>turquoise</td><td bgcolor="#40e0d0"></td><td>#40E0D0</td></tr>
<tr><td>turquoise_dark</td><td bgcolor="#00ced1"></td><td>#00CED1</td></tr>
<tr><td>turquoise_medium</td><td bgcolor="#48d1cc"></td><td>#48D1CC</td></tr>
<tr><td>turquoise_pale</td><td bgcolor="#afeeee"></td><td>#AFEEEE</td></tr>
<tr><th>Warna</th><th>Contoh</th><th>Kode</th></tr>
<tr><td>alice_blue</td><td bgcolor="#f0f8ff"></td><td>#F0F8FF</td></tr>
<tr><td>blue</td><td bgcolor="#0000ff"></td><td>#0000FF</td></tr>
<tr><td>blue_light</td><td bgcolor="#add8e6"></td><td>#ADD8E6</td></tr>
<tr><td>blue_medium</td><td bgcolor="#0000cd"></td><td>#0000CD</td></tr>
<tr><td>cadet</td><td bgcolor="#5f9ea0"></td><td>#5F9EA0</td></tr>
<tr><td>cobalt</td><td bgcolor="#3d59ab"></td><td>#3D59AB</td></tr>
<tr><td>cornflower</td><td bgcolor="#6495ed"></td><td>#6495ED</td></tr>
<tr><td>cerulean</td><td bgcolor="#05b8cc"></td><td>#05B8CC</td></tr>
<tr><td>dodger_blue</td><td bgcolor="#1e90ff"></td><td>#1E90FF</td></tr>
<tr><td>indigo</td><td bgcolor="#082e54"></td><td>#082E54</td></tr>
<tr><td>manganese_blue</td><td bgcolor="#03a89e"></td><td>#03A89E</td></tr>
<tr><td>midnight_blue</td><td bgcolor="#191970"></td><td>#191970</td></tr>
<tr><td>navy</td><td bgcolor="#000080"></td><td>#000080</td></tr>
<tr><td>peacock</td><td bgcolor="#33a1c9"></td><td>#33A1C9</td></tr>
<tr><td>powder_blue</td><td bgcolor="#b0e0e6"></td><td>#B0E0E6</td></tr>
<tr><td>royal_blue</td><td bgcolor="#4169e1"></td><td>#4169E1</td></tr>
<tr><td>slate_blue</td><td bgcolor="#6a5acd"></td><td>#6A5ACD</td></tr>
<tr><td>slate_blue_dark</td><td bgcolor="#483d8b"></td><td>#483D8B</td></tr>
<tr><td>slate_blue_light</td><td bgcolor="#8470ff"></td><td>#8470FF</td></tr>
<tr><td>slate_blue_medium</td><td bgcolor="#7b68ee"></td><td>#7B68EE</td></tr>
<tr><td>sky_blue</td><td bgcolor="#87ceeb"></td><td>#87CEEB</td></tr>
<tr><td>sky_blue_deep</td><td bgcolor="#00bfff"></td><td>#00BFFF</td></tr>
<tr><td>sky_blue_light</td><td bgcolor="#87cefa"><br /></td><td>#87CEFA</td></tr>
<tr><td>steel_blue</td><td bgcolor="#4682b4"></td><td>#4682B4</td></tr>
<tr><td>steel_blue_light</td><td bgcolor="#b0c4de"></td><td>#B0C4DE</td></tr>
<tr><td>turquoise_blue</td><td bgcolor="#00c78c"></td><td>#00C78C</td></tr>
<tr><td>ultramarine</td><td bgcolor="#120a8f"></td><td>#120A8F</td></tr>
<tr><th>Warna</th><th>Contoh</th><th><p>
Kode</p>
</th></tr>
<tr><td>blue_violet</td><td bgcolor="#8a2be2"></td><td>#8A2BE2</td></tr>
<tr><td>cobalt_violet_deep</td><td bgcolor="#91219e"></td><td>#91219E</td></tr>
<tr><td>magenta</td><td bgcolor="#ff00ff"></td><td>#FF00FF</td></tr>
<tr><td>orchid</td><td bgcolor="#da70d6"></td><td>#DA70D6</td></tr>
<tr><td>orchid_dark</td><td bgcolor="#9932cc"></td><td>#9932CC</td></tr>
<tr><td>orchid_medium</td><td bgcolor="#ba55d3"></td><td>#BA55D3</td></tr>
<tr><td>permanent_red_violet</td><td bgcolor="#db2645"></td><td>#DB2645</td></tr>
<tr><td>plum</td><td bgcolor="#dda0dd"></td><td>#DDA0DD</td></tr>
<tr><td>purple</td><td bgcolor="#a020f0"></td><td>#A020F0</td></tr>
<tr><td>purple_medium</td><td bgcolor="#9370db"></td><td>#9370DB</td></tr>
<tr><td>ultramarine_violet</td><td bgcolor="#5c246e"></td><td>#5C246E</td></tr>
<tr><td>violet</td><td bgcolor="#8f5e99"></td><td>#8F5E99</td></tr>
<tr><td>violet_dark</td><td bgcolor="#9400d3"></td><td>#9400D3</td></tr>
<tr><td>violet_red</td><td bgcolor="#d02090"></td><td>#D02090</td></tr>
<tr><td>violet_red_medium</td><td bgcolor="#c71585"></td><td>#C71585</td></tr>
<tr><td>violet_red_pale</td><td bgcolor="#db7093"></td><td>#DB7093<br /></td></tr>
</tbody></table>
<a href="http://dhecun.blogspot.com/2012/11/script-tabel-kode-warna-html.html" target="_blank">Get Widget</a>

15.10 SISWONO No comments

Membuat Daftar Isi

Biasanya para blogger membuat daftar isi di dalam postingan atau di page halaman...bagaimana pula kalau daftar isi itu kita letakkan di sebuah widget atau di homepage blog kita,,caranya mudah hanya menambahkan kode2nya ke dalam gadget /javascript..

Berikut caranya :

Login Blogger anda
Tata letak
Tambah Gadget
HTLM/Javascript
Copy kan kode dibawah ini :

<div style="overflow:auto; border: 1px solid #CCC; margin: auto; padding: 3px; width: 95%; height: 400px; background-color: none; text-align: left;">
    <script src="http://memed.googlecode.com/files/daftarisi.js">
    </script><script src="http://saktobek.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
    </script>
<p>
</p></div>

6. Ganti dulu Url yang berwarna merah tersebut dengan url blog sobat
7. Barulah disimpan

Terimakasih telah sudi mampir membaca artikel "Cara Membuat Daftar Isi Gadget Keren di Blog". Semoga Informasinya dapat membantu dan bermanfaat.

13.29 SISWONO No comments

Login ke Blogger
Pergi ke Tata Letak
Tambah gadget
Pilih HTML/javascript
Copy Paste Kode dibawah ini :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#noop-top").fadeIn()}else{$("#noop-top").fadeOut()}});$("#noop-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script><a id='noop-top' style='display: none; position: fixed; bottom: 1px; right:1%; cursor:pointer;font:12px arial;'><span>^</span></a><style type="text/css">#noop-top span{-moz-transition:all .3s ease-in 0s;-webkit-transition:all .3s;-o-transition:all .3s;background-color:#1e5799;background:-moz-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#1e5799),color-stop(50%,#2989d8),color-stop(51%,#207cca),color-stop(100%,#7db9e8));background:-webkit-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-o-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:-ms-linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);background:linear-gradient(top,#1e5799 0,#2989d8 50%,#207cca 51%,#7db9e8 100%);border:3px solid #fff;border-radius:14px 14px 14px 14px;color:#fff;font:bold 56px cursive;height:50px;left:3px;display:block;text-align:center;text-shadow:1px 1px 0 #000;top:-56px;width:50px}#noop-top:hover span{box-shadow:0 0 49px #207cca;height:70px}#noop-top{color:#000;text-shadow:1px 1px 0 #fff;text-decoration:none}</style>

Atau bisa juga dengan kode ini :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" >
var scrolltotop={
    //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
    //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi40Et3mQwj-0nF1GbZKKwMO1ueRMIMuGf-bvsQlBt1Yuo6rGElsT6C0U5aTinmMHDCVZnX_VvvdT-3X09RIISOt72gnh8EOtrGA6tOoDP9muLvghkFcbUVIc3_xEYia64jx9aoV2j04cvs/s1600/navigate-up-icon.png" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
    anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

    state: {isvisible:false, shouldvisible:false},

    scrollup:function(){
        if (!this.cssfixedsupport) //if control is positioned using JavaScript
            this.$control.css({opacity:0}) //hide control immediately after clicking it
        var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
        if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
            dest=jQuery('#'+dest).offset().top
        else
            dest=0
        this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
    },

    keepfixed:function(){
        var $window=jQuery(window)
        var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
        var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
        this.$control.css({left:controlx+'px', top:controly+'px'})
    },

    togglecontrol:function(){
        var scrolltop=jQuery(window).scrollTop()
        if (!this.cssfixedsupport)
            this.keepfixed()
        this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
        if (this.state.shouldvisible && !this.state.isvisible){
            this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
            this.state.isvisible=true
        }
        else if (this.state.shouldvisible==false && this.state.isvisible){
            this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
            this.state.isvisible=false
        }
    },
    init:function(){
        jQuery(document).ready(function($){
            var mainobj=scrolltotop
            var iebrws=document.all
            mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
            mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
            mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
                .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
                .attr({title:'Scroll Back to Top'})
                .click(function(){mainobj.scrollup(); return false})
                .appendTo('body')
            if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
                mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
            mainobj.togglecontrol()
            $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
                mainobj.scrollup()
                return false
            })
            $(window).bind('scroll resize', function(e){
                mainobj.togglecontrol()
            })
        })
    }
}
scrolltotop.init()
</script>

6. Simpan dan Lihat Hasilnya

13.09 SISWONO No comments

Mengganti Warna Background Pilihan

kali ini saya post widget lagi~
yg saya post kali ini adalah cara membuat widget pengganti warna background
'ha? maksudnya gimana tuh?'
gini... kalo kita nge-klik warna dari pilihan warna, warna backgroundnya bakal keganti ama warna yang diklik itu
ya udah... daripada bingung, langsung tutornya aja deh.... XD

Masuk Blogger (harus)
Klik Rancangan (tampilan blogger lama) atau Tata Letak (tampilan blogger baru)
Klik Tambah Widget, klik bagian HTML/Javascript , lalu masukkan script ini
<script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table width="100%">
<tr>
<td onclick="bgChange('black')" bgcolor="black"> </td>
<td onclick="bgChange('#ffff00')" bgcolor="#FFFF00"> </td>
<td onclick="bgChange('red')" bgcolor="red"> </td>
<td onclick="bgChange('blue')" bgcolor="blue"> </td>
<td onclick="bgChange('white')" bgcolor="white"> </td>
<td onclick="bgChange('green')" bgcolor="green"> </td>
<td onclick="bgChange('deepskyblue')" bgcolor="DeepSkyBlue"> </td>
<td onclick="bgChange('fuchsia')" bgcolor="Fuchsia"> </td>
<td onclick="bgChange('darkmagenta')" bgcolor="DarkMagenta"> </td>
</tr>
</table>
Setelah itu Klik Simpan~ Selesai deh~ XD

20.12 SISWONO No comments

Membuat menu navigasi horizontal dropdown keren di blog

Hai sobat blogger ! sudah lama tak berjumpa ya, hampir 1 bulan saya tidak mengupdate isi postingan di blog ini, hampir sebulan itu saya mendapat kendala besar yang membuat saya jarang update. Saya memohon maaf untuk hal itu. Oke , kali ini saya akan berbagi ilmu tutorial blogging yang cukup keren sobat . Sesuai judulnya, kali ini saya akan membuat menu navigasi yang pernah saya pakai di blog ini atau bisa lihat sendiri pada gambar yang saya pasang diatas. Menu navigasi ini telah saya modifikasi sedemikian rupa sehingga menjadikannya keren dan elegan.. Bagaimana ? tertarik untuk membuatnya ? langsung saja kalau begitu kita simak dan bahas tutorialnya bersama-sama.

1.) Baca Basmallah
2.) Masuk ke akun blogger sobat
3.) Masuk ke Dashboard > Template > Edit Html > Lanjutkan
4.) Centang tanda Expand Template Widget
5.) Lalu cari kode ]]></b:skin>
6.) Jika sudah ketemu, masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

Kode

menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;
}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;
}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;
}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}

7.) Simpan Template
8.) Buka Tata Letak > Tambah Gadget > Html/Javascript
9.) Masukkan kode berikut di form Konten yang tersedia

Klik untuk melihat

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

11.) Ganti # dengan URL yang akan dituju
Ganti Menu Link dengan nama yang akan ditampilkan dalam menu utama.
Ganti Sub-menu Link dengan nama yang akan menjadi menu yang berada di bawah menu utama
12.) Simpan dan lihat hasilnya

Contoh :

<div class="menu"><ul><li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li><li><a href="#">Blogger</a><ul><li><a href="#"> Trik</a></li><li><a href="#">Tips </a></li></ul></li><li><a href="#">Contacs me</a></li></ul></div>

( Dalam pengeditan kode, kita hanya mengedit kode yang bertulis tebal saja)

-----------------------------------------------------------------------------------------------
EDIT MODE :

Membuat Single Menu :

Caranya?

Lihat pada bagian kode Beranda :
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li>
Kode ini merupakan single menu, artinya tidak ada sub-menu yang mengikuti dibawahnya. Kode ini sangat sederhana, dimulai dengan kode <li> dan diakhiri kode </li> dan jika anda perlu menambah single menu, tinggal tambah kode diatas setelah kode </li>, contoh :
<li><a href="http://rizaldipriantama.blogspot.com"> Beranda </a></li><li><a href="http://rizaldipriantama.blogspot.com"> Daftar Isi </a></li>

maka akan tampil 2 single menu yang saling bersebelahan yaitu Beranda dan daftar isi

Membuat Sub-Menu :

Caranya?

Lihat pada kode bagian trik komputer, disana terdapat sederet kode yang panjang, kira-kira seperti ini
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href="# "> Software </a></li><li><a href=" # "> Hardware</a></li><li><a href="# "> Internet </a></li></ul></li>
Pada kode diatas, trik komputer menggunakan sistem sub-menu, artinya menu yang mempunyai cabang. Trik komputer merupakan induknya, sementara Hacker, Software, Hardware sebagai anaknya yang mengikuti di bawahnya. Hacker, Software, Hardware, tidak tampil pada menu utama, melainkan menu itu akan tampil jika kita menyorot menu Trik Komputer. Dalam membuat sub-menu, perlu memperhatikan beberapa hal, diantaranya kode <ul> dan </ul> . Dalam membuat sub-menu , anda perlu menambahkan kode <ul> setelah kode </a> di kode induk, sementara penutup kode induk </li> berada di akhir kode.

Contoh sub-menu 1 induk 1 anak ( perhatikan kode bertulis tebal ):<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li></ul></li>

Jika sobat ingin menambahkan sub-menu lagi, tambahkan kode <li><a href=" # "> Sub-Menu Link </a></li> sebelum kode </ul> berada, contoh
<li><a href="http://rizaldipriantama.blogspot.com/trick "> Trik Komputer</a><ul><li><a href=" # "> Hacker</a></li><li><a href=" # "> Software </a></li></ul></li>

Maka akan tampil 2 sub menu yang berada dibawah menu Trik komputer, yaitu Hacker dan Software

17.46 SISWONO 2 comments

Beranda

AZZMAL BLOG

TERJEMAHKAN

PEMUTAR MUSIK

POSTING TERBARU

Komentar

Senin, 28 Januari 2013

Cara Install Windows 7

Minggu, 27 Januari 2013

Script Jam dan Kalender

Scrip Jam dan Tanggal

Kamis, 24 Januari 2013

Jam Digital pada Blog

Widget Sharing Melayang Keren Di Blog

Script Ym Buat Blogger

Kode Warna

Kode Warna

Membuat Share Facebook dengan Counter di Blogger

Script Kode Warna

Membuat Daftar Isi

Membuat Tombol Kembali ke Atas Untuk Blog

Rabu, 23 Januari 2013

Mengganti Warna Background Pilihan

Selasa, 22 Januari 2013

Membuat menu navigasi horizontal dropdown keren di blog

Tutur Tinular

Tentang Saya

Link Teman