Membuat Global Chat Sendiri Di FACEBOOK(tanpa melalui GRUP)

Tweet

kemarin kita sudah membahas tentang membuat global chat sendiri facebook

dan kali ini saya akan menambahkan sedikit trik baru

Membuat Global Chat Sendiri Di FACEBOOK(tanpa melalui GRUP) lebih dinamis
Like dulu lah :p setelah itu klik SEND di bawah ini

kemudian akan muncul gambar seperti ini  

masukan nama teman facebook kalian didalam kotak garis merah di atas (sampai ratusan juga gpp kok :p) semampu lu aja lah 
dan dibawahnya isi dengan pesan perdana kamu   



kemudian klik (Kirim)

jadi deh

Nb: klik Gambar Untuk Memperjelasnya

Buatlah hidupmu berguna dan jangan menyianyiakan kesempurnaanmu

Merubah Warna Blok Teks (Teks Seleksi)

Tweet

 Teks seleksi atau sering kita sebut dengan blok teks, adalah bagian teks yang kita seleksi (blok) bila kita akan melakukan peng-copy-an pada suatu artikel blog post, secara default warna blok atau teks yang terseleksi adalah berwana biru dengan warna teks berwarna putih.

Dengan hadirnya css3 kita bisa merubah warna background selektor dan teks selektor tersebut sesuai dengan warna yang cocok dengan keinginan dan tentu saja untuk memberikan tampilan yang baik harus disesuaikan dengan karakter warna dasar blog tersebut. Dengan css3 selection kita bisa memberi perintah kepada browser yang kita pergunakan untuk merubah warna background dan warna teks seleksi tersebut, hampir semua browser mendukung css3 selection, hanya internet explorer yang belum mendukung css3 selection, anehnya kenapa begitu ketinggalan internet explorer ini, padahal pengusung internet explorer adalah suatu perusahaan yang besar dan banyak penggunanya diluaran sana kecuali di Indonesia.

Untuk memberikan tampilan yang berbeda dengan background dan teks seleksi (blok) pada umumnya kalian bisa menambahkan kode css3 selection dibawah ini :

::selection {background:#FF0000;color:#FFFFFF;} ::-moz-selection {background:#FF0000;color:#FFFFFF;} ::-webkit-selection {background:#FF0000;color:#FFFFFF;}

Masuk Desaign - Edit HTML dan letakan kode css tersebut diatas kode ]]></b:skin>

dibeberapa template yang saya coba dengan menerapkan kode css diatas berjalan dengan baik, tapi sebagian template tidak berjalan sesuai keinginan, jika hal itu terjadi pergunakanlah kode css dibawah ini dan letakan diatas kode </head>

 perbedaanya hanya harus menambahkan kode keterangan diantara kode css tersebut sehingga menjadi seperti ini :

<style type='text/css'> ::selection {background:#FF0000;color:#FFFFFF;} ::-moz-selection {background:#FF0000;color:#FFFFFF;} ::-webkit-selection {background:#FF0000;color:#FFFFFF;} </style>

Save template kalian dan lihat hasilnya, apakah sudah sesuai.

Kalian bisa melakukan perubahan pada kode warna background dan kode warna teks seleksi, kalian bisa menggunakan Tools Kode Warna yang ada diblog ini pada bagian menu Color Tools atau dengan meng-klik link Color Tools ini.

Search Box Dengan Style Css Yang Elegant

Tweet

search box atau kotak pencarian salah satu bagian penting dalam suatu blog, selain fungsinya yang berguna bagi pengunjung untuk menavigasi isi dari suatu blog, juga tampilannya yang bisa kita modifikasi sesuai dengan background dari blog yang dipergunakan, dengan tambahan css dan efek didalamnya membuat tampilan search box bisa menjadi lebih elegant.

Dilihat dari sistem kerja search box ini mungkin tidak sebaik custom search dari google yang bisa menampilkan pencarian keyword yang lebih baik, tapi sayangnya custom search dari google menurut saya loadingnya terlalu berat sehingga mempengaruhi loading blog, sebagai alternatif bisa menggunakan search box dengan style css dengan perintah html yang lebih sederhana.

Dengan tampilan yang sederhana tapi elegant, style dari search box ini dibuat oleh Rethnaraj Rambabu, yang diadaptasi dari search box milik Apple dengan background warna gelap, karena menurut saya tampilannya yang simple nan elegant saya mencoba merubah search box tersebut dari berbagai warna background seperti terlihat digambar diatas,

1. Search Box Warna Background Hijau
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/s1600/cari.png) no-repeat 10px 6px #506D2C;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

2. Search Box Warna Background Biru
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/s1600/cari.png) no-repeat 10px 6px #37627B;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

3. Search Box Warna Background Orange
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/s1600/cari.png) no-repeat 10px 6px #BF6E18;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

4. Search Box Warna Background Hitam
CSS

#search {

}

#search input[type="text"] {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqB4ckJfQMebSEG9Q25WbLxCTnpnEs7zy66SJveTN5jImlJ-Pi_dUA6AJo9HYUyib9Yucrr4GiE70-ahWEQVY7K9evwUWdq3qfxXaQcYX0dLED4UgSVHlX_5xcnKj3EygwnlSOhYzp3BU/s1600/cari.png) no-repeat 10px 6px #5E5E5E;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #bbbbbb;
    width: 150px;
    padding: 6px 15px 6px 35px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 1px 3px rgba(0, 0, 0, 0.2);
    -webkit-transition: all 0.7s ease 0s;
    -moz-transition: all 0.7s ease 0s;
    -o-transition: all 0.7s ease 0s;
    transition: all 0.7s ease 0s;
    }

#search input[type="text"]:focus {
    width: 185px;
    }

HTML

<form method="get" action="/search" id="search">
  <input name="q" type="text" size="40" placeholder="Search..." />
</form>

Jika tidak ada yang sesuai dengan background template yang kalian pergunakan, kalian bisa modifikasi pada bagian background search input dengan mengganti warnanya, jika kesulitan mencari warna yang cocok, bisa menggunakan tools warna pada bagian menu.

Semoga bermanfaat,

NB: 
CSS diletakan di atas kode ]]></b:skin>
 HTML diletakan di ADD gatget >> HTML/JavaScript

Cara Mudah Untuk Mengetahui Pengunjung Blog

Tweet

cara mudah untuk mengetahui pengunjung blog yang datang dari search engine adalah dengan bantuan pihak ketiga yaitu feedjit,
dengan bantuan tools ini kita bisa mengetahui pengunjung
blog datang dengan keyword yang di ketikan oleh pengunjung,
sekaligus kita bisa tahu artikel apa saja yang ada di blog kita yang sering di cari oleh para pengunjung blog,serta seberapa sering artikel kita di lihat

DEMO :

oke langsung saja gan :

klik diSINI
akan muncul halaman seperti ini

lalu isi NAMA/ EMAIL anda yang FAILED
setelah data anda suda di isi dengan benar klik >> Get your Traffic Feed

dan di tahap berikut anda di haruskan menyeting WARNA / LEBAR / JUMLAH KOLOM yang akan di tampilkan seperti gambar di bawah

kemudian tekan GO!

klik kolom merah di atas.... setelah itu kalian tinggal memberi nama pada widget tersebut
sepeti gambar di bawah ini

Lalu  >> MENAMBAHKAN WIDGET


Nb: klik GAMBAR untuk memperjelasnya