HTML - CSS -Blog Vệ Tinh

Home Posts filed under HTML - CSS

Hiển thị các bài đăng có nhãn HTML - CSS. Hiển thị tất cả bài đăng

Thứ Tư, 16 tháng 3, 2016

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger

TrungHi 01:00 Comment

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger

Bước 1: Đăng nhập vào Dashboard Blogger
Bước 2: Chọn Bố Cục» Thêm Tiện Ích » HTML rồi tống đoạn code này vào:

<style>
#progress {
position: fixed;
z-index: 2147483647;
top: 0;
left: -6px;
width: 1%;
height: 2px;
background: #0088CC;
-moz-border-radius: 1px;
-webkit-border-radius: 1px;
border-radius: 1px;
-moz-transition: width 500ms ease-out,opacity 400ms linear;
-ms-transition: width 500ms ease-out,opacity 400ms linear;
-o-transition: width 500ms ease-out,opacity 400ms linear;
-webkit-transition: width 500ms ease-out,opacity 400ms linear;
transition: width 500ms ease-out,opacity 400ms linear;
}
#progress dd, #progress dt {
position: absolute;
top: 0;
height: 2px;
-moz-box-shadow: #0088CC 1px 0 6px 1px;
-ms-box-shadow: #0088CC 1px 0 6px 1px;
-webkit-box-shadow: #0088CC 1px 0 6px 1px;
box-shadow: #0088CC 1px 0 6px 1px;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
#progress dt {
opacity: .6;
width: 180px;
right: -80px;
clip: rect(-6px,90px,14px,-6px);
}
#progress dd {
opacity: .6;
width: 20px;
right: 0;
clip: rect(-6px,22px,14px,10px);
}
</style>
<script>
jQuery(document).ready(function() {
jQuery("body").append(jQuery("<div><dt/><dd/></div>").attr("id", "progress"));
jQuery("#progress").width(100+ "%");
jQuery("#progress").width("101%").delay(800).fadeOut(400, function() {
jQuery(this).remove();
});
});
</script>

Xong rồi, bạn thử ra ngoài và click vào một link xem hiệu ứng này có hoạt động không!. Nhớ like nhé

Thứ Sáu, 5 tháng 2, 2016

Code HTML HTML - CSS html javascript

Code Trang trí Tết cho blog/website

TrungHi 02:31 Comment

Code trang trí blog cực đẹp cho ngày tết - Trang trí website đẹp đón năm mới. StarTuan Blog xin chia sẻ với các bạn bộ source code trang trí blog/ website cực đẹp cho ngày tết thêm lung linh rực rở.

Chỉ với vài bước đơn giản website bạn sẽ tràn ngập không khí tết với hoa mai, hoa đào và pháo. Cùng với hiệu ứng rê chuột vào sẽ phát ra những tiếng ding doong thật dễ thương. Nào, giờ ta hãy cùng trang trí cho blog thật đẹp để chào đón năm mới - xuân Bính Thân 2016 nhé! Code Trang Trí Blog Cực Đẹp Cho Ngày Tết | Trang Trí Website
Đầu tiên đăng nhập vào blogger -> vào mẫu -> vào chỉnh sửa HTML
Khi đã vào chỉnh sửa HTML, các bạn nhấn Ctrl + F và gõ vào </head>. Sau đó, copy đoạn code bên dưới dán vào phía trên thẻ </head>

<link rel="stylesheet" type="text/css" href='https://googledrive.com/host/0B4dR4T8FGwMjRzU0cFVXWlRCblk'/>

<script src='https://googledrive.com/host/0B_OR7rYz7CITdzdkMG1KQ0lPdXc' type='text/javascript'/>

<script src='https://googledrive.com/host/0B_OR7rYz7CITdUJwYlpRNFl3ODA' type='text/javascript'/>

<script src='https://googledrive.com/host/0B_OR7rYz7CITdllab1Bjb01hSUE' type='text/javascript'/>

Sau khi thêm đoạn code trên rồi thì chúng ta cần thêm 1 đoạn HTML nữa để hiển thị hiệu ứng ra ngoài blog/website. Bạn copy đoạn code bên dưới và dán vào vị trí cần hiển thị sao cho hài hòa với blog của bạn. Ví dụ Star Tuan Blog hiển thị ngay phía trên banner thì đặt code ngay dưới thẻ <body>.


<!--- Event TET -->

<div class='b-page_newyear'>

<div class='b-page__content'>

<i class='b-head-decor'>

<i class='b-head-decor__inner b-head-decor__inner_n1'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n2'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n3'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n4'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n5'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n6'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

<i class='b-head-decor__inner b-head-decor__inner_n7'><div class='b-ball b-ball_n1 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n2 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n3 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n4 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n5 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n6 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n7 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n8 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_n9 b-ball_bounce'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i1'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i2'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i3'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i4'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i5'><div class='b-ball__right'/><div class='b-ball__i'/></div><div class='b-ball b-ball_i6'><div class='b-ball__right'/><div class='b-ball__i'/></div></i>

</i>

</div>

</div>

<!--- #Event TET -->

Vậy là xong, giờ bạn hãy tận hưởng thành quả mà mình đã thực hiên nào. Star Tuan Blog chúc các bạn có một mùa xuân thật vui vẻ và hạnh phúc nhé!

Thứ Hai, 21 tháng 12, 2015

Code HTML Facebook HTML - CSS html javascript Thủ thuật Thủ thuật Blogger Thủ Thuật Facebook Widget

Code Tạo hộp chatbox hỗ trợ online cho fanpage facebook

TrungHi 00:31 Comment

Demo :

http://ngoctuan-star.blogspot.com/

Code Tạo hộp chatbox hỗ trợ online cho fanpage facebook

<script language='javascript'>
    var f_chat_vs = "Version 2.1";
    var f_chat_domain =  "http:\/\/startuan.blogspot.com";    
    var f_chat_name = "Hỗ trợ trực tuyến";
    var f_chat_star_1 = "Chào bạn!";
    var f_chat_star_2 = "Bạn cần hỗ trợ gì ?";
    var f_chat_star_3 = "<a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a>";
    var f_chat_star_4 = "Chú ý: Bạn phải đăng nhập <a href='http://facebook.com/' rel='nofollow' target='_blank'>Facebook</a> mới có thể trò chuyện.";
    var f_chat_fanpage = "admin.startuan"; /* Đây là địa chỉ Fanpage*/
    var f_chat_background_title = "#1092da"; /* Lấy mã màu tại đây http://megapixelated.com/tags/ref_colorpicker.asp */
    var f_chat_color_title = "#fff";
    var f_chat_cr_vs = 21; /* Version ID */
    var f_chat_vitri_manhinh = "right:10px;"; /* Right: 10px; hoặc left: 10px; hoặc căn giữa left:45% */    
</script>
<!-- $Chat Javascript (không được xóa) -->
<script src='https://googledrive.com/host/0B-rxJklh-V2fN2ZHc3psNVRkV0E'/>
<!-- $Chat HTML (không được xóa) -->
<div id='fb-root'></div>
<a class='chat_f_vt' id='chat_f_b_smal' onclick='chat_f_show()' title='Mở hộp Chat'><i class='fa fa-comments title-f-chat-icon'></i> Chat</a><div class='chat_f_vt' id='b-c-facebook'><div class='chat-f-b' id='chat-f-b' onclick='b_f_chat()'><i class='fa fa-comments title-f-chat-icon'></i><label id='f_chat_name'></label><span id='fb_alert_num'>1</span><div id='t_f_chat'><a class='chat-left-5' href='javascript:;' id='chat_f_close' onclick='chat_f_close()'>x</a></div></div><div class='f-chat-conent' id='f-chat-conent'><script>document.write("<div class='fb-page' data-adapt-container-width='true' data-height='310' data-hide-cover='true' data-href='https://www.facebook.com/"+f_chat_fanpage+"' data-show-facepile='false' data-show-posts='true' data-small-header='true' data-tabs='messages' data-width='250'></div>");</script><div id='fb_chat_start'><div class='msg_b fb_hide' id='f_enter_1'></div><div class='msg_b fb_hide' id='f_enter_2'></div><br/><p align='center' class='fb_hide' id='f_enter_3'><a href='javascript:;' id='f_bt_start_chat' onclick='f_bt_start_chat()'>Bắt đầu Chat</a></p><br/><p align='center' class='fb_hide' id='f_enter_4'></p></div><div class='chat-single' id='f_chat_source'></div></div></div>
<!-- #CHAT -->

Hướng dẫn thêm vào blog

Copy toàn bộ code trên
Vào chỉnh sửa mẫu chèn toàn bộ code trên thẻ </body>
Thay admin.startuan thành địa chỉ fanpage của bạn
Bạn có thể thay các dòng bôi màu xanh trên theo nội dung bạn muốn
Lưu mẫu và xem kết quả

Nếu Các Icon Không hiện thì các bạn thêm font awesome vào blog bạn nhé
Đặt đoạn code này dưới thẻ </head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>

Thứ Bảy, 5 tháng 12, 2015

Code HTML HTML - CSS html javascript

Share Code Web Về Noel Tặng Gấu Trong Dịp Noel 2015 Này

TrungHi 19:47 Comment

Bản 1 : Website giáng sinh tặng gấu - style cực dễ thương

Share Code Web Về Noel Tặng Gấu Trong Dịp Noel 2015 Này

Demo Download

Bản 2 : Website giáng sinh tặng gấu

Demo Download

Bản 3 : các bạn có thể chỉnh sửa thành 2015 nhé

Download

Bản 4

Download

Bản 5 các bạn có thể chỉnh sửa thành 2015 tùy ý nhé

Download

Bản 6 :

Download

Bản7

Download

Bản 8

Download

[Quốc Hiếu]

Thứ Sáu, 4 tháng 12, 2015

Code HTML HTML - CSS html javascript Thủ thuật Tutorials

Share Code Flash noel , trang chủ giáng sinh

TrungHi 14:39 Comment

Chia sẽ một số mẫu flash nguồn mở giúp các bạn làm trang intro noel rất đẹp. Các bạn download về muốn sửa text thì mở file .XML sửa nhé.

Demo Download

Thứ Hai, 16 tháng 11, 2015

Code HTML HTML - CSS Thủ thuật Thủ thuật Blogger Tutorials

Hiện nội dung được ẩn khi like mạng xã hội cho blogspot

TrungHi 00:58 Comment

Đại đa số blogger đưa blog/website của họ tăng lượng độc giả truy cập lên là nhờ các mạng xã hội hiện nay. Và trước kia mình đã từng giới thiệu nhiều cách khác nhau để liên kết với các trang mạng xã hội này, tuy nhiên điều này không mang tính chất "ép buộc" lắm thì phải, vì vậy số lượng like hay +1 cũng không như mong muốn lắm. Vì thế hôm nay mình sẽ giới thiệu đến độc giả của StarTuan Blog một cách khác đó là chỉ hiện nội dung ta muốn ẩn khi độc giả click một trong số các nút Like, +1 của 3 nhà mạng xã hội lớn.

Tất nhiên ta chỉ nên ẩn những nội dung "cần ẩn" ví dụ như "Hãy like nếu bạn đủ 18 tuổi để xem nội dung này" hay "Like để download" chẳng hạn. Đừng nên lạm dụng chức năng này quá sẽ gây phiền hà cho độc giả của mình để rồi chịu hậu quả ngược lại Và để xem nội dung của bài viết bạn hãy click một trong số các button bên dưới nhé =))

Demo

Hiện nội dung ẩn khi Like +1 và Tweet cho Blogger

Đầu tiên thì hãy chèn đoạn code sau lên trên thẻ </head>

<link href='https://googledrive.com/host/0B_vY34xc0VjNLW9FaFpNM1NjLTg' rel='stylesheet'/>

<script src='https://googledrive.com/host/0B_vY34xc0VjNaS1sRURYR1AyRjA' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function ($) {
$('#default-usage .to-lock').sociallocker({

buttons: {order:["facebook-like","twitter-tweet","google-plus"]},

twitter: {url:"http://twitter.com/tntuan2308"},
facebook: {url:"https://www.facebook.com/admin.startuan"},
google: {url:"http://startuan.blogspot.com"},

text: {
header: "Nội Dung Đã Được Khóa",
message: "Hãy like - theo dõi - +1 để xem nội dung khóa."
},

locker: {close: false, timer: 0,},

theme: "dandyish"

});
});
//]]>
</script>

Cách Thêm Social Content Locker vào bài viết Blog Post

Bây giờ sau khi chèn xong thì khi đăng bài viết mới, hãy chuyển sang soạn thảo bằng HTML và đặt đoạn mã sau vào vị trí của nội dung bạn muốn ẩn để bắt người dùng Like, +1, Tweet.

<article id="default-usage">
<div class="to-lock" style="display:none;">
- NỘI DUNG CẦN ẨN -
</div>
</article>

Để thay đổi thứ tự các nút đơn giản các giá trị Với mỗi khác.

" facebook-like "
" facebook-share "
" google-plus " 
" google-share " 
" twitter-tweet "
" twitter-follow " 
" linkedin-share "

Bây giờ Thay thế Các URL Thành URL của riêng bạn

http://twitter.com/tntuan2308
https://www.facebook.com/admin.startuan
http://startuan.blogspot.com

Bước tiếp theo là để thay đổi các theme của Content Social Locker.

theme: "dandyish"

Các bạn có thể thay dandyish thành các theme sau :

"flat" 
"glass"
"starter"
"secrets"
"dandyish"

Thứ Bảy, 7 tháng 11, 2015

Code HTML CSS3 HTML - CSS

Tạo nút download động bằng CSS3 Animated

TrungHi 18:26 Comment

Tiếp tục mang đến cho các bạn một kiểu button động được làm từ CSS3, hôm nay mình sẽ chia sẻ cho các bạn thêm một nút bấm cho phép người dùng tải file trên trang web của bạn với hiệu ứng không hề thua kém với bài viết Animated Download Button Với CSS3 mà mình đã giới thiệu cho các bạn.

Demo Download

CSS

Sau đó các bạn định dạng 2 button này với đoạn css sau :

/** download button effect **/
a.dlbtn{display:inline-block;position:relative;height:45px;line-height:40px;overflow:hidden;padding:0 30px;font-size:12px;font-weight:bold;color:#c0c0c0;background-color:#fff;text-decoration:none;cursor:pointer;border:3px solid #ddd;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 0.4s;-moz-transition:all 0.4s;transition:all 0.4s}
a.dlbtn:hover,a.dlbtn:focus{color:#fff;padding-right:90px;background-color:#5381bf;border-color:#5381bf}
a.dlbtn .details{position:absolute;line-height:11px;top:4px;right:-15px;opacity:0;background:#49668c;color:#fff;text-align:center;padding:3px 4px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-transition:right 0.4s linear,opacity 0.25s;-moz-transition:right 0.4s linear,opacity 0.25s;transition:right 0.4s linear,opacity 0.25s}
a.dlbtn .details .size{display:block;padding-top:3px}
a.dlbtn:hover .details,a.dlbtn:focus .details{right:8px;opacity:1}
/** large download button **/
a.dlbtn.big{height:115px;line-height:115px;padding:0 80px;font-size:26px;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px}
a.dlbtn.big:hover,a.dlbtn.big:focus{padding-right:160px}
a.dlbtn.big .details{top:10px;font-size:18px;line-height:20px;padding:6px 15px}
a.dlbtn.big:hover .details,a.dlbtn.big:focus .details{right:15px}
a.dlbtn .dlicon{display:block;font-size:55px;line-height:30px}
/** responsive styles **/
@media screen and (max-width:620px){h1{font-size:2.7em}.center{width:30%}.centerbig{width:70%}}
@media screen and (max-width:480px){h1{font-size:2.2em}
.center{margin-left:0}
.centerbig{margin-left:-20px}
a.dlbtn.big{padding:0 70px}
a.dlbtn.big:hover,a.dlbtn.big:focus{padding-right:150px}

HTML

Sau đây là 2 khung chuẩn html cho 2 mẫu button.

<div class="center">
<a href="javascript:void(0)" class="dlbtn">Download<span class="details">.zip<span class="size">11.5 MB</span></span></a></div>
<br><br>
 
<div class="centerbig">
<a href="javascript:void(0)" class="dlbtn big">Download<span class="details"><span class="dlicon"><i class="entypo"></i></span>.zip<span class="size">11.5 MB</span></span></a></div>
</div>

Blog Đồng Nai Vệ Tinh

Thứ Tư, 16 tháng 3, 2016

Hướng dẫn Tạo Loading Bar giống Youtube cho Blogger

Thứ Sáu, 5 tháng 2, 2016

Code Trang trí Tết cho blog/website

Thứ Hai, 21 tháng 12, 2015

Code Tạo hộp chatbox hỗ trợ online cho fanpage facebook

Demo :

Hướng dẫn thêm vào blog

Thứ Bảy, 5 tháng 12, 2015

Share Code Web Về Noel Tặng Gấu Trong Dịp Noel 2015 Này

Bản 1 : Website giáng sinh tặng gấu - style cực dễ thương

Bản 2 : Website giáng sinh tặng gấu

Bản 3 : các bạn có thể chỉnh sửa thành 2015 nhé

Bản 4

Thứ Sáu, 4 tháng 12, 2015

Share Code Flash noel , trang chủ giáng sinh

Thứ Hai, 16 tháng 11, 2015

Hiện nội dung được ẩn khi like mạng xã hội cho blogspot

Hiện nội dung ẩn khi Like +1 và Tweet cho Blogger

Cách Thêm Social Content Locker vào bài viết Blog Post

Để thay đổi thứ tự các nút đơn giản các giá trị Với mỗi khác.

Bây giờ Thay thế Các URL Thành URL của riêng bạn

Bước tiếp theo là để thay đổi các theme của Content Social Locker.

Thứ Bảy, 7 tháng 11, 2015

Tạo nút download động bằng CSS3 Animated

Thông Báo

Lưu trữ Blog

Phổ Biến

Label

Thứ Tư, 16 tháng 3, 2016

Thứ Sáu, 5 tháng 2, 2016

Thứ Hai, 21 tháng 12, 2015

Demo :

Hướng dẫn thêm vào blog

Thứ Bảy, 5 tháng 12, 2015

Bản 1 : Website giáng sinh tặng gấu - style cực dễ thương

Bản 2 : Website giáng sinh tặng gấu

Bản 3 : các bạn có thể chỉnh sửa thành 2015 nhé

Bản 4

Thứ Sáu, 4 tháng 12, 2015

Thứ Hai, 16 tháng 11, 2015

Hiện nội dung ẩn khi Like +1 và Tweet cho Blogger

Cách Thêm Social Content Locker vào bài viết Blog Post

Để thay đổi thứ tự các nút đơn giản các giá trị ​​Với mỗi khác.

Bây giờ Thay thế Các URL Thành URL của riêng bạn

Bước tiếp theo là để thay đổi các theme của Content Social Locker.

Thứ Bảy, 7 tháng 11, 2015

Thông Báo

Lưu trữ Blog

Phổ Biến

Label

Bạn đang cần tìm kiếm gì?

Theo dõi blog qua Email

Để thay đổi thứ tự các nút đơn giản các giá trị Với mỗi khác.