Cara Menambah Sub-Menu 2013 pada Blogspot

Assalamualaikum,

Kali ini saya berbagi trik atau tips untuk memberi sub menu pada menu di blog kita. Mungkin untuk beberapa kawan-kawan cara ini sudah lama, namun ada baiknya saya menulis ulang bagi kawan-kawan yang belum paham terkait hal ini. Selain itu cara ini juga bisa membantu saya , apabila saya lupa cara menambahkan sub menunya. Awalnya mungkin kita menebak bahwa sub menu ini hanya terdapat pada beberapa template tertentu. Ternyata pemikiran itu tidak sebenarnya salah dan benar, karena template bisa di atur di dalam 'edit HTML'.

Sekarang kita menuju caranya.

1. ubah sesuaikan setelan tab menu dan menu halaman yang akan ditampilkan, dimana caranya adalah seperti yang tampak pada gambar di bawah ini.

Keterangan : angka 1 menunjukkan 'tab atas' jangan pilih yang 'jangan ditampilkan'. Sedangkan angka 2 menunjukkan menu kita yang tidak memiliki sub menu.

2. Buka editor template dengan cara mengeklik menu ‘Template’ > ‘Edit HTML’ > ‘Lanjutkan’ > centang pada ‘Expand Template Widget’ di bagian atas.

3. Cari kode ]]></b:skin> dan kemudian sisipkan kode CSS berikut ini tepat di ATASnya.

.tabs-inner .widget li ul { z-index: 100; position: absolute; left: -999em; height: auto; margin: 0; padding: 0; border: 1px solid #999999; } .tabs-inner .widget li ul, .tabs-inner .widget li ul a, .tabs-inner .widget li ul li:first-child a { -moz-border-radius: 0px; -webkit-border-radius: 0px; -goog-ms-border-radius: 0px; border-radius: 0px; } .tabs-inner .widget li:hover ul, .tabs-inner .widget li.sfhover ul { left: auto; } .tabs-inner .widget li li a:hover, .tabs-inner .widget li li a:active { color: #ffffff; background: rgb(51, 102, 153); } .tabs-inner .widget li ul a { display: block; padding-left: 1.25em; padding-right: 1.25em; margin-left: 0px; margin-right: 0px; border: none; color: #000000; background: rgb(243, 244, 246); } .tabs-inner .widget li ul, .tabs-inner .widget li ul a { width: 220px; }
 4. Cari kode <li><a  mungkin anda akan menemukan 2 kode yang sama. Pastikan kode tersebut berkelanjutan seperti :
<li><a expr:href='data:link.href'><data:link.title/></a></li>
Perhatikan di bawah nya akan ada kode <b:/loop>
Copy dan paste kode di bawah ini, di BAWAH kode <b:/loop> tadi.

<li><a href='#'>Menu</a> <ul> <li><a href='URL'>Sub Menu 1</a></li> <li><a href='URL'>Sub Menu 2</a></li> <li><a href='URL'>Sub Menu 3</a></li> </ul> </li>
 5. Simpan Template mu tadi. Lalu coba lihat blog, maka seharusnya akan ada tab bernama "Menu" di bagian atas blog anda beserta Sub Menu 1,2,3. Nah untuk mengganti nama "Menu" dan "Sub Menu 1" tadi, ganti tulisan "Menu" di pada kode <li><a href='#'>Menu</a> di atas dengan nama sesuka anda dan pada kode Sub Menu di atas. Jika anda menginginkan lebih dari 1 menu dengan sub menu, anda tinggal menambahkan kode di atas tadi di bawahnya.

Semoga artikel kali ini bermanfaat bagi kawan-kawan. Barakallahulaum wal ana.
Wassalamualaikum wr wb.

Cara Merubah Menu Template Hasil Download

OK bro kali ini saya akan memberikan toturial cara merubah halaman bawaan template hasil download di blog. Dulu sewaktu saya memulai membuat blog dan menulis artikel saya sangat semangat untuk mengelola blog saya tapi saya cepat bosan template blog tidak nyaman dan kurang menarik segera saya coba mendownload template dan dapat template yang bagi ku menarik seperti dibawah ini :

Tapi saya bingung bagaimana cara merubah atau menghilangkan halaman bawaan template tersebut. seperti dibawah ini sesuai kehendak ku..

Tidak pantang menyerah saya menemukan caranya. Ikuti langkah dibawah ini :

• login ke dasbord blog anda
• cari rancangan- edit html
• jangan lupa centak kotak expand widget template 
• selanjutnya cari kode <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
• trus lihat kode dibawahnya anda akan menemukan code seperti ini 

<li><a href='#'>Parent Category</a>
<ul class='children'>
<li><a href='#'>Child Category 1</a>
<ul class='children'>
<li><a href='#'>Sub Child Category 1</a></li>
<li><a href='#'>Sub Child Category 2</a></li>
<li><a href='#'&gt;Sub Child Category 3</a></li>
</ul>
</li>
<li><a href='#'>Child Category 2</a></li>
<li><a href='#'>Child Category 3</a></li>
<li><a href='#'>Child Category 4</a></li>
</ul>
</li>

• Code diatas adalah kode yang akan diubah. anda bisa merubah kode sejenisnya diantara kode diatas
• warna merah bisa anda ganti dengan judul halaman yang lain terserah anda, warna biru adalah anak dari judul halaman warna merah dan hijau anaknya lagi.Sedangkan warna orange link yang akan menunjukkan artikel-artikel dari judul halaman (URL).
• Sedangkan kode <ul class='children'> digunakan untuk menciptakan anak halaman .anda bisa gunakan kode itu untuk menciptakan anak-anak lainya.
• Dan jika anda inging mengisi Sub Menu dengan Label silahkan ganti # dengan alamat URL Label anda.

Sekian dari saya. semoga artikel ini bisa bermanfaat.

Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog

Saya adalah blogger pemula yang bingung ketika memakai template yang tidak disediakan blogspot atau hasil download. Bagaimana Cara Mengedit Halaman Template Bawaan Hasil Download pada Blog tersebut.
Saya sudah browsing mencari informasinya tetapi tidak ada yang cocok. Saya coba mencari permasalahan dan ternyata berhasil. Kebetulan saya memakai template b-SEO Versi 5. Mudah-mudahan cara ini berlaku untuk semua template hasil download. Dan kali ini saya akan bagikan cara-caranya:
1. Login ke Blogger.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Centang pada bagian kotak Expand Template Widget.
5. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman diatas header).

<div id='NavbarMenuAtas'>

Perhatikan Kode di Bawahnya

<li><a href='/'>Home</a></li>
<li><a href='/p/link-exchange.html'>Sampel Page</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Privacy</a></li>
<li><a href='/p/link-exchange.html'>Link Exchange</a></li>
<li><a href='/p/sitemap.html'>Sitemap</a></li>
<li><a href='#'>Pasang Iklan</a></li>

6. Cari kode berikut dengan menggunakan ctrl+F (Untuk halaman dibawah header).

<div id='NavbarMenu'>

Perhatikan Kode di Bawahnya

<li><a href='#'>Entertainment</a></li>
<li><a href='#'>Blogging</a>
<ul><li><a href='#'>Blogger Templates</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Widget</a></li>
</ul></li>
<li><a href='#'>Tekno</a>
<ul>
<li><a href='#'>Komputer</a></li>
<li><a href='#'>Handphone</a></li>
<li><a href='#'>Software</a></li>
<li><a href='#'>Antivirus</a></li>
</ul>
</li>
<li><a href='#'>Kuliner</a></li>
<li><a href='#'>Internet</a></li>
<li><a href='#'>Tools</a>
<ul>
<li><a href='#'>Kode Warna</a></li>
<li><a href='#'>HTML Parser</a></li>
<li><a href='#'>Meta Tags Generator</a></li>
</ul></li>
<li><a href='#'>Health</a></li>
<li><a href='#'>Aneka Remaja</a></li>
<li><a href='#'>Video</a></li>
<li><a href='#'>Foto</a></li>
<li><a href='#'>Google Plus</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Youtube</a></li>

Catatan:
Untuk tulisan berwarna biru adalah URL halaman.
Untuk tulisan berwarna hijau adalah Judul halaman.
Untuk kode yang berlatar abu-abu adalah Sub Menu pada menu di atasnya.

7. Editlah kode-kode halaman di atas sesuai keinginan sobat. Sobat bisa mengganti/memasukan URL halaman, mengganti Judul halaman, menambahkan halaman atau mengahpus halaman yang tidak terpakai.
8. Lihat dulu hasilnya lewat Pratinjau.
9. Simpan Template.

Untuk cara alternatif lebih mudah lagi sob, daripada pusing.
Sobat tinggal masuk ke Template>>Edit HTML. Centang Expand Template Widget. Dan cari salah satu judul laman pada template (gunakan tombol ctrl+f). Setelah ditemukan, maka editlah laman-laman disekitar seperti sudah sebelumnya dijelaskan.

Semoga sobat mengerti tutorial ini dan semoga cara ini berhasil. Amiien.

Mengedit Top Menu Pada Template Blogger

 ...Postingan ringan lagi.... yang merupakan pertanyaan dari sobat" Sob klu mau edit menu di atas blog seperti home ,about,post rss ,coment rss, mohon solusinya sob ?  " ..oke setelah dua hari libur ngeblog... now here we go again... :)

...Memang belum tersedia fitur untuk mengedit top menu pada template blogger ..belum secanggih itu... tapi mungkin mbah google suatu saat nanti  akan mendukung juga fitur untuk mengubah menu top blogger...wow hehe :D .. idak seperti jika kita menggunakan drupal / joomla / mambo yg praktis hanya tinggal menginstal fitur list top menu yang bisa di ubah-ubah...

... Untuk mengedit top menu pada template blogger kita harus sedikit mengubah kode script html template blognya... jadi perhatikan caranya berikut ini :

>> Contoh I

1. Login ke Blogger > Rancangan > Edit HTML > Edit Template ( centang saja expand template widget )...

2. Seperti biasa Copy-Paste dahulu seluruh kode HTML template widget blog kamu ke dalam Notepad dan simpan... untuk jaga-jaga...

3. Tekan Control+F lalu cari kode " <div id='menu'> " ...kalau di kode html blog saya seperti ini.. biasanya ada sedikit perbedaan dengan kode template blog kalian.. 

4. Nanti akan terlihat kode sesudah " <div id='menu'> " yang seperti contoh dibawah ini...

<div id='menu'>
   <ul>
    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>
    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>
    <li><div class='gap'/></li>
    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>
    <li><div class='gap'/></li>
    <li><a href='http://www.blogger.com/'>Login</a></li>
   </ul>
  </div>

    </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div id='menu'>

   <ul>

    <li><a Title='Home' expr:href='data:blog.homepageUrl'>Home</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://id-id.facebook.com/people/Andi-Wong/1222512287'>About</a></li>

    <li><div class='gap'/></li>

<li><a href='menambah menu di tengah'>Tambah Menu di tengah</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;'>Posts RSS</a></li>

    <li><div class='gap'/></li>

    <li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;'>Comments RSS</a></li>

    <li><div class='gap'/></li>

    <li><a href='http://www.blogger.com/'>Login</a></li>

    <li><a href='menambah menu dibawah'>Tambah Menu dibawah</a></li>

   </ul>

  </div>

ATAU....

>> Contoh II 

1. Jika kode html top menu di Contoh I berbeda dengan kode top menu di template kamu.. coba yang ini.. 
2. Tekan Control+F lalu cari kode " <div class='Menu'> " ...

3. Nanti akan terlihat kode sesudah " <div class='Menu'> " yang seperti contoh dibawah ini...

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>
                <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>
                </ul>
            </div>

Keterangan :

> Ubahlah nama menu yang saya warnai ungu seperti contoh diatas...

> URL yang saya warnai biru juga diubah sesuai dengan nama menu yang kamu tentukan...

5. Jika sudah lalu Simpan template & refresh blog kamu...

...Dan jika ingin menambah lagi menu blog tinggal copy-paste kode html top menu-nya saja seperti contoh dibawah ini :

<div class='Menu'>
                <ul>
                <li><a href='/'><span>Home</span></a></li>
                <li><a href='#' title='About'><span>About</span></a>
</li>

                <li><a href='menambah menu di tengah' title='#'><span>Tambah Menu di tengah</span></a>

</li>

                 <li><a href='#' title='Contact'><span>Contact</span></a>
</li>
                <li><a href='#' title='Extras'><span>Extras</span></a>
</li>

                <li><a href='menambah menu dibawah' title='Extras'><span>Tambah Menu dibawah</span></a>

</li>

                </ul>
            </div>

...mudah bukan...

Cara Merubah Tampilan Blog seperti Web Profesional

[x]

Minggu, 16 Juni 2013

Apakah anda kurang puas dengan tampilan blog anda sekarang? Dimana sangat mudah ditebak, bahwa blog anda dibuat dengan layanan gratis yang bernama blogger.com? Dan lebih-lebih lagi tampilannya sangat tidak meyakinkan? Jika jawaban anda ya, berarti kita sama. Blog ini juga dibuat dengan blogger.com. Tapi semua jejak aslinya sudah saya rubah, maka jadilah tampilannya menjadi seperti sekarang ini. Nah, jika anda juga tertarik ada beberapa hal yang bisa anda lakukan:

Pertama: Ganti Domainnya.

Anda tentu sudah paham apa itu domain, yaitu kata terakhir yang terdapat pada alamat (URL) blog anda. Asal blog anda menggunakan blogger.com, maka domainnya adalah: blogspot.com. Nah itulah ciri pertamanya. Asal anda tahu, URL blog ini dulunya adalah: http://www.blogernas.blogspot.com. Selain panjang, jujur saja yang kurang sreg dengan tulisan blogspot.com di belakangya. Akhirnya saya ganti dengan domain blog ini menjadi co.cc. Dan itu gratis. Maka jadilah alamat blog ini: http://www.blogernas.co.cc.

Nah, jika anda tertarik mengganti domain blog anda seperti ini anda bisa lihat caranya pada: Cara Mengganti Domain blogspot.com Menjadi co.cc.

Kedua: Ganti Template.

Ini merupakan pandangan pertama yang sangat menetukan. Jika tampilan blog anda kacangan, besar kemungkinan tidak hanya pengunjung yang tidak betah dan tidak ingin kembali, tapi anda sendiri juga sudah “mual” setiap membukanya. Apalagi jika template yang anda gunakan masih tamplate bawaan blogspot yang masih “perawan”.

Nah, jika ingin tampilan blog anda tampak tidak seperti blog, tapi seperti web professional, maka ada 2 cara yang bisa anda lakukan:

1. Tetap menggunakan template bawaan blogger.com, tapi anda lakukan purubahan di sana sini. Mulai dari header, sidebar, footer dan halamamn postingan. Jika anda ingin belajar dari blog ini, maka anda bisa lihat beberapa caranya pada arsip blog, kategori di sidebar atau pada daftar isi blog ini.
2. Dengan menggunakan template pihak ketiga. Anda tinggal mencari situs penyedia template gratis kemudian anda pilih model tampilan yang anda inginkan lalu downloadlah template tersebut. Tapi jika anda lagi malas berkeliaran, anda juga bisa langsung dapatkan dari blog ini. Ini KUNCI GUDANGNYA.
3. Kombinasi dari kedua hal di atas. Meskipun templatenya anda download dari pihak ketiga, namun pada bagian tertentu tetap anda modifikasi agar lebih sesuai dengan selera anda, seperti yang saya lakukan terhadap blog ini.

Ketiga: Hilangkan Navbar Bawaan Blogger.com.

Apa itu navbar? Inilah contoh gambarnya:

Nah, sebagus apapun tampilan blog anda, tapi selagi ada navbar bawaan ini, maka sudah bisa ditebak blog anda menggunakan blogger.com. Dan karena tampilan navbar inilah yang membuat saya hampir minggat menggunakan blogger.com. Tapi rupanya itu bisa dihilangkan. Jika anda juga berminat, catatannya masih saya simpan DI SINI.

Keempat: Rubah Logo Favicon Bloggernya.

Favicon adalah singkatan dari favorit icon. Inilah contoh gambarnya:

Nah, meskipun kecil, siapa saja yang sudah biasa blogging akan tahu bahwa jika ada icon ini di tabulasi browser, maka blog anda dibuat menggunakan blogger.com. Karena icon inilah yang menjadi ciri khasnya. Termasuk bagian ini, juga dulunya membuat saya hampir minggat dari blogger.com. Tapi untunglah, rupanya icon itu juga bisa diganti. Caranya bisa anda lihat DI SINI.

Kelima: Lihat Profil Lengkapku.

Jika widget ini sudah terpasang di sidebar blog anda, biasanya akan tampil foto anda dan tulisan “Lihat Profil Lengkapku.” Ini juga merupakan ciri khas dari tampilan blogger.com. Nah jika anda juga ingin mengilangkan jejak yang satu ini, maka anda bisa langsung menghapus tulisan tersebut. Caranya juga sudah saya sediakan DI SINI.

Nah, lebih kurang itulah beberapa hal mendasar yang bisa anda lakukan untuk menyulap tampilan blog anda tidak lagi seperti blog pasaran, tapi sudah berubah menjadi seperti web profesional.

Selamat mencoba dan semoga berhasil!

Cara Membuat READ MORE Pada Blog OTOMATIS MUDAH 2013

Blog ini sekarang banyak membahas tentang tutorial blogspot, dan yang dibahas adalah tutorial dasar atau awal semisal dari cara membuat email, membuat blog dan semisalnya. Dalam keadaan blog itu jika telah jadi tentu tidak bisa langsung tulis saja, tapi perlu dilakukan beberapa perubahan semisal menambahkan read more otomatis untuk mempercantik tampilan blog.

Dari beberapa teman yang baru mengikuti panduan membuat blog blogspot disini, dan minta dikunjungi, saya lihat masih banyak yang belum memasang read more atau baca selengkapnya sehingga dirasa perlu untuk memberikan tutorial cara membuat read more pada blog agar tips blogging ini terus bersambung dan mungkin nanti akan menjadi panduan lengkap cara membuat blog dari awal.

Sebenarnya pada artikel Bagaimana cara menulis artikel di blogspot untuk pemula pada point ke 13 sudah dijelaskan cara memotong tampilan artikel agar tidak panjang alias tehnik membuat read more tapi itu cara manual, dan cukup merepotkan jika harus menggunakannya setiap kali posting. sehingga kita gunakan saja "baca selanjutnya" yang otomatis 

Kalau anda menggunakan template dari situs tempat dowload template keren, bisa dikatakan hampir semuanya sudah menggunakan read more otomatis sehingga tutorial ini mungkin kurang menarik untuk anda.

Cara Membuat Readmore Otomatis di Blogger

1. Silahkan login ke Blogger > Template
2. Supaya lebih aman, klik tombol Cadangkan / Pulihkan yang ada di pojok kanan > Unduh Template Lengkap, setelah selesai template terunduh, tekan Tutup
3. Sekarang klik tombol Edit HTML.
4. Copy kode ini:
</head>
5. Letakkan kursur DI DALAM kotak Edit HTML.
6. Tekan CTRL+F untuk mencari lalu tekan CTRL+V lalu tekan ENTER
7. Setelah ketemu kode </head> , maka letakkan kode berikut diatas </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 220;
img_thumb_height = 120;
img_thumb_width = 220;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+" [...]"}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; 
//]]>
</script>

8. Sekarang cari kode <data:post.body/> sebagaimana anda tadi mencari </head> maka akan anda temui kode tersebut tidak hanya satu. sehingga kita harus coba-coba, tapi mulailah dari <data:post.body/> yang paling bawah atau akhir.

Jika sudah ketemu yang paling akhir, maka ganti kode tersebut dengan ini:

 <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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>
<span class='rmlink' style='float:left'><b>Baca Selengkapnya</b> &#8594; <a expr:href='data:post.url'><data:post.title/></a></span>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

9. Klik Pratinjau Template untuk melihat apakah artikel di homepage anda sudah menampilkan baca selengkapnya kemudian judul artikel. Contohnya seperti di blog ini  http://inibeli.blogspot.com/

Jika belum berhasil maka klik tombol Edit Template  lalu hapus script yang baru saja anda tambahkan tadi atau tekan CTRL + Z. Sekarang coba ganti dengan <data:post.body/> yang ada di atasnya, semoga kali ini anda berhasil. Jika ketika di Pratinjau sudah terpasang dengan benar klik tombol Save Template.

Jika anda ingin mengatur seberapa panjang teks yang di tampilkan atau seberapa besar gambar yang dimuat berikut ini keterangannya:

summary_noimg = 250;  adalah banyaknya karakter yang ditampilkan ketika postingan anda tidak ada gambar

summary_img = 220; adalah banyaknya karakter yang ditampilkan ketika postingan atau pada artikel anda terdapat gambar.

img_thumb_height = 120; adalah tinggi gambar thumbnail

img_thumb_width = 220; adalah lebar gambar thumbnail

Anda bisa juga mengganti BACA SELENGKAPNYA dengan kata-kata lain.

Demikian artikel Cara Memasang Read More Pada Artikel di Blog. Silahkan baca artikel lainnya, terima kasih.

Sumber kode : impoint.blogspot.com

Cara Mudah Memasang Lagu Di Blog

Posted by tsunardy blogger on Jum'at, Juni 14, 2013

Cara Mudah Memasang Lagu Di Blog - Banyak sudah tutorial-tutorial tentang cara memasang lagu atau cara menambahkan lagu pada blog, Memasang Widget Musik Player untuk sebuah blog memiliki kekurangan dan kelebihan tersendiri. Tergantung dari si pengunjung dan koneksi yang dimilikinya.

Untuk anda yang tetap ingin memasang lagu diblognya, berikut saya sediakan satu tutorial mudah dan singkat, silangkan disimak.
Pertama kunjungi situs scmplayer.net, kemudian pada tab Choose Skin, silahkan pilih tampilan skin widget yang nantinya akan ditampilkan pada blog anda.

Lalu klik pada tab Edit Playlist, disini ada dua pilihan yaitu dengan memasukan url lagu yang di pasang manual(Manual Playlist). Atau dari playlist akun youtube(RSS Podcast) anda. gunakan saja pilihan pertama "Manual Playlist".

Contoh Yang Saya Lakukan

Perhatikan pada gambar yang saya lingkari merah, disitu terterah contoh untuk memasukan lagu yang anda inginkan, silahkan anda cari situs yang menyediakan lagu atau bisa anda upload sendiri ataupun mencari di youtube.com video yang nantinya sebagai url lagu.(bukan menampilkan video, hanya suara dari video)

Kemudian klik pada tab Configure Settings untuk mengatur lagu yang sudah kita pilih tadi, atur sesuai keinginan anda. Atau seperti pengaturan saya pada gambar dibawah ini

Klik Untuk Memperbesar

Setelah itu klik tombol Done, lalu copy script yang diberikan.

Langkah terakhir, masuk ke akun blogger anda pilih tata letak. Kemudian klik tambah gadget pilih gadget HTML/Javascript. Lalu paste kan script tadi. klik Simpan.

Sekarang blog anda sudah terpasang lagu, setiap pengunjung yang datang akan disambut dengan lagu yang anda pasang :) pastikan pada tab Edit Playlist, anda memasukan url yang benar. Selamat mencoba....