Cara Memasang Lagu Terbaru di Blog

Bagaimanakah cara memasang lagu-lagu terbaru di blog? Pada kesempatan ini kami akan memberikan informasi tentang cara memasang lagu-lagu terbaru di blog. Dengan memasang lagu-lagu favorit terbaru akan menambah kesan menarik pada blog Anda.

Berikut langkah cara memasang lagu baru di blog:

1. Kunjungi situs http://www.4shared.com/
2. Cari kode lagu favorit Anda pada kotak pencarian. 

3. Kemudian klik salah satu lagu hasil dari pencarian tersebut.

4. Copy kode URL lagu tersebut.

5. Simpan dulu kode tersebut pada notepad atau word.

Langkah selanjutnya adalah memasang lagu tersebut pada blog Anda, berikut langkahnya :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript. 

<div xmlns="http://www.w3.org/1999/xhtml">
<embed height="20" width="300" flashvars="file=http://www.4shared.com/img/1GoAgl2W/dlink__2Fdownload_2F1GoAgl2W/preview.mp3&amp;volume=100&amp;autostart=true" wmode="opaque" allowfullscreen="false" allowscriptaccess="always" quality="high" name="ply" id="ply" style="" src="http://www.4shared.com/flash/player.swf?ver=9051" type="application/x-shockwave-flash"/>
</embed></div>

Keterangan :
Ganti kode yang berwarna merah diatas dengan kode yang Anda copy dari 4shared tadi.
Sesuaikan panjang tampilan dengan mengganti width="300"
4. Kemudian Simpan.

Nah, sekarang Anda bisa memilih lagu-lagu terbaru sesuai dengan keinginan. Dilarang mengcopy script diatas dengan tujuan komersil dan pembajakan! Tanpa seizin dari pemilik, hargai karya musik anak negeri. 

Read More »

17.11 | 0 komentar

Cara Membuat Daftar Isi dengan Jquery di Blog

Daftar isi pada blog sangat penting sekali karena dapat memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara membuat daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini adalah pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini:

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan kode berikut diatas kode ]]></b:skin> 

#dafis-acc{
font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#333;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKxx4zJGmqaaK210v4DAbvm8aaLoQv6N4P02littBwoEA4W3jH9IKcy3XPl54TLqxpWzlLmsClHfioJRDDHQOhyphenhyphenS7iYDKKArQyLTGlzW6T5mqTLg1uT4NMj516_dyg1DuDVH8cgq-L0Uw/s320/bg5.gif) repeat-y scroll left center #E7F7FB;
padding:2px 0;
border:1px solid #339DC6;
}
.dafis-label{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1EFaGH0SS-aMou0yzOK65xYilnCvunmDRSye23gkCuur0Mh2qrrhOi50LJ4IsnQKTT-gI74d352fjsWnFdJkZ8sgonTXKqTHxm2S5EsCRP2bEHUYnB3p3FKTY8JIEKW5VXWdHJOt5_KI/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;
font-weight:bold;
line-height:1.4em;
overflow:hidden;
white-space:nowrap;
vertical-align: baseline;
margin: 1px 3px;
outline: none;
cursor: pointer;
text-decoration: none;
padding: 2px 10px;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
border:1px solid #2F94BA;
}
.dafis-label:hover{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1it_B5B27RLo7JOwNFC23OxU9ZY1D25HsrqC2qzuYi5YzSySKasPphAQnukszet5RWLPv-vewfnOjg_g4Pcl2n_58UC-stp1gk6UWvUAmTiMAurQPwwWenkDCo-M2ItU6FMS1M3QDLU/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;
color:#003366;
}
.dafis-daf ol{
margin:0 0 0 30px !important;
padding:0 !important;
}
.dafis-daf ol li{
background-color:#C9E9F4;
line-height:1.5em;
margin:1px 3px !important;
white-space:nowrap;
text-align:left;
border:1px solid #339DC6;
}
.dafis-daf ol li a{
text-decoration: none !important;
color:#333 !important;
display:block;
padding-left:10px;
}
.dafis-daf ol li a:hover{
background: #7BC4DF;
border-left: 5px #333 solid;
padding-left: 5px;
text-shadow: 0 1px 1px rgba(0,0,0,.3);
}

4. Kemudian letakkan juga kode berikut diatas kode </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

5. Setelah itu Simpan template.
6. Langkah selanjutnya adalah memasang daftar isi di blog, letakkan kode dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML. 

<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/Dafsis.js"></script> <script src="http://id-pemula.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan:
Ganti kode yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, sekarang blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik. 

Read More »

17.10 | 0 komentar

Cara Mengubah Warna Link pada Blog

Biasanya setelah mengganti template blog terkadang kita tidak menyukai warna link bawaan dari template, bisakah kita mengubah warna link pada blog? Tentunya sangat bisa dan mungkin sekali kita mengubah warna link pada blog sesuai dengan keinginan, hanya saja dibutuhkan sedikit ketelitian dalam mengedit template karena tidak semua template script-nya sama.

Berikut simak langkah-langkah cara mengubah warna link pada blog :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Kemudian cari kode seperti dibawah ini : 

a:link { 
color:#000000; 
text-decoration: underline; 
} 
a:hover { 
color:#FFFFFF; 
text-decoration: underline; 
} 
a:visited { 
color:#CCCCCC; 
text-decoration: underline; 
}

Keterangan dari kode diatas : 

a:link {
color:#000000; 
text-decoration: underline; 
} 
// Link yang akan ditampilkan berwarna hitam
a:hover { 
color:#FFFFFF; 
text-decoration: underline; 
} 
// Jika mouse Anda arahkan pada link maka akan berubah menjadi warna putih
a:visited { 
color:#CCCCCC; 
text-decoration: underline; 
}
// Jika link selesai diklik maka link akan berubah menjadi abu-abu

4. Ganti kode warna diatas sesuai dengan keinginan Anda.
5. Selanjutnya cek hasilnya, klik 'Pratinjau' kalau sudah berhasil klik 'Simpan template'.

Nah, sekarang Anda bisa mengubah warna link pada blog sesuai dengan keinginan dan kebutuhan. 

Read More »

17.09 | 0 komentar

Cara Membuat Next Page pada Blog

Pernahkah Anda melihat tombol next page yang terletak dibawah posting sebuah blog? Pada kesempatan ini kita akan membahas cara membuat next page tersebut. Fungsi dari tombol next page ini adalah untuk memudahkan pengunjung blog dalam melakukan pencarian posting sebelumnya.

Kalau Anda penasaran cara membuat next page pada blog, langsung saja kita ikuti langkah-langkah pembuatannya dibawah ini :

1. Login akun blogger Anda.
2. Pilih Template ---> Edit HTML ---> klik Expand Template Widget.
3. Cari kode ]]></b:skin> kemudian letakkan kode dibawah ini tepat diatas ]]></b:skin> 

.showpageArea a {text-decoration:underline;}
.showpageNum a {text-decoration:none;border: 1px solid #cccccc;margin:0 3px;padding:3px;}
.showpageNum a:hover {border: 1px solid #cccccc;background-color:#cccccc;}
.showpagePoint {color:#333;text-decoration:none;border: 1px solid #cccccc;background: #cccccc;margin:0 3px;padding:3px;}
.showpageOf {text-decoration:none;padding:3px;margin: 0 3px 0 0;}
.showpage a {text-decoration:none;border: 1px solid #cccccc;padding:3px;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link,.showpage a:link {text-decoration:none;color:#333333;} 

4. Selanjutnya cari kode </body> kemudian letakkan kode dibawah ini tepat diatas</body> 

<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord=&#39;Previous&#39;;
var downPageWord=&#39;Next&#39;;
</script>
<script src='http://id-pemula-javascript.googlecode.com/files/blogger-page-nav-v2.js' type='text/javascript'/> 

5. Simpan template. 

Nah, sekarang blog Anda sudah terpasang tombol next page sehingga pengunjung dapat melihat halaman blog satu-persatu. 

Read More »

17.08 | 0 komentar