Tạo nút button: download, demo ... với hiệu ứng bọt nước bằng CSS3 cho Blogspot

Chủ Nhật, ngày 11 tháng 5 năm 2014

Trong quá trình thiết kế blog, blogspot, wordpress hay website việc tạo các nút (button) rất cần thiết và tùy vào mục đích sử dụng mà bạn có thể tạo ra những kiểu nút khác nhau. Có nhiều cách để bạn tạo hình dạng của các nút phục vụ cho việc thiết kế, có thể tạo bằng hình ảnh bằng các công cụ tạo ảnh hay bằng flash, dạng ảnh động... Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo Button download cho Blogger đẹp mắt bằng CSS3.

Tạo nút download, demo

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML) 

4. Chèn tiếp code CSS bên dưới vào trước thẻ ]]></b:skin> 

.button{font:15px Calibri,Arial,sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important;white-space:nowrap;display:inline-block;vertical-align:baseline;position:relative;cursor:pointer;padding:10px 20px;background-repeat:no-repeat; background-position:bottom left;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'); background-position:bottom left,top right,0 0,0 0;background-clip:border-box; -moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px; -moz-box-shadow:0 0 1px #fff inset;-webkit-box-shadow:0 0 1px #fff inset;box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s;-moz-transition:background-position 1s;transition:background-position 1s}
.button:hover{ background-position:top left;background-position:top left,bottom right,0 0,0 0}
.button:active{ bottom:-1px}
.button.big{font-size:30px}       /*Cỡ chữ nút lớn*/
.button.medium{font-size:18px}       /*Cỡ chữ nút trung bình*/
.button.small{font-size:13px}        /*Cỡ chữ nút nhỏ*/
.button.rounded{-moz-border-radius:4em;-webkit-border-radius:4em;border-radius:4em}

.blue.button{color:#0f4b6d !important;border:1px solid #84acc3 !important; background-color:#48b5f2; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),-moz-linear-gradient(#4fbbf7,#3faeeb);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(89,208,244,1)),to(rgba(89,208,244,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#4fbbf7),to(#3faeeb))}
.blue.button:hover{background-color:#63c7fe;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient( center bottom,circle,rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),-moz-linear-gradient(#63c7fe,#58bef7);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient( radial,50% 100%,0,50% 100%,100,from(rgba(109,217,250,1)),to(rgba(109,217,250,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#63c7fe),to(#58bef7))}

.green.button{color:#345903 !important;border:1px solid #96a37b !important;background-color:#79be1e;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27,#74b317);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(162,211,30,1)),to(rgba(162,211,30,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#82cc27),to(#74b317))}
.green.button:hover{background-color:#89d228;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31,#7fc01e);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(183,229,45,1)),to(rgba(183,229,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#90de31),to(#7fc01e))}

.orange.button{color:#693e0a !important;border:1px solid #bea280 !important;background-color:#e38d27;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f,#d4821f);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(232,189,45,1)),to(rgba(232,189,45,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f1982f),to(#d4821f))}
.orange.button:hover{background-color:#ec9732;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746,#e18f2b);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(241,192,52,1)),to(rgba(241,192,52,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#f9a746),to(#e18f2b))}

.gray.button{color:#525252 !important;border:1px solid #a5a5a5 !important;background-color:#a9adb1;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca,#92989c);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(197,199,202,1)),to(rgba(197,199,202,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#c5c7ca),to(#92989c))}
.gray.button:hover{background-color:#b6bbc0;background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-moz-radial-gradient(center bottom,circle,rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6,#9fa5a9);background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEYN6WbY1wpIxyRinZvKhqzuZkvJ8V_2ODgYEe4gsU3JF1DhoErWn1jkWMcegD6PjcOl2xXqYOJaJ0pDiJ24tT5eP0Ob4NdMuCByUofPJmpdIw79kFOpvnAA2IM6ifJkldG1xo-TkyT0M9/s500/Bubble-Buttons.png'),-webkit-gradient(radial,50% 100%,0,50% 100%,100,from(rgba(202,205,208,1)),to(rgba(202,205,208,0))),-webkit-gradient(linear,0% 0%,0% 100%,from(#d1d3d6),to(#9fa5a9))}

5. Và bây giờ bạn chỉ cần tìm vị trí để chèn nút vào với code như bên dưới

<a class="button big blue" href="#">Big Button</a>
<a class="button big green" href="#">Big Button</a>
<a class="button big orange" href="#">Big Button</a>
<a class="button big gray" href="#">Big Button</a>

<a class="button blue medium" href="#">Medium Button</a>
<a class="button green medium" href="#">Medium Button</a>
<a class="button orange medium" href="#">Medium Button</a>
<a class="button gray medium" href="#">Medium Button</a>

<a class="button small blue" href="#">Small Button</a>
<a class="button small green" href="#">Small Button</a>
<a class="button small blue rounded" href="#">Rounded</a>

<a class="button small orange" href="#">Small Button</a>
<a class="button small gray" href="#">Small Button</a>
<a class="button small green rounded" href="#">Rounded</a>

Bạn hãy thay dấu # thành link website của bạn và tên màu xanh thành tên của nút bạn muốn tạo. Như vậy là đã hoàn tất bạn chỉ cần chèn nút vào vị trí mà mình mong muốn là xong.

Chúc bạn thành công!

Nguồn http://kieukien.blogspot.com/

Read More

Thêm nút Download và Demo vào trong Blogger với hiệu ứng CSS đẹp

Thêm nút Download và Demo vào trong Blogger - trong bài viết này tôi sẽ chia sẻ một bài hướng dẫn cách thêm nút Download và Demo bằng css đẹp cho blogger. Hướng dẫn này có thể áp dụng cho các blogger template và wordpress theme.

Nút Demo và Download được tạo ra với CSS với hiệu ứng hover chuột. Hai biểu tượng này được lấy từ fontawesome. Vì vậy, trước khi bắt đầu hướng dẫn này bạn cần thêmfontawesome vào trong blog của bạn.

Đầu tiên bạn vào Blogger Dashboard > Template > Edit HTML và chèn code bên dưới vào trước thẻ đóng</style> 

.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}

Lưu giao diện lại
Khi đăng bài mới, bạn chuyển qua phần  HTML Code , copy code bên dưới và chèn link của bạn vào chỗ YOUR-LINK-THERE khi muốn tạo nút Download và Demo

<div style="text-align: center;">
<ul class="btn">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>

Kết quả:

• DEMO
• DOWNLOAD
Nguồn http://lecanhphong.blogspot.com/

Chú thích: Vị trí đặt Source Code trên, ngoài chổ thẻ </style> ra, mình còn có thể đặt nó ở trên thẻ đóng </b:skin> cũng được nhé bạn.

Read More

Tổng hợp Code trang trí Forum cho Blogspot

Tiêu đề: Bảng bộ gõ ở góc trái forum

Code
- Chèn code này vào cuối overall_footer

Code:


<script type="text/javascript" src="http://mudim.googlecode.com/files/mudim-0.8-r142.js"></script>

- Chèn code này vào Css
Code:

#mudimPanel{-moz-box-shadow:5px 5px 5px 
#000;-moz-opacity:.9;-moz-transition:all 2s ease;-webkit-box-shadow:5px 
5px 5px #000;-webkit-transition:all 2s ease;background:#FFF 
url(http://i25.servimg.com/u/f25/15/55/28/69/go1010.jpg) no-repeat right
 center!important;bottom:9px!important;box-shadow:5px 5px 5px 
#000;filter:alpha(opacity=90);font-size:9px!important;font-weight:700;height:47px!important;left:-333px!important;opacity:.9;padding:4px
 26px 4px 4px 
!important;vertical-align:middle;width:330px!important}#mudimPanel:hover{-moz-opacity:1;-moz-tr

Nguồn Sưu tập trên các Forum

Read More