Membuat Box Code / Kotak Script Pada Postingan Blog

Setelah selesai denagn artikel saya yang membahas tentang bagaimana membuat pop up facebook fanpage melayang yang ringan dan keren, kali ini saya akn membahas tentang bagimana membuat kode script atau box code pada postingan blog.

Box code atau kode script digunakan untuk meletakkan script agar terlihat rapi dan teratur, sehingga tampilan laman akan disukai oleh pengunjung dan pengunjung akan mempercayai blog kita bahwa blog dapat memberikan informasi yang bagus dan sesuai dengan keinginan denagn tampilan yang sangat rapi.

Berikut ini adalah tampilan code box beserta scriptnya

<div style="border: 2px #5f200e solid; padding: 10px; background-color: #d9da81; text-align: left;"> Kode Script Anda Disini…….</div>

 <div style="border: 0; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div> 

<div style="border: 2px #006400 ridge; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini…….</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini……</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Kode Script Anda Disini……</div> 

Bagaimana cara memasangnya ?

• masukan script di atas pada mode html (ubah mode compose menjadi html).
• untuk mempermudah, selesaikan terlebih dulu postingan, kemudian tentukan dimana kita akan meletakkan script. kemudian selesai.
• setelah itu masuk kembali ke mode compose
• masukkan script yang di inginkan
• dan selseai.

Mudah mudahan cara ini dapat bermanfaat :)

baca juga : Mendaftar adsense denagn mudah, dan mendapatkan uang secara gratis

Cara Menambahkan Pop Up Facebook Fanpage Melayang Keren Blog

Setelah kemarin saya membahas tentang bagaimana caranya meningkatkan pageview dan traffic pada blog baru, kali ini saya akan memberikan tips / trik mudah utnuk menambahkan pop up facebook melayang pada blog.

Untuk mendapatkan traffic dari facebook memang mudah. Salah satunya itu dengan mengajak pengunjung blog menyukai situs yang kita kelola. Nah, dengan bergabungnya mereka dengan blog kita di facebook, secara otomatis jika kita mengeposkan artikel, maka mereka akan melihat artikel kita dan berkemungkinan untuk mengklinya.

Script yang saya gunakan ini tidak mengutak atik template (tidak di letakkan langsung pada template). dan pop up facebook melayang yang akan saya share ini sangatlah SEO-friendly juga ringan.

Langkah-langkahnya :

• Masuk ke blogger
• Masuk layout
• Klik add a gadget / tambah gadget (dimana saja, asal ada tulisan "add a widget" / "tambahkan widget").

• setelah itu akan muncul pop up dan pilihlah HTML / JavaScript. Klik maka akan muncul seperti di bawah ini.

• Masukkan Script Berikut

<style scoped='' type='text/css'>
#fb-fanbox {display:none;background:rgba(0,0,0,0.9);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999;-webkit-transform:translateZ(0);}
#fb-boxclose {width:100%;height:100%;-webkit-transform:translateZ(0);}
#fb-boxview {background:#fff;border:8px solid #03a9f4;width:340px;height:230px;position:absolute;top:33%;left:37%;border-radius:3px;}
#fb-closebox {float:right;cursor:pointer;position:absolute;right:-1px;top:-2px;}
#fb-closebox:before {content:"CLOSE";padding:5px 8px;background:#03a9f4;color:#fff;font-weight:normal;font-size:10px;font-family:inherit;}
#fb-boxlink,#fb-boxlink a.visited,#fb-boxlink a,#fb-boxlink a:hover {color:#aaaaaa;font-size:9px;text-decoration:none;text-align:center;padding:5px;}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// Pengaturan cookie
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// Dapatkan cookie
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fb-fanbox').delay(3000).fadeIn('fast');
$('#fb-closebox, #fb-boxclose').click(function(){
$('#fb-fanbox').stop().fadeOut('fast');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fb-fanbox'>
<div id='fb-boxclose'>
</div>
<div id='fb-boxview'>
<div id='fb-closebox'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/zenhuzainiblog&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border:none;overflow:hidden;width:339px;height:200px;'></iframe>
</div>
</div>

• Klik save.

Dan lihat hasilnya.

Keterangan code script :

• Ubah https://www.facebook.com/zenhuzainiblog menjadi nama url facebook page anda.
• untuk memunculkan pop up pada setiap kali halaman di buka, maka hapus kode ini  $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); 
• Untuk mengatur jeda waktu munculnya pop up atur pada kode berikut .delay(3000).

Mungkin hanya ini yangs aya bisa berikan. mudah-mudahan dapat bermanfaat dan pengunjug atau traffic blog anda semakin meningkat.

Baca juga : Cara mudah untuk meningkatkan pengunjung blog dengan cepat.