Rabu, 02 Mei 2012

Cara Membuat Scroll Bar di Posting Blog

Scroll Bar di Posting Blog
 Cara Membuat Scroll Bar di Posting Blog - Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi Fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat, intinya tampilan posting blog kita jadi singkat dan dinamis.

 Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa sobat copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog.

 Berikut Kode Script Scroll Bar Posting Blog:


<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'>

LETAKKAN TULISAN SOBAT ATAU APAPUN DISINI.
(Tulisan ditulis di COmpose, sedangkan Kode di Tulis pada mode Edit HTML)

</div>

Catatan:
  • Ingat, Sobat Tulis  pada mode Edit HTML, bukan Compose.!!!
  • Untuk melihat dan mengecek berhasil atau tidak, silahkan sobat klik Compose.
  • height:200px; adalah ukuran lebar atas bawah kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
  • width: auto; adalah ukuran otomatis lebar samping kotak scroll, silahkan sobat ganti nilainya, seperti keinginan sobat.
  • border:1px solid adalah ukuran tebal garis kotak scroll, silahkan sobat ganti nilainya, seperti yang sobat inginkan.
  • #000000 adalah Kode warna pada garis kotak scroll, silahkan sobat ganti Kode warnanya seperti yang sobat inginkan.
 Demikian artikel ringan tentang Cara Membuat Scroll Bar di Posting Blog, semoga bermanfaat buat sobat KUCOPAS semua.


Cara Membuat Footer Multi Kolom di Blog


footer 4 kolom Cara Membuat Footer Multi Kolom Blog - Multi kolom yang akan saya jelaskan disini maksudnya bisa di buat menjadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan dan keinginan sobat untuk membuatnya.


 Bagi sobat yang ingin memperbanyak ruang kolom pada bagian footer template blog sobat. Langsung saja kita mulai langkah-langkahnya sebagai berikut:

1. Silahkan sobat >> "Login/ Masuk" ke >> Blog sobat.
klik >> "Design Template" >>" Edit HTML".

2. "Back up" template sobat dengan klik pada "Download Full Template" agar sobat bisa mengembalikan template sobat ke kondisi semula jika terjadi kesalahan atau hasilnya tidak memuaskan seperti yang sobat inginkan.

3. Kalau sudah, jangan lupa Centang "Expand Template Widget" Kemudian sobat cari kode ]]></b:skin> , Gunakan CTRL+F untuk mempermudah pencarian.

4. Langkah selanjutnya silahkan sobat tambahkan atau taruh kode dibawah ini di atas atau sebelum kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Jika sudah, Sobat cari kode dibawah ini. Gunakan CTRL+F untuk mempermudah pencarian.

<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

6. Silahkan sobat Tambahkan atau taruh kode berikut dibawah kode <b:section class='footer' id='footer'showaddelement='yes'/> atau <b:section class='footer' id='footer' />

Keterangan:
Jika sobat tidak menemukan kode <b:section class='footer' id='footer'showaddelement='yes'/> maka Sobat tambahkan atau taruh saja kode berikut setelah atau dibawah kode <div id='footer'>


Jika sobat ingin membuat footer 2 kolom. silahkan sobat gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div style='clear:both;'/>
</div>

Jika sobat ingin membuat footer 3 kolom. silahkan sobat gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

Jika sobat ingin membuat footer 4 kolom. silahkan sobat gunakan kode berikut:

<div id='footer-column-divide'>

<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>

<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>

<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
</div>

7. Kalau sudah, silahkan sobat klik "Pratinjau" atau "Preview", Untuk menghindari kesalahan saat Edit Template.


8.  jika hasilnya sudah bagus seperti yang sobat inginkan dan Edit Template tidak eror, Silahkan sobat klik "Save Template" atau "Simpan Template", Lalu klik "Page Element" atau "Tata Letak" untuk melihat hasilnya.
Jika sobat berhasil, maka hasilnya akan menjadi seperti gambar di bawah ini.

Footer 2 kolom

footer 2 kolom
Footer 3 kolom

footer 3 kolom
Footer 4 kolom

footer 4 kolom
 Demikian tutorial tentang Cara Membuat Footer Multi Kolom Blog , Semoga bermanfaat untuk sobat KUCOPAS semua.


Minggu, 29 April 2012

Cara Membuat Dan Memasang Auto Scroll Di Blog

 Cara Membuat Dan Memasang Auto Scroll Di Blog - Kali ini saya akan share artikel ringan tentang Cara Membuat Dan Memasang Auto Scroll Di Blog, Fungsi atau gunanya Auto Scroll adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat di blog.

AUTO SCROLL

 Cara Membuat Dan Memasang Auto Scroll Di Blog sangatlah mudah sekali, hampir sama seperti kita menulis di posting blog. Auto scroll ini bisa di pasang pada Sidebar maupun di postingan blog. Tapi jangan lupa sobat tulis atau taruh kode Auto scroll di bawah ini pada mode >> "Edit HTML".

 Berikut kode Auto scrollnya:


<div style='padding: 5px; overflow: auto; width: auto; height:200px;border:1px solid #000000'>

Taruh apa saja yang ingin sobat scroll di sini.

</div>


Keterangan:
  • height:200px; = Adalah ukuran lebar ke bawah pada kotak Auto Scroll, Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
  • border:1px = Adalah ukuran Tebal Garis tepi kotak Auto Scroll, Silahkan sobat ganti nilainya sesuai dengan keinginan sobat.
  • #000000 = Adalah Kode warna Hitam untuk garis tepi kotak Auto Scroll, Silahkan sobat ganti kode warnanya sesuai dengan keinginan sobat.

 Semoga artikel ringan tentang Cara Membuat Dan Memasang Auto Scroll Di Blog, Sangat bermanfaat buat sobat KUCOPAS semua.


Cara Membuat Menu Slide Melayang di Pinggir Blog

  Cara Membuat Menu Slide Melayang di Pinggir Blog - Pada posting sebelumnya saya share artikel tentang Cara Menu Drop Down Horisontal Melayang Di Blog, Dan kali ini saya akan berbagi lagi trik tentang Cara Membuat Menu Slide Melayang di pinggir blog.

 Fungsi Menu Slide Melayang di Pinggir Blog ini bisa sangat simpel dan mempercantik untuk blog sobat, karena menu ini cuma kelihatan judul menunya saja. Namun bila mouse diarahkan pada menu ini maka akan terjadi open slide dan akan memperlihatkan semu menu yang ada di dalamnya.

 Oke kita langsung saja ke intinya saja, Bagi sobat yang ingin tahu tentang Cara Membuat Menu Slide Melayang di pinggir blog, Silahkan sobat ikuti panduan dan langkah-langkahnya dibawah ini:

1. Silahkan >> "Login/Masuk" >> ke Blog sobat.

2.  Pilih >> "Rancangan" atau pilih >> "menu Template" pada Tampilan baru Blogger, Kemudian pilih >> "Lanjutkan" pilih >> "Edit HTML".

3. Back up template , untuk antisipasi kalau gagal saat Edit Template.

4. Jangan lupa sobat Centang >> "Expand Template Widget".

5. Langkah selanjutnya sobat cari kode </head>
Gunakan CTRL+F untuk mempermudah pencarian.

6. Kemudian Taruh semua kode script dibawah ini, tepat diatas atau sebelum kode </head>


    <script src='http://elmubarok.googlecode.com/files/floating1.js' type='text/javascript'/>

    <script>

    YOffset=150;

    XOffset=0;

    staticYOffset=30;

    slideSpeed=20

    waitTime=100;

    menuBGColor=&quot;red&quot;;

    menuIsStatic=&quot;yes&quot;;

    menuWidth=120;

    menuCols=3;

    hdrFontFamily=&quot;verdana&quot;;

    hdrFontSize=&quot;2&quot;;

    hdrFontColor=&quot;black&quot;;

    hdrBGColor=&quot;#FF0000&quot;;

    hdrAlign=&quot;left&quot;;

    hdrVAlign=&quot;center&quot;;

    hdrHeight=&quot;15&quot;;

    linkFontFamily=&quot;Verdana&quot;;

    linkFontSize=&quot;2&quot;;

    linkBGColor=&quot;white&quot;;

    linkOverBGColor=&quot;#FFFF99&quot;;

    linkTarget=&quot;_top&quot;;

    linkAlign=&quot;Left&quot;;

    barBGColor=&quot;red&quot;;

    barFontFamily=&quot;Verdana&quot;;

    barFontSize=&quot;2&quot;;

    barFontColor=&quot;white&quot;;

    barVAlign=&quot;center&quot;;

    barWidth=20; // no quotes!!

    barText=&quot;MENU&quot;;

    // ----- Mulai Edit Menu

    ssmItems[0]=[&quot;OPTION :&quot;] //Header Menu

    ssmItems[1]=[&quot; Home&quot;, &quot;/&quot;, &quot;&quot;]

    ssmItems[2]=[&quot; About Me&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[3]=[&quot; Tutorial Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[4]=[&quot; Tips Blog&quot;, &quot;http://kuc0pas.blogspot.com/&quot;,&quot;&quot;]

    ssmItems[5]=[&quot; Buku Tamu&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;_new&quot;]

    ssmItems[6]=[&quot; Trik Facebook&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

    ssmItems[7]=[&quot; Sport&quot;, &quot;http://kuc0pas.blogspot.com/&quot;, &quot;&quot;]

    buildMenu();

    //----- Selesai Edit Menu

    </script>


7. Silahkan sobat klik >> "Pratinjau" (Preview), jika hasilnya sudah seperti yang sobat inginkan, kemudian klik "Simpan" dan lihat hasilnya.

Keterangan:
  • Warna BIRU ganti dengan Judul Menu sobat.
  • Warna MERAH ganti dengan URL link sobat.
 Semoga tutorial tentang Cara Membuat Menu Slide Melayang di Pinggir Blog, Sangat bermanfaat untuk sobat KUCOPAS semua.


Cara Membuat Menu Drop Down Horisontal Melayang Di Blog

  Cara Membuat Menu Drop Down Horisontal Melayang Di Blog - Kali ini saya akan share artikel tentang Cara membuat Menu di Blog, Namun menu yang akan saya kasih triknya ini sangat mudah untuk membuat dan memasangnya di blog, karena sobat tidak akan menggunakan Edit Template, cukup hanya dipasang pada Tata Letak Atau Rancangan Blog saja, Menu yang saya maksud adalah Menu Drop Down Horisontal Melayang Di Blog.

 Untuk Cara Membuat Menu Drop Down Horisontal Melayang di Blog, Silahkan sobat ikuti langkah-langkahnya sebagai berikut:
1. Silahkan >> "Login/Masuk" ke akun blog sobat.

2. Kemudian pilih >> "Rancangan" atau "Tata Letak" >> "Tambah gadget", Lalu pilih >> "HTML/ java script".

3. Langkah selanjutnya silahkan sobat masukkan semua kode script berikut di bawah ini:


<style type="text/css">

#kucopas ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 15px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 15px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#kucopas li .current{color: transparant;}#kucopas li a:hover, #kucopas li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 15px 8px;text-decoration: none;}#kucopas {width: auto;float: left;margin: 0;padding: 0;}#kucopas {margin: 0;padding: 0;}#kucopas ul {float: left;list-style: none;margin: 0;padding: 0;}#kucopas li {list-style: none;margin: 0;padding: 0;}#kucopas li a, #kucopas li a:link, #kucopas li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 15px 8px;font: Bold 15px Georgia, Arial;}#kucopas li a:hover, #kucopas li a:active {background:transparant;color: #ffffff;margin: 0;font-size:20px;padding: 9px 15px 8px;text-decoration: none;}#kucopas li li a, #kucopas li li a:link, #kucopas li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 250px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);-o-transform:rotate(10deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px kristen itc, Arial;}#kucopas li li a:hover, #kucopas li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:20px;font-family:kristen itc;text-align: center;padding: 7px 10px;}#kucopas li {float: left;padding: 0;}#kucopas li ul {z-index: 9999;position: absolute;left: -999em;height: 20px;width: 170px;margin: 0;padding: 0;}#kucopas li ul a {width: 140px;}#kucopas li ul ul {margin: -32px 0 0 171px;}#kucopas li:hover ul ul, #kucopas li:hover ul ul ul, #kucopas li.sfhover ul ul, #kucopas  li.sfhover ul ul ul {left: -999em;}#kucopas  li:hover ul, #kucopas  li li:hover ul, #kucopas  li li li:hover ul, #kucopas  li.sfhover ul, #kucopas  li li.sfhover ul, #kucopas  li li li.sfhover ul {left: auto;}#kucopas  li:hover, #kucopas  li.sfhover {position: static;}#footer-column-divide {clear:both;}#kucopas{font-family:Comic Sans Ms;background:#000  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXYNZ3dGvHwjANsNM_prSzTCE5cgZVcjOmvYyeOrzlTiVOGyDdMDQ8rp6teuYrF0LlNWkaabo5y2rlwFHQp6xKpky_R4SnTR1O0jqY_1ClwYBp745lhJnYOnik6nJw-mV3PrTJOR35-Lh8/)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:1px;right:1px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}

</style>

<div id='kucopas'>

<ul id='kucopas'>

<li><a href='http://kuc0pas.blogspot.com/'>Home</a></li>

<li><a href='Ganti link sobat' target='_blank'>Daftar Isi</a></li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>Download</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Download Aplikasi</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Game</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Icon</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download MP3</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Software</a></li>

<li><a href='Ganti link sobat' target='_blank'>Download Template</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'>VIDEO</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>VIDEO FILM</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO ORKES</a></li>

<li><a href='Ganti link sobat' target='_blank'>VIDEO LAGU</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' target='_blank'>Tips And Triks</a>

<ul class='children'>

<li><a href='Ganti link sobat' target='_blank'>Tips Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Facebook</a></li>

<li><a href='Ganti link sobat' target='_blank'>Trik Handpone</a></li>

<li><a href='Ganti link sobat' target='_blank'>Pernak-pernik Blog</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/'>Tutorial Blog</a>

<ul class='children' target='_blank'>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Blogger</a></li>

<li><a href='Ganti link sobat' target='_blank'>Tutorial Photosop</a></li>

</ul>

</li>

<li><a href='Ganti link sobat' title='tv online' target='_blank'>Tv Online</a>

<ul class='children'>

<li><a href='Ganti link sobat'>INDOSIAR</a></li>

<li><a href='Ganti link sobat' target='_blank'>RCTI</a></li>

</ul>

</li>

<li><a href='http://kuc0pas.blogspot.com/' target='_blank'><blink>Tukar Link Blog</blink></a></li>

<li><a href='www.geonggeong.com' title='GEONG GEONG' target='_blank'><blink>GEONG GEONG</blink></a></li>

</ul>
</div>


4. Silahkan sobat Simpan dan Lihat hasilnya.

Keterangan:
  • Silahkan sobat ganti Link Url nya yang berwarna PINK dengan URL yang sobat inginkan.
  •  Warna MERAH adalah Menu yang akan di tampilkan, silahkan sobat ganti.
 Semoga artikel tentang Cara Membuat Menu Drop Down Horisontal Melayang Di Blog, sangat bermanfaat untuk sobat KUCOPAS semua.



Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More