Mong ngày hội ngộ

Chiều ngả bóng màn đêm đang vẫy.

Nơi cuối trời chợt thấy xuyến xao.

Quê hương hai tiếng ngọt ngào.

Yêu thương tình nghĩa dạt dào trong tim.

Mẹ dõi mắt lặng im trước ngõ.

Đứa con xa thẳm đó chưa về.

Giọt sầu thấm đẫm cơn mê.

Bao giờ hội ngộ miền quê thanh bình.

Nơi xứ lạ bình minh không nắng.

Giữa biển người nhưng vắng Mẹ yêu.

Xa hoa cám dỗ thật nhiều.

Con luôn ghi nhớ những điều Mẹ khuyên.

Mong Mẹ mãi bình yên sớm tối.

Đợi con về thỏa nỗi nhớ mong.

Nhà ta nắng tỏa màu hồng.

Gia đình sum họp ấm nồng yêu thương.

JANA


Bạn có thể tham khảo các bài thơ trong Bầu rượu túi thơ do  Khanhnguyen' s blog sưu tập từ trên các diễn đàn mạng xã hội

Read More

Trình diễn ảnh chuyên nghiệp với prettyPhoto

Trong quá trình tìm hiểu các theme Wordpress mới thì mình có để ý là các designer thường sử dụng một plugin của jQuery là prettyPhoto cho các theme của họ để trình diễn ảnh.

Đây là một dạng lightbox nhưng có nhiều chức năng hơn như hiển thị cả video và flash. Trang web của bạn sẽ trở nên chuyên nghiệp hơn nếu sử dụng plugin này. Muốn biết nó như thế nào thì bạn click vào hình ở dưới:

Kiểu default

Hiển thị dạng gallery:

Trình diễn Video:

Để sử dụng được plugin này trên blogspot thì trước tiên bạn phải tắt hiệu ứng ảnh mặc định của Blogger, vào phần Cài đặt -> Định dạng rồi tìm và chọn như sau:

Save lại, tiếp tục vào phần chỉnh sửa HTML rồi chèn đoạn code sau phía trên thẻ </body><link href='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery("a[rel^='prettyPhoto']").prettyPhoto();
</script>
Sau đó, trong khi đăng ảnh trong bài thì bạn thêm dòng rel="prettyphoto" như thế này:
<a href="image.jpg" rel="prettyphoto"><img src="..."/></a>

Để hiển thị kiểu gallery thì sửa thành rel="prettyPhoto[pp_gal]" , còn muốn xem video thì thay link ảnh image1 thành link dẫn tới video đó, ví dụ như :http://www.youtube.com/watch?v=_EC2tmFVNNE- Bạn có thể truy cập trang chủ của plugin để xem hướng dẫn sử dụng đầy đủ.
- Nên upload các file css và js lên host riêng.

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

Nguồn : noct-land.blogspot.com

Copy : Hoithanhcaygiang.vn

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

Read More

Cuộn Góc Peel Với Hiệu Ứng Flash Cho Blogspot

™» CGC Blog «™ Bài viết trước mình đã có giới thiệu bạn cách thực hiện thủ thuật Cuộn góc Peel cho blog với css và JQuery. Hôm nay cũng cách cuộn góc cho trang như vậy nhưng chúng ta sẽ ứng dụng flash cho hiệu úng này. Với hiệu ứng flash này có về blog bạn sẽ trông đẹp hơn, cuộn góc trông mượt hơn. Bạn có thể xem hình ảnh bên dưới hoặc click demo để thấy rỏ hơn.

Hình ảnh minh họa :

Khi chưa rê chuột vào :

Khi rê chuột vào :

☼ Thực hiện thủ thuật

1. Đăng nhập vào tài khoản BLogger
2. Vào phần thiết kế (Design)
3. Chọn thêm tiện ích (Add gadget)
4. Thêm 1 phần tử HTMl/Javascript và thêm vào nó code bên dưới

<script type="text/javascript">
var ppimg = new Image();
ppimg.src = '';

var ppo = new Object();
ppo.ad_url = escape("http://www.traidatmui.com/");
ppo.small_path = "http://www.swfcabin.com/swf-files/1292894738.swf";
ppo.small_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcWjRHHLIFXLSjl7Abv9Zk58b0CggHBWm94vE8dWmFQSmfWy9j5it9yNWDOS78b1SIhDZjnzK0-f1sbavDbRhbGqYn_ZYRWBTiZyKFAuaGfDbYtC5zrEGwveWKyljJzAD2_fBur7A84XD8/");
ppo.big_path = 'http://www.swfcabin.com/swf-files/1292894665.swf';
ppo.big_image = escape("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOpDB3mjOiglTV2lVX69qeuIZZgSai90TPkhdfzwQ-zbi9oxzqkQf2yj8_WEspihLXey075UGLpR0Pjc8Mi2im4Pm0Agw5ODtqemOBfPsnfJTlv7d7Ocskh1LMJMAZmkWD1qYJDp3oNygz/s576/peel.png");

ppo.small_width = '100'; //độ rộng phần cuộn khi chưa rê chuột
ppo.small_height = '100'; //độ cao phần cuộn khi chưa rê chuột
ppo.small_params = 'ico=' + ppo.small_image;
ppo.big_width = "450"; //độ rộng phần cuộn khi rê chuột
ppo.big_height = "450"; //độ cao phần cuộn khi rê chuột
ppo.big_params = 'big=' + ppo.big_image + '&ad_url=' + ppo.ad_url;
</script>

<script src="http://traidatmui-tips.googlecode.com/files/flash_peel.js" type="text/javascript"></script>

☼ Chỉnh code:
- Link màu xanh là phần bạn nhìn thấy ban đầu, khi chưa rê chuột vào phần cuộn góc.
- Link màu tím than là phần ảnh bạn nhìn thấy khi phần ẩn bạn rê chuột vào phần cuộn đó, nói cách khác đây là phần nằm bên dưới phần cuộn góc.
- Link màu đỏ đậm là link cho phần cuộn góc, khi người dùng click vào đây nó sẽ dẫn đến địa chỉ được thiết lập trong phần này. Bạn thay thành link mà bạn muốn.

5. Sau khi chỉnh sửa xong, bạn save tiện ích lại.

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

Nguồn : traidatmui.com

Copy : Hội Thánh Cây Giang

http://hoithanhcaygiang.blogspot.com/

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

Read More

Code tạo hiệu ứng Peel đẹp mắt cho hình ảnh

Xin cáo lỗi cùng các bạn, Admin đang trong quá trình tu chỉnh bài viết

Sorry,You are trying to reach an invalid page...!

Click here to go to Homepage 

Have a nice Day...

Read More

Biểu tượng loading cho Blogspot

Bạn lướt web thỉnh thoảng bạn sẽ thấy ở một số website khi các nội dung trên trang đó chưa được tải hết thì sẽ có một thông báo như: Loading, đang tải dữ liệu... Đó là để cho biết trạng thái của trang khi người dùng trình duyệt vào website đó. Hôm nay mình xin chia sẽ cách để ứng dụng công cụ load trang như mô tả ở trên cho blogspot. Công cụ này cũng khá tiện ích, khi trang của bạn đã load xong thì trạng thái này sẽ tự động mất đi, điều này nó sẽ không ảnh hưởng đến blog của bạn.

1. Đăng nhập Blogger

2. Vào phần thiết kế (hay bố cục)

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

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

.loading {

position:absolute;
text-align: center;
color:#fff; /*màu text load*/
top:10px;
left: 10px;
}

5. Tiếp theo bạn tìm và thay thế thẻ <body> như bên dưới

<body onLoad='init()'>
<div class='loading' id='loading'>Đang tải dữ liệu...<br/><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqi6IVlxJwqDZ24ollORmlZmYONAD9fala0XQEY70yJbDXtwD4KgUn0XQwU3w0TZZ7umK7ZRVxgP7pUqGg-1KJ1pcG0LSWexfotzqTWSlwCgojl_kJNcHQcurr1qnGbS8YGUmng5m9J2tA/'/></div>
<script>
var ld=(document.all);
var ns4=document.layers;
var ns6=document.getElementById&amp;&amp;!document.all;
var ie4=document.all;
if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById(&quot;loading&quot;).style;
else if (ie4)
ld=document.all.loading.style;
function init() {
if(ns4){ld.visibility=&quot;hidden&quot;;}
else if (ns6||ie4) ld.display=&quot;none&quot;;
}
</script>

Bạn có thể thay thế ảnh loading (link màu tím than) trong code và dòng text (Đang tải dữ liệu...) hoặc có thể giữ nguyên tùy ý, tuy nhiên bạn nên save ảnh load về và upload lên trang host riêng để tránh tình trạng link bị die.

6. Cuối cùng save lại

Nguồn CGC Forum

Read More

Một số mã màu cơ bản trong thiết kế Web dành cho WebDesigner

Trong cấu trúc của CSS trên Blogger thì mã màu CMYK được sử dụng rất phổ biến do tính chất đa dạng trong phối màu cũng như khả năng dễ nhận biết của bảng mã này. Tuy nhiên, bạn vẫn có thể dùng thay thế giữa bảng mã HEX với bảng mã CMYK.

Dưới đây là một số bảng mã màu thông dụng:

Nguồn ITVIET24H

Read More

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