Home » Posts filed under Post Blog
Tampilkan postingan dengan label Post Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Post Blog. Tampilkan semua postingan

Cara membuat kotak komentar diblog

Pada halaman terakhir blog sering kita jumpai box/kotak yang berisikan tulisan “Tulis komentar disini”, yang artinya setiap pengunjung bisa memberikan komentar atas kunjungannya di blog tersebut, kolom komentar biasanya sudah disediakan pada masing-masing tempelate, namun oleh kalangan blogger sering didesign ataupun diganti tampilannya sedemikian rupa sehingga tampilan blog lebih menarik, adapun cara menganti box/kotak komentar sebagai berikut:


  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> atau (gunakan tombol CTRL + F untuk mempermudahkan pencarian kode)
  7. Copy dan paste kode dibawah ini dan letakkan diatas kode ]]></b:skin>
  8. Klik Pratinjau utnuk melihat apabila ada kesalahan dan selanjutnya klik Simpan

    9.  /* CSS Komentar */
    #form-wrapper {margin-top:20px;}
    #comments{overflow:hidden;}
    .comments {clear: both;padding: 20px 30px 30px;margin: 10px 0px;background: none repeat scroll 0% 0% rgb(34, 34, 34);    border: 1px solid rgb(51, 51, 51);box-shadow: 0px 0px 3px black inset;color: white;}
    #comments h4{display:block;padding:5px;line-height:30px}
    #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
    #comments h4{background:rgba(255, 0, 0, 0.2); text-align:center;}
    #comments h4,.comments .user a{font-size:14px}
    #comments h4{font-weight:normal;color:#fff}
    #comments h4:after{content:"";position:absolute;bottom:-10px;left:20px;width: 0px;height: 0px;border-style: solid;
    border-width: 10px 7.5px 0 7.5px;border-color: rgba(255, 0, 0, 0.2) transparent transparent transparent;line-height:0}
    h4#comment-post-message {display:none}
    #comments .avatar-image-container img {border: 0px none; padding: 0px;box-shadow: none;border-radius: 30px;-webkit-border-radius:30px;-moz-border-radius:30px;}
    .comments .comments-content .datetime { float: right; font-size: 10px; margin-right:4px}
    .comments .comments-content .comment:first-child {padding-top: 0px;}
    .comments .thread-toggle { display: none;}
    .comments .comment .comment-actions a {padding: 2px 10px;background: rgb(51, 51, 51);border: 1px solid rgb(70, 70, 70);position: absolute;box-shadow: 0px 1px 2px black;color:rgb(230, 230, 230);-webkit-transition: all .05s linear;-moz-transition: all .05s linear;-o-transition: all .05s linear;transition: all .05s linear;}
    .comments .comment .comment-actions a:hover {background: none repeat scroll 0% 0% rgb(40, 40, 40);border: 1px solid rgb(51, 51, 51);text-decoration: none;box-shadow: 0px 0px 1px black;}
    .comment-thread{color:rgb(230, 230, 230); font-size:13px;}
    .comment-thread a{color:#777}
    .comment-thread ol{margin:0 0 20px}
    .comment-thread .comment-content a, .comments .user a, .comments .comment-thread.inline-thread .user a {color: rgb(230, 230, 230);font-weight: bold;font-size: 13px;text-shadow: 1px 1px rgb(0, 0, 0);}
    .comments .avatar-image-container, .comments .avatar-image-container img {width: 45px;max-width: 100%;height: 45px;    max-height: 100%;margin: 0px 0px 3px;vertical-align: middle;border: 1px solid rgb(51, 51, 51);padding: 4px;box-shadow: 0px 1px 2px black;background-color: transparent;background-clip: content-box;transition: all 0.5s ease-out 0s;border-radius: 30px 0px 0px 30px;-webkit-border-radius:30px 0px 0px 30px;-moz-border-radius:30px 0px 0px 30px;overflow:hidden;}
    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:58px}
    .comments .comment-block{ border: 1px solid rgb(51, 51, 51);padding: 6px;background: none repeat scroll 0% 0% rgb(40, 40, 40);box-shadow: 0px 1px 2px black;position: relative;    transition: all 1s ease-out 0s;}
    .comments .comments-content .comment-header {margin: 2px 0px 0px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment-content {margin: 2px 0px 10px; padding: 5px 10px 7px; border: 1px solid rgb(65, 65, 65);background-color: rgb(51, 51, 51); word-wrap: break-word; }
    .comments .comments-content .comment{margin:20px 0 0;padding:0;width:100%;line-height:1em}
    .comments .comments-content .comment-thread {margin: 20px 0px;}
    .comments .comments-content .icon.blog-author{display:block;  width:0;  height:0;  border:13px solid transparent;  border-right-color:rgba(255, 0, 0, 0.1);  position:absolute;  right:-1px;  bottom:4px;animation:author-icon .9s infinite;-moz-animation:author-icon .9s infinite; -webkit-animation:author-icon .9s infinite; }
    .comments .comments-content .inline-thread{padding:0 0 0 20px}
    .comments .comments-content .comment-replies{margin-top:0}
    .comments .comment-content{padding:5px 0;line-height:1.4em}
    .comments .comment-thread.inline-thread{border-left: 1px solid rgb(20, 20, 20);background: none repeat scroll 0% 0% transparent;box-shadow: -1px 0px 0px rgb(51, 51, 51);}
    .comments .comment-thread.inline-thread .comment{width:auto}
    .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
    .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
    .comments .comment-thread.inline-thread .user a{font-size:13px}
    .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
    .comments .continue{border-top:0;width:100%}
    .comments .continue a, .comments .comments-content .loadmore a {background: none repeat scroll 0% 0% rgb(40, 40, 40);
    font-size: 16px;font-weight: normal;color: rgb(255, 255, 255);padding: 10px 0px;text-align: center;box-shadow: 0px 1px 2px black;
    text-transform: capitalize;text-shadow: 1px 1px rgb(0, 0, 0);-webkit-transition: all 0.26s ease-out 0s;-moz-transition: all 0.26s ease-out 0s;-o-transition: all 0.26s ease-out 0s;transition: all 0.26s ease-out 0s;border: 1px solid rgb(59, 59, 59);}
    .comments .continue a:hover, .comments .comments-content .loadmore a:hover{box-shadow: 0px 0px 1px black;}
    .comments .continue a:active, .comments .comments-content .loadmore a:active{box-shadow: none;background:rgb(70, 70, 70);}
    .comments .comments-content .loadmore {margin-top:0px;}
    .comment .continue{display:none}
    #comment-editor{width:103%!important;}
    .comment-form{width:100%;max-width:100%;margin-top:20px;}

    Demikian postingan saya kali ini mudah – mudahan bisa bermanfaat 
1 komentar:

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

Cara membuat postingan diblogger

Dalam membuat postingan blog di Blogger sebaiknya persiapkan dulu artikel yang dimasukkkan di post postingan di Word Microsoft office atau tempat lainnya dan jangan lupa kode HTMLnya sehingga kita biasa copy paste artikel kita ke pos blog setelah itu lanjut kelangkah berikutnya seperti langkah cara membuat postingan blog di blogger di bawah ini.

Berikut langkah-langkahnya :
  1. Login dulu  di blogger
  2. Sesudah anda Masuk dan melihat halaman utama Blogger lalu klik "Pos" tanda "Pensil Orange" atau klik tanda panah kebawah hitam yang berada disamping kanan seperti gambar di bawah dan arahkan krusor klik "Pos"


  3. Selanjutnya klik "Entri Baru"


  4. Kemudian akan muncul "Media" untuk menulis artikel, seperti gambar dibawah ini.


Keterangan
  1. Entri (1) : Isi dengan kalimat judul postingan
  2. Kolom pos (2): Media untuk menulis artikel
  3. Kolom editing (3) : Untuk mengedit artikel sesuai keinginan

Setelan Entri (4)
  1. Label: Berfungsi untuk mengkategorikan postingan Misalnya membuat judul Entri "Cerita Ketimun Emas" jadi kategorinya “cerita anak"
  2. Jadwal: Disini ada dua pilihan apakah otomatis atau Setel tanggal dan waktu tentukan sendiri
  3. Tautan permanen: Akan ada dua pilihan yaitu Tautan Permannen otomatis : Dipergunakan untuk membuat URL Link yang menjadi URL postingan dan Tautan permanen khusus dipergunakan untuk membuat Link Khusus (sebaiknya gunakan tautan Permanen otomatis untuk URL
  4. Lokasi: Sebagai petunjuk dimana lokasi saat menulis artikel tersebut.
  5. Pilihan: Untuk pengaturan tingkat lanjut dan lebih baik menggunakan pengaturan aslinya saja

Opsi Lainnya (5)
  1. Publikasikan: Untuk mempublikasikan artikel ke blog
  2. Simpan: Untuk menyimpan artikel dalam bentuk draft atau rancangan
  3. Pratinjau: Untuk melihat tampilan pada blog sebelum dipublikasikan
  4. Tutup: Untuk menutup jendela apabila tidak jadi di publikasikan sehingga tulisan akan tersimpan menjadi draf

Tidak ada komentar:
Langganan: Postingan (Atom)