Posts from the ‘Blogger’ Category

Cara membuat Blog

Cara membuat blog power point – Presentation Transcript

  1. Cara Membuat Blog
    Cara membuat blog yang kali iniakansayabahasadalahcaramembuat blog via blogger.com milikgoogle. Sebenarnyaanggapanmembuatsebuahsitusdan blog itusulitadalahsalah.Mudahatausulitsebenarnyatinggalcarapemahamandankerjakerasandadalammempelajarinya.
  2. 1. Apaitu blog?
    Blog adalahsituspribadi. Berbedadengan website yang setiapmempostingharussusahpayahmemakaikodeekstensi .html .php, .asp, dll, blog merupakanotomatisasidarisemuaekstensitersebut. Karenasudahdiotomatisasi, makakitasemuadapatmempostingapasaja yang kitainginkanpersissepertikitamemposting email. Dan karenamudahinilah, makasemuaorangdapatmembuat blog ataupunsituspribadi.
  3. 2. Bagaimanacaramembuat blog?
    Sepertihalnya email, buat account duludi free blog provider (pemberi hosting/domain blog gratis). Yang paling populeradalahhttp://www.blogger.com. BagiAndaygsudahagakmelek-hurufteknologibisajugabuat account dihttp://www.wordpress.comdanhttp://blogsome.com.
    Selain yang duainimasihbanyakpenyedia blog gratis yang bisaAndaketahui. KemudianIkutipentunjuk step-by-step ketikamendaftar.
  4. Setelahselesai register/sign-up dihttp://blogger.com, andadapatmulaimemposting/mempublishapapun yang Andainginkandi blog, mulaidaricurhat, puisi, cerpen, dan yang lainnya.
  5. Blogger Baru
    SejakJanuari 2007 prosespembuatan/ registrasi / sign-up blog diblogger.comlebihdipermudah, diantaranya :
    ApabilaAndapunya email digmail.com, makaAndabisalangsung log-in atau sign-in diblogger.com –> new blogger –> masukkan id/usernama plus password gmailAnda. Dan ikutiprosesselanjutnya.
  6. ApabilaAndabelumpunya email digmail.com, silahkanbuat (register/ sign-up) duludihttp://gmail.com –> sign-up. Setelahjadi email gmailnya, kunjungihttp://blogger.com –> new blogger –> masukkan id / gmailAnda plus password danikutiprosespembuatan blog selanjutnya.
  7. Cara Mempromosikan Blog
    Membuat blog sajabukanlanakhirdaripekerjaananda. Setelahselesaimembuat blog, hal yang takkalahpentingnyaadalahmempromosikan/memperkenalkan blog milikAndapadaduniaramai.
    Apagunanyamembuat blog kalauisicurhat, puisi, cerpen, refleksidanopiniAnda yang dipostingtidakdibacaorang, bukan?
  8. Langkah-LangkahPromosi Blog SebagaiBerikut:
    Daftarkandi blog directory
    Daftarkan blog Andakeberbagaidirektori blog (blog directory). Sedikitnya, daftarkanditiga blog directory terbesardanterpopuler, yaitu :
    (a) http://technorati.com
    (b) http://feeburner.com
    (c) http://blogdigger.com.
    Ikutiseluruhpetunjukpadaketiga blog directory tersebutketikamendaftar.
  9. Blog-blog directory ininantinyasecaraotomatisakanmengirim data blog dan posting-posting andakeberbagai search engine, termasuktiga search engine besaryaituhttp://google.com, http://msn.com, http://yahoo.com.
  10. Link-trade, Link Exchange atauTukar Link
    Ajaktemananda yang memiliki blog untuksalingtukar link. Link URL andadi blog dia, danjanganlupaandajugamemasukkan link blog temanandatersebut, di blog anda.
    Dalamdunia blog, inidisebutjugadenganistilah BLOGROLL. Dan blogrollinisalahsatupenyebabcepatnyapopularitas blog diseluruhdunia, mengalahkan website yang biasa.
  11. Berkunjungke blog lain
    Untukmenambahtemanuntukdiajakblogroll, sempatkanberkunjungke blog lain, danberkomentardibukutamuatautagboardmerekaatauberkomentarditulisanmerekadanjanganlupamemasangalamat blog Andadi blog mereka. Dalamwaktutidak lama, merekaakan “bertamubalik” ke “rumah” atau blog Anda.
  12. Aktivitas Posting
    Usahakansedikitnyasatu kali posting setiapharinya. Posting yang teraturdi blog, akanmembuattamudatangsecarateraturjuga.
  13. Alamat blog di signature email
    Tulisalamat blog Andadi signature email. Sehinggasetiapandamenulis email kepribadiataukemilis, alamat blog andaakanselalumuncul, danmemudahkanoranguntukberkunjung.
  14. Setelahmelakukansemuanya, ikutiperkembanganperingkat blog anda…
    Selamatmencoba
Advertisements

Script Browser Melayang

Kali ini saya akan menjelaskan tentang cara  untuk membuat browser bergerak berputar,,

Maksud dari judul Di atas adalah perubahan pada browser yang bergerak mengecil lalu membesar kembali,,

jadi tampilan browser seperti berputar, lalu akan kembali ke awal seperti semula lagi

Sebagai contoh lihatlah perubahan pada saat anda memasuki alamat blog ini,, coba klik disini dan lihat lah apa yang terjadi
Sudah jelas Terlihat perubahan yang terjadi pada browser anda,, dengan script browser bergerak ini maka tampilan saat membuka blog anda akan semakin unik dan menarik…
Tertarik untuk membuatnya langsung saja ikuti langkah – langkah di bawah ini :

Copy Paste Script Kode Di Bawah Ini :

<!– Script Codes by Www.kikiyo.co.cc –>
<script>
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval(“move()”,30);
setTimeout(“move()”, 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = “Cljck”
alert(“Cljck”)
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout(“move()”,0.3)
}
</script>

Langkah – langkahnya :
1.Masuk Ke Akun Blogger Anda
2.Klik Tata letak atau Rancangan
3.Lalu Klik Tambah Gadget
4.Pilih HTML/JavaScript
5.Copy paste script kode diatas didalam HTML/JavaScript
6.Klik Simpan

Membuat Galery Slide Show Dengan Javascript

Sudah lama jg saya tidak pernah membuka blog ini lagi, mungkin karena saya terlalu sibuk dengan pembuatan web dinamis, ah… kayaknya terlalu membahas masalah pribadi,, heee,,, kali ini saya akan menjelaskan tentang cara pembuatan Gallery Slideshow Dengan Javascript,

Oke.. untuk melihat contohnya silahkan klik disini
Langsung saja ke proses pembuatan

Langkah Pembuatan :

1. Masuk Ke akun Blogger Anda
2. Klik Rancangan Pilih Edit Html
3. Cari Kode </head>
4. Lalu Copy Paste Kode Dibawah Ini Dan Letakan  Tepat diatas kode  </head>

<script type=’text/javascript’>
//<![CDATA[
$(document).ready(function() {
slideShow(3000);
});
function slideShow(speed) {
$(‘ul.slideshow’).append(‘<li id=”slideshow-caption”><div class=”slideshow-caption-container”><h3></h3><p></p></div></li>’);
$(‘ul.slideshow li’).css({opacity: 0.0});
$(‘ul.slideshow li:first’).css({opacity: 1.0});
$(‘#slideshow-caption h3’).html($(‘ul.slideshow a:first’).find(‘img’).attr(‘title’));
$(‘#slideshow-caption p’).html($(‘ul.slideshow a:first’).find(‘img’).attr(‘alt’));
//Display the caption
$(‘#slideshow-caption’).css({opacity: 0.7, bottom:0});
var timer = setInterval(‘gallery()’,speed);
$(‘ul.slideshow’).hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval(‘gallery()’,speed);
}
);
}
function gallery() {
var current = ($(‘ul.slideshow li.show’)? $(‘ul.slideshow li.show’) : $(‘#ul.slideshow li:first’));
var next = ((current.next().length) ? ((current.next().attr(‘id’) == ‘slideshow-caption’)? $(‘ul.slideshow li:first’) :current.next()) : $(‘ul.slideshow li:first’));
var title = next.find(‘img’).attr(‘title’);
var desc = next.find(‘img’).attr(‘alt’);
next.css({opacity: 0.0}).addClass(‘show’).animate({opacity: 1.0}, 1000);
$(‘#slideshow-caption’).animate({bottom:-70}, 300, function () {
//Display the content
$(‘#slideshow-caption h3’).html(title);
$(‘#slideshow-caption p’).html(desc);
$(‘#slideshow-caption’).animate({bottom:0}, 500);
});
current.animate({opacity: 0.0}, 1000).removeClass(‘show’);
}
//]]>
</script>
<style type=’text/css’>
ul.slideshow {
list-style:none;
width:800px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:800px;
height:240px;
border:none;
}
#slideshow-caption {
width:800px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>

ket : Angka yang berwarna biru adalah ukuran permanen gambar, anda dapat menggantinya sesuai dengan ukuran tata letak web anda.

5. Klik Save
6. Selanjutnya klik Rancangan klik Tambah Gadget
7. Pilih HTML/Javascript lalu masukan script kode dibawah ini

<center>
<ul>
<li><a href=”#”><img src=”http://3.bp.blogspot.com/_4HKUHirY_2U/TEVd7gbRVeI/AAAAAAAABGc/J-aSBfN0rhw/s1600/1.jpg&#8221; title=”Gambar Slideshow 1″ alt=”Penjelasan Artikel Pada Gambar 1″ /></a></li>
<li><a href=”#”><img src=”http://2.bp.blogspot.com/_4HKUHirY_2U/TEVd7zgT63I/AAAAAAAABGk/9vJ6VYTYGWM/s1600/2.jpg&#8221; title=”Gambar Slideshow 2″ alt=”Penjelasan Artikel Pada Gambar 2″ /></a></li>
<li><a href=”#”><img src=”http://4.bp.blogspot.com/_4HKUHirY_2U/TEVd8JKsDaI/AAAAAAAABGs/vzECCT1mDws/s1600/3.jpg&#8221; title=”Gambar Slideshow 3″ alt=”Penjelasan Artikel Pada Gambar 3″ /></a></li>
<li><a href=”#”><img src=”http://1.bp.blogspot.com/_4HKUHirY_2U/TEVd8VPgRRI/AAAAAAAABG0/O4yhLEWG5UU/s1600/4.jpg&#8221; title=”Gambar Slideshow 4″ alt=”Penjelasan Artikel Pada Gambar 4″ /></a></li>
</ul>
<center/></center></center>

Huruf yang berwarna merah dapat anda ganti dengan alamat URL gambar anda
Huruf yang berwarna biru dapat anda ganti sesuai keterangan gambar

8. Klik Save
9. Dan Lihat hasilnya

Mengganti Template dari Penyedia Template

Berikut cara-cara untuk mengganti template dengan template dari penyedia template :

  1. Download terlebih dahulu template yang anda sukai pada website penyedia template blog gratis. Salah satu contoh anda bisa download di blogger templates.
  2. File template yang didownload, biasanya masih dalam bentuk terkompresi (zip atau rar), oleh karenanya anda perlu mengekstrak atau menguraikan file tersebut dengan software ekstraktor seperti WinZip atau WinRar, Namun jika anda tidak memiliki software tersebut, anda bisa mengekstraknya secara online di Wobzip.ekstrak template
  3. Yang nanti di upload atau di unggah ke blogger hanyalah file yang berekstensi .xml.
  4. Silahkan login ke blogger dengan ID anda.
  5. Klik Rancangan.rancangan
  6. Klik menu Edit HTML.edit html
  7. Disarankan untuk membuat backup terlebih dahulu, klik pada tulisan Download Template Lengkap.download template lengkap
  8. Klik tombol Browse.., pilih file template yang tadi didownload dan telah diekstrak ( file ekstensi .xml saja ). Kemudian klik tombol Unggah.

    unggah template

  9. Apabila ada muncul peringatan tentang widget, klik pada tombol PERTAHANKAN WIDGET.pertahankan-widget
  10. Selesai.

Kini tampilan blog anda  lebih terasa fresh dibanding sebelumnya Winking

Selamat mencoba!

Cara Pasang Icon YM di Blog Anda

Untuk menampilkan icon status online yahoo ! messenger, kita bisa memilih sebanyak 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Artikel ini dapat juga sobat temukan di blognya Kang Rohman. Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :

Style ID 1
Style ID 2

Style ID 3
Style ID 4
Style ID 5

masing-masing gambar mempunyai URL adddress sendiri yaitu :


http://opi.yahoo.com/online?u=YahooID&m=g&t=1
Untuk Style ID 1

http://opi.yahoo.com/online?u=YahooID&m=g&t=2
Untuk Style ID 2

http://opi.yahoo.com/online?u=YahooID&m=g&t=3
Untuk Style ID 3

http://opi.yahoo.com/online?u=YahooID&m=g&t=4
Untuk Style ID 4

http://opi.yahoo.com/online?u=YahooID&m=g&t=5
Untuk Style ID 5

itu tadi adalah URL address masing-masing Style ID, maka agar tampil menjadi gambar, kita harus menambah kode yaitu :


<img src="URL address">

Sehingga untuk menampilkan URL address di atas menjadi sebuah gambar, maka kodenya akan seperti ini :


<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">
Untuk Style ID 1

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">
Untuk Style ID 3

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">
Untuk Style ID 4

<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">
Untuk Style ID 5

Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Ada beberapa pilihan yang bisa kita terapkan ketika pengunjung mengklik icon YM kita, yaitu :

Kirim Instant Messenger.

Kodenya sebagai berikut :


<a href="ymsgr:sendIM?YOURID">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :

<a href="ymsgr:sendIM?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Kirim Instant Messenger dengan pesan

Kodenya sebagai berikut :


<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE">Kirim IM</a>

Sehingga untuk kode lengkapnya jadi seperti ini :


<a href="ymsgr:sendIM?YOURID&m=YOUR+MESSAGE"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Menambahkan link ke chat room favorit

Kodenya sebagai berikut :


<a href="ymsgr:addfriend?YOURID">Masukan ke daftar teman sobat</a>

Sehingga untuk kode lengkapnya jadi seperti ini :


<a href="ymsgr:addfriend?YOURID"><img src="http://opi.yahoo.com/online?u=YourID&m=g&t=StyleID" border="0"></a>

Bagaimana jelaskan? biar lebih jelas lagi saya beri contoh.

Karena email saya adalah amn_tea@yahoo.co.id maka id saya adalah amn_tea, Sehingga kode untuk mengirimkan Instan Message dengan pilihan Style ID 2 adalah sebagai berikut :


<a href="ymsgr:sendIM?amn_tea"><img src="http://opi.yahoo.com/online?u=amn_tea&m=g&t=2" border="0"></a>

dan yang akan tampil seperti ini :

Icon di atas benar-benar Live, jadi tentunya icon nya akan menyala apabila saya sedang online di Yahoo ! Messenger .

Mudah-mudahan jelas. Selamat mencoba !

Bikin Alert untuk Blog atau Website

Message box merupakan aksi pesan sebuah peringatan yang di lakukan ketika kita melakukan aksi tertentu di dalam sebuah blog atau website (itu pengertian dari saya sendiri Smile with tongue out, jadi jangan diikutin banget ya Smile). aksi yang di maksud bisa berupa brbagai macam hal seperti di antaranya onLoad (ketika pengunjung me load halaman), onClick (ketika pengunjung mengklik sesuatu), onChange (ketika user merubah sesuatu pada sebuah inputan).

Disini saya akan mempraktekan di blog tester saya di blogspot, karena di blogspot kita lebih leluasa untuk memasukan script-script yang bagus Smile.

Ok, yang pertama harus anda lakukan tentu saja login ke blog, atau klo mau coba di website tinggal otak atik script sourcenya aja.

1

setelah itu masuk ke menu “Rancangan” lalu pilih menu “edit HTML”

2

Setelah masuk “edit HTML” di bagian “Edit Template” anda akan menemukan script yang anda gunakan di blog anda, jangan dibikin pusing dulu jika melihat script itu, anda cukup mencari bagian tag </head> aja.

3

4

di bagian atas (sebelum) tag </head> itulah kita akan taruh scriptnya nanti

setelah ketemu, yuk kita pelajari sedikit script javascript yang akan di gunakan untuk membuat alert.

<script type=’text/javascript’>
//aksi script
</script>

script di atas adalah script awal untuk menginisialisasikan script yang akan kita gunakan adalah tipe script javascript. Script di awali dan di akhiri dengan  <script>…</script>. Nantinya kita bisa melakukan aksi script javascript di dalam script ini.  sekarang kita tambahkan alert sederhana di bagian aksi script tersebut, maka jadi akan seperti ini :

<script type=’text/javascript’>
alert(“Selamat datang di blog saya…!”)
</script>

script tersebut akan menampilkan alert dengan tulisan “Selamat Datang di blog saya” seperti ini :

image

setelah itu kita tambahkan lagi sedikit script untuk alert inputan field, seperti nama, dsb.

<script type=’text/javascript’>
alert(”Selamat datang di blog saya…!”);

var yourName = prompt(”Nama saya adit, Siapa nama anda “, “”);
</script>

ok di dalam script tersebut kita buat variable “yourName” untuk menampung inputan nama user, di mana variable tersebut dapat kita gunakan suatu saat. script ini akan menampilkan tambahan alert ketika user mengklik ok di alert yang pertama seperti ini.

image

setelah itu kita gunakan variable “yourName” dari inputan user untuk kita panggil namanya, agar blog atau website kita lebih keliahatan interaktif Smile with tongue out

<script type=’text/javascript’>
alert(“Selamat datang di blog saya…!”)

var yourName = prompt(”Nama saya adit, Siapa nama anda ?…”, “”);
alert(”Selamat Datang “+yourName+”, Senang Berkenalan dengan anda”);
</script>

nah, disini kita tampilkan alert lagi seperti alert yang pertama, dimana alert ini menggunakan variable “yourName” yang telah ada sebelumnya. Hasilnya akan seperti ini :

image

nama user yang telah diinputkan sebelumnya kita panggil dengan variable yang sudah ada. hasil akhir script akan seperti ini :

5

setelah selesai simpan tembplate, dan cobalah… Open-mouthed smile, saya sarankan jika mencoba tidak copy & paste begitu saja scriptnya dari blog ini, karena tanda kutip (“) di blog ini dengan script berbeda, anda bisa ketik ulang script tersebut, atau copy & paste script tersebut dan ubah tanda kutip (“).

Sekian tips dan trik dari saya, semoga dapat bermanfaat. Smile