01 June 2012

CARA EDIT PAGE LOGIN HOTSPOT DI MIKROTIK

Bagi anda yang tidak tau cara membuat tampilan login sendiri. Saya akan sharing hasil editan tampilan login mikrotik yang saya edit sendiri.
Anda mendownload nya di SINI

Tampilan login hotspot mikrotik editan saya :


Bagi anda yang ingin meng-edit tampilan login hotspot saya, berikut langkah2 nya :


Mengganti Title / Judul Hotspot
  • Buka file yang bernama login dengan notepad / software desain website, seperti Macromedia Dreamweaver
  • Kemudian cari kode berikut : <title>PFV HOTSPOT ZONE</title>
  • Untuk memudahkan mencari kode berikut dengan cara menekan CTRL+F 
  • Ganti tulisan berwarna merah dengan nama hotspot anda.
  •  Jika sudah anda ganti kemudian Simpan.

Mengganti Favicon


  • Buka file yang bernama login dengan notepad / software desain website, seperti Macromedia Dreamweaver.
  • Kemudian cari kode berikut : <link rel="shortcut icon" href="http://www.pfv-tkj.blogspot.com/favicon.ico" type="image/x-icon">
  • untuk memudahkan mencari kode berikut dengan cara menekan CTRL+F 
  • Ganti tulisan berwarna merah dengan alamat website/blog anda.
  • Setelah anda mengganti dengan alamat website/blog anda, kemudian Simpan.
Lakukan juga hal seperti di atas pada file yang bernama: alogin, logout, kontak, registrasi, dan status. Dan jangan di ganti nama file yang sudah ada, Jika anda menggantinya nanti jika anda mengupload file nya ke mikrotik anda maka tampilannya akan gagal/tidak akan muncul.

Mengganti Background
Ganti nama gambar anda dengan nama back, kemudian simpan di folder img. Dan berextensi jpg.
Gambar tidak harus berextensi JPG anda juga bisa menggunakan yang berextensi GIF, BMP, dan lainnya. Asalkan pada script nya anda ganti juga extensi File nya. Jika anda tidak tahu cara nya berikut langkah - langkahnya :
  • Buka file yang bernama style dengan notepad / software desain website, seperti Macromedia Dreamweaver.
  •  Cari kode berikut : background-image:url(img/back.jpg);
  • Kemudian ganti jpg dengan extensi gambar anda, misalnya gambar anda berextensi gif. Maka Hasilnya akan menjadi seperti ini : background-image:url(img/back.gif);
  • Jika Sudah, Kemudian Simpan.
Mengganti Warna Tulisan
  • Buka file yang bernama style dengan notepad / software desain website, seperti Macromedia Dreamweaver.
  •  Cari kode berikut : color: #000000;
  • Ganti angka 000000 Dengan Kode warna sesuai keinginan anda.
  • Kemudian Simpan.


Mengganti gambar dan link alogin
alogin merupakan halaman yang akan muncul setelah kita berhasil login ke hotspot mikrotik dan akan menuju ke sebuah website sesuai dengan yang kita atur. Tampilannya seperti di bawah ini :


Cara mengganti gambar nya sangatlah mudah anda tinggal mengganti nama gambar yang anda inginkan dengan nama LogoSelamatDatang dan harus berextensi JPG. Kemudian copy gambar anda ke folder img.
Gambar tidak harus berextensi JPG anda juga bisa menggunakan yang berextensi GIF, BMP, dan lainnya. Asalkan pada script nya anda ganti juga extensi File nya. Jika anda tidak tahu cara nya berikut langkah - langkahnya :
  • Buka file yang bernama alogin dengan notepad / software desain website, seperti Macromedia Dreamweaver.
  • Setelah itu cari kode berikut:  "img/LogoSelamatDatang.jpg"
  • Ganti jpg nya dengan extensi file gambar anda. Jika file gambar anda gif, maka anda ganti menjadi gif. Maka hasilnya akan menjadi seperti ini "img/LogoSelamatDatang.gif"
  • Kemudian Simpan.

Cara Mengganti Link alogin
  • Buka file yang bernama alogin dengan notepad / software desain website, seperti Macromedia Dreamweaver.
  • Cari kode berikut : "http://www.google.co.id"
  • Kemudin ganti dengan alamat yang anda inginkan. Misalnya ke alamat website/blog anda. Lumayan kan untuk menambah pageview :) .
  • Lalu Simpan.
Untuk cara upload nya anda bisa melihat di : Cara Upload Tampilan Hotspot Mikrotik Buatan Sendiri
Demikian Penjelasan Dari Saya.
Semoga Bermanfaat.
Step by Step Setup Hotspot dengan Halaman Login Mikrotik Router

Step by Step Setup Hotspot dengan Halaman Login Mikrotik Router

1.    Setup Hotspot Mikrotik
Paling mudah menurut saya bisa menggunakan Mikrotik, ada fasilitas IP – Hotspot. Hotspot disini tidak harus berupa WiFi, tetapi jaringnan kebel-pun bisa anda setup jadi seperti Hotspot. Setiap pengguna yang ingin login harus memasukan user/password ketika pertama kali browsing. Misal seperti tampil digambar berikut, misal pertama kali user yang akan mengakses situs tertentu akan di redirect ke halaman login.
Tampilan Login saat Browsing
Tampilan Login saat Browsing
Langkah mudah setup HOTSPOT Mikrotik :
1.    Pertama masuk ek router dengan WINBOX
Misal kita mempunyai 2 Interface :
Up yang ke Internet
LAN  yang ke LAN (akan disetup jadi Hotspot)
2.    Winbox : Pilih Menu IP -> Hotspot
3.    Hotspot : Pilih tab Server -> Hotspot Setup
4.    Selanjutnya Ikuti Langkah berikut :
Step By Step :
  1. Pilih ethernet
  2. Seting IP
  3. Seting DHCP IP pool (batasan IP untuk DHCP)
  4. Sertifikat (none saja)
  5. SMTP Biarkan 0.0.0.0 saja
  6. DNS sesuaikan dengan DNS anda, atau tanyakan ISP anda
  7. DNS name untuk Hotspot Anda, bisa juga anda Kosongi -> OK
Untuk IP, DNS silahkan sesuaikan dengan paramater IP yang ada di tempat anda.
2.    Menambah User baru
Menambah User baru seraca mudah bisa dilakukan dengan cara
Pilih : IP -> Hospot -> User -> +
Tulis Nama User dan Password
3.    Lebih jauh, Menambah User dengan Profil Berbeda
Dalam Mikrotik hospot memberikan kemudahan kita untuk men-setup user dengan profil yang berbeda, misalnya ada 2 profil user VIP dan Biasa. Dimana VIP bisa memperoleh kecepatan akses yang lebih dari user bisa, meskipun sama-sama menggunakan fasilitas hotspot. Dalam captur gambar saya membuat beberapa profil berbeda misalnya : Mahasiswa, Karyawan, Dosen, Pejabat dan Tamu. Nama dan setingan dari profil bisa anda tentukan sendiri. Akan saya coba tunjukan caranya, mensetup salah satu profil.
a. Setup profil dilakukan dengan cara :
Winbox         : IP -> Hotspot -> User Profil ->
Hotspot User Profil     : General -> Nama Profil (misal : Mahasiswa) -> Rate Limit (tx/rx) -> OK
Buat User profil mikrotik hotspot
Buat User profil mikrotik hotspot
Pada “Rate Limit” bisa anda isikan misal dengan beberapa cara (nilai bisa anda sesuaikan sesuai kebijakan IT ditempat anda ), misal :
1.    128 k         : Upload dan download 128 kbps
2.    256k/128k     : Uplaod 256kbps dan download 128 kbps
3.    x1k/y1k x2k/y2k x3k/y3k x5/y5 P x6k/y6k  -> Cara yang paling bagus Menurut saya.
x1k/y1k    : Rate (TX rate/ RX rate misal : 128k/1024k)
x2k/y2k    : Burst Rate (misal : 256k/2048k)
x3k/y3k    : Burst Threshold (misal : 160k/1280k)
x5/y5        : Burst Time (dalam detik misal : 60/60)
P                : Prioritas (nilai 1-8), 1 adalah prioritas utama
x6k/y6k    : Minimum rate: (i.e 32k/256k)
Untuk Cara yang ketiga bisa dilihat efeknya akan seperti gambar berikut :
Burst time dan Limit di Mikrotik
Burst time dan Limit di Mikrotik
b. Penambahan User baru
WINBOX     : IP -> User ->
Hotspot User
Name         : Isikan nama user
Password     : Password User
Profile        : Pilih profile dari user yang akan dibuat
OK dan Lihat hasilnya di List user yang ada.
4.    Modifikasi Halaman Login
Yang bisa anda lakukan untuk merubah tampilan Login adalah dengan memodifikasi file. Ambil file menggunakan FTP ke Mikrotik anda. Salah satu file yang bisa dimodifikasi adalah login.html sebelumnya saya sarankan untuk membackup dulu file tersebut sebelum melakukan perubahan. Setelah selesai anda bisa mengupload lagi dan mengecek, apakah sudah bekerja dengan benar atau belum. Selamat mencoba.

cara memasang menu slide di blog

Satu lagi menu navigasi blog yang akan saya perkenalkan kepada teman-teman disini, yaitu menu slide-in. Slide in menu merupakan sebuah menu yang bentuknya agak unik karena biasanya berada di bagian samping atau atas sebuah blog. Menu ini tidak tampak secara keseluruhan saat blog terbuka, setelah mouse diarahkan ke menu maka menu akan bergeser /terbuka sehingga menampakkan link-link atau sub menu yang ada di dalam slide menu. Selain menu navigasi horisontal drop down, menu slide-in ini bisa menjadi alternatif untuk menempatkan link-link yang akan anda promosikan kepada pengunjung.
Dalam contoh ini terdapat tiga menu slide in, yaitu di bagian kiri, atas dan sebelah kanan blog. Contoh slide menu bisa dilihat di bawah ini, atau jika ingin lihat contoh di blog bisa lihat disini blog demo template
Langkah-langkah pemasangannya adalah sebagai berikut :
  1. Login ke Blogger.
  2. Klik Tata Letak
  3. Klik tab Elemen Halaman
  4. klik Tambah Gadget
  5. Kemudian klik yang HTML/Java Script.

Kemudian masukkan kode berikut ke dalam gadget html/javascript

<script>
if (typeof window.attachEvent=='object'){
document.write('<!--[if lte IE 6]>\n'+
'<script type="text/javascript">\n'+
'var ie6_or_less=1;\n'+
'<\/script>\n'+
'<![endif]-->\n'+
'<!--[if lt IE 5.5]>\n'+
'<script type="text/javascript">\n'+
'var less_than_ie5_5=1;\n'+
'<\/script>\n'+
'<![endif]-->')
}

var menu=[], resizereinit=true;
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body;
}

function getedge(o, is_top){
var edge;
if (is_top)
edge=window.pageYOffset? window.pageYOffset : truebody().scrollTop? truebody().scrollTop : 0;
else{
edge=o.menupos=='left'? 0 : truebody().clientWidth? truebody().clientWidth : window.innerWidth&&truebody().offsetHeight<=window.innerHeight? window.innerWidth : window.innerWidth? window.innerWidth-20 : 0;
edge+=window.pageXOffset? window.pageXOffset : truebody().scrollLeft? truebody().scrollLeft: 0;
}
return edge;
}

function keep_in_view(o){
if(o.keepinview){
if(o.m.ft){
o.m.ft=0;
o.m.topP=o.m.offsetTop;
o.m.ltop=0;
}
var pt=getedge(o, 'top'), ks=typeof o.keepinview=='number'&&o.keepinview<o.m.topP&&o.keepinview>0? o.keepinview : o.m.topP, smooth=0;
if (pt!=o.m.ltop){
if(o.menupos=='top')
o.m.style.visibility='hidden';
smooth = pt>o.m.topP-ks? .2 * (pt - o.m.ltop - o.m.topP + ks) : o.m.ltop>0? -.2 * o.m.ltop : 0;
smooth = smooth > 0 ? Math.ceil(smooth) : Math.floor(smooth);
}
else if(o.menupos=='top')
o.m.style.visibility='';
o.m.style.top=(o.m.style.top? parseInt(o.m.style.top) : o.m.topP)+smooth+'px';
o.m.ltop += smooth;
}
if(o.menupos=='top'){
if(typeof o.menuleft=='string'){
o.m.style.left=o.menuleft
o.m.style.marginLeft=Math.floor(o.m.getElementsByTagName('div')[0].offsetWidth/-2)+'px';
o.lleft=o.m.offsetLeft;
}
o.m.style.marginLeft=0;
o.m.style.left=o.lleft+(window.pageXOffset? window.pageXOffset : truebody().scrollLeft? truebody().scrollLeft: 0)+'px';
}
else
o.m.style.left=getedge(o)-(o.menupos=='right'? o.m.offsetWidth : 0)+'px';
}
function move(el, num){
el.getElementsByTagName('div')[0].style[el.menupos]=parseInt(el.getElementsByTagName('div')[0].style[el.menupos])+num+'px';
if(el.menupos=='right'){
if(el.kviewtype=='absolute')
el.style.left=parseInt(el.style.left)-num+'px';
el.style.width=parseInt(el.style.width)+num+'px';
}
if(num>0)
el.moving=setTimeout(function(){movein(el)}, el.menuspeed)
else
el.moving=setTimeout(function(){moveout1(el)}, el.menuspeed)
}
function movein(el){
var m1=parseInt(el.getElementsByTagName('div')[0].style[el.menupos]);
if(el.moving)
clearTimeout(el.moving);
if (m1<-1*el.borderwidth)
move(el, Math.min(-1*m1-el.borderwidth, 10));
}
function moveout(el){
if(el.moving)
clearTimeout(el.moving);
el.moving=setTimeout(function(){moveout1(el)}, el.menupause);
}
function moveout1(el){
var aw=el.menupos=='top'? el.b.offsetHeight : el.b.offsetWidth, m1=el.getElementsByTagName('div')[0];
if(el.moving)
clearTimeout(el.moving);
if (parseInt(m1.style[el.menupos])>aw-(el.menupos=='top'? m1.offsetHeight : m1.offsetWidth)+10)
move(el, -10);
else {
m1.style[el.menupos]=aw-(el.menupos=='top'? m1.offsetHeight : m1.offsetWidth)+'px';
if(el.menupos=='right'){
el.style.width=aw+'px';
if(el.kviewtype=='absolute'){
var ed=truebody().clientWidth? truebody().clientWidth : window.innerWidth&&truebody().offsetHeight<=window.innerHeight? window.innerWidth : window.innerWidth? window.innerWidth-20 : 0;
ed+=window.pageXOffset? window.pageXOffset : truebody().scrollLeft? truebody().scrollLeft: 0;
el.style.left=ed-el.offsetWidth+'px';
}
}
}
}
function to_em(n, o){
return Math.round((n/(16*parseInt(o.fontsize)/100))*1000)/1000;
}
function getrows(o){
var r=o.menuItems.length+(o.wrapbar? 1 : 0);
for (var i_tem = 0; i_tem < o.menuItems.length; i_tem++)
if (o.menuItems[i_tem][4]&&o.menuItems[i_tem][4]=='no')
r--;
return r;
}
function make_bar(o){
var bt=o.menupos=='right'||o.menupos=='top'? '<tr>' : '';
bt+='<td id="'+o.id+'bar" '+(o.menupos=='top'? 'colspan="'+o.d_colspan : 'rowspan="'+getrows(o))+'">'
if (!/<img/.test(o.bartext.toLowerCase())){
for (var i_tem = 0; i_tem < o.bartext.length-(o.menupos=='top'? 1 : 0); i_tem++)
bt+=o.menupos=='top'&&o.bartext.charAt(i_tem)==' '? '\u00a0 ' : o.menupos=='top'? o.bartext.charAt(i_tem)+' ' : '<br>'+o.bartext.charAt(i_tem);
bt+=o.menupos=='top'? o.bartext.charAt(o.bartext.length-1)+'</td>' : '<br>\u00a0</td>';
}
else
bt+=o.bartext+'</td>'
return bt+(o.menupos=='right'? '\n' : '</tr>\n');
}

function make_style(o){
if(o.user_defined_stylesheet&&!o.design_mode)
return '';
var sheet=''
sheet+='#'+o.id+' {\n'+
(o.menupos=='top'? 'top:0;\n' : 'top:'+o.menutop+'px; /*set initial Height from top*/\n')+
(o.menupos=='top'? 'left:'+o.menuleft+(typeof o.menuleft=='number'? 'px' : '')+';\n' : '')+
(o.menupos=='right'&&o.kviewtype=='fixed'? 'right:0;\n' : '')+
'position:'+o.kviewtype+';\n'+
'overflow:'+(o.menupos=='right'? 'hidden' : 'visible')+';\n'+
'z-index:100;\n'+
(o.menupos=='left'? 'left:0;\n' : '')+
'}\n'+
'#'+o.id+' div {\n'+
'border-width:'+(typeof o.outbrdwidth=='number'? o.outbrdwidth+'px' : o.outbrdwidth)+'; /*Menu\'s outer border*/\n'+
'border-style:'+o.outbrdstyle+';\n'+
(o.outbrdcolor=='none'? '' : 'border-color:'+o.outbrdcolor+';\n')+
'position:absolute;\n'+
'color:black;\n'+
'background-color:transparent;\n'+
'}\n'+
'#'+o.id+' table {\n'+
'border:'+o.borderwidth+'px '+o.borderstyle+' '+o.bordercolor+'; /*Menu\'s inner border*/\n'+
(o.menupos=='top'? 'border-left-width:0;\n' : '')+
(o.menupos=='top'? 'border-bottom-width:0;\n' : '')+
'font-family:'+o.menufont+', sans-serif; /*Overall font for Menu*/\n'+
'font-size:'+o.fontsize+';\n'+
'border-collapse:collapse;\n'+
'background-color:'+(o.allowtransparent? 'transparent' : o.bordercolor)+';\n'+
'width:'+to_em(o.barwidth+o.hdingwidth+o.borderwidth*(o.d_colspan+2), o)+'em;\n'+
'}\n'+
'#'+o.id+' td { /*Characteristics for cells in the menu table - do not specify width here*/\n'+
'border-bottom:'+o.borderwidth+'px '+o.borderstyle+' '+o.bordercolor+';\n'+
'border-left:'+o.borderwidth+'px '+o.borderstyle+' '+o.bordercolor+';\n'+
'height:'+to_em(o.linkheight, o)+'em;\n'+
'padding:0;\n'+
'margin:0;\n'+
'text-align:'+o.linktxtalign+';\n'+
'}\n'+
'#'+o.id+' #'+o.id+'bar { /*Characteristics for initially visible \'draw\' bar (the vertical cell)*/\n'+
(o.menupos=='top'? 'height:' : 'width:')+to_em(o.barwidth+(document.all||o.menupos=='top'? o.borderwidth*2 : 0), o)+'em;\n'+
'background-color:'+o.barbgcolor+';\n'+
'color:'+o.barcolor+';\n'+
'font-weight:'+o.barfontweight+';\n'+
'text-align:'+o.baralign+';\n'+
(o.menupos=='top'? '' : 'border-width:0;\n')+
'cursor:default;\n'+
'}\n'+
'#'+o.id+' .heading { /*Characteristics for heading cells in the menu table*/\n'+
'height:'+to_em(o.hdingheight, o)+'em;\n'+
'color:'+o.hdingcolor+';\n'+
'font-weight:'+o.hdingfontweight+';\n'+
'text-indent:'+o.hdingindent+'ex;\n'+
'background-color:'+o.hdingbgcolor+'; /*Background Color for menu headings */\n'+
'width:'+to_em(o.hdingwidth, o)+'em; /*This will be the menu body width. This'+(o.menupos!='top'? ' (plus #'+o.id+'bar width for left and right menus)' : '')+' and 4 times the border width should also be the menu table\'s approximate width*/\n'+
'vertical-align:'+o.hdingvalign+';\n'+
'text-align:'+o.hdingtxtalign+';\n'+
'border-left-color:'+o.hdingbgcolor+';\n'+
'border-left-style:solid;\n'+
'}\n'+
(o.wrapbar&&o.menupos!='top'? '#'+o.id+' #'+o.id+'lastrow {\n'+
'height:'+to_em(o.barwidth, o)+'em;\n'+
'background-color:'+o.barbgcolor+';\n'+
'border-width:0;\n'+
'margin:0 0 '+o.borderwidth+'px '+o.borderwidth+'px;\n'+
'}\n' : o.menupos!='top'? '#'+o.id+' #'+o.id+'lastrow {\n'+
'border-bottom-width:0;\n'+
'margin:0 0 '+o.borderwidth+'px '+o.borderwidth+'px;\n'+
'}\n' : '')+
'#'+o.id+' a {\n'+
'width:100%;\n'+
'height:100%;\n'+
'display:block;\n'+
'padding-top:'+to_em(o.linktopad, o)+'em;\n'+
'}\n';
if(o.design_mode){
if(document.getElementById('ooostyle'))
alert('Only one menu\'s script generated styles may be displayed at a time!\n\nCurrently showing '+document.getElementById('ooostyle').tell+'\'s stylesheet\n\n(or there is a syntax error - most\n\u00a0\u00a0\u00a0\u00a0likely in the menuItem.js file)');
else{
var isusing=o.user_defined_stylesheet? ' not' : '';
var sw=(window.innerWidth? window.innerWidth : truebody().clientWidth)/1.5;
document.write('<textarea id="ooostyle" cols="'+Math.floor(sw/8)+'" rows="65" wrap="off" style="margin-left:-'+Math.floor(sw/2)+'px;overflow:auto;position:absolute;top:10px;left:50%;z-index:1000;">\n')
document.write('\/* '+o.id+'\'s Script Generated Styles: */\n\/* '+o.id+' is'+isusing+' currently using these via the script */\n\n'+sheet);
document.write('\n\/* End '+o.id+'\'s Script Generated Styles */');
document.write('</textarea>')
document.getElementById('ooostyle').tell=o.id;
}
}
if(!o.user_defined_stylesheet)
return '<style type="text/css">\n'+sheet+'</style>';
return '';
}
function make_style_make_menu(o, s){
if(s){
if(!o.id) {alert('a unique id is required for each menu');return;};
if(!o.menuItems||o.menuItems.constructor!=Array) {alert('an array of menu items is required for each menu');return;};
if(!o.menutop) {o.menutop=150};
if(!o.menuleft) {o.menuleft='50%'};
if(!o.keepinview&&typeof o.keepinview=='boolean')
o.keepinview=false;
else if(!o.keepinview) {o.keepinview=30};
if(!o.menuspeed) {o.menuspeed=20};
if(!o.menupause) {o.menupause=500};
if(!o.d_colspan) {o.d_colspan=2};
if(!o.allowtransparent) {o.allowtransparent=false};
if(!o.barwidth) {o.barwidth=22};
if(!o.hdingwidth) {o.hdingwidth=149};
if(!o.hdingheight) {o.hdingheight=22};
if(!o.hdingindent) {o.hdingindent=1};
if(!o.linkheight) {o.linkheight=16};
if(!o.outbrdwidth) {o.outbrdwidth=0};
if(!o.outbrdcolor) {o.outbrdcolor="none"};
if(!o.outbrdstyle) {o.outbrdstyle="none"};
if(!o.borderwidth) {o.borderwidth=1};
if(!o.bordercolor) {o.bordercolor="black"};
if(!o.borderstyle) {o.borderstyle="solid"};
if(!o.barcolor) {o.barcolor="white"};
if(!o.barbgcolor) {o.barbgcolor="#444444"};
if(!o.barfontweight) {o.barfontweight="bold"};
if(!o.baralign) {o.baralign="center"};
if(!o.menufont) {o.menufont="verdana"};
if(!o.fontsize) {o.fontsize="80%"};
if(!o.hdingcolor) {o.hdingcolor="white"};
if(!o.hdingbgcolor) {o.hdingbgcolor="#170088"};
if(!o.hdingfontweight) {o.hdingfontweight="bold"};
if(!o.hdingvalign) {o.hdingvalign="middle"};
if(!o.hdingtxtalign) {o.hdingtxtalign="left"};
if(!o.linktopad) {o.linktopad=0};
if(!o.linktxtalign) {o.linktxtalign="left"};
if(!o.linktarget) {o.linktarget=""};
if(!o.menupos) {o.menupos="left"};
if(!o.bartext) {o.bartext="SIDE MENU"};
if(!o.user_defined_stylesheet) {o.user_defined_stylesheet=false};
if(!o.user_defined_markup) {o.user_defined_markup=false};
if(!o.design_mode) {o.design_mode=false};
if(!o.wrapbar) {o.wrapbar=false};
if(!o.kviewtype) {o.kviewtype='absolute'};
if(typeof ie6_or_less!='undefined')
o.kviewtype='absolute';
else if(o.menupos=='top'&&o.kviewtype=='absolute')
o.kviewtype='fixed';
while(!o.menuItems[o.menuItems.length-1])
o.menuItems.length=o.menuItems.length-1;
document.write(make_style(o));
return;
}
else {
if(o.design_mode||!o.user_defined_markup){
var hw=o.hdingwidth;

var tb='<div id="'+o.id+'" onmouseover="movein(this);" onmouseout="moveout(this);"><div><table>\n';
tb+=o.menupos=='right'? make_bar(o) : '';
for (var i_tem = 0; i_tem < o.menuItems.length; i_tem++){
if ((o.menupos=='top'&&i_tem==0)||i_tem>0&&(!o.menuItems[i_tem-1][4]||o.menuItems[i_tem-1][4]!=='no'))
tb+='<tr>'
if (o.menuItems[i_tem][1]&&o.menuItems[i_tem][1]!==''){
tb+='<td '+(i_tem==o.menuItems.length-1&&!o.wrapbar&&o.menupos!='top'? 'id="'+o.id+'lastrow" ' : '')+'colspan="'+(o.menuItems[i_tem][3]&&o.menuItems[i_tem][3]!==''? o.menuItems[i_tem][3] : o.d_colspan)+'"><a href="'+o.menuItems[i_tem][1]+'" target="'+(o.menuItems[i_tem][2]? o.menuItems[i_tem][2] : o.linktarget)+'">'+o.menuItems[i_tem][0]+'</a></td>'
}
else
tb+='<td '+(i_tem==o.menuItems.length-1&&!o.wrapbar&&o.menupos!='top'? 'id="'+o.id+'lastrow" ' : '')+'class="heading" '+(o.menuItems[i_tem][3]&&o.menuItems[i_tem][3]!==''&&o.menuItems[i_tem][3]!==o.d_colspan? 'style="width:'+to_em(hw*o.menuItems[i_tem][3]/o.d_colspan, o)+'em;'+(i_tem>0&&o.menuItems[i_tem-1][4]&&o.menuItems[i_tem-1][4]=='no'? 'border-left-width:0;margin-left:'+o.borderwidth+'px;' : '')+'" ' : '')+'colspan="'+(o.menuItems[i_tem][3]&&o.menuItems[i_tem][3]!==''? o.menuItems[i_tem][3] : o.d_colspan)+'">'+o.menuItems[i_tem][0]+'</td>'
if (!o.menuItems[i_tem][4]||o.menuItems[i_tem][4]!=='no')
tb+=o.menupos=='left'&&i_tem==0? make_bar(o) : '</tr>\n';
}
tb+=o.wrapbar&&o.menupos!='top'? '<tr><td id="'+o.id+'lastrow" colspan="'+o.d_colspan+'">\u00a0</td></tr>\n' : '';
tb+=o.menupos=='top'? make_bar(o) : '';

if(!o.user_defined_markup)
document.write(tb+'</table></div></div>')
}
if(o.design_mode)
document.getElementById('ooostyle').value+='\n\n<!-- The Markup for '+o.id+' -->\n\n'+tb+'</table></div></div>\n\n<!-- End '+o.id+'\'s Markup -->'
o.m=document.getElementById(o.id);
var b=document.getElementById(o.id+'bar');
o.m.b=b;
o.m.ft=1;
o.m.menupos=o.menupos;
o.m.menupause=o.menupause;
o.m.menuspeed=o.menuspeed;
o.m.borderwidth=o.borderwidth;
o.m.kviewtype=o.kviewtype;
resizevent(o);
if(o.menupos=='top'&&typeof window.attachEvent=='object'&&typeof ie6_or_less!='undefined')
window.attachEvent('onscroll', function(){o.m.style.visibility='hidden';});
if(o.kviewtype=='absolute'&&(o.menupos!='top'||(typeof ie6_or_less!='undefined'&&typeof window.attachEvent=='object')))
setInterval(function(){keep_in_view(o)}, 20)
}
}

function resizevent(o){
var m1=o.m.getElementsByTagName('div')[0], bo=o.menupos=='top'? o.m.b.offsetHeight : o.m.b.offsetWidth;
m1.style[o.menupos]=bo-(o.menupos=='top'? m1.offsetHeight : m1.offsetWidth)+'px'
if(o.menupos=='right'){
if(o.kviewtype=='absolute')
o.m.style.left=getedge(o)-o.m.offsetWidth+'px';
o.m.style.width=bo+'px';
o.m.style.height=m1.offsetHeight+'px';
if(typeof less_than_ie5_5!='undefined'){
o.m.onmouseover(o.m);
o.m.onmouseout(o.m);
}
}
if(o.menupos=='top'){
o.m.style.width=m1.style.width=o.m.getElementsByTagName('table')[0].offsetWidth+'px';
if(typeof o.menuleft=='string')
o.m.style.marginLeft=Math.floor(m1.offsetWidth/-2)+'px';
}
}
/*

ONTEXTRESIZE EVENT SPOOFER

Including this file in your page will allow you to assign a function
to window.ontextresize, which will be called when the user changes the
size of text on the page.

Used with (as far as I know) permission from: http://forkandspoonhelmet.com/Fork_and_Spoon_Helmet

*/
var ontextresizeLastSize = false;
if (window.attachEvent) window.attachEvent("onload", initOntextresizeListener);
else if (window.addEventListener) window.addEventListener("load", initOntextresizeListener, false);
function initOntextresizeListener() {
if(!resizereinit||typeof less_than_ie5_5!='undefined')
return;
var testDiv = document.createElement("div");
testDiv.style.position = "absolute";
testDiv.style.height = "1em";
testDiv.style.width = "1em";
testDiv.style.top = "-2em";
testDiv.style.left = "-2em";
var docTestDiv = document.body.appendChild(testDiv);
docTestDiv.id = "ontextresizeTestDiv";
ontextresizeListener = setInterval("ontextresizeCheckTestDiv()",100);
}
function ontextresizeCheckTestDiv() {
if (ontextresizeLastSize!=document.getElementById("ontextresizeTestDiv").offsetWidth) {
if (ontextresizeLastSize && window.ontextresize) window.ontextresize.call();
ontextresizeLastSize = document.getElementById("ontextresizeTestDiv").offsetWidth;
}
}
window.ontextresize=function(){
for (var i_tem = 0; i_tem < menu.length; i_tem++)
if(typeof menu[i_tem]!='undefined')
resizevent(menu[i_tem]);
};

function make_menus(){
if(document.getElementById){
for (var i_tem = 0; i_tem < menu.length; i_tem++)
if(typeof menu[i_tem]!='undefined')
make_style_make_menu(menu[i_tem], 's');
for (i_tem = 0; i_tem < menu.length; i_tem++)
if(typeof menu[i_tem]!='undefined')
make_style_make_menu(menu[i_tem]);
}
}
</script>





<script>

/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
* as first mentioned in http://www.dynamicdrive.com/forums
* username:jscheuer1
***********************************************/

//One global variable to set, use true if you want the menus to reinit when the user changes text size (recommended):
resizereinit=true;

menu[1] = {
id:'menu1', //use unique quoted id (quoted) REQUIRED!!
fontsize:'100%', // express as percentage with the % sign
linkheight:22 , // linked horizontal cells height
hdingwidth:210 , // heading - non linked horizontal cells width
// Finished configuration. Use default values for all other settings for this particular menu (menu[1]) ///

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Create Blogger", "http://dummy-ku.blogspot.com/2009/12/how-to-create-blog-with-blogger.html", ""],
["Upload Video", "http://dummy-ku.blogspot.com/2009/12/how-to-upload-video-with-blogger.html",""],
["Change domain", "http://dummy-ku.blogspot.com/2009/12/how-to-change-your-blogspot-domain-name.html", ""],
["Custom Domain", "http://dummy-ku.blogspot.com/2009/12/purchasing-and-setting-up-custom-domain.html", ""],
["Microsoft Service Pack", "http://mycomputerdummies.blogspot.com/2010/02/microsoft-net-famework-35-service-pack.html", ""],
["SATA Driver", "http://mycomputerdummies.blogspot.com/2010/02/free-download-sata-diver-for-intelr.html", ""],

["Excel", "http://mycomputerdummies.blogspot.com/2010/02/error-16-digit-number-in-excel-2003.html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Bug", "http://mycomputerdummies.blogspot.com/2010/02/list-of-error-or-bug-in-excel-2003.html", "",1],

["External Links", "", ""], //create header
["Free widget translator", "http://mycomputerdummies.blogspot.com/2009/12/memasang-widget-google-translator-ke.html", "_new"],
["Free windows update", "http://mycomputerdummies.blogspot.com/2010/03/free-download-drivers-and-updates-for.html", "_new"],
["Photo Gadget", "http://mycomputerdummies.blogspot.com/2010/03/how-to-install-gadgets-on-desktop-photo.html", "_new"], //no comma after last entry
["End"]
]}; // REQUIRED!! do not edit or remove

menu[2] = { // REQUIRED!! This menu explicitly declares all available options even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////
user_defined_stylesheet:false, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:false, //if true, prevents script from generating markup for this menu
design_mode:false, //if true, generates a report of the script generated/intended styles and markup (as a design aid)
menutop:160, // initial top offset - except for top menu, where it is meaningless
menuleft:'45%', // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
keepinview:80, // Use false (for not static) - OR - true or numeric top offset when page scrolls
menuspeed:20, // Speed of menu sliding smaller is faster (interval of milliseconds)
menupause:500, // How long menu stays out when mouse leaves it (in milliseconds)
d_colspan:3, // Available columns in menu body as integer
allowtransparent:false, // true to allow page to show through menu if other bg's are transparent or border has gaps
barwidth:20, // bar (the vertical cell) width
wrapbar:true, // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
hdingwidth:210, // heading - non linked horizontal cells width
hdingheight:25, // heading - non linked horizontal cells height
hdingindent:1, // heading - non linked horizontal cells text-indent represents ex units (@8 pixels decimals allowed)
linkheight:20, // linked horizontal cells height
linktopad:3, // linked horizontal cells top padding
borderwidth:2, // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
bordercolor:'#000080', // inner border color
borderstyle:'solid', // inner border style (solid, dashed, inset, etc.)
outbrdwidth:'0ex 0ex 0ex 0ex', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'lightblue', // outer border color
outbrdstyle:'solid', // outer border style (solid, dashed, inset, etc.)
barcolor:'white', // bar (the vertical cell) text color
barbgcolor:'#4d6814', // bar (the vertical cell) background color
barfontweight:'bold', // bar (the vertical cell) font weight
baralign:'center', // bar (the vertical cell) right left or center text alignment
menufont:'verdana', // menu font
fontsize:'90%', // express as percentage with the % sign
hdingcolor:'white', // heading - non linked horizontal cells text color
hdingbgcolor:'#4d6814', // heading - non linked horizontal cells background color
hdingfontweight:'bold', // heading - non linked horizontal cells font weight
hdingvalign:'middle', // heading - non linked horizontal cells vertical align (top, middle or center)
hdingtxtalign:'left', // heading - non linked horizontal cells right left or center text alignment
linktxtalign:'left', // linked horizontal cells right left or center text alignment
linktarget:'', // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
kviewtype:'fixed', // Type of keepinview - 'fixed' utilizes fixed positioning where available, 'absolute' fluidly follows page scroll
menupos:'top', // set side that menu slides in from (right or left or top)
bartext:'MY MENU', // bar text (the vertical cell) use text or img tag
///////////////////////////
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Hot Sites"], //create header
["Artikel Komputer", "http://artikelkomputerku.blogspot.com/", "_new"],
["Artikel Internet", "http://kalongkalong.blogspot.com/","_new"],
["Belajar Komputer dan SEO", "http://www.komputerseo.com/", "_new"],
["Bisnis online gratis", "http://blogbisnisonlinegratis.blogspot.com/", "_new"],
["Computer Article", "http://mycomputerdummies.blogspot.com//", "_new",],
["Dummy Blog", "http://dummy-ku.blogspot.com/", "_new", 1, "no"],
["Google", "http://www.google.com/", "_new", 1]

]}; // REQUIRED!! do not edit or remove

menu[3] = {
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
bartext:'RIGHT MENU',
menupos:'right',
kviewtype:'fixed',
menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Create Blogger", "http://dummy-ku.blogspot.com/2009/12/how-to-create-blog-with-blogger.html", ""],
["Upload Video", "http://dummy-ku.blogspot.com/2009/12/how-to-upload-video-with-blogger.html",""],
["Change domain", "http://dummy-ku.blogspot.com/2009/12/how-to-change-your-blogspot-domain-name.html", ""],
["Custom Domain", "http://dummy-ku.blogspot.com/2009/12/purchasing-and-setting-up-custom-domain.html", ""],
["Microsoft Service Pack", "http://mycomputerdummies.blogspot.com/2010/02/microsoft-net-famework-35-service-pack.html", ""],
["SATA Driver", "http://mycomputerdummies.blogspot.com/2010/02/free-download-sata-diver-for-intelr.html", ""],

["Excel", "http://mycomputerdummies.blogspot.com/2010/02/error-16-digit-number-in-excel-2003.html", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Bug", "http://mycomputerdummies.blogspot.com/2010/02/list-of-error-or-bug-in-excel-2003.html", "",1],

["External Links", "", ""], //create header
["Free widget translator", "http://mycomputerdummies.blogspot.com/2009/12/memasang-widget-google-translator-ke.html", "_new"],
["Free download", "http://mycomputerdummies.blogspot.com/2010/03/free-download-drivers-and-updates-for.html", "_new"],
["Photo Gadget", "http://mycomputerdummies.blogspot.com/2010/03/how-to-install-gadgets-on-desktop-photo.html", "_new"], //no comma after last entry
["End"]
]}; // REQUIRED!! do not edit or remove

////////////////////Stop Editing/////////////////

make_menus();

</script>

Dalam contoh di atas, anda cukup mengganti url link dan nama link sesuai kebutuhan anda, bisa menambahkan bisa juga mengurangi link. Misalnya: dalam menu 1, di bagian menuitems
menu[1] = {
id:'menu1', //use unique quoted id (quoted) REQUIRED!!
fontsize:'100%', // express as percentage with the % sign
linkheight:22 , // linked horizontal cells height
hdingwidth:210 , // heading - non linked horizontal cells width
// Finished configuration. Use default values for all other settings for this particular menu (menu[1]) ///

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Create Blogger", "http://dummy-ku.blogspot.com/2009/12/how-to-create-blog-with-blogger.html", ""],
nama link : Create blogger
url link : http://dummy-ku.blogspot.com/2009/12/how-to-create-blog-with-blogger.html
Temen-temen bisa ganti nama url dan link sesuai yang diinginkan. Buat teman-teman yang berminat untuk mengutak-atik scripnya, script aslinya bisa dilihat disini omni slide in menu, tapi omni slide in menu.

Nah, gimana gampang kan? Diatas tadi sedikit penjelasan dari saya mengenai cara memasang menu slide-in di blog sebagai alternatif menu navigasi horisonta. Selamat mencoba dan semoga bermanfaat.

Memasang Google CSE di Bawah Posting Blog

Temen-temen blogger tentunya sudah tidak asing lagi dengan Google CSE yang merupakan tempat pencarian berdasarkan keyword yang diinginkan untuk menghasilkan pencarian yang Optimal yang sesuai dengan kata kunci yang ditargetkan. Pada postingan ini akan membahas cara pemasangan Google CSE yang di tampilkan di bawah postingan, yang hasilnya nanti akan seperti gambar di bawah ini :
Google CSE maskolis


Jadi ketika kita membuka judul posting maka Google CSE ini akan tampil dibawah label dan menampilkan hasil pencarian dari keyword yang sesuai dengan label pada postingan. Seperti itulah kira kira, untuk contoh hasilnya yang telah di pasang Autofill Google CSE ini bisa lihat disini, Silahkan klik salah satu postingannya dan anda lihat pada bagian atas komentar atau dibawah label. Anda akan melihat tampilan Google CSE di bawah posting, ya karena ini memang blog demo jadi saya pasang berbagai macam kode HTML untuk praktik termasuk AutoFill Google CSE.

Script yang digunakan ini merupakan Script Autofill Google AJAX Search API CSE yang setelah saya coba coba akhirnya bisa juga di pasang. langsung saja pada proses pemasangannya :
  1. Masuk Dashboard >> Rancangan >> Edit HTML >> Expand Widget Templates
  2. Cari kode seperti ini <b:includable id='comments' var='post'>
  3. Masukan Script di bawah ini tepat dibawah kode di atas.
    <script src='http://www.google.com/jsapi'/>
    <script type='text/javascript'>
    google.load(&#39;search&#39;, &#39;1&#39;);
    function OnLoad() {
    var customSearchControl = new google.search.CustomSearchControl(&#39;ID-CSE-bloganda&#39;);
    customSearchControl.draw(&#39;content&#39;);
    customSearchControl.execute(&#39;<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>&#39;);}
    google.setOnLoadCallback(OnLoad);
    </script>
    <div id='content'>Loading...</div>
  4. Ganti ID-CSE-bloganda dengan ID Google CSE Blogger kanmu. Pastikan blogger sudah mendaftar terlebih dahulu di google Cost0m Search Engine untuk bisa mendapatkan ID dari google CSE. 
  5. Jika sudah silahkan di save.
Pemasangan Google CSE di bawah postingan sudah selesai, jika anda mau autofill berdasarkan title postigan blog, anda tinggal ganti kode:
<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'> OR </b:if></b:loop></b:if>
dengan kode berikut (untuk autofill CSE berdasarkan title postingan):
<b:if cond='data:post.title'><data:post.title/></b:if>

Membuat Slider Carousel Otomatis Berdasarkan Label

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.


Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
    #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
    #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
    #carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
    #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
    #carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
    #carousel ul li a.slider_title:hover{color:#cd1713}
    #carousel a img{display:block;background:#fff;margin-top:0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://kauman.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 140;
    summaryTitle = 25;

    numposts1 = 15;
    label1 = "news";

    function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
    }

    s = s.join("");
    s = s.substring(0,chop-1);
    return s;
    }
    function showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break;
    }
    }

    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
    pcm = entry.link[k].title.split(" ")[0];
    break;
    }
    }

    if ("content" in entry) {
    var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
    var postcontent = entry.summary.$t;}
    else var postcontent = "";
    postdate = entry.published.$t;
    if(j>imgr.length-1) j=0;
    img[i] = imgr[j];
    s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
    if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
    //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
    var day = postdate.split("-")[2].substring(0,2);
    var m = postdate.split("-")[1];
    var y = postdate.split("-")[0];
    for(var u2=0;u2<month.length;u2++){
    if(parseInt(m)==month[u2]) {
    m = month2[u2] ; break;
    }
    }

    var daystr = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
  7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>
    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>   
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) {     $(document).ready(function(){
    $(&quot;#carousel .container&quot;).jCarouselLite({
        auto:4000,
        scroll: 1,
        speed: 800,   
        visible: 5,
        start: 0,
        circular: true,
        btnPrev: &quot;#previous_button&quot;,
        btnNext: &quot;#next_button&quot;
        });
        })})(jQuery)   
    </script>
    </b:if>
    Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
  8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Sangat mudah ya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.

sumber: http://creatingwebsite-maskolis.blogspot.com/2012/04/membuat-slider-carousel-otomatis.html

31 May 2012

Membuat Breaking News Menarik Dibawah Navigasi Menu

Pada artikel kali ini saya akan menjelaskan bagaimana membuat breaking news atau berita berjalan yang biasanya terdapat di bawah navigasi menu pada sebuah blog atau biasa disebut newsticker. Banyak sudah artikel yang membahas mengenai newsticker ini di internet, misalnya dengan menambah efek marquee sehingga teks tersebut dapat berjalan, tapi kali ini saya akan menjelaskan cara memasang breking news dengan sentuhan jQuery sehingga hasilnya akan lebih menarik dan yang pasti dapat mempercatik blog anda.
news ticker maskolis

Pertama kali saya melihat tampilan breaking news ini pada template Sporty Magazine 2 buatan Borneo Template, waktu itu template masih berbayar sekarang sepertinya sudah gratis di download. Disini saya akan memodifikasi sedikit tampilannya sehingga tampilannya seperti tampak pada gambar diatas, demonya anda bisa lihat disini. (http://martin-big.blogspot.com)

Ternyata cara memasangnya sangat gampang sekali, dan jika Anda tertarik berikut ini langkah-langkah untuk membuatnya :
  1. Login ke blogger dengan akun anda
  2. Kemudian klik Tata Letak > pilih Edit HTML
  3. Jangan lupa backup dulu template anda dengan mengklik Download Template Lengkap.
  4. Letakkan kode berikut di atas kode ]]></b:skin>

    1. /* News Ticker Wrapper 
    2. ---------------------------------------------*/  
    3. .newspic {background:#000 url(http://4.bp.blogspot.com/-vqHATrTDsY8/TvguMe2lBTI/AAAAAAAAEUk/L8UwRygGp9s/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;}  
    4. .news {width970px;margin:0 auto;padding:0 auto;line-height1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}  
    5. .news a:link, .news a:visited{color:#fff;text-decoration:none;}  
    6. .news a:hover {color:#ddd;text-decoration:underline;}  
  5. Masih dalam dalam posisi Edit HTML. Sekarang letakkan kode berikut ini di atas kode </head>
    <script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
    <script type='text/javascript'>
    //<![CDATA[
    var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};

    var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
    //]]>
    </script>
    <style type='text/css'>
    .titlefield{ /*CSS for RSS title link in general*/
    text-decoration: none;}
    .labelfield{ /*CSS for label field in general*/
    color:#aaa;font-size: 100%;}
    .datefield{ /*CSS for date field in general*/
    color:#aaa;font:normal 14px Arial;text-transform:none;}
    #example1{ /*Demo 1 main container*/
    width: 780px;
    height: 14px;
    border: 0px solid #aaa;
    padding: 0px;
    font:bold 16px Arial;
    text-transform:none;
    text-align:left;
    background-color:transparent;}
    code{ /*CSS for insructions*/
    color: #fff;}
    #example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
    #example1 a:hover {color:#C8D3F2;text-decoration:none;}
    </style>
  6. Kemudian cari kode dibawah ini, atau kode yang biasa dipakai untuk meletakkan navigasi menu
    <div class='menu horizontal'>
    ...........................................
    ...........................................
    </div>
  7. Jika sudah ketemu letakkan kode berikut tepat dibawah kode </div> yang dipakai untuk menutup kode navigasi menu pada template Anda.
    <div class='newspic'>

    <div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
    <script type='text/javascript'>
    var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
    cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://maskolis.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
    cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
    cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
    cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
    cssfeed.entries_per_page(1)
    cssfeed.init()
    </script>
    </div>
    <div style='clear:both;'/>
    </div>
  8. Ganti URL yang saya beri warna merah dengan URL blog anda dan jika blog anda masih baru newsticker ini biasanya tidak mau jalan karena google belum mengenal feed di blog Anda. Solusinya gampang Anda mesti buat API key sendiri di googlecode, atau langsung saja disini. Masukkan URL blog anda, kemudian ganti kode javascript paling atas pada langkah nomer 5 dengan kode yang barusan dapet dari googlecode (bener nggak sih ngomongku...... )
  9. Langkah terakhir save/simpan, lihat dibawah navigasi menu anda, kalau cara memasangnya sudah benar pasti akan muncul breaking news itu.
Agar lebih ramping simpan kode javascript newsticker diatas (no.5) di tempat penyimpanan googlecode Anda. Mudah kan? Jika ada yang mau ditanyakan silahkan isi pada kolom komentar dibawah. Selamat mencoba dan semoga bermanfaat.

sumber:http://creatingwebsite-maskolis.blogspot.com/2011/12/membuat-breaking-news-menarik-dibawah.html

30 May 2012

Mengatasi Loading Blog dengan Google Code

Kali ini saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang memiliki masalah dengan loading blog yang cukup berat. Loading atau proses membuka pada sebuah program menjadi salah satu faktor penting bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog, jika terlalu berat maka akan membuat kinerja blog yang kita kelola menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang. Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah blog yang cepat proses membukanya, disamping lebih efisien waktu, mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar koneksi internet.

Blog yang saya bahas disini adalah blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung pada seberapa banyak kode script yang kita masukkan ke dalam template tapi dengan asumsi kecepatan koneksi internet yang digunakan sama.  Beda dengan Wordpress atau platform blog lain yang menggunakan hosting sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya memakai template jenis magazine seperti yang sering saya buat, karena banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google sendiri juga menyarankan agar loading blog lebih cepat, paling tidak hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga menyerupai bentuk blog-blog profesional seperti platform lainnya dengan konsekuensi loading blog yang semakin lambat.

Bagi Anda pengguna blogger, saya akan memberikan solusi logis untuk meningkatkan performa kecepatan loading blog, khususnya bagi anda pemakai template style magazine. Jika anda memakai sebuah template dengan menggunakan banyak fitur, seperti slider, label per categori atau lainnya. Pasti pernah menemukan sebuah script yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template. 

Javascript yang belum disimpan di Google Code

Saya akan berikan contoh sebuah script dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh script di bawah ini saya ambil yang sederhana :
<script language='javascript'>
function Barva(koda)
{
document.getElementById(&quot;vzorec&quot;).bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById(&quot;vzorec2&quot;).bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}

</script>
Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya : contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :


Setelah proses penyimpanan file di komputer sekarang kita simpan di Google Code agar bisa dipasang pada template. Buka Google Code Anda, kalau belum pernah menggunakan Google Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :
  1. Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/

  2. Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.


    Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project.
  3. Anda sekarang sudah mempunyai akun di Google Code, langkah selanjutnya adalah menyimpan kode javascript yang sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.


  4. File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.


  5. Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :

    Sebelum disimpan di Google code

    Sesudah disimpan di Google code

    Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :
    <script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>
    Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
Javascript yang sudah disimpan di Google Code

Nah sekarang bagaimana jika file javascript itu sudah disimpan di Google Code milik akun lain? Saya akan berikan contohnya dibawah :
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
URL Javascript warna merah diatas yang harus diganti dengan URL script dari Google Code anda. Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :


Kemudian tekan Enter pada keyboard. Jika muncul pilihan save, Anda tinggal save file tersebut kemudian upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika setelah tekan enter muncul kode javascript yang berderet-deret banyak sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.

Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog? Penjelasannya seperti ini, jika Anda memakai sebuah template dengan menggunakan banyak script yang disimpan di Google Code oleh si pembuat template, pastinya tidak hanya Anda yang memakai template tersebut, pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog dengan menggunakan template yang sama loading pada saat bersamaan pasti akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu terasa kalau yang memakai template itu banyak apa tidak semakin berat loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu script si pembuat template rusak atau overload.

Itu tadi satu tips untuk mempercepat loading blog Anda dengan menyimpan file Javascript di Google Code Anda sendiri, silahkan dipahami dan semoga bermanfaat.
 

27 May 2012

Squid 2.7STABLE9 with patch untuk dinamic dan youtube

Squid 2.7STABLE9 with patch untuk dinamic dan youtube

Mau coba share cara instalasi Squid 2.7STABLE9 with patch. Squid 2.7 ini bisa nge cache conten-conten dinamic terutama di tujukan untuk cache youtube…
Yang masih penasaran pengen nge cache youtube boleh di coba dan resiko tanggung sendiri.

squid calculator = untuk menghitung jumlah partisi / folder cache yang di alokasikan bedasarkan jumlah ram
Kode: [Pilih]
http://stai-alazhary-cianjur.ac.id/download/squidcalc.rar

Persiapkan CFLAGS untuk tiap jenis prosesor yang di butuhkan saat proses compile
Kode: [Pilih]

Intel : http://en.gentoo-wiki.com/wiki/Safe_Cflags/Intel
AMD   : http:http://en.gentoo-wiki.com/wiki/Safe_Cflags/AMD

untuk mengetahui jenis prosesor apa yang kita pakai bisa mengetikan perintah
Kode: [Pilih]
# cat /proc/cpuinfo


  1. Update ClearOS untuk mendapatkan update terbaru ( bila sudah di lakukan skip )
Kode :
# yum update
2. setelah proses download dan instalasi update selesai reboot ClearOS
Kode:
# shutdown -r now

3. Import repo Timb burges
Kode :

# rpm –import ftp://timburgess.net/RPM-GPG-KEY-TimB.txt
# wget ftp://timburgess.net/repo/clearos/5.2/os/timb-release-1-0.noarch.rpm
# rpm -Kv timb-release-1-0.noarch.rpm
# rpm -Uvh timb-release-1-0.noarch.rpm
4. Install paket-paket Compiler yang di butuhkan
Kode :
# yum install automake gcc glibc-devel e2fsprogs-devel sharutils
# yum groupinstall ”Development Tools”
# yum install patch
5. Download squid 2.7Stable9 dan patchnya
Kode:
#wget http://squid-cache-dynamic-content.googlecode.com/files/patch-stable9.tar.gz
#wget http://tempat-sampah.googlecode.com/files/squid-2.7.STABLE9.tar.gz
6. Remove dan install squid yang telah terinstall
Kode:
# yum remove squid
# yum install squid
# service squid stop
7. Extract berkas squid dan patchnya
Kode:
# tar -zxvf squid-2.7.STABLE9.tar.gz
# tar -xzvf patch-stable9.tar.gz
8. Masuk ke directory squid dan lakukan patch atas squid-2.7Stable9 nya.
Kode:
# cd squid-2.7.STABLE9
#patch -p0 < ../patch/aggressive.patch && patch -p0 < ../patch/loop.patch && patch -p0 < ../patch/ignore_must_revalidate.patch && patch -p0 < ../patch/ignore-no-store_new.patch
9. Lakukan proses Compile
Kode:
# CHOST=”i686-pc-linux-gnu” CFLAGS=”-march=prescott -O2 -pipe -fomit-frame-pointer” ./configure –prefix=/usr –exec_prefix=/usr –bindir=/usr/bin –sbindir=/usr/sbin –libexecdir=/usr/libexec –sysconfdir=/etc/squid –localstatedir=/cache –enable-async-io –with-pthreads –enable-storeio=aufs,coss,null –enable-linux-netfilter –enable-arp-acl –enable-epoll –enable-removal-policies=lru,heap –enable-snmp –enable-delay-pools –enable-htcp –enable-cache-digests –enable-referer-log –enable-useragent-log –enable-follow-x-forwarded-for –with-large-files –enable-large-cache-files –enable-truncate –disable-ident-lookups –with-maxfd=65536

Next
Kode:
# make && umask 022 && make install && make clean
Setelah proses compile dan install selesai coba cek squid kita dengan mengetikan perintah
Kode:
# squid -v
10. Berikan hak akses dan perubahan owner untuk partisi/directory /cache
Kode:
# chown squid:squid /cache && chmod 777 /cache

Dalam contoh gien hanya memakai satu partisi/directory untuk penyimpanan file cache ( /cache )

11. Delet file squid.conf yang ada dan download dengan yang telah di siapkan
Kode:
# rm /etc/squid/squid.conf
# cd /etc/squid
# wget http://stai-alazhary-cianjur.ac.id/download/squid.conf
# wget http://stai-alazhary-cianjur.ac.id/download/storeurl.pl
# chmod 777 /etc/squid/storeurl.pl

12. Edit dan sesuaikan dengan kebutuhan squid.conf nya terutama di bagian acl, directory cache, delay pools dll. Setelah di rasa sudah cukup editing squid.conf nya kita lanjut

13. Test apakah rule squid.conf yang telah di edit ada masalah
Kode:
# squid -k parse
Rebuild cache nya
Kode:
# squid -z
bisa juga dengan mengetikan perintah di bawah :
Kode:
# squid -f /etc/squid/squid.conf -z
14 . Edit firewall
Kode:
# nano /etc/firewal
Rubah configurasi
Kode:
# Squid configuration
#——————–

SQUID_TRANSPARENT=”off”
SQUID_FILTER_PORT=”"

Menjadi
Kode:
# Squid configuration
#——————–

SQUID_TRANSPARENT=”on”
SQUID_FILTER_PORT=”3128″

Setelah di edit keluar dan simpan

15. Restart Firewall dan jalankan service squid nya
Kode: [Pilih]

# service firewall restart
# /usr/sbin/squid -NDd1 &

16. Agar squid bisa jalan secara otomatis saat proses booting
Kode:

# nano /etc/rc.local/

tambahkan baris berikut di bawah
Kode:

/usr/sbin/squid -NDd1 &