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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB6ACzrAHAGxgbPyyN52HiczlhlDSy_8eJ_OKwbDAvr7OVCbyXXkaJP0N_qTkpZKEdcWqWPi-z9WHsrQ_mWA8itvUB56D2L2oJ_kyiPeVosbdN8mQzc6R9m3vYMpnlw-VWCCp5ot0jQdxx/s1600/webabisi.png);
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="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/100223689&color=ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false" width="200"></iframe>
</div><!--Webabisi.com Müzik Dinle Kodu-->
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- https://soundcloud.com/ 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. Webabisi
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.
Yorum Gönder Blogger Facebook