Home » All posts

Cara membuat tulisan berjalan diblog

Cara membuat tulisan berjalan diblog seperti tulisan yang bergerak kekiri atau kekanan, keatas atau kebawah dan sebagainya, untuk membuatnya tidaklah terlalu sulit yang penting teliti cara memasangnya dan penempatannya diblog, untuk menempatkannya bisa di post blog atau side bar sesuai keinginan dan kebutuhan, tertarik dengan tulisan berjalan coba ikuti cara dibawah ini :

  1. Sign in diblogger
  2. Klik Opsi lainnya (untuk memasang di Sidebar)
  3. Klik Tata letak
  4. Klik Tambah gadget dan cari HTML/Javascript
  5. Masukkan kode marquee yang diinginkan
  6. Klik Simpan
  7. Untuk memasang di Postingan >> klik Entri baru >>Pasang kode Marquee>>Pratinjau>>Simpan

    8. Contoh Tulisan Marquee

    Tulisan yang bergerak dari kanan ke kiri

     <marquee direction="left" scrollamount="4" align="center">Kekanan dan kekiri</marquee>

    Kekanan dan kekiri

    Tulisan yang bergerak dari kiri ke kanan

    <marquee align="center" direction="left" scrollamount="4"> Kekiri dan kekanan </marquee>

    Kekiri dan kekanan

    Tulisan yang bergerak dari atas ke bawah

    <marquee align="center" direction="down" scrollamount="4"> Atas - bawah </marquee>

    Atas - bawah

    Tulisan yang bergerak dari bawah ke atas

    <marquee align="center" direction="up" scrollamount="4"> Contoh Tulisan Berjalan </marquee>

    Contoh Tulisan Berjalan

    Tulisan bergerak bolak balik atau mondar - mandir dari kiri ke kanan

    <marquee align="center" behavior="alternate" direction="left" scrollamount="4"> Mondar  - mandir</marquee>

    Mondar - mandir

    Tulisan yang bergerak bolak balik atau mondar - mandir dari kanan ke kiri

    <marquee align="center" behavior="alternate" direction="right" scrollamount="4"> Mondar  - mandir</marquee>

    Mondar - mandir

    Untuk menambah link pada marquee stop, gunakan kode berikut :

    <marquee direction="left" onmouseout="this.start()"onmouseover="this.stop()" scrollamount="2"><a href="http://ketutjoel.blogspot.com/2012/07/cara-membuat-teks-berjalan-di-blog.html" target="_blank">Cara Membuat Tulisan Berjalan di Blog</a></marquee>


    Menambah background, padding, border, color, memperbesar tulisan pada marquee bisa menggunakan kode sebagai berikut :

    <div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 50px; font-weight: bold; height: 70px; letter-spacing: 0.5em; padding: 15px; width: 500px;"> <marquee align="center" direction="left" scrollamount="6">Contoh Tulisan Berjalan</marquee></div>

    Contoh Tulisan Berjalan

    Untuk Membuat menu menggunakan kode sebagai berikut:

    <div style="background-color: white; border: 2px solid #FF0000; height: 100px; overflow: auto; padding: 10px; width: 90%;">
    <marquee align="justipy" direction="up" height="100" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="2" width="100%">
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    <li><a href="URL alamat Blog">Judul Blog </a></li>
    </marquee></div>



    Keterangan

    1. Direction = Mengatur pola gerakan tulisan (left, right, up dan down)
    2. Scrollamount = Mengatur kecepatan gerakan tulisan
    3. Behavior ( scroll/slide/alternate ): Mengatur prilaku gerakan tulisan.
    4. Warna Merah Ganti dengan URLnya kawan

8 komentar:

Cara menghapus tulisan Langganan Entri dan Diberdayakan oleh Blogger

Pada Tempelate blogger yang letaknya paling bawah sering kita jumpai link dengan tulisan “Langganan Entri : Atom” dan “Diberdayakan oleh : Blogger” Tulisan tersebut sebenarnya bisa dihilangkan/disembunyikan kalau tidak berkenan untuk menampilkannya. Apabila kita memakai blogger template, footer ini secara default akan memuat atribut Blogger sehingga tampil tulisan tersebut akan ditampilkan diblog kita. Itu semua karena template memang sudah di desain seperti itu. untuk menghilangkan ataupun menyembunyikan tulisan 'Diberdayakan oleh blogger' dibagian footer tempelate dapat dilakukan langkah-langkah sebagai berikut :


  1. Sign in Ke blogger .
  2. Klik Opsi lainnya.
  3. Klik Tempelate
  4. Klik Edit HTML.
  5. Cari Kode ]]></b:skin>   (biar lebih gampang gunakan tombol CTRL+F.)
  6. Kemudian copy dan paste kode dibawah ini dan letakkan diatasnya.
  7. Klik Simpan

    8. /* Langganan Entri
    ----------------------------------------------- */
    .feed-links{
    display:none;
    }



    /* Diberdayakan oleh
    ----------------------------------------------- */
    #Attribution1 {
    height:0px
    visibility:hidden;
    display:none }

    Demikian postingan kali ini dan kalau berkenan silahkan dicoba, mungkin dengan menyembunyikan atribut blogger sehingga bisa meminimalisir pengunjung yang iseng terhadap blognya kawan.

    Selamat mencoba

5 komentar:

Cara menghapus tulisan Beranda, Postingan Lama dan Postingan Baru diblog

Pada tempelate yang asli yang merupakan bawaan dari design itu sendiri pada bagian bawah blog sering kita jumpai tulisan Beranda (Home), Postingan Lama dan Postingan Baru, terkadang ada yang berpendapat tulisan tersebut membuat blog gagah dan keren, disamping itu kita merasa kurang nyaman untuk melihatnya, oleh karena itu pada postingan saya kali ini mencoba untuk membagi pengalaman cara menghilangkan tulisan tersebut. Caranyapun cukup mudah dengan langkah - langkah sebagai berikut :


  1. Sign in Ke blogger .
  2. Klik Opsi lainnya.
  3. Klik Edit HTML.
  4. Centang tulisan Expand Widget Templates
  5. Cari Kode dibawah ini satu persatu (biar lebih gampang gunakan tombol CTRL+F.)
  6. Untuk menghilangkan tulisan Beranda, Postingan Lama dan Postingan Baru pada tampilan blog Hapuslah Kode-kode dibawah ini
  7. Tetapi bila ingin Mengganti dengan gambar, Silahkan hapus kode - kode dibawah ini dan ganti dengan URL gambar yang sudah diupload sebelumnya
  8. Klik Pratinjau untuk melihat kesalahan
  9. Apabila sudah terjadi perubahan yang diinginkan klik Simpan

    10. Kode HTML
    		 Tidak ditampilkan          URL gambar
    <data:newerPageTitle/>     Hapus Kode ini  Ganti dgn URL gambar  
    <data:olderPageTitle/>   Hapus Kode ini  Ganti dgn URL gambar
    <data:homeMsg/>    Hapus Kode ini  Ganti dgn URL gambar

    NB: jika terdapat 2 code , hapus kode yang berada dibagian atas, dan ketiga kode tersebut diatas biasanya posisinya berdekatan

    Demikian postingan saya kali ini semoga bermanfaat.

6 komentar:

Cara membuat daftar isi bergerak diblog

Menu model ini akan bergerak berganti post dari atas ke bawah dan akan muncul postingan kita dari yang terdahulu sampai yang terbaru, dan cara pembuatannya pun sangat mudah, tinggal ikuti langkah berikut ini:
  1. Sign In diblogger
  2. Klik Opsi lainnya dan klik Tata Letak
  3. Klik Tambahkan Gadget/Add Gadget
  4. Cari dan klik HTML/JavaScript
  5. Copy Paste kode di bawah ini
  6. Klik Simpan

    7. <div style="background-color: white; border: 1px solid rgb(0, 0, 0); height: 300px; width: 300px; overflow: auto;">
    <div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:300px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div></div></div>


    Contoh Gambar


    Keterangan :
    1. Warna Merah = Backround menu
    2. Warna Hijau = tinggi dan lebar gambar dalam menu yang di tampilkan, ganti sesuai selera
    3. warna Biru = adalah kecepatan untuk berpindahnya post ke post lain, ganti sesuai selera
    4. warna Orange = jumlah post yang akan di tampilkan di recent post, ganti sesuai selera
    Silahkan dicoba apabila berminat

13 komentar:

Cara membuat 3 kolom gadget dibawah header

Pada postingan kali ini kita akan membahas cara menambah 3 kolom Gadget dibawah header, caranya sangat mudah sekali, ikuti langkah - langkah berikut ini :


  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)
  7. Copy paste kode CSS dibawah ini dan letakan diatas kode ]]></b:skin> 

    8. <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>\

  8. Setelah itu cari kode dibawah ini :

    1. <div id='main-wrapper'>  atau kode
    2. <div id="main-outer"> atau kode
    3. <div class='main-outer'>  sesuai dengan versi HTML nya kawan (gunakan tombol CTRL + F3 untuk mempermudahkan pencarian kode)

  9. Copy paste kode dibawah ini dan letakan diatas salah satu kode diatas

    10. <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
    </div>
    <div style='clear:both;'/>
    </div>

  10. Kli Pritinjau, siapa tahu ada kesalahan
  11. Klik Simpan

    12. Selamat mencoba

1 komentar:

Cara membagi header menjadi 2 kolom

Untuk membuat 2 kolom header biasanya dipergunakan untuk menyimpan iklan, menu share social media, dan lainnya sehingga tampilan blog menjadi lebih gagah, jika ingin membuat dan menambahkan 2 kolom header silahkan ikuti cara dibawah ini dan semoga tutorial saya kali ini bisa membantu keinginannya kawan :


  1. Sign in di blogger
  2. Klik Opsi lainnya
  3. Klik Templete
  4. klik Edit HTML
  5. Centang tulisan Expand Widget Templates
  6. Cari Kode CSS .header-outer (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)

    7. .header-outer {
     background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;} 

  7. Setelah menemukan kode seperti di atas, block kode tersebut kemudian hapus dan ganti dengan kode dibawah ini

    8. .header-outer {
    background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
     _background-image: none;    min-height: 160px;
    } 
    #header {
    width: 45%;
    margin-right: 10px;float: left;
    }
    #tsa-headerbaru {
    float: right;
    width: 47%;
    margin: 20px 10px 5px 10px;
    padding: 2px;}
    #tsa-headerbaru {margin: 3px;
    }

    Keterangan

    1. min-height: 160px; = Tinggi tampil di header anda adalah sebesar 160px, ganti sesuai selera
    2. width: 47% = Lebar Header kanan atau yang baru ditambahkan dan ada 8% ruang antar header.
    3. width: 45%;. = Lebar Header kiri

  8. Setelah mengatur kode CSS tersebut diatas selanjutnya cari kode dibawah ini:

    9. <div class="region-inner header-inner">

  9. Setelah anda temukan kode  <div class="region-inner header-inner"> tempatkan kode dibawah ini diatas kode tersebut diatas

    10. <b:section class="tsa-headerbaru" id="tsa-headerbaru" maxwidgets="1" showaddelement="yes"></b:section>

  10. Setelah selesai, simpan dan tutup template

    11. Selamat mencoba

15 komentar:

Cara membuat tabel diblog

Dalam membuat table/kolom dipostingan blog diperlukan untuk memasukan data agar tertata rapi dan data tersebut berurutan sesuai dengan kelompok data yang diinginkan. Pada pembuatan tabel harus berada dalam mode HTML (berdampingan dengan Compose) disaat melakukan postingan, untuk membuatnya ada beberapa hal yang harus kita ketahui tentang perintah tabel tersebut diantaranya :

<table border="1">
<tbody>
<tr>
<td></td> <td></td>
</tr>
</tbody></table>

Keterangan:
  1. <table>    = perintah untuk membuat table
  2. <border> = perintah untuk mengatur tebal garis pinggir
  3. <tr>        = perintah untuk membuat baris pada table
  4. <td>       = perintah untuk membuat kolom pada table

Cara membuat tabel :
  1. Sign in di Blog
  2. Klik Pos
  3. Klik HTML
  4. Copy kode dibawah ini dan paste ditempat postingan yang diinginkan
  5. Klik Pratinjau
  6. Klik Simpan
Contoh 1 tabel,
<table border="1">
<tr>
<td>Masukan data</td>
</tr>
</table>

Masukan data

Keterangan :
  1. Border = ketebalan garis
  2. Masukan data = Ganti dengan data nya kawan

Contoh 2 tabel.

<table border="1">
<tr>
<td>Masukan data</td><td>Masukan data</td>
</tr>
</table>

Masukan dataMasukan data

Keterangan :
  1. Border = ketebalan garis
  2. Width = lebar kolom
  3. Masukan data = Ganti dengan data nya kawan
Contoh penambahan tabel kesamping dan kebawah

<table border="1">
<tbody>
<tr>
<td align="center">No</td> <td align="center" width="300">Uraian</td> <td align="center">Debet</td> <td align="center">Kredit</td>
</tr>
<tr>
<td align="center">1</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>
<tr>
<td align="center">2</td> <td>Masukan data </td><td>Masukan data</td><td>Masukan data</td>
</tr>

No Uraian Debet Kredit
1 Masukan data Masukan dataMasukan data
2 Masukan data Masukan dataMasukan data

Keterangan :
  1. Border = ketebalan garis
  2. Width = lebar kolom
  3. Masukan data = Ganti dengan data nya kawan
  4. <td align="center"> = bentuk tulisan ditengah ganti sesuai selera
Contoh memisahkan tabel yang satu dengan yg lainnya :

<table border="1">
<tr>
<td align="center" colspan="3">Masukan data</td>
</tr>
<tr>
<td>Masukan data</td> <td>Masukan data</td> <td>Masukan data</td> 
</tr>
</table>

Masukan data
Masukan data Masukan data Masukan data

Keterangan :
  1. Border = ketebalan garis
  2. Masukan data = Ganti dengan data nya kawan
  3. <td align="center" colspan="3"> = bentuk tulisan ditengah ganti sesuai selera dan pemisah
Membuat Susunan Pengurus :

<table border="0">
<tr>
<td>Ketua</td> <td>:</td> <td>Angga Saputra</td> 
</tr>
<tr>
<td>Anggota</td> <td>:</td>  <td>Novi Marta</td><tr>
<tr><td> </td> <td>:</td>  <td>Desi Ratnawati</td></tr>
<tr><td> </td> <td>:</td>  <td>Oktarini</td></tr>
<tr><td> </td> <td>:</td>  <td>Mei Artalita</td></tr>
</tr> 
</table>



Keterangan :
  1. Border "0" = tidak garis
  2. Masukan data = Ganti dengan data nya kawan

Tidak ada komentar:
Langganan: Postingan (Atom)