Pages
PopAds.net - The Best Popunder Adnetwork

Sunday, December 18, 2016

Modifikasi Background Buku Tamu dengan Gambar

 
Kali ini ane akan ngebahas tentang cara mendesign Background buku tamu dengan gambar. Pasti sobat semua ingin tahu tentang yang satu ini karena blog kita akan lebih kelihatan kreatif, yah walaupun bukan widget original kita sendiri... heheheh Sebenarnya widget ini milik sobat Dickeymaru tapi ane uda izin kok (belon dijawab sih tapi udah lancang_semoga empuhnya ijinin deh kan buat temen2 jg heheheh).... Caranya sih cukup panjang sob tapi jangan khawatir, tidak sulit sob..... Hanya saja ane tidak bisa mastiin trik bisa diterapkan dengan mengedit chatbox kita yang lama ato harus buat yang baru. Soalnya kalau ane sendiri langsung buat cbox yang baru sob....






Ok langsung saja.....
1. Login dulu ke Chatbox sobat sendiri
2. Klik Tab menu Look & Feel lalu Style Presets



3. Kemudian pilih Style Gallery yang Transparan


4. Kalau sudah, masuk lagi ke Layout Option




5. Ganti ukuran cbox kamu, contoh :
widht: 180
hight: 275
kosongkan centang pada Auto
form height: 117
No. of  messages to display : 20
klik Save


Setelah tahap diatas selesai, langkah selanjutnya adalah pengeditan kode cbox sobat
pada kode cbox sobat, cari kode <div id="cboxdiv" style="text-align: center; line-height: 0">

Kalau sobat sudah ketemu, ganti kode tersebut dengan kode dibawah ini :
<div id="cboxdiv" style="text-align:center; line-height:0;background-position:center;background:url(URL GAMBAR KAMU);width:180px;height:350px;background-repeat:no-repeat;">
pada tulisan yang berwarna biru, gantikan dengan url gambar sobat yang ingin dijadikan background cbox. Saran saya, cari gambar dengan menyesuaikan warna teks dari cbox sobat agar teks dapat dibaca.
Sekian tutorial dari saya, semoga bermanfaat..!!!

sumber : chumhienk-mhienk.blogspot.com

Membuat Judul blog bergerak

 
Membuat Judul blog bergerak adalah salah satu cara untuk membuat blog sobat menjadi terlihat lebih menarik. Nah, selain itu judul blog bergerak ini pun memiliki fungsi lain sob, mungkin sobat memiliki sebuah blog yang judul blognya panjang, judul blog bergerak ini merupakan salah satu alternatif agar judul blog sobat yang panjang terbaca. Oiya, judul blog yang dimaksud ini adalah nama blog sobat. Untuk melihat contohnya, judul blog saya adalah Muhammad Ramli

Hanya dengan mengubah sedikit kode html template sobat, judul blog bergerak pun jadi. Pada postingan sebelumnya juga kita pernah membahas tentang Cara membuat judul adress bar tampil beda. Sama dengan postingan sebelumnya, kita menggunakan script yang dapat membuat judul blog bergerak. Untuk gerakannya, judul blog bergerak ini satu jenis dengan marquee. Yaitu bergerak dari kanan ke kiri. Okedeh sobat, tanpa basa-basi lagi silahkan sobat lihat bagaimana cara Membuat Judul blog bergerak di bawah ini.

  1. Masuk ke blogger.com dan login menggunakan akun blog sobat
  2. Masuk pada halaman Template
  3. Klik Edit HTML lalu Lanjutkan
  4. Cari kode <title><data:blog.pageTitle/></title>, untuk mempermudah pencarian gunakan ctrl+f
  5. Jika kode tersebut sudah ditemukan, ganti kode tersebut dengan kode di bawah ini:
    <b:include data='blog' name='all-head-content'/>

    <script language='JavaScript'>
    var txt="<data:blog.pageTitle/> - ";
    var kecepatan=100;var segarkan=null;function bergerak() { document.title=txt;
    txt=txt.substring(1,txt.length)+txt.charAt(0);
    segarkan=setTimeout("bergerak()",kecepatan);}bergerak();
    </script>
    - tulisan berwarna merah adalah kode dari kecepatan gerakan judul blog. Jadi bisa sobat ganti sesuai dengan keinginan sobat.
    - tulisan berwarna biru adalah kode otomatis dari judul blog sobat. Nah, bisa sobat ganti dengan mengganti kode berwarna biru tersebut dengan judul blog sobat yang diinginkan
  6. Sebelum sobat simpan, silahkan klik Pratinjau terlebih dahulu agar judul blog berjalan sesuai dengan keinginan sobat
  7. Jika sudah pas dan sesuai dengan keinginan sobat silahkan klik Simpan Template

Cara membuat tulisan Berjalan (Marquee)

 

Pada post kali ini saya akan sharing kepada kalian semua bagaimana cara membuat tulisan berjalan (marquee). Membuat tulisan berjalan itu dapat di lakukan di Widget element, postingan atau halaman statis (pages). Ada beberapa arah marque yaitu dari kanan ke kiri, dari kiri ke kanan, dari kanan ke kiri (bolak - balik), dari atas ke bawah dan dari bawah ke atas. Cara membuatnya cukup mudah, sobat tinggal mengcopy beberapa kode di bawah ini dan pasang di blog kalian:

1. Marquee Dari Kiri Ke Kanan / Kanan Ke Kiri
<marquee align="center" direction="right" height="50" scrollamount="2" width="80%">

Marquee Dari Kiri Ke Kanan

</marquee>
Akan menjadi seperti ini:

Marquee Dari Kiri Ke Kanan

Keterangan:
> Tulisan yang berwarna merah adalah teks yang ingin sobat beri efek marquee
> Untuk tulisan dari kanan ke kiri ganti kata "right" dengan "left" (tanpa tanda petik)
> 50 adalah ukuran tinggi kotak tulisan marquee nya
> scrollamount adalah kecepatan tulisannya

2. Tulisan Bolak - Balik
<marquee align="center" direction="left" height="50" scrollamount="3" width="70%" behavior="alternate">

Tulisan Bolak - Balik

</marquee>
Akan menjadi seperti ini:
Tulisan Bolak - Balik
3. Tulisan marquee untuk link
<marquee direction="up" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" align="center" width="100%" height="200">


<a href="http://ksatriapengelana.blogspot.com/">MOHAMMAD</a>

<a href="http://ksatriapengelana.blogspot.com">RAMLI</a>

<a href="http://ksatriapengelana.blogspot.com/">GANTENG</a>-

</marquee>
Akan menjadi seperti ini:
MOHAMMAD RAMLI GANTENG > Ganti saja tulisan yang berwarna merah dengan link yang sobat inginkan
> Selain link sobat juga bisa menaruh kode HTML seperti widget

Mudah kan! Selamat mencoba!!!

Membuat Link Berkedip Bintang Jika disentuh Cursor

 
Membuat Link Berkedip Bintang Jika disentuh Cursor – Sahabat bloggers kembali share nih!! Ya minggu ini ada sdikit waktu luang yang bias saya gunakan unutk posting di blogku . Menghias blog , salah satu kegiatanku kali ini , ya untuk membuat tampilan blog menjadi unik dan enak dilihat . Sobat sudah tau nggak ya, salah satu cara menghias blog dengan membuat link berkedip bintang jika disentuh cursor adalah salah satu caranya . Tips ini saya dapat waktu lagi blogwalking di blog tetangga .

1. Login ke blogger,
2. Klik Design/Rancangan > Edit HTML.
3. Beri tanda centang pada Expand Template Widget.
4. Cari kode berikut : </head>
agar mudah untuk pencarian silahkan tekan Ctrl + F secara bersamaan lalu
masukkan kode script </head> jika
sudah ketemu taruh diatas kode </head> lalu pastekan kode di bawah ini ;
<style>
a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOpVWyUuv_kNjacZw3tShQoFyV32th7la6GJoL771kXZLjUkOnYKn0WNh4ycusTM-SKgTgtUT10MOdaZvxrtuWqfxWep8SMBvDCyFjUrn6Hh9oOTAdVkkYqdVTgzT7pr-2nd1RjdnaCx8/s1600/str4.gif); }
</style>

5. Selesai .Simpan template Anda

cara membuat widget popular post bergerak

 
widget popular post adalah untuk menampilkan artikel yang seringdibaca sobat blogger pasti sudah tau semua kan ..he..hee.
Nah kali ini bagi sobat bloger yang ingin modif widget populer postnya supaya bisa  bergerak naik turun cukup mudah dan untuk menseting widget ini masuk di dasbord tata letak entri populer nah disitu anda bisa mensetting sesuai degan selera anda misalnya ingin menampilkan dengan tumbnail dan dan juga cuplikan semua tergantung keinginan sobat seperti ini gambarnya:


nah sedangkan untuk langkah langkah membuat Entri Populer supaya bisa bergerak naik turun sebagai berikut:


  • Logi ke dasbord
  • Pilih Rancangan Tambahkan Gedget Entri Populer atau Populer Post kalau sobat belum pasang tapi kalau anda sudah pasang lewati aja
  • Tambahkan Gedget lagi HTML Java Script
  • Lalu copy code dibawah ini di HTML Java Script
  • Dan  langkah terahir simpan


<style type="text/css" media="screen">


#PopularPosts1 {
 overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:280px;
    
}


#PopularPosts1 ul {
width:342px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}


#PopularPosts1 li {
 width:334px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url() repeat-x;
border:1px solid #ddd;
}


#PopularPosts1 li .item-title {
    color:#A5A9AB;
    font-size:1em;
    margin-bottom:0.5em;
}


#PopularPosts1 li .item-title a {
 text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}


#PopularPosts1 li img {
 float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}


#PopularPosts1 li .item-snippet {
  overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}


#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
    color:#3E4548;
    text-decoration: none;
}


#PopularPosts1 .spyWrapper {
    height: 100%;
    overflow: hidden;
    position: relative;    
}


#PopularPosts1 {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}


.tags span,
.tags a {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}


a img {
    border: 0;
}


-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').simpleSpy();
});
</script>
<script src="http://camporbawor.googlecode.com/files/popularpost2.js" type="text/javascript"></script>


selamat mencoba ya gan semoga berhasill,,,,,,

Cara memberi efek zoom pada gambar

 
Cara memberi efek zoom pada gambar - Ketika sebuah gambar disorot dengan mouse atau kursor mouse diarahkan ke gambar tersebut maka gambar tersebut memberi efek zoom sehingga menjadi lebih besar.


Efek zoom ini banyak beredar di internet hanya saja hasta ingin mengulas lebih rinci cara memberi efek zoom pada gambar tersebut, sehingga mudah dipahami oleh sobat yang baru belajar sekalipun.


Cara memberi efek zoom pada gambar

1. Login ke dasbor blog
2. Masuk ke menu rancangan >> Edit HTML
3. Letakkan kode berikut diatas ]]></b:skin>

 code HTMLnya : 

post img:hover {                                                                                              
-o-transition: all 0.3s; 
-moz-transition: all 0.3s; 
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); }


4. Save


Demikian cara memberi efek zoom pada gambar, selamat mencoba...
Happy blogging..
sumber : agoengsang.blogspot.com/

Cara menghilangkan Captcha/Kode Verifikasi di Kotak Komentar

 
Saat mau berkomentar harus menuliskan captcha memang bisa bikin jengkel, dan mengurungkan niatnya untuk berkomentar. Apa itu captcha? Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam sebelum post komentar untuk memastikan bahwa komentar itu ditulis oleh manusia bukan robot. Kode captcha biasanya kombinasi antara angka dan huruf.

Beberapa platform blog menyediakan fitur captcha, kalau di blogspot versi bahasa Indonesianya namanya Verifikasi Kata. Sering saya alamai ketika sudah menulis komentar, tetapi untuk postnya harus menuliskan kode captcha yang sulit untuk ditebak, huruf apakah itu. Untuk verifikasi kata di blogspot ini bisa di non aktifkan, sehingga pembaca blog yang mau komentar tidak kesulitan.


Bagaimana cara menghilangkan kode captcha atau verifikasi kata di kotak komentar? Caranya sangat mudah, untuk lebih enaknya, simak langkah-langkahnya berikut ini:
1. Login ke akun blogger.com
2. Pilih Setelan kemudian klik Pos dan komentar
3. Di situ kita bisa mengatur komentar di blog, seperti gambar ini


4. Untuk Tampilkan verifikasi kata? pilih Tidak
5. Jangan lupa, untuk Moderasi Komentar? pilih Selalu
6. Simpan setelan
7. Selesai

Seperti itulah pengaturan untuk komentar. Memang seh, untuk meminimalkan komentar Spam (sampah), kita bisa memperketat aturan komentar, misalnya dengan moderasi komentar.
Semoga bermanfaat.

Sumber Artikel: http://bocahkedoya.blogspot.com

Popular Posts

© Copyright 2015 Ksatria Pengelana. |Distributed By Blogger Templates20 Powered by Blogger.