navigasi menu

Friday, February 21, 2014

Cara Pasang Lagu di Blog

2. Langkah pertama adalah memilih warna skin, Klik CHOOSE SKIN, pilih warna skin sesuai yang di inginkan. Disarankan memilih warna skin yang sama dengan warna template blog, supaya terlihat serasi.



3. Selanjutnya klik EDIT PLAYLIST. Pada kotak SONG TITLE isikan artis dan judul lagi yang ingin ditampilkan ke dalam blog, sebagai contoh saya ambil lagunya "Jessie J" dengan judul "Domino". Pada tab baru buka www.youtube.com kemudian cari lagu yang di inginkan, lalu copy paste url lagu pada youtube (Contoh : http://www.youtube.com/watch?v=UJtB55MaoD0 ) kedalam kotak SONG URL.


4. Langkah selanjutnya klik CONFIGURE SETTING. Disini kita bisa menyesuaikan konfigurasi pemutar media seperti AUTO PLAY untuk play otomatis saat membuka blog, REPEAT MODE untuk setting pengulangan lagu, PLACEMENT OF PLAYER BAR untuk penempatan posisi lagu, SHUFFLE PLAYBACK, DEFAULT VOLUME dan SHOW PLAYLIST BY DEFAULT bisa diatur sendiri sesuai keinginan.


5. Jika sudah selesai Klik DONE untuk mendapatkan kode yang akan dipasang kedalam gadget blog. Selanjutnya akan muncul kode seperti pada gambar dibawah ini :

6. Copy dahulu KODE diatas. Selanjutnya buka DASBOR pada BLOGGER. Pilih TATA LETAK dan TAMBAHKAN GADGET - HTML / JAVASCRIPT. PASTE kan kode seperti diatas pada HTML / JAVASCRIPT. Kemudian klik SIMPAN untuk mengakhiri langkah memasang lagu di blog.

Untuk penempatan GADGET disarankan di atas / di bawah posting supaya enak dilihat.

CARA PASANG LAGU DI BLOG - MENGGUNAKAN KODE HTML
Jika ingin cara yang cepat tanpa harus pergi ke situs situs diatas, maka cara yang terakhir ini bisa digunakan, yaitu dengan memasang langsung kode HTML yang disediakan disini. Berikut langkah langkahnya :

1. Login ke Blogger (Blogspot).
2. Klik Tata Letak / Layout 
3. TAMBAHKAN GADGET / Add Gadget cari HTML / JAVASCRIPT.
3 COPY PASTE kode dibawah ini kedalam gadget HTML / JAVASCRIPT. Kemudian simpan


Selamat Mencoba Sobat

Cara Menampilkan Facebook dan Twitter melayang di Blog

Caranya mudah banget .....
  1. Silakan anda login ke Akun Blogger Anda dan menuju dashboard
  2. Pilih Tata Letak / Layout
  3. Klik Add Widget dan Pilih Javascript / Kode HTML
  4. Masukan kode scrib di bawah ini
<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center><a class="murub">Jangan Lupa Gabung ya Sob</a></center>
<center>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like-box href="https://www.facebook.com/Fatma.pasha" width="250" show_faces="true" border_color="" stream="false" header="true">
</fb:like-box></center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/Fatmaluxaz">Ikuti @Fatmaluxaz</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div>
<a class='close' href='#'>&times;</a>
</div>

Wednesday, February 19, 2014

Cara Membuat Tulisan Berjalan (Marquee)

Cara membuat tulisan berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan juga disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog sehingga pengunjung bisa lebih suka dengan blog anda.

Perlu anda ketahui bahwa kode dasar Marquee adalah..

<marquee>TEKS YANG BERGERAK</marquee> 

Kode diatas menjadi seperti ini
TEKS YANG BERGERAK 
Jadi, dengan mengerti kode dasar diatas, anda bisa membuat bermacam-macam variasi kode Marquee.. Sebelum membahas ke variasi kode Marquee. Mari kita bahas terlebih dahulu cara pemasangannya.. Ada 2 tempat untuk pemasangan kode Marquee ini, yaitu untuk Widget dan artikel..

Cara pemasangan kode Marquee pada artikel :

    Di bagian edit entri atau entri baru, silahkan ubah dari Mode Compose ke mode HTML
    Silahkan masukkan kode Marquee di mode HTML
    Cek posisi teks di mode Compose
    Untuk melihat apakah kode berjalan, silahkan klik Pratinjau.

Cara pemasangan kode Marquee pada widget :
  1. Login ke akun blogger anda
  2. Masuk ke menu Tata Letak, Klik tambahkan gadget
  3. Silahkan pilih HTML/Java Script
  4. Masukkan kode Marquee yang anda pilih
  5. Silahkan klik Simpan
  6. Kemudian silahkan cek apakah kode sudah bekerja.
Supaya lebih jelas dan tidak bingung, kita bahas terlebih dahulu cara mengubah warna , huruf, dan ukuran pada teks. Ikuti langkah-lenglah berikut..

Kode dasarnya adalah
style="font-family: Arial; font-size:20px; color:#800C0C;"

    Arial adalah jenis huruf
    20px adalah ukuran huruf
    #f2f2f2 adalah warna huruf

Silahkan ubah sesuai dengan keinginan anda

Contoh kode nya seperti ini..
<marquee bgcolor="red" style="font-family: Arial; font-size:20px; color:#800C0C;">CONTOH BACKGROUND AREA TEKS</marquee>

Hasilnya akan terlihat seperti ini..
CONTOH BACKGROUND AREA TEKS

Jadi, mari kita bahas saja variasi kode Marquee ini. Berikut ini adalah varias-variasi kode Marquee nya..

Kode Marquee untuk mengatur pengulangan Rotasi
kode loop="angka|-1|infinite" digunakan untuk pengulangan berotasi pada Marquee.. Setelah berotasi sesuai angka yang ditentukan, maka teks tersebut akan hilang.
Contoh kodenya seperti ini:
<marquee loop="6">TEKS BEROTASI 6 KALI</marquee>

Hasilnya akan terlihat seperti ini..
TEKS BEROTASI 6 KALI

Kode Marquee untuk mengatur lebar teks
Kode width="angka lebar" berguna untuk mengatur lebar dari kode teks yang yang akan berjalan. Bisa anda atur 50% untuk setengah bidang saja, atau bisa 25% untuk seperempat bidang teks berjalan saja.

Contoh kodenya seperti ini:
<marquee width="50%">LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG</marquee>

Keterangan: Angka 50% bisa anda ganti sesuai lebar bidang yang anda inginkan.

Hasilnya akan terlihat seperti ini
LEBAR TEKS BERJALAN HANYA SETENGAH BIDANG

Kode Marquee untuk memberi link pada teks
Kode dasar seperti ini..
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()"><a href="http://seoterpadu.blogspot.com/2013/07/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN</a></marquee>

Hasilnya akan terlihat seperti ini..
CARA MEMBUAT TULISAN BERJALAN

Kode Marquee untuk mengatur background pada jalur teks
Kode bgcolor="warna" berguna untuk memberikan warna background pada area teks berjalan.

Contoh kodenya seperti ini:
<marquee bgcolor="red">CONTOH BACKGROUND AREA TEKS</marquee>

Keterangan: pink bisa anda ganti sesuai warna yang anda inginkan. Misalnya blue, yellow, red, dan lain-lain.

Hasilnya akan terlihat seperti ini
CONTOH BACKGROUND AREA TEKS

Kode Marquee untuk mengatur kecepatan jeda
Kode scrolldelay="angka jeda" berfungi untuk mengatur kecepatan jeda dalam milidetik.

Contoh kodenya seperti ini:
<marquee scrolldelay="750">TEKS BERJALAN DALAM JEDA 0,75 DETIK</marquee>

Keterangan: Angka 750 itu untuk jeda dalam 0,75 detik. Jadi silahkan ganti 1000 untuk 1 detik, 2000 untuk 2 detik, dan seterusnya..

Hasilnya akan terlihat seperti ini..
TEKS BERJALAN DALAM JEDA 0,75 DETIK

Kode Marquee untuk memberi Alt Title pada area teks berjalan

Kode title="pesan" berfungsi untuk memberi pesan pada saat kursor diarahkan ke area teks berjalan. Atau nama lainnya yaitu Alt Title.

Contoh kodenya seperti ini:
<marquee title="TEKS YANG AKAN MUNCUL JIKA KURSOR DIARAHKAN KE AREA TEKS BERJALAN">TEKS YANG BERJALAN DENGAN PESAN</marquee>

Hasilnya seperti ini..
TEKS YANG BERJALAN DENGAN PESAN

Kode Marquee untuk mengatur kecepatan teks berjalan

Kode scrollamount="angka" berguna untuk mengatur kecepatan laju teks yang berjalan.

Contoh kodenya seperti ini:
<marquee scrollamount="12">KECEPATAN TEKS YANG BERJALAN 12</marquee>

Keterangan: angka 12 bisa anda ganti sesuai kecepatan yang anda sukai. Semakin besar angka maka akan semakin cepat.

Hasilnya akan terlihat seperti ini..
KECEPATAN TEKS YANG BERJALAN 12

Kode Marquee untuk mengatur arah teks bergerak

Kode direction="left/right/up/down" berguna untuk mengatur arah pergerakan teks.

Contoh kode nya seperti ini:
<marquee direction="left">TEKS AKAN BERGERAK KE KIRI</marquee>

Keterangan: left bisa anda ganti sesuai arah teks berjalan yang anda inginkan.

Hasilnya akan terlihat seperti ini..
TEKS AKAN BERGERAK KE KIRI

Kode Marquee untuk mengatur teks berhenti jika dilintasi mouse
Kode dasar untuk mengatur teks agar berhenti jika dilintasi mouse adalah
onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti ini:
<marquee direction="left"onmouseover="this.stop()" onmouseout="this.start()">TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE</marquee>

Hasilnya akan terlihat seperti ini..
TEKS BERGERAK KE KIRI DAN AKAN BERHENTI JIKA DILINTASI MOUSE

Selamat Mencoba kawan...............!!!!!! salam Bloger