Thành công!
TRUCBLOG JOURNAL GÓC ĐỌC • GÓC VIẾT
Bài viết / Góc chia sẻ

Tạo Khung Liên Kết Blog (chạy dọc) ver.2

Đỗ Trực tháng 9 02, 2015 2 phút đọc 0 bình luận … Lượt xem
Lần trước mình đã hướng dẫn các bạn cách tạo khung liên kết Blog. Hôm nay tiếp tục với chủ đề đó mình chia sẻ các bạn thủ thuật nhỏ với một chút cải tiến . Các địa chỉ liên kết sẽ chạy dọc lên trên , khi đó các địa chỉ liên kết sẽ lần lượt xuất hiện ...  Nào cùng nhau thực hiện thôi.



► Cách thực hiện
  • Chọn Thêm Tiện ích => Chọn HTML/Javarscip và dán đoạn code bên dưới vào.
<style type="text/css">
#lien-ket-trucblog{margin:0; padding:5px 10px; height:260px; overflow: auto; font-size:16px}
ul.lien-ket li{display:inline-block; padding:8px 5px; border-bottom:dashed 1px #ccc; }
ul.lien-ket li a{font-size: 15px; font-family: Arial; color: #0087B2}
.favicon {width:16px; height:16px; margin-right:5px}
</style>
<div id="lien-ket-trucblog">
<center style="margin-bottom:25px">
<a href="http://chinhtrucblog.blogspot.com/2009/06/trao-oi-lien-ket-blog.html">LIÊN KẾT BLOGGER</a></center>
<marquee align='left' direction='up' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='4' height='200' width='100%'>
<ul class="lien-ket">
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 1 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 2</a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 3 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 4
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 5 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 6 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 7 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 8 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 9 </a></li>
<li> <img src="https://4.bp.blogspot.com/-DQzRDePBISc/V-Poocv4sfI/AAAAAAAADJI/8lBss5S62xsTxQaOsicqsO_4sVuqECrDQCLcB/s1600/trucfavicon.ico" class="favicon" /> <a href="http://diachiblog-1.blogspot.com/" target="_blank">Địa Chỉ Blog 10 </a></li>
</ul>
</marquee></div>
  • Bạn thay những nơi tô đậm thành địa chỉ blog của bạn.
  • Có thể tùy chỉnh css theo ý của bạn.
DEMO
Chúc bạn thành công .
Chia sẻ bài viết:
Ảnh đại diện tác giả

Đỗ Trực Tác giả / Admin

Chia sẻ kiến thức lập trình, phát triển web, công nghệ và các thủ thuật thực tế. Cảm ơn bạn đã ghé thăm Truc Blog.

Thảo Luận & Nhận Xét (0)