Mendengarkan musik di Blog Cara memasang Musik Live dan eSnips

Bagi anda yang penggemar musik. Memutar lagu melalui HP, Mp3 player ataupun komputer mungkin sudah biasa. Tetapi bagaimana jika memutar musik melalui blog?


Dengan memasang musik player di blog maka tidak hanya anda tetapi pengunjung blog anda juga bisa menikmati lagu kesayangan anda. Sehingga cara ini sangat cocok bagi anda yang blognya berisi tentang musik atau bagi anda yang ingin mempromosikan lagu pribadi.

Ada banyak layanan seperti ini yang tersedia di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus. Yaitu Musik-live dan eSnips. Mengapa saya merekomendasikan 2 musik player? Karena kedua ini memiliki kelebihan dan kekurangannya masing2. Sehingga silahkan anda tentukan sendiri mana yang lebih bagus.

1. Musik-Live

Kelebihan:
- Lagu sudah tersedia, tinggal pasang
- Banyak model skin yang bisa anda pilih

Kelemahan:
- Tidak bisa upload lagu sendiri


2. eSnips

Kelebihan:
- Bisa upload lagu dari komputer
- Tersedia lagu yang bisa anda putar

Kelemahan:
- Hanya 2 model skin yang bisa dipilih
- Tampilannya kurang menarik

Nah itulah kelebihan dan kelemahannya masing-masing. Silahkan anda tentukan mana yang lebih cocok dengan kebutuhan anda. Agar lebih jelas anda bisa lihat demonya disini.

Ok kalau sudah berikut adalah langkah-langkah pemasangannya:

A. Musik-Livet.Net

1. Kunjungi http://musik-live.net/ lalu klik Skin Mp3 Player
2. Pilih tampilan player yang anda inginkan. Untuk melihat tampilannya klik Preview Skin
3. Copy kodenya lalu buka blogger. Klik menu Layout -> Page Elements
4. Pastekan ke menu HTML/ Javascript
5. Selesai.

Diatas adalah cara memasang musik player dengan lagu yang telah disediakan. Jika anda ingin memilih sendiri lagunya. Berikut caranya:

1. Pada halaman Musik-Live, cari lagu favorit anda dengan kotak pencari.
2. Lalu klik Play & Embed code untuk menampilkan kodenya
3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda. Selesai

Catatan:
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.


B. eSnips

1. Kunjugi http://www.esnips.com/. Untuk bisa memanfaatkan fasilitasnya anda harus signup terlebih dahulu. Jika sudah, sign-in ke akunnya.

2. Klik Upload Files lalu klik Select Files

3. Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalau Private anda tidak bisa menambahkan lagunya kedalam playlist.

4. Jika sudah klik Upload Now

5. Tunggu hingga proses upload selesai.

6. Jika sudah klik menu Folder. Pilih folder dimana anda menyimpan menyimpan lagunya

7. Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist
esnips add to quicklist
8. Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widgets

esnips create playlist
9. Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.

esnips widget

10. Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save

11. Selesai. Silahkan lihat hasilnya.

Jika ukurannya tidak pas anda bisa mengatur ukurannya dengan mengedit nilai width-nya pada kodenya masing-masing. Selamat mencoba..

Read More >>

Teks Scroll Pada Blog Gadged dan posting

Scroll Text

Scroll text adalah text yang berada di dalam kotak yang luas dan tingginya di batasi dalam ukuran tertentu sehingga untuk melihatnya hingga ke bawah dibutuhkan mouse scrolling. Trik ini lazim digunakan untuk menghemat ruang di dalam post body maupun sidebar, sehingga keseluruhan halaman yang dimuat oleh browser menjadi tidak terlalu panjang.

Oce langsung saja...

Untuk membuat gadged seperti biasa masuk dulu di Blogger.com ==> Design ==> add a gadged ==> HTML/JavaScript.

Isikan kode berikut

<div style="border: 2px solid lightblue; height: 80px; margin-left: 30px; overflow: auto; padding: 3px; text-align: justify; width: 300px;">
Scroll Text dengan ketinggian 80px, border berukuran 2px berjenis solid dan berwarna lightblue, dengan menggunakan overflow berjenis auto, text-align berjenisjustify (rata kanan kiri), dengan batas margin kiri sebesar 30px, padding sebesar 3px, dan memiliki luas sebesar 300px.</div>

Ganti tulisan Berwarna Biru dengan tulisan kamu sendiri

Kalau untuk posting sama kok pakai edit HTML lalu copy kode di atas

Keterangan

Yang berwarna Merah adalah value atau ukuran border, tinggi, margin, padding, dan luas area. Anda dapat mengubahnya sesuai keinginan.

Yang berwarna Biru adalah tulisan yang nantinya akan kamu isikan pada Box teks Scroll

 

Text-align ( justify) bisa kamu ganti dengan : left, center, dan right.

Anda dapat mengutak-atik atribut-atribut di atas; bahkan menambah atau menghapus atribut yang tidak diperlukan, kecuali 3 atribut inti: height, overflow, dan width 

 

Selamat Mencoba Semoga berhasil.

Read More >>

Random Posting teks Berjalan dan teks Blink (berkedip)

Lihat Gagded Daftar blog di samping kanan ya...
Ingin buat seperti itu yah.... Boleh-boleh
ni langkah-langkahnya
1. Biasa Login dulu di Blogger.com
2. Masuk di Design / Rancangan
3. Add a Gadged ==> pilih HTML/JavaScript
Isi dengan kode berikut

<b><blink><span style="font-weight: bold; font-style: italic; color: rgb(255, 255, 0);">Santri Sarang Blog</span></blink></b>

<!-- Alphabetical/chronological Post Title Listing with comment count Start -->
<script type="text/javascript">
function getYpipeTL(feed) {
document.write('<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="1">');
var i;
for (i = 1; i < feed.count ; i++)
{
var href = "'" + feed.value.items[i].link + "'";
var pTitle = feed.value.items[i].title + "</a> | ";
var pComment = " \(" + feed.value.items[i].commentcount + " comments\)";
var pList = "</a>" + "<a href="+ href + '">' + pTitle;
document.write(pList);
document.write(pComment);
document.write('</a></li>');
}
document.write('</marquee>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
YourBlogUrl=http://santrisarang.blogspot.com
&Order=alphabet
&_id=401e43055731c1a29f1e1d3eb5e8e13f
&_callback=getYpipeTL
&_render=json"
type="text/javascript"></script>
<!-- Alphabetical Post Title Listing End -->

Lihat Jadinya Seperti di Kolom Gadged Daftar Blog Sun3 Sarang

Keterangan
Kode berikut adalah kode Text yang berkedip (Santri Sarang Blog)
<b><blink><span style="font-weight: bold; font-style: italic; color: rgb(255, 255, 0);">Santri Sarang Blog</span></blink></b>

Ganti Santri sarang Blog dengan Nama Blog atau dengan kata sesuka kamu.
Yang ditulus biru itu menunjukkan warna tulisan kalau  rgb(255, 255, 0) itu berarti warna kuning kalian cari kode warnanya saja di program photoshope atau program-program lainnya.

Ganti http://santrisarang.blogspot.com (warna merah, Underline) dengan nama blog milik kamu atau blog teman kamu untuk menampilkan random posting dari blog yang kamu inginkan

Cukup sekian dulu kalau kurang jelas silakan ditanyakan

Read More >>

Cara membuat Auto Readmore, Baca selengkapnya

Auro readmore seperti pada gambar disamping bagaimana buatnya ya... Oce Langsung aja bos... untuk membuat auto read more  seperti gambar diatas ikuti saja langkah kami..... Tapi ojo melok jegur sumur yooo... hahahaha

Ini Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Copy-paste script di bawah ini tepat DI BAWAH </head> (gunakan Ctrl+F):

<!-- Auto read more script -http://santrisarang.blogspot.com- Start -->
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        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);
            }
        }
        strx =  s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {   
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script -http://santrisarang.blogspot.com- End -->

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkan img_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<!-- Auto read more -http://santrisarang.blogspot.com- Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>
<!-- Auto read more -http://santrisarang.blogspot.com- End -->

Kostumisasi:

Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url milik anda

Kok tampilan teks di post summary tidak justified (rata kanan-kiri) ? 

Oce mari kita buat tampilannya menjadi rata kanan-kiri

Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='&quot;summary&quot; + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:

<div style='text-align:justify;' expr:id='&quot;summary&quot; + data:post.id'>

----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Semoga Bermanfaat

Read More >>

Cara Membuat Kotak Komentar di Bawah Posting

Jangan membuat orang lain enggan untuk berkomentar diblog anda karena tidak menemukan kolom komentar secara langsung, artinya kalau mau berkomentar harus mengklik link lagi, nah... alangkah baiknya kalau kolom komentar itu berada di bawah Posting secara langsung, trus bagaimana buatnya????
Mari kita ikuti langkah-langkah membuat komentar dibawah posting

1. Login ke http://draft.blogger.com

2. Kemudian, masuk ke menu Setting --> Comments. Kemudian ganti "Comment Form Placement" menjadi "Embedded below post"

3. Kemudian klik "Save Setting"

Sekarang kita cek apakah kotak komentar kita sudah ada di bawah posting atau belum. 

Kalau sudah ada berarti sudah berhasil

Kok belum ada ya booossss

Kalau memang belum bisa ayoo kita lanjutkan langkah yang berikutnya

4. Masuk ke menu "Layout-->Edit HTML"

5. Beri tanda check pada kotak "Expand widget templates"

6. Kemudian, cari kode berikut ini :

<p class='comment-footer'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/></a>

</p>

</b:if>

7. Kemudian ganti kode HTML tersebut dengan kode dibawah ini:

<p class='comment-footer'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='comment-form'/>

<b:else/> <b:if cond='data:post.allowComments'>

<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>

<data:postCommentMsg/></a>

</b:if> </b:if> </p> </b:if>

8. Lalu "Simpan Template Anda".

Sekarang, Kotak komentar anda sudah muncul tepat di bawah posting Anda.

 

Belum Berhasil juga Bosss....

Ulangi langkah 4-8 biasanya kode pada langkah 6 ada 2 yang pertama tidak memakai </b:if>  pada akhir scrip, jadi nanti pada langkah ke 7 jangan di akhiri </b:if> alias di bauk saja

Read More >>