Blogger Açılıp Kapanan Müzik Dinle Kutusu (1 Kişi)

Sitenin Alt Köşesine Açılıp Kapanan Müzik Kutusu

Evet sitenize resimde gördüğünüz gibi bir müzik kutusu eklemek istiyorsanız bu yazıyı okumaya devam etmelisiniz

Yapacağımız işlem çok basit, öncelikle blogger paneline giriyoruz, Yerleşim>Gadget Ekle>HTML/JavaScript diyoruz. (Sitenin herhangi bir yerine ekleyebilirsiniz, footer tercihimdir.)

Aşağıdaki kodu ekleyin ama kaydetmeyin, daha müzikleri ayarlayacağız.

<!--Webabisi.com Müzik Dinle Kodu-->
<style>
#webabisi{
right:0;
bottom:0;
z-index:999;
border-left: 2px solid #7A7A7A;
border-top: 2px solid #7A7A7A;
border-right: 2px solid #7A7A7A;
height:30px;
width:200px;
margin:-60px 0px;
padding: 30px 0px;
border-radius: 3px 3px 0px 0px;
background: url(

Bu link gizlenmiştir, görmek için Giriş yap veya üye ol.

transition:all .5s linear;
position: fixed; right: 20px; bottom: 0px;
}
#webabisi:hover{width:200px;height:300px;padding:0px;margin:0px;}
</style>
<div id="webabisi">
<iframe frameborder="no" height="300" scrolling="no" src="

Bu link gizlenmiştir, görmek için Giriş yap veya üye ol.

" width="200"></iframe>
</div><!--Webabisi.com Müzik Dinle Kodu-->

Genişletmek için tıkla ...

Eğer kutuyu sitenin sol tarafına almak istiyorsaniz kırmızı ile yazdığım yeri yani right'ı left olarak değiştiriyoruz.

Gelelim müzikleri ayarlamaya..

1-

Bu link gizlenmiştir, görmek için Giriş yap veya üye ol.

sitesine giriyoruz, üyeliğiniz yoksa üye olun.(Direk Facebook vs. bağlanın uğraşmayın.)
2- Arama kısmına(Search) ekleyeceğimiz müziğin adını yazıyoruz.
3- Add to playlist'e basıyoruz.


4- Daha önce müzik listesi oluşturmadığınız için önce playlist oluşturuyoruz. Create new'e basıyoruz playlist ismi yazıp Save'e basıyoruz.


5- Playlist'i oluşturduktan sonra 2. ve 3. aşamada anlattığım gibi istediğimiz müzikleri bu listeye ekliyoruz.
6- Müzikleri ekledikten sonra aşağıdaki resimde gördüğümüz gibi playlist'e giriyoruz.


7- Playlist'i açıyoruz ve resimde kırmızı ile gösterdiğim butona tıklıyoruz.



8- Playlist paylaşma sayfası açılacak Embed butonuna basıyoruz, sağdaki şablonu seçiyoruz ve altta çıkan embed kodunu kopyalıyoruz.


9- Vermiş olduğum kodda mavi ile yazılan kısmı silip kopyaladığınız kodu yapıştırın.
10- Ve son olarak, kopyaladığınız kod içerisindeki width="100%" height="450" kodunu width="200" height="300" olarak değiştirip kaydedin.