Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Selasa, 23 Oktober 2012

Membuat Form Order atau Contact Person di Blog

- bazComp share -

Form Order atau Contact Person merupakan hal yang cukup penting bagi sebuah blog, apalagi jika blog tersebut bergerak di bidang Bisnis Online dan penyedia pemasangan iklan.

Karena dengan adanya contact person, ini akan memudahkan pengunjung untuk melakukan order ataupun pemesanan terhadap produk yang disediakan suatu blog. Ini juga merupakan suatu kemudahan bagi pengunjung untuk berinteraksi dengan admin karena dengan adanya contact person ia tidak perlu lagi membuka email untuk melakukan order, karena pesan akan langsung terkirim ke pemilik blog, setelah kita mengisi form yang telah disediakan. Banyak penyedia layanan membuat contact person baik yang berbayar maupun yang gratisan, Salah satu penyedia contact person gratisan adalah emailmeform.com dan masih banyak lagi yang lainya.

Agar contact person / form order tampil pada blog, anda bisa mengikuti langkah mudah berikut ini:

Masuk di http://www.emailmeform.com/ kemudian lakukan registrasi dengan klik bacaan sign up ==> isi form yang disediakan
Setelah mengisi form register dengan benar ==> klik sign up
Buka email anda kemudian klik link verifikasi yang dikirimemailmeform untuk proses verifikasi
Pada bacaan "please click here to go into your Control Panel" klik kata "here" dan anda akan dibawa ke halaman control panel ==> klik "View the Form list" ==> klik "Create Form Wizard", selanjutnya anda akan menuju halaman berikut
Langsung saja klik Next kemudian pada step 2 isi nama, email, subjectdan message pada form yang telah di sediakan kemudian klik Next ==> Next ==> Next ==> Next
Klik Finish

Sekarang proses registrasi emailmeform sudah selesai, agar contact persontampil pada blog, harus memasukkan code html yang diberikan, dengan cara log in ke acount blogger dengan username dan pasword anda.

readmore »»

Selasa, 21 Juni 2011

Tips Pasang Revolver Maps Di Blog

- bazComp share -

Revolver Maps adalah suatu layanan berupa bola dunia/maps dimana kita dapat mengetahui siapa saja yang sedang online pada blog ato jejaringan kita termasuk menampilakan setiap halaman yang di review. okey sekarang kita langsung aja ke tutorialnya :

1. Kunjungi http://www.revolvermaps.com pada browse kamu.
2. Kemudian nanti pada halaman awal situs ini ada beberapa pilihan yang dapat kita gunakan diantaranya Get Your Globe, Get The Mini Version, Get 2D Map, dan Get the Button.
3.Nah kita dapat menggunakan beberpa pilihan Revolvers Maps tersebut. kalau saya sendiri sech menggunakan yang pertama yaitu Get Your Globe.
4. oke setelah kita memilih get your globe, kemudian kita akan masuk pada beberapa pengaturan dan pilahan Configure Your Earthball….
5. Select map : pilihan revolver map yang akan kita gunakan
6. Choose Dimensions: pilihan ukuran revolver yang akan kita gunakan nantinya…pilih aja yang ukuran standar yaitu 220px X 220px.
7. Choose Marker Color: yaitu pilihan warna yang akan menampilakan user yang sedang online…saran saya sech pilih yang merah aja karena lebih bagus.
8. Advanced Setting : pada custom background color kita dapat memilih background map yang kita sukai.
9. Chose code Version : pilih yang model html dan pada settingan yang lainnya biarkan aja standart
10. Copy The Code To Your Site : kemudian copy code tersebut dan letakan pada gadget blog
Untuk di Blogdetik.com..
langkah-langkah nya sebagai berikut:
1.Log In Ke Blogdetik.com ID Anda
2. Masuk Ke Dasbor
3. Pilih Appearance
4. Pilih Widget
5. Pilih Widgetiz ANY HTML
6. Save dan lihat hasil nya….

kalau untuk di Blogger.com Sebagai berikut cara nya:
1. Log In di Blogger Id anda
2. setelah Log in pilih Rancangan pada elemen halaman
3. pilih tambah gadget
4. pilih html/javascript
5. letakan code yang sudah di copy
6. Save
Dan lihat hasil nya
begitu mudahkan…
semoga bermanfaat...

readmore »»

Rabu, 15 Juni 2011

Buat Tag Clouds ...

- bazComp share -

Untuk membuat tag clouds,anda harus sudah membuat label pada situs anda.
Pilih bagian Dashboard ke Pengaturan lalu pada Page Element tambah halaman baru add widget, pilih Label.
Setelah itu Edit HTML kemudian beri tanda centang pada Expand Widget Templates.

Cari kode :

]]></b:skin>

Klo dah ketemu,lalu copy paste kode di bawah ini diatasnya :

/* Label Cloud Styles

----------------------------------------------- */

#labelCloud {text-align:center;font-family:arial,sans-serif;}

#labelCloud  .label-cloud li{display:inline;background-image:none  !important;padding:0 5px;margin:0;vertical-align:baseline  !important;border:0 !important;}

#labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}

#labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}

#labelCloud a{text-decoration:none}

#labelCloud a:hover{text-decoration:underline}

#labelCloud li a{}

#labelCloud .label-cloud {}

#labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}

#labelCloud .label-cloud li:before{content:"" !important}

Setelah itu,tepat di bawah kode :

]]></b:skin>

copy paste kode di bawah ini :

<script type='text/javascript'>

// Label Cloud User Variables

var cloudMin = 1;

var maxFontSize = 20;

var maxColor = [0,0,255];

var minFontSize = 10;

var minColor = [0,0,0];

var lcShowCount = false;

</script>

Lalu simpan template.

Langkah terakhir,masih pada Edit HTML cari kode di bawah ini :

<b:widget id='Label1' locked='false' title='cloud' type='Label'>
&lt b:includable id='main'>
<b:if cond='data:title'>
<h2></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>

</b:widget>

Kalau dah ketemu,ganti kode diatas dengan kode di bawah ini :

Alangkah baiknya backup terlebih dahulu template ke komputer anda,Tapi klo dah percaya,ya langsung ganti aja.

Akurat koq :)

<b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>

<div class='widget-content'>
<div id='labelCloud'/>
<script type='text/javascript'>

// Don't change anything past this point -----------------
// Cloud function s() ripped from del.icio.us
function s(a,b,i,x){
if(a>b){
var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
}
else{
var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
}
return v
}

var c=[];
var labelCount = new Array();
var ts = new Object;
<b:loop values='data:labels' var='label'>
var theName = "<data:label.name/>";
ts[theName] = <data:label.count/>;
</b:loop>
for (t in ts){
if (!labelCount[ts[t]]){
labelCount[ts[t]] = new Array(ts[t])
}
}
var ta=cloudMin-1;
tz = labelCount.length - cloudMin;
lc2 = document.getElementById('labelCloud');
ul = document.createElement('ul');
ul.className = 'label-cloud';
for(var t in ts){
if(ts[t] < cloudMin){
continue;
}
for (var i=0;3 > i;i++) {
c[i]=s(minColor[i],maxColor[i],ts[t]-ta,tz)
}
var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
li = document.createElement('li');
li.style.fontSize = fs+'px';
li.style.lineHeight = '1';
a = document.createElement('a');
a.title = ts[t]+' Posts in '+t;
a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
a.href = '/search/label/'+encodeURIComponent(t);
if (lcShowCount){
span = document.createElement('span');
span.innerHTML = '('+ts[t]+') ';
span.className = 'label-count';
a.appendChild(document.createTextNode(t));
li.appendChild(a);
li.appendChild(span);
}
else {
a.appendChild(document.createTextNode(t));
li.appendChild(a);
}
ul.appendChild(li);
abnk = document.createTextNode(' ');
ul.appendChild(abnk);
}
lc2.appendChild(ul);
</script>

<noscript>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</noscript>
<b:include name='quickedit'/>
</div>

</b:includable>
</b:widget>

Simpan Template! Selesai !

readmore »»

Cara Membuat Pesan Pembuka & Penutup Di Blog

- bazComp share -

Untuk beberapa ke untungan yg dapat di nikmat adanya scrip ini adalah kita dapat memberikan pesan yang selalu dibaca oleh pengnjung , misal nya "Selamat Datang" , tapi di sisi lain penggunaan scrip ini juga membuat blog kita menjadi sedikit terbebani.

Trik ini sangat mudah alias gampang diterapkan. Intinya trik ini berfungsi sebagai pesan pembuka, ya seperti yang dikatakan pada judul tadi, kotak yang akan muncul sebelum loading page blog, pasti Anda sudah pernah lihat kan blog yang ada pesan pembukanya? Mereka itu pakai cara ini. Sebenarnya ada beberapa trik yang membuat trik ini menjadi sebegitu indahnya, tetapi kali ini acul kasih yang standar aja.

Langsung aja deh, caranya gini nih:

1. Login ke akun blogger Anda.

2. Pada dashboard pilih rancangan lalu edit HTML.

3. Jangan lupa untuk menceklis Expand Widget Template.

4. Cari kode <head>. Atau Tekan Ctrl+F agar lebih mudah mencarinya.

untuk Pesan pembuka :

... Setelah itu copy paste kan scrip di bawah di bawah kode <head>

<script type='text/javascript'>
alert("Selamat datang di bazComp_Share jangan lupa komentarnya ya")
</script>

dan untuk pesan penutup :

... dan kemudian copy paste kan scrip di bawah di bawah kode <head> lagi tepatnya di bawah scrip diatas tadi.

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert("Terima kasih ataas kunjungannya, ditunggu lagi kunjungannya");
}
parent.window.onunload=goodbye;
</script>

5. Simpan template dan lihat blog.

note : ganti warna biru sesuai keinginan Anda.

Salam bazComp.......

readmore »»

Selasa, 14 Juni 2011

Cara Mengganti Icon Pada Address Bar (blogspot)

- bazComp share -

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24×42 pixel sampai 32×32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu masuk ke “Layout –> Edit HTML” trus tempatkan script di bawah ini :

<link href='http://s1142.photobucket.com/albums/n603/bazokeyz/?action=view&current=bazompIconBar.gif' rel='SHORTCUT ICON'/>

tempatkan kode di atas di bawah kode :

]]></b:skin>

Contohnya ada di sini :

]]></b:skin>

<link href='http://s1142.photobucket.com/albums/n603/bazokeyz/?action=view&amp;current=bazompIconBar.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal (warna merah) dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di Picasa Web Album atau Photobucket atau di imageshack kamu tinggal daftar aja semuanya gratis.

Selamat mencoba...

salam bazComp....

readmore »»

Membuat Tulisan Di Adress Bar Bergerak Pada Blogspot

- bazComp share -

Anda ingin membuat judul blog berjalan di address bar browser.

Apakah anda ingin tahu bagaimana cara membuat tulisan berjalan pada address bar???

Silahkan ikuti langkah mudah berikut ini :

1. Login ke Blog Anda

2. Kemudian Pilih Tata Letak/Layout/Rancangan ->> Edit Html

3. Kemudian Cari kode </head> (Gunakan CTRL + F untuk menemukan kode yang tercetak merah tersebut)

4. Letakkan kode dibawah ini di atas kode </head>

note :

Anda dapat mengganti kata "SELAMAT DATANG" dan "DI BLOG SAYA bazComp"
sesuai keinginan anda.
Anda dapat mengganti angka "100", angka ini menunjukkan kecepatan pergerakan, semakin kecil angkanya maka semakin cepat pergerakannya, tapi sebaliknya semakin besar angkanya maka semakin lama pergerakannya.

Selamat mencoba..
Salam bazComp....

readmore »»

Sabtu, 11 Juni 2011

Membuat Tombol Home Next Dan Previous Di Blog

- bazComp share -

Jadi begini Sobat,untuk cara Membuat Tombol Home Next Dan Previous Di Blog tidak semua template bisa di buat tumbol tersebut,karna saya sudah mencoba beberapa kali tapi memang tidak bisa,bukan saya tidak bisa membuat nya,karna memang template nya yg tidak bisa di buat tombol tersebut,tapi mudah-mudahan template sobat bisa di buat tombol Home Next Dan Previous.

Langsung saja ,,

Caranya ,, Seperti biasa ,,

1. Masuk (login) ke blogger

2. Klik tata letak > edit HTML

3. Sekarang saatnya kita mencari cari sampah,, lho .. ?

4. Untuk mengganti tulisan "next page /posting baru" dengan gambar,,
    Cari dan ganti kode <data:newerpagetitle> dengan <img src="terserah" alt="Next" />

5. Untuk mengganti tulisan "previous page /posting lama" dengan gambar,,
    Cari dan ganti kode <data:olderpagetitle> dengan <img src="terserah" alt="Prev" />

6. Untuk mengganti tulisan "home" dengan gambar,,
    Cari dan ganti kode <data:homemsg> dengan <img src="terserah" alt="home" />
    #Catatan : biasanya, ada dua kode <data:homemsg> .. Pilih yang paling atas aja ,,
    #Catatan : ganti kode terserah dengan alamat gambarnya ,,

Contohnya :
<img src="http://"http://i1142.photobucket.com/albums/n603/bazokeyz/bazcompHome.gif" alt="home" />

Dan bila kode yang berwarna merah tersebut tidak ada maka bisa di panggil dari widget HTML dengan

Contohnya :

Keterangan
Contoh di atas yg berwarna biru merupakan Link gambar sobat,sobat bisa meng Upload dahulu gambar nya,lalu link gambar nya sobat copy dan paste di pereti contoh di atas yang berwarna biru.
sedangkan untuk yang berwarna merah,itu merupakan Teks,sobat bisa ganti sesuai keinginan sobat.

Kalau sobat tidak punya atau nggak sempat nyiapin gambarnya saya sudah menyiap kan dan bisa sobat download di sini

Salam bazComp...

readmore »»

Free Icon Untuk Blog Dan Website

- bazComp share -

Contoh Icon yang bisa kawan Download