Thanh menu ngang với hiệu ứng bắt mắt bằng CSS3 cho Blogspot

Bài viết hôm nay mình chia sẻ cùng các bạn một menu với hiệu ứng cũng khá đẹp mắt dành cho blogspot, đặc biệt menu này chỉ dùng CSS3 và HTMl đơn giản nên không làm ảnh hưởng đến tốc độ của blog bạn nhiều. Với menu này bạn có thể tự mình phối màu lại để có 1 menu ưng ý cho blog của mình và cách thực hiện cũng đơn giản bạn theo dõi các bước bên dưới.

                     Demo

hình ảnh minh họa

» Bắt đầu thủ thuật

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>

.ribbon span{font-weight:bold;background:#A81B6A;display:inline-block;line-height:3em;padding:0 1em;margin-top:0.5em;position:relative;-webkit-transition:background-color 0.2s,margin-top 0.2s; -moz-transition:background-color 0.2s,margin-top 0.2s; -ms-transition:background-color 0.2s,margin-top 0.2s; -o-transition:background-color 0.2s,margin-top 0.2s; transition:background-color 0.2s,margin-top 0.2s} .ribbon a:hover span{background:#FFD204;color:#000;margin-top:0} .ribbon span:before{content:"";position:absolute;top:3em;left:0;border-right:0.5em solid #9B8651;border-bottom:0.5em solid #fff} .ribbon span:after{content:"";position:absolute;top:3em;right:0;border-left:0.5em solid #9B8651;border-bottom:0.5em solid #fff} .ribbon a:link,.ribbon a:visited{color:#fff;text-decoration:none;float:left;height:3.5em;overflow:hidden} .ribbon:after,.ribbon:before{margin-top:0.5em;content:"";float:left;border:1.5em solid #A81B6A} .ribbon:after{border-right-color:transparent} .ribbon:before{border-left-color:transparent}

5. Save template lại và trở về bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới Địa chỉ bài viết:

<div class="ribbon"> <a href='#'><span>Trang chủ</span></a> <a href='#'><span>Tên menu 1</span></a> <a href='#'><span>Tên menu 2</span></a> <a href='#'><span>Tên menu 3</span></a> <a href='#'><span>Tên menu 4</span></a> <a href='#'><span>Tên menu 5</span></a> <a href='#'><span>Tên menu 6</span></a> </div>

Bạn thay đổi Tên menu lại thành tên thư mục bạn muốn cho lên thanh menu này (màu xanh lá) và thay dấu # thành link dẫn tương ứng với từng tên menu bạn đặt.

7. Cuối cùng save tiện ích lại

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



                                                                                                                                                                            Sưu tầm internet                

Read More →

Tạo hiệu ứng trượt cho hình ảnh với css

Với bài viết hôm nay mình chia sẻ cùng các bạn đoạn code có thể giúp các bạn tạo hiệu ứng trượt cho hình ảnh của bạn. Với đoạn code này thì khi bạn rê chuột vào hình ảnh thì hình ảnh sẻ được trượt lên phía trên và hiển thị phần mô tả cho hình ảnh đó. Code này chỉ sử dụng CSS và HTML nên sẽ không ảnh hưởng nhiều đến tốc độ blog của bạn

Hình Ảnh Minh Họa

                          Demo

Bắt đầu thủ thuật

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>

.image-box { width:320px;height:320px;overflow:hidden;background-color:white; border:1px solid #ccc;float:left;margin:1px 1px; font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif; color:#333; } .image-container, .image-details {height:310px;border:5px solid white;background-color:#eee; transition:margin-top .4s ease-out .4s; } .image-container img { width:310px;height:310px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none; max-height:none; background-color:black; } .image-details h4, .image-details p { margin:0 0 .2em;padding:0 0;height:70px; } .image-details h4 { font-size:120%;height:auto; } .image-details .details { padding:10px 12px;overflow:hidden; } .image-details .more { color:white;text-decoration:none;display:block; text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0; } .image-box:hover {border-color:#bbb; width:320px; height:320px;} .image-box:hover .image-container {margin-top:-160px} .image-details .more:hover {background-color:black}

5. Save template lại và trở về phần bố cục (Layout)
6. Thêm 1 HTML/Javascript và thêm vào code bên dưới

<div class="image-box-wrapper" id="image-box-wrapper"> <div class="image-box"> <div class="image-container"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__NX3btwE2cd6h9kga05n96crx4RflAxJD-70X2XAvq3h2nkJtOKBZDtq3jzTh_gHTiPKUV3HVPV0orTg_Rp1-kspskXJcILhE6503BKOFSUYXHs3xR4XvJ9tSG8FFQMPvNA4P3osQ4s/s320/anh-demo-1.jpg" alt="Food"> </div> <div class="image-details"> <div class="details"> <h4> Tiêu đề</h4> <p> Ở đây sẽ là nội dung mô tả cho hình ảnh của bạn</p> <p> <a class="more" href="# ">Đọc tiếp...</a></p> </div> </div> </div> <div style="clear:both;"> </div> </div>

Bạn thay link https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg__NX3btwE2cd6h9kga05n96crx4RflAxJD-70X2XAvq3h2nkJtOKBZDtq3jzTh_gHTiPKUV3HVPV0orTg_Rp1-kspskXJcILhE6503BKOFSUYXHs3xR4XvJ9tSG8FFQMPvNA4P3osQ4s/s320/anh-demo-1.jpg thành link ảnh của bạn và tiêu đề nội dung của bạn.

 7. Cuối cùng là save tiện ích lại. Chúc bạn thành công!

                                                                                                                           st internet

Read More →