Saturday, November 28, 2009

Menggunakan Kode warna dalam blogging

Ingin mengganti warna blog dengan warna yang kita inginkan, tentunya tidak sulit tinggal kita memasukkan kode warna yang kita inginkan.

Unsur warna bukan hanya dilakukan pada background blog tetapi lebih banyak lagi fungsi serta manfaat lain yang bisa kamu eksplorasi, seperti : pewarnaan teks, background, pewarnaan link, highlight, dan sebagainya

Tapi karena saking banyaknya kode yang ada tentu kita kesulitan untuk menghafalkan ( kalau bisa berarti kamu "JENIUS"...), namun bagaimana kalau menggunakan alat bantu. Cara kerjanya kamu tinggal meng-klik warna, kemudian kode-nya akan muncul. Dan langkah selanjutnya tinggal copas kode tersebut dalam kode HTML blog kamu

Dengan HTML color codes kamu bisa merubah background, warna text, dll

berikut contoh penggunaan
HTML color codes untuk background color :

<body style="background:#80BFFF">


HTML color codes utuk setting font/text color :

<span >


HTML color codes untuk table background color:

<table style="background:#80BFFF">


HTML color code untuk link color :

<a style="color:#80BFFF">


Kamu bisa mendapatkan kode warna di sini :

Red color names ( tambahkan kode # didepan untuk kode warna)

Red color names

IndianRedCD5C5C
LightCoralF08080
Salmon FA8072
DarkSalmonE9967A
LightSalmonFFA07A
Crimson DC143C
Red FF0000
FireBrickB22222
DarkRed 8B0000

Pink color names


Pink FFC0CB
LightPinkFFB6C1
HotPink FF69B4
DeepPink FF1493
MediumVioletRedC71585
PaleVioletRed DB7093

Orange color names


LightSalmon FFA07A
Coral FF7F50
Tomato FF6347
OrangeRedFF4500
DarkOrangeFF8C00
Orange FFA500

Yellow color names


Gold FFD700
Yellow FFFF00
LightYellowFFFFE0
LemonChiffon FFFACD
LightGoldenrodYellowFAFAD2
PapayaWhipFFEFD5
Moccasin FFE4B5
PeachPuffFFDAB9
PaleGoldenrod EEE8AA
Khaki F0E68C
DarkKhakiBDB76B

Purple color names


Lavender E6E6FA
Thistle D8BFD8
Plum DDA0DD
Violet EE82EE
Orchid DA70D6
Fuchsia FF00FF
Magenta FF00FF
MediumOrchid BA55D3
MediumPurple 9370DB
Amethyst 9966CC
BlueViolet8A2BE2
DarkViolet9400D3
DarkOrchid9932CC
DarkMagenta8B008B
Purple 800080
Indigo 4B0082
SlateBlue6A5ACD
DarkSlateBlue 483D8B
MediumSlateBlue7B68EE

Green color names


GreenYellowADFF2F
Chartreuse7FFF00
LawnGreen7CFC00
Lime 00FF00
LimeGreen32CD32
PaleGreen98FB98
LightGreen90EE90
MediumSpringGreen00FA9A
SpringGreen00FF7F
MediumSeaGreen 3CB371
SeaGreen 2E8B57
ForestGreen228B22
Green 008000
DarkGreen006400
YellowGreen9ACD32
OliveDrab6B8E23
Olive 808000
DarkOliveGreen 556B2F
MediumAquamarine66CDAA
DarkSeaGreen 8FBC8F
LightSeaGreen 20B2AA
DarkCyan 008B8B
Teal 008080

Blue color names


Aqua 00FFFF
Cyan 00FFFF
LightCyanE0FFFF
PaleTurquoise AFEEEE
Aquamarine7FFFD4
Turquoise40E0D0
MediumTurquoise48D1CC
DarkTurquoise 00CED1
CadetBlue5F9EA0
SteelBlue4682B4
LightSteelBlue B0C4DE
PowderBlueB0E0E6
LightBlueADD8E6
SkyBlue 87CEEB
LightSkyBlue 87CEFA
DeepSkyBlue00BFFF
DodgerBlue1E90FF
CornflowerBlue 6495ED
MediumSlateBlue7B68EE
RoyalBlue4169E1
Blue 0000FF
MediumBlue0000CD
DarkBlue 00008B
Navy 000080
MidnightBlue 191970

Brown color names


Cornsilk FFF8DC
BlanchedAlmond FFEBCD
Bisque FFE4C4
NavajoWhiteFFDEAD
Wheat F5DEB3
BurlyWoodDEB887
Tan D2B48C
RosyBrownBC8F8F
SandyBrownF4A460
GoldenrodDAA520
DarkGoldenrod B8860B
Peru CD853F
ChocolateD2691E
SaddleBrown8B4513
Sienna A0522D
Brown A52A2A
Maroon 800000

White color names


White FFFFFF
Snow FFFAFA
Honeydew F0FFF0
MintCreamF5FFFA
Azure F0FFFF
AliceBlueF0F8FF
GhostWhiteF8F8FF
WhiteSmokeF5F5F5
Seashell FFF5EE
Beige F5F5DC
OldLace FDF5E6
FloralWhiteFFFAF0
Ivory FFFFF0
AntiqueWhite FAEBD7
Linen FAF0E6
LavenderBlush FFF0F5
MistyRoseFFE4E1

Grey color names

GainsboroDCDCDC
LightGreyD3D3D3
Silver C0C0C0
DarkGray A9A9A9
Gray 808080
DimGray 696969
LightSlateGray 778899
SlateGray708090
DarkSlateGray 2F4F4F
Black 000000

SEMOGA BERMANFAAT....!
html-color-codes.info

Penulisan kode html dalam posting

Bagaimana bila kita ingin menampilkan kode HTML dalam posting ?.

Menampilkan kode HTMLdalam postingan tidak seperti menulis kode biasa. Jika dalam postingan kamu memasukkan kode originalnya, maka yang tampil dalam postingan adalah hasil terjemahan bahasa HTML dari kode tersebut.


Untuk menampilkan kode HTML dalam posting ada 2 cara : 

Pertama : cara manual, yaitu merubah karakter-karakter kode tertentu. Mari kita lihat karakter-karakter yang perlu diganti :
    KodeGanti Kode dengan
    <&lt;
    >&gt;
    "&quot;
     
     Kedua :  Memparse kode HTML yang akan kamu masukkan dengan menggunakan layanan situs online

      Masukkan kode yang akan kamu parse, kemudian tekan "Encode" atau jika ingin mengembalikan ke kode semula tekan "Decode".
      Copy paste kode hasil Encode yang telah ada ke posting kamu

      • Blogcrowds (http://www.blogcrowds.com/resources/parse_html.php)
      Masukkan kode yang akan diparse, namun kali ini kamu hanya menekan tombol "Parse".
      Copy paste kode hasil Parse yang telah ada ke posting kamu.

      Nah..! selamat mencoba ..  Sukses selalu buat kamu...!!!

      Friday, November 20, 2009

      Membuat Read More Otomatis

      Read more merupakan salah satu cara agar kita dapat membuat variasi posting dengan tidak menampilkan secara keseluruhan tapi hanya sebagian sehingga bisa lebih hemat tempat dan menarik.
      Berikut langkah yang harus dilakukan :
      • Login ke account blogger kamu.
      • Pilih Tata Letak --> Edit HTML --> centang "Expand Template Widget".
      Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.
      • Login ke blogger.com
      • Klik Tata Letak --> Edit HTML.
      • Copy kode di bawah ini dan paste di atas kode </head>
        <script type='text/javascript'>
        var thumbnail_mode = "float" ;
        summary_noimg = 450;
        summary_img = 450;
        img_thumb_height = 120;
        img_thumb_width = 120;
        </script>
        <script type='text/javascript'>
        //<![CDATA[
        /******************************************
        Auto-readmore link script, version 2.0 (for blogspot)
        (C)2008 by Anhvo
        visit http://en.vietwebguide.com to get more cool hacks
        ********************************************/
        function removeHtmlTag(strx,chop){
        if(strx.indexOf("<")!=-1)
        {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
        s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
        }
        strx = s.join("");
        }
        chop = (chop < strx.length-1) ? chop : strx.length-2;
        while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
        strx = strx.substring(0,chop-1);
        return strx+'...';
        }

        function createSummaryAndThumb(pID){
        var div = document.getElementById(pID);
        var imgtag = "";
        var img = div.getElementsByTagName("img");
        var summ = summary_noimg;
        if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
        }

        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
        }
        //]]>
        </script>
        Catatan :
        1. Kode var thumbnail_mode = "float" ; diartikan bahwa readmore kamu akan diatur disebelah kiri, kalau kamu ingin tanpa pengaturan float silakan ganti dengan "no-float".
        2. Kode summary_noimg = 450; berguna untuk mengatur jumlah karakter yang ditampilkan tanpa image (gambar).
        3. Kode summary_img = 450; berguna untuk mengatur jumlah karakter yang ditampilkan dengan image (gambar).
        4. Kode img_thumb_height = 120; berguna untuk mengatur tinggi image (gambar) yang akan ditampilkan.
        5. Kode img_thumb_width = 120; berguna untuk mengatur lebar image (gambar) yang akan ditampilkan.
        Cari kembali kode seperti di bawah ini.

        <data:post.body/>

        atau

        <p><data:post.body/></p>

        Kalau sudah ketemu, ganti kode tersebut dengan kode berikut :
            <b:if cond='data:blog.pageType != "item"'>
            <div expr:id='"summary-" + data:post.id'><data:post.body/></div>
            <script type='text/javascript'>createSummaryAndThumb("summary-<data:post.id/>");</script>
            <a class='readmore' expr:href='data:post.url'><img src='http://i864.photobucket.com/albums/ab206/kibagus/animation/th_Set-02d-june.gif'/></a>
            </b:if>
            <b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

            Catatan :
            • Ganti kode yang berwarna merah dengan alamat IMAGE kamu bila kamu ingin pakai punya kamu sendiri..
              • Jangan lupa disimpan.
              Selamat mencoba.............

              Animasi Header


              cat jump


              cat


              link-1


              link8


              link7


              link6


              link5


              link4


              link2


              link1

              ring




              Tertarik Ikuti langkah berikut  :
              • Klik Page Element
              • Klik Add Gadget
              •   AddGadget
              • Klik plus button (+) for HTML/JavaScript. (img)

                HTML
              • Copy and paste kode dibawah ini
              ______________________________________

              <a href="http://kibagus-homedesign/blogspot.com" target="_blank"><img alt="cat jump" border="0" src="http://i864.photobucket.com/albums/ab206/kibagus/animation/catrun1.gif" /></a>

              atau

              <img src="http://i864.photobucket.com/albums/ab206/kibagus/animation/catrun1.gif" style="float: left; padding: 10px" />
              ______________________________________

              Keterangan :
              • Warna kuning : URL Tujuan yang dimaksud bila ingin menggunakan image sebagai icon bagi link tertentu.
              • Warna agua  : Alamat URL image. ( bila ingin menggunakan image/animasi yang ada disini, klik kanan, copy  lokasi image, ganti URL dengan URL image yang dimaksud )
              • float: left : Letak / posisi yang di ingnkan ( left - center - right )
              • Untuk yang ingin menyimpan pada directory sendiri silakan klik kanan - save image ke PC kamu - upload image pada tempat penyimpanan kamu sendiri ( bisa pakai pikasa.com / photobucket.com / website lain ), kemudian ambil alamat URL image tersebut. 
              bila kamu ingin mencari background dan animasi yang cocok buat blog kamu silakan klik dibawah ini.

              eye

              Get Your Own Animation Picture Here

              Animasi Bendera

              merah putihku


              bendera


              indonesia


              merah putih


              red white

              ring





              Tertarik Ikuti langkah berikut  :
              • Klik Page Element
              • Klik Add Gadget
              •   AddGadget
              • Klik plus button (+) for HTML/JavaScript. (img)

                HTML
              • Copy and paste kode dibawah ini
              ______________________________________

              <a href="http://kibagus-homedesign/blogspot.com" target="_blank"><img alt="cat jump" border="0" src="http://i864.photobucket.com/albums/ab206/kibagus/animation/catrun1.gif" /></a>

              atau

              <img src="http://i864.photobucket.com/albums/ab206/kibagus/animation/catrun1.gif" style="float: left; padding: 10px" />
              ______________________________________

              Keterangan :
              • Warna kuning : URL Tujuan yang dimaksud bila ingin menggunakan image sebagai icon bagi link tertentu.
              • Warna agua  : Alamat URL image. ( bila ingin menggunakan image/animasi yang ada disini, klik kanan, copy  lokasi image, ganti URL dengan URL image yang dimaksud )
              • float: left : Letak / posisi yang di ingnkan ( left - center - right )
              • Untuk yang ingin menyimpan pada directory sendiri silakan klik kanan - save image ke PC kamu - upload image pada tempat penyimpanan kamu sendiri ( bisa pakai pikasa.com / photobucket.com / website lain ), kemudian ambil alamat URL image tersebut. 
              bila kamu ingin mencari background dan animasi yang cocok buat blog kamu silakan klik dibawah ini.

              eye

              Sunday, November 15, 2009

              Membuat FAVICON

              Favicon adalah kependekan dari Favorites icon, di website wikipedia Favicon diterjemahkan sebagai an icon associated with a particular website or webpage atau bahasa Indonesia kurang lebih adalah sebuah icon yang mewakili dari wajah web tersebut.

              Favicon dapat ditampilkan pada Internet Explorer, Mozilla, Opera dan biasanya nampak pada Address Bar. Saat kita Bookmarks suatu web, Favicon dapat mewakili karakter dari web tersebut.

              Icon dapat dibuat dari bagian web tersebut atau membuat sendiri dengan bentuk lambang atau logo yang bisa mewakili web tersebut. Berikut ini adalah cara membuat, dan memasukkan Favicon ke web anda.

              Pertama pastikan dulu Icon/Image mana yang akan anda jadikan Favicon, usahakan membuat Icon sekecil mungkin, sedetail dan sejelas mungkin, Ini berguna saat icon tersebut di generate agar sesuai hasilnya dengan yang anda harapkan.

              Sedangkan cara memasang favicon di blogger.com adalah sebagai berikut :
              • Login ke blogger.com
              • Klik Tata Letak --> Edit HTML.
              • Copy kode di bawah ini dan paste di atas kode </head>

              <link href="http://masukkan alamat image kamu" rel="shortcut icon"/>

              Contoh Favicon :

              <link href="http://i864.photobucket.com/albums/ab206/kibagus/animation/th_Kungfu-01-june.gif" rel="shortcut icon"/>

              Untuk Icon / Image bisa kamu gunakan baik animasi maupun no animasi, bisa kamu simpan dimana saja, misalnya : Pikasa.com, photobucket.com, Google site, dll

              kalau kamu mau, kamu bisa pakai contoh yang ada.......

              Simpanlah hasil editing tersebut dan kamu bisa lihat hasilnya.

              Cara mudah membuat TAB VIEW WIDGET

              Kamu ingin membuat blog yang sederhana dengan isi lengkap maka TabView adalah salah satu alternatif dimana kamu bisa menghemat tempat dengan isi yang sama.
              Tab View ini (dikenal juga dengan istilah Slide Show Menu) sangat berguna bagi kamu yang ingin menambahkan berbagai widget tapi hanya dalam satu tempat, baik itu Recent Post, Recent Comments, Link Blogroll, Link Banner teman, dll.

              Langkah Pertama
              • Login ke akun Blogger kamu.
              • Dari halaman dashboard, pilih Edit HTML.
              • Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk mencarinya.
              • Copykan script berikut dan letakkan di atas kode ]]></b:skin> tersebut..

              /* Menu Tab View
              ----------------------------------------------- */
              div.TabView div.Tabs {
              padding-top: 0px;
              height: 24px;
              overflow: hidden;
              }

              /* Menu Utama */
              div.TabView div.Tabs a {
              float: left;
              display: block;
              width: 90px; /* ukuran lebar menu */
              text-align: center;
              height: 24px; /* ukuran tinggi menu */
              padding-top: 3px;
              margin-right:4px; /* jarak antarmenu */
              vertical-align: middle;
              border: 1px solid #CCC; /* warna border menu */
              border-bottom-width: 0;
              font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */
              font-size: 12px; /* besar hurup menu */
              letter-spacing: -1px;
              background-color: #A4A4A4; /* warna latar menu */
              color: #FFFFFF; /* warna hurup menu */
              -moz-border-radius-topleft:10px;
              -moz-border-radius-topright:10px;
              }

              div.TabView div.Tabs a.Active {
              background-color: #888888; /* warna background menu aktif */
              color: #FFFFFF;
              }

              div.TabView div.Tabs a:hover {
              background-color: #999999; /* warna background menu hover */
              color: #FFFFCC;
              font-weight: bold;
              }

              /* Kotak Utama */
              div.TabView div.Pages {
              clear: both;
              border: 1px solid #CCC; /* warna border kotak utama */
              overflow: hidden;
              background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */
              }

              div.TabView div.Pages div.Page {
              height: 100%;
              padding: 0px;
              overflow: hidden;
              }

              div.TabView div.Pages div.Page div.Pad {
              padding: 3px 5px;
              font-size: 12px; /* besar hurup kotak utama */
              }

              Pada bagian yang diberi tanda keterangan, kamu dapat mengubahnya sesuai dengan yang diinginkan, seperti pada ukuran, warna maupun jenis huruf.

              Langkah Kedua
              • Setelah itu letakkan kode berikut di bawah kode ]]></b:skin> tersebut


              <script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>

            1. Simpanlah hasil editing tersebut.


            2. Langkah Ketiga
              • Pilih tab Elemen Halaman ( Page Element ).
              • Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.
              • Copykan script berikut dan letakkan pada kotak Content yang tersedia:

                <form action="tabview.html" method="get">
                <div id="TabView" class="TabView">
                <div style="width: 100%;" class="Tabs">
                <a title="Keterangan Menu 1">Menu 1</a>
                <a title="Keterangan Menu 2">Menu 2</a>
                <a title="Keterangan Menu 3">Menu 3</a>
                </div>
                <div style="width: 99%; height: 200px;" class="Pages">

                <!--Awal Menu 1-->
                <div class="Page"><div class="Pad">
                Isi Menu 1.1<br/>
                Isi Menu 1.2<br/>
                Isi Menu 1.dst<br/>
                </div></div>
                <!--Akhir Menu 1-->

                <!--Awal Menu 2-->
                <div class="Page"><div class="Pad">
                Isi Menu 2.1<br/>
                Isi Menu 2.2<br/>
                Isi Menu 2.dst<br/>
                </div></div>
                <!--Akhir Menu 2-->

                <!--Awal Menu 3-->
                <div class="Page"><div class="Pad">
                Isi Menu 3.1<br/>
                Isi Menu 3.2<br/>
                Isi Menu 3.dst<br/>
                </div></div>
                <!--Akhir Menu 3-->

                </div></div></form>

                <script type="text/javascript">tabview_initialize('TabView');</script>
                <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://bestdesignroom.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

                Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

                Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

                Untuk mengganti kode warna bisa kamu lihat disini KODE WARNA atau Menggunakan kode warna dalam blogging


                Selamat Mencoba...!!

                Referensi : dari banyak Blog Sahabat.

              Saturday, November 14, 2009

              Membuat Recent Post dengan Java Script

              Cara membuat/menambah recent Post pada blog ini aku ambil dari blog sahabat SC-Community , sangat menarik dan cukup sederhana buat kamu yang tidak mau pusing dengan mengedit HTML, cukup dengan tambah Gadget copy paste sudah jadi... MUDAH kan..!

              Ikuti langkah berikut untuk lebih jelasnya :
              • Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
              • Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
              • Setelah itu pilih HTML/JavaScript.
              • Masukan kode script berikut :  

              <script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/Kbs-posts.js"></script>
              <script style="text/javascript">
              var numposts = 10;
              var showpostdate = false;
              var showpostsummary = false;
              var numchars = 100;
              var standardstyling = true;
              </script>
              <script src="http://blog kamu sendiri.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>



              Keterangan variabel:
              • numposts = 10; artinya 10 posting yang ditampilkan.
              • showpostdate = false; artinya tanggal posting tidak ditampilkan (kalo mau ditampilkan false-nya ganti dengan true).
              • showpostsummary = false; artinya ringkasan posting tidak ditampilkan.
              • numchars = 100; artinya banyaknya karakter (huruf) yang ditampilkan adalah 100 huruf.
              • standardstyling = true; artinya menggunakan type standard.

              mudah sederhana tapi menarik... anda tertarik silakah mencoba... Gratis...!!

              Wednesday, November 11, 2009

              Alternatif Penyimpanan Java Scipt lewat Google Site

              Alternatif Penyimpanan Java Scipt lewat Google Site merupakan salah satu alternatif yang bisa kita pakai, disamping tidak rumit juga tidak ada batasan jumlah file yang akan kita simpan / Upload.
              Ingin cepat mencoba, caranya mudah : 

              Pertama
              LOGIN DULU dengan Account Google kamu bisa lewat GMAIL atau langsung aja ke GOOGLE SITE

              Kedua
              1. Langkah kedua akan muncul tampilan ( gambar-1 ),
              2. Ikutilah tanda panah biru untuk membuat nama site kamu ( gambar-1 )
              3. Isilah kotak isian yang ada, Site name ( nama site kamu sekaligus alamat URL site kamu ) gambar - 2
              4. Site Description ( uraian Site kamu bisa diisi bisa tidak )
              5. Isilah sesuai kebutuhan kamu ( adult content, share with dan Themes )
              6. Klik di tanda panah merah ( gambar - 2 ) Create site,
              7. maka akan muncul nama site kamu seperti ( gambar -1 )  Panah merah
              gambar -1

               Gambar - 2

               Ketiga
              1. Masuk ke site yang telah kamu buat klik panah merah ( gambar - 1 )
              2. ada 2 cara untuk menyimpan file kamu
              3. Kamu bisa langsung menyimpan lewat Attachment ( panah merah bawah gambar -3 ) maka klik akan muncul perintah up load file dan kamu bisa langsung simpan disitu ( gambar - 3 ).   ( mudah kan..! ) 
              4. Maka alamat file kamu  http://sites.google.com/site/kibagusnet/Home/tabview.js


              http://sites.google.com/site/kibagusnet = alamat site kamu
              http://sites.google.com/site/kibagusnet/Home = alamat halaman site kamu 
              tabview.js = nama file kamu  ( gambar - 3 )
               gambar - 3 


              • cara kedua, ini bisa kamu lakukan apabila kamu ingin mengatur file kamu dalam halaman yang berbeda agar mudah dalam pengaturan, lihat gambar - 4
              • Klik pada create page ( panah merah atas gambar - 4 ) maka akan muncul perintah isian mulai nama page kamu dan jenis page kamu ( pilihlah file cabinet = untuk penyimpanan file )( gambar 5 ).
              • Maka nama page baru kamu akan muncul seperti pada gambar - 4 ( panah biru ) ( contoh = kibagusblog )
              • langkah selanjutnya kamu tinggal masuk ke page kamu dan bisa menyimpan file kamu, langkah2 nya sama dengan cara pertama tadi,
              • lewat Attachment ( panah merah bawah gambar -6 ) maka klik akan muncul perintah up load file dan kamu bisa langsung simpan disitu ( gambar - 6 ).   ( mudah kan..! )
              • Maka alamat file kamu  http://sites.google.com/site/kibagusnet/kibagusblog/blogtoc.js 

              http://sites.google.com/site/kibagusnet = alamat site kamu
              http://sites.google.com/site/kibagusnet/kibagusblog = alamat halaman site kamu
              blogtoc.js = nama file kamu  ( gambar - 6 )

              gambar - 4


              gambar - 5


               gambar - 6

              Itulah sekelumit pengalaman saya, tentang Alternatif Penyimpanan Java Scipt lewat Google Site, semoga bermanfaat. contoh penggunaan buat blogger bisa klik di sini cara mudah membuat tab view widget met mencoba..!!

              Thursday, November 5, 2009

              Bentuk rumah bagus dan tahan gempa

              Menteri Negara Perumahan Rakyat Mohammad Yusuf Asy'ari kembali meminta pengembang dan masyarakat secara umum agar memerhatikan kualitas bangunan, termasuk tulangan rumah, alih-alih dari bentuk yang bagus. Ini diperlukan agar rumah tersebut tahan gempa.

              Keinginan untuk punya rumah dengan tampak dan tata ruang yang bagus adalah impian kita pada umumnya, yang terpenting kita mulai saat ini harus mengutamakan STRUKTUR  bangunan dibanding dengan KEINDAHAN.


              Tapi juga bukan berarti kita tidak bisa punya rumah yang bagus dan aman, Selisih biaya 10 hingga 15 persen lebih mahal saat membangun rumah tahan gempa dibanding rumah tidak tahan gempa dinilainya masih dalam batas realistis.

              Struktur bangunan yang harus di prioritaskan :
              • Pondasi, disesuaikan dengan kondisi tanah pada lokasi bangunan ( pondasi pasangan batu / pondasi telapak )
              • Balok Sloof, di pasang diatas pondasi sebagai alas dinding tembok
              • Kolom utama, di gunakan pada tumpuan utama ( sebagai tumpuan kuda kuda )
              • Kolom praktis, di pasang pada setiap pertemuan dinding dan untuk dinding yang panjang maksimal pemasangan kolom praktis tidak boleh lebih dari 12 m2 ( luas dinding ), biasanya jarak maksimal antar kolom praktis 3 - 4 m
              • Balok latai, di pasang diatas kusen sebagai penahan pasangan bata diatas kusen
              • Balok ring balk, di pasang diatas dinding bata secara keseluruhan
              • Balok ring Gewel, di gunakan pada bangunan yang menggunakan gewel sebagai pengganti kuda kuda
              ( Bagian diatas adalah untuk bangunan 1 lantai / tidak bertingkat, untuk bangunan bertingkat tentunya akan lebih kompleks )

              Gempa berkekuatan 7,6 skala Richter di Padang Pariaman, Sumatera Barat, Rabu (30/9) sore, dan 7,0 SR di Jambi pada Kamis (1/10) pagi harusnya menjadi pelajaran penting bagi kita semua. Bukan apa-apa, gempa itu telah merusakkan segalanya. Hanya dalam tempo sekejap, keindahan ranah Minang itu meredup.

              Hancurnya rumah disebabkan beberapa hal. Di antaranya :
              • konfigurasi rumah. Ketidakteraturan denah mengakibatkan gaya puntir dan konsentrasi tegangan sehingga menghancurkan bagian bangunan.
              • Selain itu, rumah yang roboh itu tidak memiliki kolom praktis, balok keliling (ring balk), dan sloof. Tanpa hal-hal itu, rumah mudah roboh atau ambles. Kalaupun ada, ukurannya tidak memenuhi syarat.
              • Ketidaksempurnaan sambungan mengakibatkan elemen-elemen struktur tidak terikat baik. Mutu material, seperti bata, kayu, pasir, dan bahan beton yang rendah, juga berdampak pada kualitas bangunan.
              • Jika kualitas pekerjaannya buruk—adukan beton salah, campuran adukan salah, penyusunan bata sembarangan, detail pembesian salah, sambungan kayu atau beton buruk, pengangkeran (anchoring) buruk, dan lain sebagainya, rumah gampang roboh. Kurangnya pemeliharaan juga memperlemah kekuatan bangunan.
              Pakar konstruksi dan tata bangunan Universitas Diponegoro Semarang Dr Sri Tudjono mengatakan, bangunan yang bersifat lentur dapat meminimalkan kerusakan yang diakibatkan gempa bumi.
              • Material bangunan yang bersifat lentur dapat menyerap energi, baik energi tarikan maupun tekanan, dan beberapa material bangunan yang memiliki sifat lentur adalah besi dan kayu
              • Besi digunakan sebagai kolom yang berfungsi sebagai bingkai untuk mengikat konstruksi bangunan dan dapat menyerap energi yang muncul, termasuk getaran gempa bumi. Namun, kata dia, banyak bangunan yang tidak menggunakan besi.
              • Biasanya, bangunan hanya mengandalkan dinding dari batu bata dan semen yang tidak dilengkapi dengan kolom besi, padahal dinding bata tidak bersifat lentur, tetapi justru bersifat getas dan mudah pecah
              • Karena itu, ketika menghadapi energi yang muncul akibat gempa, bangunan yang tidak dilengkapi dengan kolom besi langsung hancur, sementara bangunan yang dilengkapi dengan besi kolom hanya rusak-rusak.
              • Namun, kekuatan bangunan yang dilengkapi dengan kolom besi juga tidak menjamin dapat meminimalisasi dampak getaran gempa apabila pemasangan dan konstruksinya tidak sesuai dengan prinsip ’detailing’
              • Prinsip "detailing" di antaranya adalah proses pemasangan sambungan antarbesi kolom, karena para pekerja bangunan biasanya kurang memerhatikan bahwa pemasangan antarbesi harus dikait silang, karena pertimbangan kepraktisan.
              • Pekerja bangunan sering memasang sambungan antarbesi kolom secara seadanya, padahal kekuatan dan kelenturan yang dihasilkan juga dipengaruhi oleh kekuatan sambungan
              • Selain itu, sebuah bangunan dalam jarak tertentu harus diperkuat dengan bingkai berupa besi kolom, idealnya setiap jarak 12 meter persegi, untuk mengikat dan memperkuat antardinding agar tidak mudah runtuh.
              • Material yang digunakan berupa campuran semen, pasir, dan kricak (kerikil) juga harus ditakar dengan perbandingan 1:2:3, dan air yang digunakan sebaiknya memiliki takaran 0,4-0,45 persen, jangan terlalu banyak
              • pemasangan atap menggunakan bahan yang ringan, misalnya asbes dan seng, juga dapat meminimalkan gempa, jika dibanding penggunaan genting, terutama untuk menghadapi gempa yang bersifat vertikal.
              • Secara prinsip, konstruksi rumah tahan gempa jika terkena getaran atau energi yang muncul memang dapat mengalami kerusakan, namun tidak langsung hancur lebur yang membahayakan penghuninya
              Semoga dengan tulisan ini bisa bermanfaat dan mulai saat ini kita harus berfikir lebih jernih dalam hal perencanaan/pelaksanaan pembangunan karena ketidak perdulian dan ketidak tahuan tentang konsep struktur bangunan bisa berakibat fatal.

              Monday, November 2, 2009

              Membuat Recent Comment dengan Java Script

              Cara membuat/menambah recent comment pada blog ini aku ambil dari blog sahabat SC-Community , sangat menarik dan cukup sederhana buat kamu yang tidak mau pusing dengan mengedit HTML, cukup dengan tambah Gadget copy paste sudah jadi... MUDAH kan..!

              Ikuti langkah berikut untuk lebih jelasnya :
              • Dari halaman Dashboard blog kamu pilih Tata Letak (Layout).
              • Setelah masuk ke Elemen Halaman, klik Tambah Gadget.
              • Setelah itu pilih HTML/JavaScript.
              • Masukan kode script berikut :  

              <script style="text/javascript" src="http://sites.google.com/site/kibagusnet/x-design/rccomments-kbs.js"></script>
              <script style="text/javascript">
              var numcomments = 20;
              var showcommentdate = true;
              var showposttitle = true;
              var numchars = 100;
              var standardstyling = true;
              </script>
              <script src="http://blog kamu sendiri.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

              Keterangan variabel:
              1. var numcomments = 10; jumlah komentar yang ditampilkan.
              2. var showcommentdate = true; tanggal komentar ditampilkan.
              3. var showposttitle = true; menampilkan judul posting yang dikomentari.
              4. var numchars = 100; banyaknya karakter (huruf)
              5. http://blog kamu.blogspot.com ganti dengan blog kamu sendiri

              mudah sederhana tapi menarik... anda tertarik silakah mencoba... Gratis...!!