Cara Membuat Teks Berjalan Dipostingan Blog

Membuat teks berjalan atau bahasa kerennya running teks, sangatlah mudah dan sederhana.

Bermacam-macam jenis dan model running teks.

Di bawah ini telah saya siapkan kode-kode untuk membuat teks berjalan dengan berbagai model.

Berikut panduan lengkapnya:

Masuk ke Dashboard Blog

Klik Entri Baru

Pilih HTML kemudian pilih dan copy salah satu model teks berjalan dan pastekan di kolom HTML

Ganti tulisan SETITIK OOM MASKUSYANI dengan teks yang di inginkan untuk di buat running teks.
(Untuk melihat hasilnya, klik pratinjau apakah teks bergerak sesuai yang di inginkan)

Untuk teks bergerak standar

                          <marquee>SETITIK OOM MASKUSYANI</marquee>

                                                         SETITIK OOM MASKUSYANI

Untuk menambah kecepatan teks

<marquee scrollamount="50">SETITIK OOM MASKUSYANI</marquee>

                                                        SETITIK OOM MASKUSYANI

Untuk merubah arah gerak teks dari kiri ke kanan

   <marquee direction="right" scrollamount="10">ASSYIFANIE COMMUNITY</marquee>          

Rubah "right ke left" untuk merubah arah gerak teks dan rubah angka untuk merubah kecepatan gerak teks

                                                      SETITIK OOM MASKUSYANI

Untuk membuat teks bergerak dan berhenti saat tersentuh kursor

                         </span><marquee onmouseout="this.start()" onmouseover="this.stop()">SETITIK OOM MASKUSYANI</marquee> 

                                                      SETITIK OOM MASKUSYANI

Untuk membuat teks bergerak bolak balik

                         <marquee behavior="alternate" scrollamount="15">SETITIK OOM MASKUSYANI</marquee>

Rubah angka untuk merubah kecepatan gerak teks.

SETITIK OOM MASKUSYANI

Untuk membuat teks bergerak dari bawah ke atas dan berhenti saat tersentuh kursor

                          <marquee direction="up" height="30" onmouseout="this.start()" onmouseover="this.stop()" scrollamount="3" width="200">SETITIK OOM MASKUSYANI</marquee>

                                                         SETITIK OOM MASKUSYANI

Untuk membuat tullisan berjalan dengan teks dan background berwarna

                          <span style="color: red; font-family: times; font-size: x-large;"><marquee behavior="scroll" bgcolor="YELLOW" direction="left" height="35px" scrollamount="8" scrolldelay="40" width="450px">SETITIK OOM MASKUSYANI</marquee></span>

Rubah "red" untuk merubah warna teks yang bergerak, rubah "yellow" untuk merubah background

SETITIK OOM MASKUSYANI

Cara Membuat Gambar Membesar Saat Tersentuh Kursor

Banyak macam trik dan tips dalam mengelola blog. Banyak juga inovasi-inovasi untuk mempercantik sebuah blog atau juga untuk membuat blog menjadi unik.

Pada postingan kali ini, saya akan membagikan trik agar blog terlihat sedikit keren dengan membuat gambar yang berada dalam postingan menjadi besar saat tersentuh kursor.

Mungkin juga sebagian dari kalian ada yang pernah melihat trik seperti yang akan saya terangkan.

Bagi yang berminat dengan trik ini, silahkan ikuti panduan berikut ini:

Login ke Blog

Pilih Tema

Pilih Edit HTML  (Jangan lupa klik backup/pulihkan untuk berjaga-jaga)

Pada kolom edit template cari kode ]]></b:skin>.

Untuk mempercepat pencarian kode klik kiri di mana saja lalu tekan CTRL+F maka akan muncul kolom pencarian di pojok kanan atas.

Masukan kode yang ingin di cari ke dalam kolom pencarian lalu tekan ENTER.

Pastekan kode di bawah ini tepat di atas kode ]]></b:skin>

.post img, table.tr-caption-container { border:none; max-width:560px; height:auto; -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.5); -o-transform: scale(1.5); -webkit-transform: scale(1.5); -webkit-border-radius: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

Klik Simpan Template

Demikian panduan membuat gambar membesar saat tersentuh kursor di blog
Semoga bermanfaat dan selamat mencoba.

Cara Membuat Gambar Berputar Dan Membesar Saat Tersentuh Kursor

Trik membuat gambar berputar dan membesar pada saat kursor menyentuh gambar,  mungkin sudah menjadi rahasia umum, karena banyak dari para blogger yang menggunakan trik seperti ini di dalam tulisan mereka dan hasilnya banyak dari para pengunjung yang menyukai efek ini.

Baca juga: Cara Merubah Bentuk Kursor Diblog

Selanjutnya bagaimana cara membuat efek ini...? Silahkan perhatikan langkah-langkah berikut ini:

Masuk ke Blog

Pilih Tema

Pilih Edit HTML (klik backup/pulihkan untuk berjaga-jaga)
Pada kolom edit HTML cari kode </head>

Untuk mempercepat pencarian kode, pada kolom html, klik kanan di mana saja lalu tekan CTRL+F Akan muncul kolom pencarian di pojok kanan atas.

Ketikan kode </head> di kolom pencarian lalu tekan Enter

Setelah menemukan kode tersebut pastekan kode script di bawah ini, tepat di atas kode </head>.

<style>#denzuaz img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out;}

#denzuaz img:hover{ -o-transform: scale(1.5) rotate(360deg); -moz-transform: scale(1.5) rotate(360deg); -webkit-transform: scale(1.5) rotate(360deg);}</style>

 Simpan Template.
Langkah selanjutnya

 Klik Entri Baru

Pilih HTML

Pada kolom HTML pastekan kode script di bawah ini:

<div id="denzuaz">

<a href="http://www.maskusyani.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi-UJW4HsZ77Oi9wspfNtCdBLNtKo7Lqag4x5AAUPBqz1B1-WkSJvjmCWE_n86jpBzon355H4VZ9M63GyHJqG8JpFnXGTXlMf6ZrNlwznQ0oXZrc1ZFkR7q_d_B_Y1ZFgse7vjNw3JAkc/w78-h140-p/IMG_20170128_080132.jpg" /></a></div>

Keterangan:
» Kode berwarna biru merupakan alamat blog, gantilah alamat tersebut dengan alamat blog kalian
» Kode berwarna merah merupakan URL gambar yang ingin kalian sisipkan

Klik Pratinjau untuk melihat gambar yang di pasang.

Untuk mencoba gambar bisa berputar dan membesar saat tersentuh kursor silahkan Publikasikan dulu artikel kalian.

Demikian artikel tentang Cara Membuat Gambar Berputar dan Membesar Saat Tersentuh Kursor.

Semoga bermanfaat dan selamat mencoba.

Cara Menyembunyikan Gambar Pada Postingan Blog

Mungkin kalian sering melihat pada sebuah blog atau web, ada sebuah gambar yang di sembunyikan dan untuk melihatnya anda harus mengklik kata view, lihat gambar atau dengan kata lainnya.

Membuat gambar tersembunyi bisa menjadi suatu alternatif bagi sebuah artikel yang terdapat banyak gambar, sehingga artikel tidak terlihat panjang.
Saya akan menjelaskan bagaimana cara untuk menyembunyikan suatu gambar pada artikel blog.

Sebagai sebuah contoh, klik "Lihat Gambar" di bawah ini untuk melihat gambar yang saya sembunyikan dan tutup gambar dengan cara klik "Tutup".

Tanpa basi basa, berikut langkah-langkahnya :

Masuk ke Blog

Klik Entri Baru

Pada kolom Compose tulis artikel yang hendak anda posting.

Pada saat anda hendak memasukan gambar yang mau di sembunyikan klik HTML

Pastekan kode script di bawah  artikel yang tadi telah kalian buat.

<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Lihat Gambar'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Lihat Gambar" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<img alt="mapk" class="aligncenter" height="auto" src="https://lh3.googleusercontent.com/-3QJgdHS_3YQ/WSTC5A4Uf0I/AAAAAAAAGQQ/JaQqA-42ZXUGOBqSXoe3OQj_uFgWFbiRgCEw/w140-h47-p/cooltext244893572103657.png" width="auto" />
</div>
<div id="hide">
</div>
</div>

Keterangan:

* Tulisan yang berwarna merah merupakan teks untuk tampilan pada kotak untuk lihat dan                     tutup     (view/close), 

   Kalian bisa mengubahnya sesuai keinginan.

* Tulisan yang berwarna hijau merupakan ukuran/size gambar yang akan ditampilkan nantinya, 

   Kalian bisa menyesuaikan ukurannya.

* Tulisan yang berwarna biru adalah url/link gambar yang akan disembunyikan. 

   Anda ganti dengan url gambar Anda yang ingin disembunyikan pada postingan blog.

Setelah kode script di pastekan, klik Pratinjau untuk melihat apakah tombol "Lihat Gambar" sudah muncul dan untuk mengatur posisi tombol "Lihat Gambar" anda bisa mengaturnya di kolom Compose. (pada kolom compose hanya terlihat garis kecil abu-abu tegak lurus bukan tulisan lihat gambar)

Untuk melihat gambar bisa terlihat setelah tombol Lihat Gambar di klik, artikel sudah harus di Publikasikan.

Semoga bermanfaat dan selamat mencoba.

Cara Membuat Popular Post Keren Warna Warni

Alasan kenapa widget Popular Post wajib di pasang di sebuah blog adalah karena membuat pengunjung mengetahui artikel atau postingan yang paling sering di baca di situs/blog anda.

Sejatinya widget Popular Post merupakan kumpulan artikel-artikel yang paling sering di baca pengunjung blog.

Banyak macam variasi widget Popular Post dari yang biasa sampai yang dimodifikasi atau  dari yang sederhana sampai yang berwarna-warni.

Di kesempatan kali ini, saya akan share cara membuat popular post keren warna warni.
Dengan tampilan yang banyak warna-warni, tentunya akan semakin mempercantik halaman blog

Baca juga: Cara Membuat Popular Post Sederhana

.

Bagi yang berminat, ikuti langkah-langkah berikut ini:

Masuk  ke blog

Klik Tata Letak 

Lalu Tambahkan Gadget

Klik Popular Post

Pada setingan Popular Post atur sesuai keinginan. (hilangkan centang pada Thumbnail dan Cuplikan kalau hanya akan menampilkan judul artikel saja)

Kemudian klik Simpan 

Selanjutnya Klik Tema

Klik Edit HTML (klik backup/pulihkan untuk berjaga-jaga)

Pada kolom HTML cari kode ]]></b:skin> 

Untuk mempercepat pencarian pada kolom edit HTML klik kanan di mana saja lalu tekan CTLR+F

Akan muncul kolom pencarian di pojok kanan atas

Ketikan kode yang di cari pada kolom pencarian lalu Enter

Setelah ketemu tempatkan kode berikut tepat diatas kode ]]></b:skin>
.

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}
#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}
#PopularPosts1 ul li:first-child:after,
#PopularPosts1 ul li:first-child + li:after,
#PopularPosts1 ul li:first-child + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}
#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

Langkah terakhir pilih Simpan

Demikian panduan tentang Cara-cara membuat popular post keren warna-warni.

Semoga bermanfaat dan selamat mencoba.

Cara Membuat Popular Post Keren Berwarna

Popular Post merupakan kumpulan artikel-artikel yang paling sering di baca pengunjung blog, dengan adanya widget Popular Post maka pengunjung blog mengetahui mana-mana artikel yang sering di baca atau di cari pengunjung lainya.

Banyak macam variasi widget Popular Post dari yang biasa sampai yang dimodifikasi atau  dari yang sederhana sampai yang berwarna-warni.

Di kesempatan kali ini, saya akan coba share cara membuat popular post keren berwarna.
Dengan memasang widgert Populer Post ini, tampilan halaman blog akan semakin terlihat indah dan cantik, yang tentunya akan menarik minat pengunjung.

Baca juga: Cara Membuat Popular Post Bergambar.

.
Penasaran dengan widget Popular Post ini..? 

Ikuti langkah-langkah berikut ini:

Masuk ke Blog
Klik Tata Letak kemudian Tambahkan Gadget
Pilih Popular Post
(pada settingan popular post centang thumbnail dan hapus centang cuplikan)
Kemudian klik Simpan

Langkah selanjutnya Klik Tema

Klik Edit HTML (klik backup/pulihkan untuk berjaga-jaga)

Pada kolom HTML cari kode ]]></b:skin> 

Untuk mempercepat pencarian pada kolom edit HTML klik kanan di mana saja lalu tekan CTLR+F

Akan muncul kolom pencarian di pojok kanan atas

Ketikan kode yang di cari pada kolom pencarian lalu Enter

Setelah ketemu tempatkan kode berikut tepat diatas kode ]]></b:skin>

.

isi dengan teks yang di inginkan
.PopularPosts ul,
.PopularPosts li,
.PopularPosts li img,
.PopularPosts li a,
.PopularPosts li a img {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  outline:none;
}

.PopularPosts ul {
  margin:.5em 0;
  list-style:none;
  font:normal normal 13px/1.4 "Arial Narrow",Arial,Sans-Serif;
  color:black;
  counter-reset:num;
}

.PopularPosts ul li img {
  display:block;
  margin:0 .5em 0 0;
  width:50px;
  height:50px;
  float:left;
}

.PopularPosts ul li {
  background-color:#eee;
  margin:0 10% .4em 0;
  padding:.5em 1.5em .5em .5em;
  counter-increment:num;
  position:relative;
}

.PopularPosts ul li:before,
.PopularPosts ul li .item-title a {
  font-weight:bold;
  font-size:120%;
  color:inherit;
  text-decoration:none;
}

.PopularPosts ul li:before {
  content:counter(num);
  display:block;
  position:absolute;
  background-color:black;
  color:white;
  width:30px;
  height:30px;
  line-height:30px;
  text-align:center;
  top:50%;
  right:-10px;
  margin-top:-15px;
  -webkit-border-radius:30px;
  -moz-border-radius:30px;
  border-radius:30px;
}

/* Set color & level */
.PopularPosts ul li:nth-child(1) {background-color:#E11E28;margin-right:1%}
.PopularPosts ul li:nth-child(2) {background-color:#FD3C03;margin-right:2%}
.PopularPosts ul li:nth-child(3) {background-color:#FECB09;margin-right:3%}
.PopularPosts ul li:nth-child(4) {background-color:#6EBE27;margin-right:4%}
.PopularPosts ul li:nth-child(5) {background-color:#149A48;margin-right:5%}
.PopularPosts ul li:nth-child(6) {background-color:#5BBFF1;margin-right:6%}
.PopularPosts ul li:nth-child(7) {background-color:#61469C;margin-right:7%}
.PopularPosts ul li:nth-child(8) {background-color:#863E86;margin-right:8%}
.PopularPosts ul li:nth-child(9) {background-color:#863E62;margin-right:9%}
.PopularPosts ul li:nth-child(10) {background-color:#815540;margin-right:10%}

Langkah terakhir klik simpan.

Demikian panduan tentang cara membuat popular post keren berwarna.

Semoga bermanfaat dan selamat mencoba.

Cara Membuat Popular Post Keren

Popular Post merupakan artikel yang paling sering di baca pengunjung blog, dengan adanya widget Popular Post maka pengunjung blog mengetahui mana-mana artikel yang sering di baca atau di cari pengunjung lainya.

Banyak macam variasi widget Popular Post dari yang biasa sampai yang dimodifikasi atau juga dari yang sederhana sampai yang berwarna-warni.

Di kesempatan kali ini, saya akan coba memberikan Cara membuat popular post keren dengan hanya menampilkan judul artikel saja.
Penampilan widget popular post ini cukup sederhana tapi tetap mempunyai nilai plus untuk mempercantik halaman blog.

.

Bagi yang berminat, ikuti tutorial berikut ini:

Masuk  ke blog

Klik Tata Letak 

Lalu Tambahkan Gadget

Klik Popular Post

Pada setingan popular post hilangkan centang Thumbnail dan Cuplikan

Kemudian klik Simpan 

Selanjutnya Klik Tema

Klik Edit HTML (klik backup/pulihkan untuk berjaga-jaga)

Pada kolom HTML cari kode ]]></b:skin> 

Untuk mempercepat pencarian pada kolom edit HTML klik kanan di mana saja lalu tekan CTLR+F

Akan muncul kolom pencarian di pojok kanan atas

Ketikan kode yang di cari pada kolom pencarian lalu Enter

Setelah ketemu tempatkan kode berikut tepat diatas kode ]]></b:skin>

/*--- Genera Popular Posts --- */
    .popular-posts ul{padding-left:0px;}
    .popular-posts ul li {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuiqYcTxxfw4hpyUfzwVGr1rmKWyI_fOT4C3m4D1EBGnxyGf2dkr-R4AtjpCAceiKNW4pIG8HJWuTRjRbtL4KAKuhTo-pQf0JRvNNq54ykjGiRT_0Y-707C0Xxi2pe4HQ1cT5DooCFJ0DD/s400/33.gif") no-repeat scroll 5px 8px rgb(255, 255, 255);
    list-style-type: none;
    margin: 0px 0px 5px;
    padding: 5px 5px 5px 20px !important;
    border: 1px solid #dddddd;
    border-radius: 10px 10px 10px 10px;
    }
    .popular-posts ul li:hover {
    border:1px solid #666666;
    }
    .popular-posts ul li a:hover {
    text-decoration:none;
    }

Langkah selanjutnya klik Simpan.

Demikian panduan tentang cara membuaat popular post keren.

Semoga bermanfaat dan selamat mencoba.