Post Game: box

Showing posts with label box. Show all posts

Friday, December 30, 2016

Cara Membuat Like Box Facebook Valid HTML5

Cara Membuat Like Box Facebook Valid HTML5 - Alhadulillah setelah koneksi internet tadi malam saya erorr , sekarang sudah pulih lagi . kali ini saya akan membuat tutorial tentang bagaimana cara membuat like box / yang biasa disebut temukan kami di facebook valid html5. pada dasarnya like box yang asli pada script facebook , tidak valid HTML5 dan mengandung Iframe . Teentunya itu tidak baik untuk blog anda. serta dapat mengurangi nilai score seo anda ketika anda cek di chkme.com.

image : kang-ismet

Nah untuk itu sekarang saya akan menjawab masalah tersebut supaya tetap ada like book namun blog sobat akan tetap valid dan terhindar dari ifareme . Gimana caranya ..? Nah simaklah Cara Membuat Like Box Facebook Valid HTML5 di bawah ini :

1. Seperti biasanya , Sobat harus masuk dulu ke blog sobat .

2. Kemudian sobat pilih menu Template

3. Setelah ketemu menu templatenya . sekarang pilih sub menu EditHtml

4. Kemudian sobat cari kode </body> ( kode ini terletak di paling buawah pisan )

5. Kemduian salin kode dibawah ini di atas kode </body> terebut .

<div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); }(document, script, facebook-jssdk));</script>

Keterangan : sebelum sobat menyimpan kode diatas . sobat harus menghapus kode yang berwarna hitam tebal ( <div id="fb-root"></div> ) dengan catatan kode tersebut sudah ada . namun bila belum ada maka jangan dihapus kode tersebut . "Understhan ....

6. KLik save / Simpan

7. kemudian sobat log out dari edit template tersebut dan Masuk pada bagian Tata Letak » Tambah Gadget » HTML/JavaScript Letakkan kode berikut ini kedalamnya kemudian Simpan

<div class="fb-like-box" data-href="https://www.facebook.com/ahmad.suyadi04" data-width="292" data-show-faces="true" data-stream="false" data-header="false"></div>

Keterangan untuk mengatur kode diatas tersebut :

- Ganti https://www.facebook.com/ahmad.suyadi04 dengan alamat URL fans page facebook sobat .

- data-width="292" // Lebar widget

- data-show-faces="true" // Tampilkan foto
- data-stream="false" // Tampilkan artikel terbaru
- data-header="false" // Tampilkan header "Temukan Kami di Facebook"

Sesuaikan kode diatas dengan template sobat . Nah setelah itu langkah terakhir adalah klik Save / simpan . kemudian lihat perubahan hasilnya yang terjadi pada blog sobat .

Demikian tutorial saya pada sore hari ini mengenai "Cara Membuat Like Box Facebook Valid HTML5 " semoga tutorial tadi bermanfaat bagi sobat . Akhirul kalam wassalamualaikaum wr.wb.

Go to link Download

Cara Membuat Like Box FP Keren Melayang versi terbaru 2013

Selamat sore sahabat blogger semua !!! Kali ini, fahrurrozi18 akan berbagi tips tentang Cara membuat like box melayang versi terbaru 2013 yang pastinya simple dan keren abiss deh. Widget like box kali ini berbeda dengan widget like box seperti biasanya, karena widget ini tanpa dilengkapi dengan TimeOut / Batas waktu untuk tertutup otomatis. dan yang paling penting nih, cara pemasangannya tanpa mengedit HTML loh, hanya meng Copy dan Paste codenya lalu di letakkan di Widget. Daripada berlama-lama, langsung saja deh ke TKP... Cekidot :

1. Login ke akun blogger.com sobat

2. Pilih Tata letak.

3. Kemudian Add Gadget

4. Pilih html/javascript

5. Copy kode di bawah ini lalu pastekan ke kotak html/javascript tadi.

<style type=text/css>/* Message Box */#box-message {position:fixed !important;position:absolute; /* IE6 */top:-1000px;left:50%;margin:0px 0px 0px -182px;width:300px;height:auto;padding:16px;background:#f5f5f5;font:normal Dosis, Georgia, Serif;color:#111;border:2px solid #fff;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;}#box-message a.close {position:absolute;top:-10px;right:-10px;background:#f5f5f5;font:bold 16px Arial, Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#111;border:2px solid #fff;-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);box-shadow:0px 1px 2px rgba(0,0,0,0.4);-webkit-border-radius:22px;-moz-border-radius:22px;border-radius:22px;cursor:pointer;}</style><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script><script type=text/javascript>$(window).bind("load", function() {// Animate Top Value When Page Loaded Completed$(#box-message).animate({top:"50px"},1000);// Remove Mailbox When Close Button On Click$(a.close).click(function() {$(this).parent().fadeOut();return false;});});</script><div id=box-message>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/fahrurroziBLOG18&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=112462558775142"scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<a class=close href=http://fahrurrozi18.blogspot.com>×</a></div>

6. Save dan lihat hasilnya.

Keterangan :

Ganti kode yang berwarna Merah dengan URL sobat sendiri.

Nah... gimana sob, mudah banget kan ?
Semoga artikel ini bermanfaat dan Bye... bye... :)

Go to link Download

Cara Membuat Widget Like Box Facebook di Blog

Manfaat widget Like Box Facebook di Blog adalah pengunjung pada Blog sobat tau bahwa Blog tersebut juga mempunyai halamanya di Facebook dan pengunjung dapat menyukai halaman Blog sobat di Facebook dengan sekali klik.
Sebelum membuat Widget Like Box Facebook di Blog, sobat terlebih dahulu harus mempunyai halaman Blogspot sobat di Facebook. Jika sobat belum punya halaman Blogspot di Facebook, sobat bisa baca panuduan ini, Cara Membuat Halaman Blog di Facebook. Baca juga untuk tampilan lebih sederahana yaitu Tombol Like Facebook di Blog. Jika sobat telah mempunyai halaman Blogspot sobat di Facebook, maka membuat Like Box Facebook di Blog dapat dimulai.
OK, mulai saja sob. Cara membuat Like Box Facebook di Blog:
1. Login ke Facebook dengan akun sobat.
2. Isikan URL http://developers.facebook.com/docs/reference/plugins/like-box/ dan langsung kunjungi URL tersebut.
3. Atur Tampilan.
Masukan URL halaman blogspot sobat di Facebook.
Width, atur lebar Widget.
Height, atur panjang Widget.
Show Faces, menampilkan foto Profil Likers atau tidak.
Color Scheme, pilih antara dark atau light.
Stream, tampilkan ringkasan halaman Facebook atau tidak.
Border Color, tentukan warna garis luar.
Show header, tampilkan header atau tidak.
4. Setelah selesai klik Get Code untuk mendapatkan kode HTML widget Like Box.

5. Mendapatkan kode html Like Box, agar lebih mudah masuk pada bagian iFrame. Coppy seluruh kodenya.

6. Selanjutnya, masuk pada akun Blogger sobat.
7. Masuk pada bagian Tata Letak.
8. Kllik tambah gadget, pilih posisi mana yang sobat inginkan untuk memasang Widget Like Box.
9. Pilih HTML/Javascript.
10. Pastekan kode iFrame dan klik simpan.

Selesai, Widget Like Box Facebook telah berhasil dipasang pada Blog sobat. Silakan lihat hasilnya. - See more at: http://regibrader-free.blogspot.com/2013/02/cara-membuat-widget-like-box-facebook.html#sthash.0E2Xgtc0.dpuf

Go to link Download

Cara Membuat Like Fanspage Facebook Follow Twitter Melayang di Blog Like Box

Like Box Melayang Di Blog Ini Dilengkapi Dengan Follow Twitter Juga Jadi Gak Usah Ribet Nambahin Script Lainnya Berikut Caranya.

1. Dasboard Blogger lo > Tata Letak > Tambah Gadget
2. Pilih HTML Javascript Lalu Masukan Kode Berikut Ini

Yang Berwarna Merah Ganti Sesuka lo
Yang Berwarna Hijau Ganti Dengan URL Fanspage Facebook lo
Yang Berwarna kuning Ganti Dengan nama twitter lo
3. Lalu Simpan Dan lihat Hasilnya

Segitu Saja Cara Membuat Like Fanspage Facebook + Follow Twitter Melayang di Blog ( Like Box ) , Kalau Kurang jelas silangkan berkomentar yang baik Terima Kasih.

Go to link Download

Cara membuat Like Box Facebook Dengan Tambahan Kata bergerak

Oke sekarang saya ngepos tentang Cara membuat Like Box Facebook Dengan Tambahan Kata bergerak.

silahkan pastekan kode dibawah,letakkan di tambahkan gadget.Berikut kode untuk membuat like box facebook dengan tambahan kata bergerak (marquee) :

<!-- FB melayang tombol close --!>

#kotak-facebook {

position:fixed !important;

position:absolute; /* IE6 */

bottom:-1000px;

right:40%;

margin:0px 0px 0px -182px;

width:330px;

height:auto;

padding:16px;

-webkit-box-shadow: 0px 0px 7px #222;

-moz-box-shadow: 0px 0px 7px #222;

box-shadow: 0px 0px 7px #222; background-color:#FFFFFF; font:normal 1em Cambria,Georgia,Serif;

color:#111;

-webkit-border-top-left-radius: 20px;

-webkit-border-bottom-right-radius: 20px;

-moz-border-radius-topleft: 20px;

-moz-border-radius-bottomright: 20px;

border-top-left-radius: 20px;

border-bottom-right-radius: 20px;}

#kotak-facebook a.close {

position:absolute;

top:-10px;

right:-10px;

background:#333;

font:bold 16px Arial,Sans-Serif;

text-decoration:none;

line-height:22px;

width:22px;

text-align:center;

color:#fff;

border:2px solid #fff;

-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);

box-shadow:0px 1px 2px rgba(0,0,0,0.4);

-webkit-border-radius:10px;

-moz-border-radius:10px;

border-radius:10px;

cursor:pointer;

}

</style>

$(window).bind("load", function() {

// animasikan nilai top saat halaman telah selesai dimuat

$(#kotak-facebook).animate({bottom:"50px"}, 1000);

// hilangkan kotak pesan saat tombol (x) di klik

$(a.close).click(function() {

$(this).parent().fadeOut();

return false;

});

</script>

<marquee behavior="alternate">Biar Lebih Keren,LIke This.!!!</marquee>

<!-- Mulai --!>

<!-- Selesai --!><a class=close href=#>×</a>

<p style=" float:right; margin-right:35px; font-size:10px;" ></p></div>Powered By <a style=" font-size:10px; color:#3B78CD; text-decoration:none;" href="http://www.facebook.com/ielielzam.zuhdi">Ilzam Zuhdi Shofiyullah</a>

Keterangan :

- warna merah adalah kata yang bergerak,silahkan ganti dengan kata yang anda inginkan

-warna biru adalah username fanpage blog saya,silahkan ganti dengan username fanpage sobat

Go to link Download

Cara Membuat Fanpage Facebook dan Pasang Like Box di Blog

Selamat malam sobat blogger semua !!! Kali ini, aq akan share tentang Cara membuat FansPage. Memiliki Fanpage (FP) facebook adalah keharusan jika sobat menjalankan sebuah bisnis, khususnya bisnis online. Fanpage bisa memiliki anggota hingga ribuan, bahkan ada sebuah fanpage yang memiliki member hingga mencapai jutaan. Betapa efektifnya kita bisa memasarkan produk hanya sekali posting sudah tersebar ke member kita yg mencapai ribuan, puluhan ribu hingga jutaan. Sahabat Blogger pun juga memanfaatkan FP ini untuk menyebarluaskan artikel-artikel yang di posting di blog, dan tentu ini salah satu juga teknik seo yang bisa di terapkan. Bisnis offline pun juga memanfaatkan usahanya untuk promosi. Intinya apapun bisnis sobat sangat membutuhkan FP Facebook untuk kegiatan promosi di media online

Pada artikel ini, ada 2 bagian yang di bahas, yaitu :

1. Cara Bikin Fanpage

2. Cara Pasang Widget Like box di Blog

Ok deh, langsung ajah dan untuk memulai jangan lupa login ke akun facebook masing-masing :

Untuk Cara Bikin / membuat Fanpage langsung saja masuk kesini : http://www.facebook.com/pages/create.php Muncul tampilan seperti di bawah ini. Pilih salah satu yang paling menggambarkan tema bisnis atau group sobat.

Selanjutnya, muncul tampilan form seperti di bawah ini : Upload profile picture dll, tapi proses ini bisa di skip dan bisa di updated belakangan

Ok, skip dulu dan lanjut proses sampai sistem menampilkan halaman penyelesaian akhir seperti tampilan screenshot di bawah ini :

Sampai disini, artinya pembuatan sebuah fanpage udah selesai dengan alamat URL : http://www.facebook.com/pages/nama fan page/kode fanpage atau

http://www.facebook.com/nama fan page

Proses berikutnya tinggal updated :

Add profile picture

Add Cover buat header

Setting untuk admin

Dan langkah berikutnya adalah menarik member atau orang lain untuk nge-like fanpage kita.

Salah satu cara efektif, mungkin dengan cara pasang Fanpage kita di Blog, untuk fitur ini di namakan LIKE BOX. Jadi pengunjung blog bisa melakukan "LIKE" dari Like Box yang di pasang di blog milik sobat.

Pasang widget Like Box di blog :

Untuk membuat widget like box sama mudahnya dengan bikin FP Facebook, silahkan sobat klik link ini : http://developers.facebook.com/docs/plugins

Dari pilihan aplikasi yang tampil, pilih Like Box, seperti gambar berikut :

Selanjutnya sampai di form pengisian data seperti gambar di bawah :

Perhatikan gambar di atas :

Facebook Page URL : Di isi dengan link fanpage sobat yg udah di bikin diatas
Width & Height : adalah ukuran lebar dan tinggi, bisa di atur-atur sesuai dengan ukuran sidebar blog
Color Scheme : Untuk menyesuaikan dengan backgroung blog milik sobat. Kalau backgroundnya terang, sebaiknya pilih light saja
Selebihnya bisa di coba-coba sendiri, silahkan di test dengan melihat hasil preview di sampingnya.
Langkah terakhir, Klik Get Code. Kode inilah yang nanti di pasang di widget blog

Bagaimana Cara mengambil Code-nya, kemudian di pasang di Blog ?

Mudah kok. Pada saat klik Get Code, kita di hadapkan pada pilihan format :

HTML5
XFBML
IFRAME
URL

Dari 4 pilihan itu, kebanyakan orang ambil HTML5 atau IFRAME, Namun aq lebih suka memakai kode HTML5. Kenapa ? karena script yang di bungkus IFRAME kurang bagus buat SEO. Kalau blog kita di test di http://chkme.com kode IFRAME akan mengurangi penilaian SEO blog milik kita. Untuk itu pakai yg pilihan Tab HTML5 saja. Perhatikan gambar di bawah :

2 bagian script di atas jadikan satu dan Copas ke Widget atau bagian blog yg ingin di tampilkan FP tersebut. Kalau ingin tampil di Sidebar, copas apa adanya saja seperti script asli pada saat kita Get Code.

Namun kadang ada blogger yang ingin menampilkan FP di dalam postingan, atau menjadi bagian dari posting. Untuk kasus seperti ini kode harus di Parse dulu supaya tidak error. Coba search di google caranya parse script.

Go to link Download

Cara Membuat Search Box Mirip Apple com

Maybe bagi anda pengguna produk apple seperti safari tidak asing lagi dengan search box seperti di atas, karena jenis Search Box pada gambar tersebut memang di buat mirip dengan situsnya mendiang kaka ipar saya, itu tu Steve Jobs hehe (ngarep). Saya dapatkan Search Box tersebut saya dapatkan dari Bloggermint, dan yang membuatnya Rethnaraj Rambabu (katanya) Search Box tersebut menggunakan CSS 3 dan yang pasti keren lah di pasang di blog.
Kalo mau liat contohnya emg lagi di pake ma saya salah satunya, tapi kalo mau liat contoh lainnya klik disini.

Nah sekarang kita langsung saja ke cara pembuatanya, cekidot.

1. Langkah paling wahid sih yang pasti masuk dulu ke Blogger.
2. Setelah itu masuk ke Template > Edit HTML > Lanjutkan
3. Lalu cari kode ]]></b:skin>
4. Lalu untuk Search Box jenis berikut,

COPAS kode berikut di atas kode ]]></b:skin>

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-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: 200px;
}

kalo untuk gambar berikut,

ini kodenya

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-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: 200px;
}

nah kalo Search Box yang saya pake

kodenya sebagai berikut

#search {
}
#search input[type="text"] {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-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 {
background: url(http://www.bloggermint.com/demos/css3searchbox/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}

4. Nah kalo udah pilih salah satu, terus klik Simpan Template
5. Jika sudah, terus klik Tata Letak > Tambah Gadget > HTML/Java Script
6. Terus COPAS kode berikut.

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

7. Terakhir klik Simpan
end....

-Semoga Bermanfaat(m)>_<-

Go to link Download

Cara Membuat Scroll Box

Scroll Box berfungsi untuk menghemat area pada halaman web/blog atau pada area postingan sehingga tidak terlihat memanjang kebawah atau melebar kesamping, dengan menggunakan sroll box dapat mempercantik tampilan blog karena tidak harus menggunakan banyak area text/gambar sehingga blog terlihat rapi.

Scroll box yang fungsinya hampir sama dengan spoiler sangat baik digunakan untuk seorang blogger yang kadang memiliki artikel yang panjang. Selain itu banyak blogger yang menggunakan khusus untuk penempatan coding/ kode tertentu selain menggunakan Frame Text.

Untuk membuat scroll box tidaklah sulit, dengan menambahkan sedikit kode HTML sehingga bisa mengimput di dalamnya beberapa text yang panjangnya tak terbatas. Jika penasaran dan berminat berikut kode HTML untuk memubuat Scroll Box.

<div style="overflow:auto; padding:5px; width:350px; height:100px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">Masukkan Text atau Kode Yang Ingin di simpan di dalam scroll box</div>

Contohnya akan seperti ini:

Masukkan Text atau Kode Yang Ingin di simpan di dalam scroll box

Semoga bermanfaat postingan kali ini.

Go to link Download

Cara Membuat Box Terima Kasih Sudah Berkomentar pada Blog

ASPHALT 7 HD

download asphalt 7 HD | 670 MB

Download game android Asphalt 7 apk+sd data.Setelah sukses dengan versi sebelumnya yaitu Asphalt 6 Adrenaline, kini versi terbarunya Game Asphalt 7 Heat telah di rilis! Game Asphalt merupakan salah satu game balapan terbaik dan terlaris. Seperti yang kita ketahui, Versi kali ini telah banyak melakukan pembenahan dari versi sebelumnya seperti dari segi grafik permainan yang meningkat dibanding versi lalu. Selain itu, tracks balap telah ditambah menjadi 15 track seperti Hawaii, Paris, London, Miami and metropolis. Oleh karena itu, bagi kalian yang hobi balapan, tidak ada salahnya untuk mencoba betapa serunya permainan ini....

DOWNLOAD DISINI:

Asphalt 7 HD APK 27 MB

Asphalt 7 HD SD Data 670 MB
Part 1 | Part 2 | Part 3 | Part 4

SCREENSHOT:

Go to link Download

Cara Membuat Subscribe Box Keren di Blog

Cara Membuat Subscibe Box atau Kotak Berlangganan Keren di Blog,- Sebelumnya saya pernah membagikan cara membuat Kotak Subscribe Box di Blog Seperti EVO Magz dan kali ini saya masih akan memberikan mengenai cara membuat subscribe box di blog seperti template arlina design. dimana subscribe box tersebut sangat bagus dan keren menurut saya makanya disini saya akan membagikanya.

Subscribe BOX atau Kotak berlangganan adalah sebuah kotak digunakan untuk memasukan email yang biasanya terdapat pada sebuah web atau blog yang bertujuan agar pengunjung dapat mengetahui update artikel melalui email mereka. seperti halnya tombol Subscribe pada situs youtube subscribe box juga memiliki cara yang sama namun disini kita perlu memasukan email lalu submit untuk berlanggan artikel dari sebuah web/blog.

Pastinya anda pernah melihat Subscribe Box/kotak berlanggganan ini pada sebuah blog, karena sudah banyak blog yangmemasang kotak berlangganan ini baik blog besar atau blog kecil. walaupun banyak yang memasangnya namun setiap kotak tampilanya berbeda-beda. yah itu juga tergantung modifikasi ang dilakukan oleh pemilik blog.

Memasang Subscribe Box ini sangatlah bermanfaat bagi pemilik situs, karena jika pengunjung sudah berlangganan artikel blog anda pengunjung tersebut akan tahu jika ada artikel baru dari blog anda dan otomatis juga akan menambah visitor blog. Namun sebelum memasang subscribe box ini terlebih dahulu blog harus didaftarkan ke Feedburner, Jika sudah punya ID feedburner baru bisa memasang ID tersebut ke Subscribe Box.

Nah buat tampilan Subscribe Box pada tutorial kali ini seperti gambar diatas, dan kotak berlangganan tersebut saya pasang pada footer. jika anda tertarik dengan Subscribe BOX seperti gambar diatas bisa langsung ikuti cara dibawah ini.

Cara Memasang Subscribe Box keren di Blog

1. Pertama silahkan masuk ke Blogger - Template dan Edit HTML

2. Kemudian Cari kode ]]></b:skin> gunakan (Ctrl+F) untuk mempermudah pencarian, jika sudah ketemu silahkan copy kode dibawah ini dan paste di atas kode tersebut.

/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#444;overflow:hidden;border-top:4px solid #eee:none}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#555;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#E73037;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#E73037;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:;position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}

3. Selanjutnya silahkan copy kode CSS dibawah ini lalu paste ditempat yang anda inginkan semisal jika ingin memasang diatas footer paste diatas kode <footer>

<div id=subscribe-css>
<p class=subscribe-note><span>SUBSCRIBE</span> <span class=itatu>TO</span> OUR NEWSLETTER</p>
<div class=subscribe-wrapper>
<div class=subscribe-form>
<form action=http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog class=subscribe-form method=post onsubmit=window.open ('http://feedburner.google.com/fb/a/mailverify?uri=EspadaBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true target=popupwindow>
<input name=uri type=hidden value=EspadaBlog/><input name=loc type=hidden value=en_US/><input autocomplete=off class=subscribe-css-email-field name=email placeholder=Enter your Email/><input class=subscribe-css-email-button title= type=submit value=submit/></form>
</div>
</div>

Note: Silahkan ganti EspadaBlog dengan ID feedburner blog anda.

4. Dan terakhir supaya subscribe box lebih responsive pada tampilan mobile silahkan tambahkan kode CSS media screen dibawah ini tepat diatas kode </style>

@media screen and (max-width:768px){
#subscribe-css p.subscribe-note{margin:0 0 20px 0;width:100%;}
.subscribe-wrapper {width:100%;}
}
@media screen and (max-width:640px){
#subscribe-css p.subscribe-note{font-size:140%}
form.subscribe-form{padding:0 10px}
.subscribe-css-email-field,.subscribe-css-email-button{padding:15px 0;text-align:center;margin:10px 0;width:100%}
}

5. Terakhir tinggal simpan template dan lihat hasilnya.

Dan itulah cara membuat Subscribe Box di blog keren seperti blog arline design, untuk warna sekaligus tampilanya bisa anda sesuaikan sendiri. sekian tips blogging yang dapat saya bagikan dan selamat mencoba.

Go to link Download

Cara Membuat Chat Box Buku Tamu

Untuk membuat Cbox sangatlah mudah,sobat hanya perlu daftar kemudian copas kodenya di widget blog sobat.Sobat tw caranya ga??,hehehehe..kalo ga tw silahkan ikuti langkah dibawah ini,yang pasti singkat padat dan memuaskan.

Klik disini
Setelah halamanya udah muncul pilih"sign up".Isi semua formulir pendaftaran ya!
Langkah selanjutnya Cbox akan mengirim email konfirmasi ke alamat email yang tadi sobat gunakan ketika mendaftar Cbox,klo udah dibuka emailnya,langsung saja klik link yang ditujukan ke website Cbox.Kalau udah,gunakan nama Cbox dan password sobat untuk login ke Cbox tadi.
Sekarang klik"publish"
Kalau sudah,pada tengah-tengah postingan akan ada tulisan seperti ini dibawah ini :
Step 1: Where are you installing your Cbox? ==>Pilih Blogger/Blogspot
Step 2: Choose a variation: Pilih wariasi yang sobat inginkan.
Step 3: Get your code==>Copy kode Cbox yang terdapat dibawahnya.Untuk pemasanganya,silahkan baca aturan pakai dibawah ini :
Login ke blooger.com.
Pilih design.
Add a Gadget/Tambah Gadget.
Pilih HTML/Java Script,paste-kan kode yang sudah sobat copy tadi.
Langkah terakhir adalah"SAVE" :)

Selamat mencoba,semoga berhasil kawan

Sumber: http://www.kawulanesia.com/2012/04/cara-membuat-kotak-chat-box.html

Go to link Download

Cara Membuat Facebook Like Box Melayang Dengan Timer Terbaru 2015

Membuat Facebook Like Box Melayang Dengan Timer

Selamat malam, apa kabar sobat semoga baikya pada kesempatan kali ini Zerone Blog akan memberikan Tutorial Cara Membuat Facebook Like Box Melayang Dengan Timer Terbaru yang mana facebook popup like box with timer atau sering di sebut juga popup fan page with timer adalah widget yang di tujukan agar pengunjung blog sobat untuk melike fan page blog sobat sesaat loading blog dalam suatu artikel selesai dalam jangka waktu yang telah di tentukan, beberapa orang mungkin menganggap widget ini terkesan Memaksa pengunjung agar mau melike facebook dari blog tersebut.

Namun menurut saya ini wajar saja untuk menambah fan page blog selama tidak menghilangkan tombol close ya..

Ok, bagi sobat yang ingin memasang widget Facebook Like Box Melayang Dengan Timer di blog, silahkan ikuti langkah - langkah di bawah ini

Cara Membuat Facebook Like Box Melayang Dengan Timer

Mausk atau Login ke akun blogger sobat
kemudian Pilih Template > Edit HTML
Lalu Copy kan kode CSS di bawah ini tepat di atas </style>

CSS/* Likebox PopUp with Timer */
#fblikepop { background-color: #fff; display: none; position: fixed; top: 200px;position: absolute; width: 450px; border: 10px solid #6F6F6F; z-index: 200; border-radius: 9px; margin: 0pt; padding: 0pt; color: #333333; text-align: left; font-family: arial,sans-serif; font-size: 13px;}
#fblikepop body {background: #fff none repeat scroll 0%; line-height: 1; margin: 0pt; height: 100%;}
.fbflush { cursor: pointer; font-size: 11px !important; color: #FFF !important; text-decoration: none !important; border: 0 !important;}
#fblikebg { display: none; position: fixed; position: absolute; height: 100%; width: 100%; top: 0; left: 0; background: #000000; z-index: 100;}
#fblikepop #closeable { float: right; margin: 7px 15px 0 0;}
#fblikepop h1 { background: #6D84B4 none repeat scroll 0 0; border-top: 1px solid #3B5998; border-left: 1px solid #3B5998; border-right: 1px solid #3B5998; color: #FFFFFF !important; font-size: 14px !important; font-weight: normal !important; padding: 5px !important; margin: 0 !important; font-family: &quot;Lucida Sans Unicode&quot;, &quot;Lucida Grande&quot;, sans-serif !important;}
#fblikepop #actionHolder {height: 30px;overflow: hidden;}
#fblikepop #buttonArea {background: #F2F2F2;border-top: 1px solid #CCCCCC;padding: 10px;min-height: 50px;}
#fblikepop #buttonArea a {color: #999999 !important;text-decoration: none !important;border: 0 !important;font-size: 10px !important;}
#fblikepop #buttonArea a:hover {color: #333 !important;text-decoration: none !important;border: 0 !important;}
#fblikepop #popupMessage {font-size: 12px !important;font-weight: normal !important;line-height: 22px;padding: 8px;background: #fff !important;}
#fblikepop #counter-display {float: right;font-size: 11px !important;font-weight: normal !important;margin: 5px 0 0 0;text-align: right;line-height: 16px;}

Kemudian Copy kode di bawah ini dan letakan di atas </body>

CSS<script type=text/javascript>
//<![CDATA[
 kakinetworkdotcom01username="253664224684238", //ID atau username fanpage
 kakinetworkdotcom01title="Join us at Facebook!", //Tulisan yang tampil di bar
 kakinetworkdotcom01skin="01", //Skin untuk gambar
 kakinetworkdotcom01time="50", //Mengatur berapa lama widget tampil (dalam detik)
 kakinetworkdotcom01wait="0", //Mengatu lama widget akan tampil ketika blog baru di buka
 kakinetworkdotcom01lang="en" //Kode bahasa yang digunakan widget (Indonesia = ID
 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //true ganti dengan false jika ingin menghilangkan tombol close
//]]>
</script>

Lalu simpan Template sobat, kemudian lihat di blog sobat apakah cara ini berhasil atau tidak

( Baca juga : Cara membuat kotak script keren di dalam postingan blog )

Demikian Cara Membuat Facebook Like Box Melayang Dengan Timer yang dapat Zerone Blog berikan semoga bermanfaat ya, Terimakasih sudah mengunjungi Zerone Blog.

Go to link Download

Cara Membuat Facebook Like Box di Blog

Banyak cara dan penggabungan sebuah blog dengan media jejaring sosial, salah satunya adalah dengan menambahkan box Facebook pada sebuah blog. Hal ini dilakukan sebagai salah satu bentuk promosi blog anda. Cara Membuat Facebook Like Box di Blog tidaklah susah, namun sebelum membuatnya terlebih dahulu simaklah penjelasan dibawah ini

Sedikit mengulas cara kerja Facebook Like Box ini yaitu ketika salah seorang rekan anda me-like like box di blog anda atau home pagenya maka secara tidak langsung orang tersebut telah berlangganan artikel blog anda. Hal ini juga harus didukung oleh RSS Graffiti yang mempublikasikan postingan baru blog anda kedalam halaman facebook atau halaman profil yang Anda miliki

Kembali kepokok permasalahan, ada sesuatu yang saya lupa yaitu memberitahukannya kepada Anda, bahwa sebelum membuat facebook like box ini Anda juga harus sudah memiliki halama facebook atau facebook page, karena itu salah satu syart untuk membuat facebook like box ini. Jika Anda belum membuatnya silahkan terlebih dahulu.

Jika sudah memilikinya, sekarang kita langsung saja ke TKP ::

1. Anda harus login ke facebook pribadi Anda.
2. Agar lebih mudah silahkan klik facebook Developers ini untuk lansung menuju ke Social Plugins .
3. Kemudia Anda pilih Like Box. maka akan muncul window seperti dibawah ini :

Setelah klik Like Box, Muncul seperti Ini..

4. Keterangan Gambar :

Facebook Page URL : diisi dengan URL facebook fans page milik Anda

Width : lebar fans like box nantinya

Height : tinggi Fans like box nantinya. Kosongkan saja bagian ini, tinggi akan menyesuaikan

Color scheme : Ada dua pilihan warna di sini. Light untuk warna terang (putih) dan dark untuk warna gelap (hitam)

Show Faces : Beri tanda centang apabila ingin menampilkan avatar orang-orang yang menyukai fans page Anda atau pilih No untuk menyembunyikannya

Show Stream : Beri tanda centang apabila ingin menampilkan situasi terbaru (update terbaru) dari halaman fans page milik Anda

Show Header : Beri tanda centang apabila ingin menampilkan “find us on facebook”

Jika sudah melakukan konfigurasi yang menurut Anda baik dan sesuai kehendak. Klik “Get Code” untuk mengambil code fans like box tersebut. Setelah itu akan muncul window baru seperti dibawah ini :

Setelah itu, Muncul seperti ini.

5. Klik IFRAME, nah maka akan keluar kodenya, setelah itu anda copy ke blog Anda Caranya:

Pilih menu Desain/Rancangan

Tambah Gadget

Kemudian pilih HTML/Java Script

Paste Kode Facebook Like Box tadi kedalamnya

Kemudian save

Go to link Download

Friday, December 30, 2016

Cara Membuat Like Box Facebook Valid HTML5

Thursday, December 29, 2016

Cara Membuat Like Box FP Keren Melayang versi terbaru 2013

Tuesday, December 27, 2016

Cara Membuat Widget Like Box Facebook di Blog

Monday, December 26, 2016

Cara Membuat Like Fanspage Facebook Follow Twitter Melayang di Blog Like Box

Thursday, December 22, 2016

Cara membuat Like Box Facebook Dengan Tambahan Kata bergerak

Wednesday, December 7, 2016

Cara Membuat Fanpage Facebook dan Pasang Like Box di Blog

Tuesday, December 6, 2016

Cara Membuat Search Box Mirip Apple com

Sunday, November 27, 2016

Cara Membuat Scroll Box

Sunday, November 20, 2016

Cara Membuat Box Terima Kasih Sudah Berkomentar pada Blog

Sunday, November 13, 2016

Cara Membuat Subscribe Box Keren di Blog

Cara Memasang Subscribe Box keren di Blog

Sunday, November 6, 2016

Cara Membuat Chat Box Buku Tamu

Cara Membuat Facebook Like Box Melayang Dengan Timer Terbaru 2015

Membuat Facebook Like Box Melayang Dengan Timer

Cara Membuat Facebook Like Box Melayang Dengan Timer

Thursday, November 3, 2016

Cara Membuat Facebook Like Box di Blog