HomeTạo khung ghi chú đẹp cho Blogspot
Thứ Năm, 19 tháng 6, 2014
Khi muốn thông báo về một sự kiện nào đó cho blog của mình bạn sẽ cần có một khung ghi chú đẹp để thu hút sự chú ý của mọi người và nhấn mạnh nội dung của phần ghi chú đó.
Đây là một thủ thuật tạo khung ghi chú đơn giản, nó cũng tương tự như khung thông báo. Chỉ với một đoạn code CSS và XMl đơn giản bên dưới bạn sẽ tạo dduwwocj một khung thông báo đẹp. Ưu điểm của thủ thuật này là không ảnh hưởng nhiều tới tốc độ load do không sử dụng mã javarscip mà chỉ là mã CSS và XMl đơn thuần.
Các bạn hãy xem Demo để thấy rõ hơnKhung ghi chú cho Blogspot.
Cách sử dụng tiện ích này.
Trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi dán đoạn sau vào phần html đó:
Theo namkna.blogspot.com
Đây là một thủ thuật tạo khung ghi chú đơn giản, nó cũng tương tự như khung thông báo. Chỉ với một đoạn code CSS và XMl đơn giản bên dưới bạn sẽ tạo dduwwocj một khung thông báo đẹp. Ưu điểm của thủ thuật này là không ảnh hưởng nhiều tới tốc độ load do không sử dụng mã javarscip mà chỉ là mã CSS và XMl đơn thuần.
Các bạn hãy xem Demo để thấy rõ hơnKhung ghi chú cho Blogspot.
Ưu điểm!
Sau đây là một số ưu điểm của tiện ích này:- Không ảnh hưởng tới tốc độ load trang blog.
- Giao diện bắt mắt với: hiệu ứng bo góc và dổ bóng.
- Dễ tùy biến do chỉ fungf mã CSS dơn thuần.
- Hiển thị tốt trên các trình duyệt hiện nay như firefox, IE, Opera, Sarafi,...
Trong khi đăng bài bạn chuyển sang phần HTML của bài đăng rồi dán đoạn sau vào phần html đó:
<style type="text/css">
.note{background:#f0fdff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrtjM6xIVBg5Ak0h1remx-J4w429n57_eM5y-mX7-RX92NFSXnv3wpsPAdSTjUmUMq9pTCJwTL1a8vDDVyGAJ6weStMFOc53Q6TQ1Cqegl1ryr_ZpEjyeFmpcySG9CFmZetJBOmXTbTWc/s1600/notice-bg-namkna-blogspot-com.png) repeat-x 0
0;color:#796100;width:83%;font-weight:normal;padding:13px 15px
0;margin-bottom:2.5em;border:1px solid #306EFF;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;-moz-box-shadow:1px
1px 2px rgba(0,0,0,.4);-webkit-box-shadow:1px 1px 2px
rgba(0,0,0,.4);box-shadow:1px 1px 2px
rgba(0,0,0,.4);position:relative;left:34px}.note
p{margin-bottom:1.5em}.note p:last-child{margin-bottom:0}.note
ul{margin-left:8px;margin-bottom:1.5em}.note
ul:last-child{margin-bottom:0}.note
li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpVR0A5_2h2v8GQP4twNaZBc7xc0zKM0nyW_MWcfKzygOGgmrr_KE9ZahANinYGJbpMsuuSJjWqbG74c67Doo631GApP5irxEDBiOomVw_f6AgCZldehQF2Q___8Z4W4SAbzFo4FzJo6zD/s1600/notice-tabs-namkna-blogspot-002.png) no-repeat 0
-95px;list-style-type:none;padding-left:18px;margin-bottom:.75em}.note
h5{font-size:14px;font-weight:bold;margin:0 0 .65em}.note
span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpVR0A5_2h2v8GQP4twNaZBc7xc0zKM0nyW_MWcfKzygOGgmrr_KE9ZahANinYGJbpMsuuSJjWqbG74c67Doo631GApP5irxEDBiOomVw_f6AgCZldehQF2Q___8Z4W4SAbzFo4FzJo6zD/s1600/notice-tabs-namkna-blogspot-002.png) no-repeat 100%
0;width:33px;height:40px;position:absolute;left:-34px;top:9px}
</style>
<div class="note"><h5>Lưu ý!</h5>
<p>Chào mừng bạn đến với ...</p>
<ul>
<li>Vui lòng để lại một comment góp ý.</li>
<li>Bấm nút +1 nếu bạn thấy thích bài viết này.</li>
<li>Chúc thành công!.</li>
</ul><span></span></div>
|
Bài liên quan
Comments[ 0 ]
Đăng nhận xét