Warung Online
Senin, 10 Januari 2011

Cara Pasang Musik Player di Blogspot

Diposting oleh ayo Indonesia
Musik mungkin bagi sebagian orang adalah sumber inspirasi. Tiada hari tanpa musik, mungkin begitu slogannya. Segala aktivitas akan terasa hambar tanpa mendengarkan musik, begitu juga dengan aktivitas blogging Anda. Jika Anda adalah penggemar musik dan ingin blogging sambil  mendengarkan musik, pada tutorial kali ini saya akan membahas tentang bagaimana cara memasang musik player di 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.

Banyak sekali situs layanan musik player untuk dipasang di blog yang beredar di internet. Dari sekian banyak layanan yang ada. Menurut saya ada 2 musik player yang cukup bagus yakni Musik-live dan eSnips. Kedua musik player ini masing-masing memiliki kelebihan dan kekurangannya. Sehingga silahkan anda tentukan sendiri mana yang lebih cocok untuk dipasang diblog Anda.

Kali ini kita akan menggunakan widget dari Musik-live.net  [screenshoot-nya seperti ini]

pasang musik player

Baiklah, kita mulai saja langkah-langkahnya :
  1. Pertama yang mesti dilakukan adalah buka browser dan ketikan http://www.musik-live.net 
  2. Kemudian klik Skin Mp3 Player 
  3. Pilih Skin/tampilan yang anda inginkan, klik Preview skin untuk melihat tampilannya
  4. Copy kodenya
  5. Masuk ke Blogger dengan ID anda
  6. Klik menu Tata Letak -> Elemen Laman 
  7. Klik Tambah Gadget 
  8. Pilih HTML/Javascript 
  9. Pastekan pada kota HTML/Javascript 
  10. Simpan, selesai
Kelebihan:
  • Lagu sudah tersedia, tinggal pasang
  • Banyak model skin yang bisa anda pilih
Kelemahan:
  • Tidak bisa upload lagu sendiri

Catatan: 
Cara diatas lagu yang muncul adalah lagu yang sudah disediakan. Jika anda ingin memilih sendiri lagu yang ingin ditampilkan berikut caranya :
  1. Pada halaman depan 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.
  4. Selesai
Catatan:
Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

Banyak sekali pilihan jenis musik player yang ingin dipasang di blog, terserah Anda mau pilih yang mana. Dan semuanya sangat gampang dalam proses pemasangannya. Demikian tadi tutorial singkat dari saya mengenai cara memasang musik player di blog, semoga bermanfaat dan selamat mencoba.

Semoga Bermanfaat
Label:

Membuat Efek Bayangan Teks Dengan CSS3

Diposting oleh ayo Indonesia
Kadang pengunjung kita bosan melihat tulisan atau gambar yang biasa saja (polos) tanpa hiasan apapun. Untuk lebih memikat pengunjung kadang kita harus memberikan efek-efek tertentu pada gambar atau tulisan, tersebut sehingga lebih indah dan lebih menarik. Salah satunya dengan memberikan efek bayangan pada tulisan  atau gambar yang ada di blog kita. Memberi efek bayangan pada gambar merupakan salah satu teknik yang sering digunakan oleh para designer grafis karena dapat membuat gambar terlihat lebih hidup dan menarik. Untuk membuat efek bayangan pada gambar mungkin sudah menjadi hal yang biasa karena dengan menggunakan software pengolah gambar seperti Photoshop atau Coreldraw. Anda dapat dengan mudah memberi efek bayangan pada gambar. Lalu bagaimana dengan tulisan?

Nah pada postingan ini saya akan menjelaskan cara membuat efek bayangan pada teks seperti yang dapat anda lihat pada judul postingan blog ini. Untuk membuat efek ini sangat mudah, anda tidak perlu memakai tool apapun hanya memberi sedikit sentuhan kode CSS3 pada template blog anda maka efek bayangan akan muncul di teks blog anda.

Agar lebih jelas silahkan ikuti langkah-langkah berikut:

Catatan:
Efek ini hanya mendukung browser Firefox, Google Chrome, Safari dan Opera sedangkan IE efek ini tidak akan tampak. Sehingga bagi anda yang menggunakan browser IE silahkan diganti dulu dengan browser lain yang saya sebutkan diatas sebelum mengikuti tutorial ini.

1. Pada menu dashboard blogger. Klik menu Design -> Edit HTML

2. Letakkan kode text-shadow: 2px 2px 2px #ccc; dimana anda ingin memberi efek bayangan pada teks

3. Sebagai contoh anda ingin memberi efek bayangan pada judul postingan maka cari kode seperti ini.
. h3{
margin:0px;
font-weight:bold;
font-size:25px;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Setiap template tentu memiliki kode yang berbeda-beda. Jika anda tidak menemukan kode css seperti diatas maka cari kode di template anda yang mewakili judul postingan kemudian letakkan text-shadow property seperti berikut:
.h3{
margin:0px;
font-weight:bold;
font-size:25px;
text-shadow: 2px 2px 2px #ccc;
line-height:100%;
padding:0px;
margin-bottom:5px
}
Keterangan text shadow property


4. Silahkan diatur nilai propertynya untuk mendapat efek shadow yang anda inginkan. Setelah itu simpan template anda.

Efek ini juga bisa ditambahkan pada teks di bagian sidebar, form komentar, footer, dan lain-lain. Selamat mencoba.

Di akhir artikel ini saya bingung mau ngomong apa, yah pokoknya semoga dapat bermanfaat bagi kita semua. Bagi teman-teman yang masih bingung, tanya aja ke kolom komentar dibawah siapa tau saya bisa jawab.
Label:

Memasang Efek Salju di Blog

Diposting oleh ayo Indonesia
Bagi para blogger nomor wahid mungkin tutorial ini kurang terasa dibutuhkan karena disamping terlalu ramai juga membuat loading blog agak sedikit lambat. Tapi bagi blogger pemula seperti saya ini terus ingin memodifikasi blog agar lebih hidup. Salah satu fitur modifikasi blog adalah dengan membuat efek salju turun dari atas ke bawah, sehingga blog kelihatan ramai. Jika temen-temen tertarik untuk membuat efek turun salju, di bawah ini saya akan berikan tutorialnya. Tapi yang tidak kepingin blognya ada salju turun ya, baca aja tutorialnya atau di copy paste diblog teman-teman semua biar postingannya tambah banyak, nggak apa-apa kok.
Okey, langsung aja pada inti permasalahannya, yaitu langkah-langkah pembuatan efek turun salju :
  1. Pertama-tama seperti yang biasa dilakukan login ke blogger anda, masuk ke menu Design -> Page Elements 
  2. Klik Add a Gadgets -> HTML/Javascript 
  3. Teman-teman bisa pilih salah satu dari efek salju dibawah ini, lalu Copy kode scipt dibawah ini :
    Salju dengan jumlah 20    
    <script src="http://h1.ripway.com/pinginbelajar/salju/20.js" type="text/javascript"></script> 
    Salju dengan jumlah 30    
    <script src="http://h1.ripway.com/pinginbelajar/salju/30.js" type="text/javascript"></script>  
    Efek salju berwarna pink :   
    <script src="http://daus-borneo.webs.com/undefined/Daus Friendster/salju_pink.js" type="text/javascript"></script> 
    Efek salju biasa :   
    <script src="http://www.geocities.com/sehatserasi72/efeksalju.js" type="text/javascript"></script>
Paste salah satu kode di atas lalu Save (simpan). Setelah itu tinggal kita lihat perubahannya.

Tidak sulit bukan? Kalau tidak mau repot ya gunakan saja cara dibawah ini

1.  Klik tombol Tambahkan Efek Salju Pada Blog dibawah ini


2.  Pilih blog yang ingin anda pasang efek salju lalu klik Add Widget
3.  Selesai.

Nah, itu tadi sedikit penjelasannya, untuk teman-teman yang tertarik selamat mencoba.

Semoga bermanfaat
Label:
Minggu, 09 Januari 2011

Cara Memasang Breadcrumb di Blogspot

Diposting oleh ayo Indonesia
Artikel saya kali ini akan membahas tentang fitur navigasi yang terletak di atas atau bisa juga di bawah judul postingan, yang biasa kita kenal dengan nama breadchumb. Pengertian breadcrumb sendiri kurang lebihnya adalah suatu navigasi yang berisikan kategori atau label dari postingan dan bisanya selalu di awali dengan tombol menuju home (halaman depan blog).


Pada dasarnya Breadcrumb merupakan navigasi seo sebaris dengan tautan internal yang memungkinkan pengunjung untuk menavigasi balik ke bagian sebelumnya atau ke halaman depan dengan cepat. 

Jadi simple-nya seperti ini : search engine selalu membaca label atau tags setiap postingan blog, karena saat ini google sudah tidah menggunakan meta tag keyword lagi untuk mengindeks suatu website/blog, maka yang jadi perhitungan google saat ini adalah meta description dan label (kategori). Maka dari itu semakin relevan sebuah label dengan isi postingan (artikel) maka akan semakin mendapatkan kesempatan tampil di halaman depan google.

Langsung saja pada langkah-langkah pembuatan breadchumb ini : :
  • Seperti biasa anda harus login ke Blogger.
  • Langsung tuju Edit HTML.
  • Klik Expand Template Widget.
  • Letakkan kode berikut ini tepat sebelum  kode ]]></b:skin>
    .breadcrumbs{
    padding:5px 5px 5px 0;
    margin:0;font-size:95%;
    line-height:1.4em;
    border-bottom:4px double #cadaef}
  • Setelah itu, cari kode seperti ini :
    <div class='post hentry uncustomized-post-template'>
  • Letakkan kode berikut ini tepat setelah kode <div class='post hentry uncustomized-post-template'>
    <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> </b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>
    Simpan Template.

Itu dulu teman-teman penjelasan dari saya, waktu sudah menunjukkan jam 23.41 menit WIB, jadi udah waktunya tidur nih. Besok saya akan lanjutkan kembali dengan tutorial yang lain.

Semoga bermanfaat
Label:

Membuat Kotak Komentar Di Bawah Postingan Blog

Diposting oleh ayo Indonesia
Saya yakin semua temen-temen blogger sangat ingin berinteraksi dengan para pengunjungnya. Untuk itu diperlukan sebuah kolom atau kotak untuk saling bertukar pendapat. Salah satunya adalah melalui kotak komentar, kotak komentar adalah salah satu fitur yang harus ada dalam sebuah website/blog sebagai alat interaksi antara pengunjung dengan pemilik website/blog tersebut dan bisa juga menjadi tempat diskusi mengenai topik artikel yang dimuat dalam website/blog tersebut.

Oleh karena begitu pentingnya keberadaan kotak komentar, banyak blogger yang melakukan modifikasi kotak komentar untuk memudahkan pengunjung memberikan komentar-komentarnya terhadap suatu artikel atau postingnya dan salah satu kreasinya adalah menampilkan atau membuat kotak komentar berada di bawah postingan.

Lalu bagaimanakah Membuat Kotak Komentar di Bawah Postingan Blog? Berikut ini caranya :
  1. Login ke Blogspot Anda, klik Setting, lalu klik Comment dan pada menu Comment Form Placement, klik pada tulisan Embedded below post, kalau sudah selesai jangan lupa di Save. Kira-kira gambarnya seperti di bawah ini :


  2. Kembali ke Dashbord Blog Anda, lalu klik Layout, lalu klik Edit HTML, dan jangan lupa kasih tanda centang pada kotak Expand Widget Template, kemudian cari kode seperti di bawah ini:

    <p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>

    Lalu ganti dengan kode di bawah 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>

  3. Save Template dan lihat hasilnya.
  4. Jika cara di atas masih juga belum berhasil membuat kolom komentar di bawah posting, silahkan coba dengan cara lain, temukan kode di bawah ini:

    <b:include data='post' name='comments' />

    Setelah kode di atas ditemukan, tambahkan kode di bawah ini tepat berada di bawah kode di atas:

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

    Contohnya seperti ini:

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

  5. Kemudian Save Template dan lihat di bawah postingan Anda sekarang sudah mempunyai kolom komentar yang terintregasi di setiap halaman posting blogspot. Namun jika masih belum berhasil juga, silahkan baca ulang dan pelajari dengan seksama tutorial ini, mungkin ada prosedur yang terlewatkan.
Semoga bermanfaat
Label:

Membuat Daftar Isi Otomatis di Blogspot

Diposting oleh ayo Indonesia
Selamat malam teman-teman semua, belum pada tidur kan? Pada malam hari yang sepi ini saya akan meneruskan artikel saya mengenai membuat daftar isi manual, kali ini saya akan menjelaskan bagaimana caranya untuk membuat daftar isi secara otomatis. Saya tidak akan menjelaskan mengenai fungsi dan cara kerja dari Daftar Isi Otomatis ini, karena sudah cukup dijelaskan pada tutorial Membuat Daftar Isi Manual di Blogspot, oleh karena itu bagi Anda yang belum pernah membacanya silahkan kunjungi dulu tutorial tersebut, tidak dipungut biaya.

Cara pemasangan daftar isi manual dan daftar isi otomatis tidak berbeda, yang membedakan hanya kode-kode yang digunakan dan cara kerjanya saja, namun tidak salahnya kalau saya memberikan contoh bentuk dari daftar isi otomatis tersebut.

Berikut ini cara membuat dan memasang daftar isi otomatis, silahkan ikuti dengan cermat dan seksama langkah-langkah di bawah ini:
  1. Login ke Blogger, Klik Layout/Tata Letak;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam content yang telah tersedia, berikut ini kodenya :
    <div style="overflow: auto; width: 300px; height: 200px; text-align: left;">
    <script style="text/javascript" src="http://www.abu-farhan.com/script/daftarisiblogger/blogtoc-min.js"></script>
    <script src="http://freedownloadcopasthemes.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc"></script></div>
  5. Klik Tombol Save/Simpan.

Keterangan :
  • Link yang berwarna merah, silahkan diganti dengan alamat Blog Anda;
  • Width: 300px; adalah merupakan lebar dari kotak daftar isi otomotis dan boleh anda sesuaikan;
  • Height: 200px; adalah merupakan tinggi dari kotak daftar isi otomotis dan boleh anda sesuaikan.
Demikianlah tutorial Membuat Daftar Isi Otomatis Di Blogspot ini, semoga bermanfaat.
Label:

Membuat Daftar Isi Manual Di Blogspot

Diposting oleh ayo Indonesia
Kali ini artikel saya akan membahas tentang daftar isi sebuah bllog atau website. Daftar isi pada website/blog berfungsi sebagai alat navigasi bagi pemilik maupun pengunjung untuk menjelajahi isi dari website/blog dan bicara soal alat navigasi sebetulnya juga pernah dibahas pada posting saya yang berjudul Membuat Menu Scroll di Blogspot, namun posting ini akan membahas khusus soal alat navigasi berupa Daftar Isi seperti pada Download Disini, contohnya seperti di bawah ini:


Pada umumnya jenis daftar isi ada 2 (dua) macam yaitu daftar isi manual dan daftar isi otomatis. Perbedaan dari kedua daftar isi tersebut adalah jika daftar isi manual sesuai dengan namanya dipasang dan diatur secara manual sesuai keinginan pemilik blog, sedangkan jika daftar isi otomatis akan secara otomatis menampilkan isi blog berdasarkan urutan abjad pada label dan judul postingan.

Baiklah saya rasa penjelasan singkat tentang fungsi daftar isi pada blog sudah cukup dan sekarang mari mulai bahas sesuai judul posting ini Membuat Daftar Isi Manual Di Blogspot, silahkan ikuti langkah-langkahnya sebagai berikut :
  1. Login ke Blogger, Klik Rancangan/Design;
  2. Pada Elemen Halaman, klik Add Gadget/Tambah Gadget di lokasi yang Anda inginkan;
  3. Cari dan pilih HTML/Javascript;
  4. Copy paste kode di bawah ini ke dalam Content yang telah tersedia, berikut ini kodenya :
    <style>
    .list {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilI66wcAUygVSXs4PfkV5lFY-kTZKqe4FCedKiO6mOW20wHzBmzgmnG1-2Vj_KYa6Xvs7NnS7ai2cBoAbdo3l3jzlAjXK7jJQeCRgC7O3yRw2OexcXmw9uVa2s0_fpKj_JXjRXokmLD_mw//") no-repeat left center;
    line-height:1.5em;
    padding:3px 0px 3px 20px;
    }
    </style>
    <div style="background-color: #f7f7f7; border: 1px solid rgb(68, 67, 67); height: 220px; margin: 0px; overflow: auto; padding: 3px; width: 300px;">
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-efek-image-zoom-dengan-jquery.html">Membuat Efek Image Zoom dengan Jquery</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-sliding-loginregister-form.html">Membuat Sliding Login/Register Form Panel di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/memasang-text-resizer-di-blog.html">Memasang Text Resizer di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-multi-level-drop-down-dengan.html">Membuat Multi Level Drop Down dengan jQuery</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-menu-dtree-di-blogger.html">Membuat Menu dTree di Blogger</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-menu-horizontal-animasi-di-blog.html">Membuat Menu Horizontal Animasi di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-menu-navigasi-horizontal-glossy.html">Membuat Menu Navigasi Horizontal Glossy di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-effect-jquery-link-nudging-di.html">Membuat Effect JQuery Link Nudging di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-info-panel-slide-vertikal.html">Membuat Info Panel Slide Vertikal dengan jQuery</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-chatbox-slide-vertikal-dengan.html">Membuat Chatbox Slide Vertikal Dengan jQuery di Blog</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/02/membuat-daftar-isi-dengan-jquery.html">Membuat Daftar Isi Dengan jQuery Accordion</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/01/memasang-slider-gambar-ala-drakon.html">Memasang Slider Gambar ala Drakon Template</a></div>
    <div class="list">
    <a href="http://freedownloadcopasthemes.blogspot.com/2011/01/memasang-gambar-slide-ala-zinmag-primus.html">Memasang Gambar Slide Ala Zinmag Primus</a></div>
    </div>
  5. Klik Tombol Save/Simpan.
Keterangan :
  • Link dan Teks, silahkan diganti dengan link dan teks Anda; 
  • width : 230px; adalah merupakan lebar dari kotak daftar isi manual dan boleh anda sesuaikan; 
  • height : 180px; adalah merupakan tinggi dari kotak daftar isi manual dan boleh anda sesuaikan.
Untuk tutorial membuat daftar isi manual sudah selesai, silahkan tunggu tutorial berikutnya tentang cara pasang daftar isi otomatis di Blogspot.

Semoga bermanfaat
Label:
Copyright © 2012 - Premium Themes Blogger. All Rights Reserved
Theme Design by Azon Online Store - Free Premium Theme News Android