Hide music player 3

Assalamualaikum and hello everyone ! we meet again in my new tutorial post...this is my third hide music player tutorial...ask for my permission first if you want to copy this tutorial...I got this tutor from tumblr if I'm not mistaken the URL is tumblings.net ( I'm not sure ) but, I have edit the code almost 70%

Live Preview

Firstly : for template designer , denim , simple ,watermark...
Dashboard --> Layout --> Add gadget --> HTML/Javascript

Firstly : for blogskin , classic template...
Dashboard --> template --> paste the code after  </style>

The codes :

<style type="text/css">
#music-player-rounded {
  position:fixed;
  left:30px;
  top:5px;
  width:25px;
  height:25px;
  padding-left:10px;
  padding-top:10px;
  background-color:#FFFFFF;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  border:3px dotted pink;
  opacity:1;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#music-player-rounded:hover {
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  -o-transform: rotate(360deg);
  left:50px;
  top:30px;
}
.music-player {
  margin-top:-10px;
  margin-left:-55px;
  width:25px;
  height:25px;
  padding-left:10px;
  padding-top:10px;
  background-color:#FFFFFF;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius:100px;
  border:2px solid #dddddd;
  color:#777777;
  opacity:0;
  overflow:hidden;
  font:12px Arial, Calibri, Cambria, sans-serif;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  transition: all 0.4s ease;
  }
#music-player-rounded:hover .music-player {
  opacity:1;
}
.music-player-embed {
  margin-left:-115px;
  margin-top:3px;
}
</style>

<div id="music-player-rounded">
<img src="http://media.tumblr.com/tumblr_lm6prnRzP61qfoi4t.gif" />
<br />
<div class="music-player">
<div class="music-player-embed">
MUSIC CODE HERE
</div></div></div>

The notes :

Red text : Color code HERE

Orange text : Width and height of the music player before and after hover

Blue text : Music icon URL can be find HERE

Fuchsia text : Music player code use billy player find music HERE

Alert this :

1.  Don't put title on your music player
2.  Change the width of the player from 200 to 370
example :

<embed align="middle" height="10" name="billy" quality="high" src="http://www.sheepproductions.com/billy/billy.swf?autoplay=true&amp;f0=http://a.tumblr.com/tumblr_lwve08PUhx1qdjl89o1.mp3&amp;t0=&amp;total=1" type="application/x-shockwave-flash" width="370" wmode="transparent"></embed></div>

Ok thats all...Kalau tak faham tanyalah...see you again in my next post..btw, I don't take banner request anymore... PLEASE COMMENT AND RATE THIS SKIN... \(u,u\) thanks...

Circle hover effect

Assalamualaikum and heyyo eberybuddy... ^^,

Harinie saya nak buat tutorial pasal circle hover macam tempat saya letak ask.fm tu...sebenarnya saya tak nak buat tutorial pasal apa yang saya letak kat blog nie sebab takut nanti ada pulak klon blog nie...tapi, kesian pulak dengan orang yang ada request pasal tutorial nie kat ask.fm...

This is a tutorial about circle hover effect ( rotate , scale , opacity )

Live Preview

For template designer :

www.blogger.com/home --> Layout --> add gadget --> HTML/Javascript

For blogskin :

www.blogger.com/home --> Template --> Paste it anywhere you want it to appear

The Code

<style type="text/css">
.navs {
width:100%;
height:100%;
margin-top:10px;
text-align:center;
border-radius:50%;opacity:0;
 -webkit-transform: scale(0) rotate(-360deg);
 -moz-transform: scale(0) rotate(-360deg);
 -o-transform: scale(0) rotate(-360deg);
 -ms-transform: scale(0) rotate(-360deg);
 transform: scale(0) rotate(-360deg);
background-color:white;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwmeNLJCwEVfkpU65-Oc2Z6GsYSsEQX2XmDsEMl9CDDbiWLO6thjewFqxfbvkPNxZvveM26Bq9iX4DNrf34ame28IbAbTtTNM52vCDKBHAlgee0DpZ_CJRrAFEeT7R1t_pikVh3OvTVRs/s1600/spotty-pink-background-seamless.jpg);
 -webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;}
.navs a {
color:white;
}
.outside:hover .navs {
opacity:1;
 -webkit-transform: scale(1);
 -moz-transform: scale(1);
 -o-transform: scale(1);
 -ms-transform: scale(1);
 transform: scale(1);
}
.outside {
height:250px;
width:250px;
border-radius:50%;
 box-shadow:
  inset 0 0 0 15px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
-webkit-transition: all 0.4s ease-in-out;
 -moz-transition: all 0.4s ease-in-out;
 -o-transition: all 0.4s ease-in-out;
 -ms-transition: all 0.4s ease-in-out;
 transition: all 0.4s ease-in-out;
}

#outside1 {
background-image: url(http://wallpapers.avantzone.com/data/media/102/Forever_Friends_14.jpg);
background-position:50% 50%;
background-size:330px;
background-color:#FFFFFF;
}
#outside1:hover {
box-shadow:
  inset 0 0 0 0px rgba(255,255,255,0.6),
  0 1px 2px rgba(0,0,0,0.1);
}
</style>
<center><div class="outside" id="outside1"><div class="navs">
ANYTHING HERE
</div></div></center>

The Note

Blue text : Background image URL find at Google

Fuchsia text : Width and height

Orange text : Color code Find Here

Red text : Put anything you want

Preview and save when done...comments are really appreciated...

Btw, I have update my old blogskin... Blogskin : I'm Rilakkuma , Blogskin : Blue wonderland

Basic thing in editing blog

Assalamualaikum and hello everyone... \o/ actually I've been thinking of making a tutorial about this since a long time ago...But, only now I have the the diligence to write this entry...

This tutorial are for template designer like simple, watermark , awesome or etc

Before editing blog, you must log in to your Blogger account with your username and password. Once you are logged in, make sure you are at your Blogger's Dashboard, otherwise click on the "Dashboard" link, which will take you to a list of your blogs.

If you don't have any blogger account, sign up first

How to add widget / gadget ?

1.   Go to blogger dashboard

     

2.   Access the Layout page of your blog

3.   Click on add a gadget

4.   After you click on add a gadget,a pop-up will appear...

5.   Save your widget

6.   Add a custom widget to Blogger using the HTML and JavaScript widget.

7.   Add HTML/JavaScript code to the box

You can ignore the title field if you don't want to add title

How to edit code ?

1.   Go to blogger dashboard

2.   Access the Template page of your blog

3. Click on Edit HTML button under the "Live on blog" view

4.   Save when done editing

Click save template to save

Click Preview template to preview

Click Revert changes to cancel changes made

How to find code ?

1.   Click on the template box code

2.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "F" key at the same time (simultaneously)

3.   A little pop-up window will appear.

Write the keyword that you want to find in the search box then press "enter"

How to copy code ?

1.   Highlight the word that you want to copy

To highlight text using your mouse, position your cursor at the beginning of the text you want to highlight.

Press and hold your primary mouse button (commonly the left-button) until the end of the text.

2.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "C" key at the same time (simultaneously)

How to paste code ?

1.   Hit the "Ctrl" key (lower left area of your keyboard) AND the letter "V" key at the same time (simultaneously)

Well, I think that all the basic things you should know in editing blog...

If you have any problem with this post just ask me by leaving a comment...

Affiliates page

Assalamualaikum dan hai semua...harinie saya nak bagi freebies skin untuk letak senarai link dan banner...

skin nie dibuat dalam masa kurang dari 24 jam dan codenya ditaip 99% oleh saya sendiri...

This is how the skin look

Live Preview // The Code

Rules :

My first affiliates skin... hope you'll like it...don't remove the credit ! don't use this skin as a base code! don't copy anything in this skin without proper credit...

Edit this skin as much as you want as long as the credit remains...

How to use this skin?

Firstly make a new affiliates blog...Then, revert the blog into classic template (at the bottom of template page) Then, copy and paste the code of the skin into the template code box...

Lastly,preview and save...

Do comment if u are using this skin

Kepada yang request banner dan saya belum buat lagi sabar yer...paling cepat pown boleh siap tengah malam nie...

Customize comment box ( Designer )

Assalamualaikum dan hai semua...^^ semalam kat Tiqa ada request kat cbox dia tanya macam mana nak buat comment box macam saya...so, here the tutorial...

This comment box will only work in template designer like simple template, denim or etc... As for me I use simple template...

Don't RE-POST this tutorial !!

Want to have a comment box exactly like above? follow below instructions...

The instuction :

1. Sign in www.blogger.com
2. Choose Template --> Edit HTML
3. Search   /* Comments using f3 or ctrl+f
4. Delete the code that you search and all the code after that until the comment code end
5. After deleting the old comment code, replace the code with the one that I give below

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}
.comments .comment-thread.inline-thread {
  background-color: transparent;
}
.comment-thread ol {
counter-reset: countcomments;
}
.comment-thread li:before {
content: counter(countcomments,decimal);
counter-increment: countcomments;
float: right;border:2px solid #FEE8E8;
z-index: 2;
position:relative;
font-size: 14px;border-radius:50%;
color: #333333;
padding-left:8px;
padding-top:3px;
background:#FFFFFF;
margin-top:7px;
margin-left:10px;
width: 24px; /*comment counter width*/
height: 23px; /*comment counter height*/
}
.comment-thread ol ol {
counter-reset: contrebasse;
}
.comment-thread li li:before {
content: counter(countcomments,decimal) "." counter(contrebasse,lower-latin);
counter-increment: contrebasse;
float: right;
font-size: 13px;
color: #666666;
}
.comment-block{
background:#FFFAFA;
padding:5px;
border:3px solid #FFF0F2;
margin-left:65px;position:relative;
border-radius:10px;
}
.comment-header{
font-size:14px;border-radius:10px;
background-color:#FFFFFF;
border-bottom:1px solid #FFF0F2;padding:5px;
}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0;}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{
margin-top:0;
}

.comments .comments-content .datetime a{
color:#555555;font:12px candara;float:right;text-decoration:none;
}

.comment-content{
font: 13px candara;
background:#FFEBED;
padding:8px;
border-radius:10px;
color:#333333;
}
.avatar-image-container{background:#FFE2E2;padding:5px;border-radius:50%;
}

.avatar-image-container img{
-webkit-transition: all 0.8s ease-out;
-moz-transition: all 0.8s ease-out;
transition: all 0.8s ease-out;
border-radius:50%;}

.avatar-image-container img:hover{
border-radius:50%;
transform: rotate(360deg) ;
-webkit-transform: rotate(360deg) ;
-moz-transform: rotate(360deg) ;
-o-transform: rotate(360deg) ;
-ms-transform: rotate(360deg) ;
}

Let's edit the code...

Purple text : The default image URL to show admin comment you can change it with other icon

find the code here

Orange text : Border color

Blue text : Text color

Red text : Background color

Fuchsia text : Width and height

Color code here

Next,you can save it...preview on single post page with comments...

Example : http://tetingblo.blogspot.com/2012/12/vintage-flower-picture.html instead of http://tetingblo.blogspot.com

kalau tak faham tanyalah

...sekian terima kasih...

Banner for them...

Assalamualaikum dan hai semua...haritu dalam post yang nie saya ada cakap nak buatkan banner untuk tiga orang yang paling awal...jadi seperti yang telah dijanjikan amiklah banner kalian nie...

Copy je link banner yang saya dah bagi tuw...kalau tak tahu macam mana nak letak dalam blog tengok sini...

For : Aliyah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Jt2QEokgQLE28VEs075WvwtH4Y7oN6le1yZXfy7iSTw5BSxlmbTSsoeZUkcWorzontHbZJoXcSc_Mj0umxlv4ER06ZGoeoT54N4uMoG3QOHOnva1HJ7CnlkJWphCxDJaFTfpl8x3v_js/s1600/Banner-Aliyah.gif

For : Amirah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidbXdy7_56NoB1_DRgYWOrTfrNAQpi3Zt_-q0E7Sd8yMB9SRgI9vmCQbsxfxGVcOJKyLUvP4uCpVXZND-Sv65TpQDbI_uT42q1FXCSbIF0nrk1sYcF9VZsHLj5Q5EHnIMCYVLpVvBIziKw/s1600/Banner-Amirah.gif

For : Asilah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8fNNuPenDJTQaMUMUQwBgB8M5GPJ0JajYay8-_O4uhI_-e0BqAUOhL8LBKV4xpFXNiORL14o5-bE2KnPMdVq08Rth0f40twHMYbCsE6q3mk5ekQejM3MCSPi1iI_gT8h7jppvKW1ahhWe/s1600/Banner-Asilah.gif

For : Nasharina

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-plm2REH8yqdUtM6OjZPlubb28LmtkuOF53Q_pNT6cOuo8f8BMDqfCKbPPtp_uviQwISXd5oDtIb9paPzWL2cbqYArc4KxgD9hw_lREmYUBUJGaKZ4mtzLwK08qKgTOvbSYD0b1CPrcRN/s1600/nasharina-banner.gif

For : Dhyani

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZgQzWW62KTyTXTZvowmrSXwmcBznzvUduo_CqtKFBGrdSHMSe3KltHnxEAKM0awZBbIg72rp4-fTcQ7SZu-pXD1pqiw_C6zLkmz5FKG-5EQdKDdldlZ3G619PNhOl6k-MX3JL332m5bKF/s1600/dhyani-banner.gif

For : Alan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYvxuLQb13jVYNbkWjqQXlpDigWAbvIPCT7ZaabC1dkEKvrDu-ZEVVIKrAfOuIIMyrnDieZuMRegAiZkuXyZmu__7W09qHltyYfUZ2Xti6m-5f5vGkFrJxwz2xSmDkwNbQbsevTve8OscP/s1600/Banner-Alan.gif

For : Amirah

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXUIusPxSQn7Z54iDQWt9nLTvFRLnWQzjLjByD1ITQyic4GFKCO8wXoBfTRwXDLxaYEbHk8hJq-hr7AWyEfwlIHhZI7Na-w2bGvs8-zcBMBtnyUL8_6Uqz3P-HpcNBfXctR0pI12PkFOMa/s1600/Amirah.gif

For : Alya Tory

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLKuVx_hc8QcJBlvBJjbdNsbZsfGgl20HtffEoToGPg9SyBd3Hj8_TT4FwcwwN-Bc5J_RV-aGpI-xGKIqNJTJ79HsnCE_CGb-sbM2PzVxt8-7sRqFY5-RIOXA79sKQFMEt9ZGVofcakMAp/s1600/Banner-Alya.gif

Sorry akak tak tau macam mana nak tambah glitter... :-/

For : Alan

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO9an0ZlHHggrrE_S-h2hMDgWNHruCp0agwPZfuH2wKODN_WQTrNqzxIQ3atve1-4QcPiZsAJMvbDNc0fZD4G62YTyCK2M7qpLV2mpzST_0suXDwnwCg6x5OCwFje9qgC5B-dcyhmcqy_h/s1600/Alan-Banner.gif

For : Aulia

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheqoO5nHAqP6GcDnQUbySrTrfABmC1Qij1SR7JmxnCk2CxtKIZm5nUQuVxrXXf1TlWV5WrWRLC4uRqWMCdmfQFLpcXCeuXjKsWJOp7mc0Mn1COHYISrCFyqfqnH7XMd6s2OhpV4LfMyaDV/s1600/Aulia.gif

Buat dua sebab gambar yang awak bagi macam terpotong...
Pilihlah yang mana awak nak... ;)

For : Aulia

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxkV5-R8RLy66pZLF5iqFddCeLUugLY36AG64Ydtq98DgTYhb8ZjoUbxVdW5tBMf0y5s-tDIG5PQKWZ-lNmjqU9d8g0szBXx5oV82z7ElCShMjmWlt-zDpWnFsjJBDXYntCr8djBcqjwXz/s1600/Banner-Aulia.gif

For : Maya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLhqgp5N8iyMq9WONoGbuZDwMOsNi49ro0xDnVhn5I6hRAm-MM3t17ZrYYQYFZ4VvxbCzNPhXusfVLAY_p5r5uNzaKRb7hMAJ2C9kXc0E7QDCbXqmsd9jTnUb4IIcf1DqFsarLZ35FE5VT/s1600/Banner-Maya.gif

For : Syazwani

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2l0TNPnP853dngw3torifmKZgADjHz6d3MQkp0Rh1Wrk4nbQf4bSBlLCw4Nu77QvmRRphsh68S7Elb9AeyBMdCEw5-qhi7S42XQbnXc3vXhovXg4gYXm6AoZPKBxBMVwKKn-mI9x549ut/s1600/Banner-ana.gif

For : Azkiya

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzU0DWNfpdRCIFjE6tlye9F39Jn3q6mTTXr99DwpbruolHRzGNk1GCiqU8lSfnmmW7RcCeS1QQRdGXRBQT0Sgxjd-IT-jTXJCO147lkH7OAubD6oBPJNS3qcoJVsLlHbCugQhLt75ogBZ/s1600/Banner-Azkiya.gif

For : Mufidah

Ha...comel tak ? comel tak ? kepada yang telah diberikan banner jangan lupa credit blog saya kat credit section awak...nie code credit...
Banner by : <a href="http://kawaiilady.blogspot.com/">Kawaii Lady</a>

Request banner secara percuma dibuka sehingga jam 9.00 malam 23.11.2013

Sila komen detail banner seperti :

- URL image untuk diletakkan pada banner

- Apa yang hendak ditulis di banner

- Tema warna banner

- Bentuk bulat atau petak

- Animated atau tidak

--------------------------------------------------------------------------------------------
Saya tidak mengambil request banner lagi kerana sibuk
--------------------------------------------------------------------------------------------