Tag Cloud đẹp mắt với TagCanvas - HTML5

TIEUTHUYET.TOP - Đọc truyện trên điện thoại

NoiDau.Net - Đọc Truyện Online

- Phòng Chat Thảo Luận WapMaster

Home › Mod Johncms › Share

Tìm kiếm

Tag Cloud đẹp mắt với TagCanvas - HTML5

Admin

27-03-2018

Mình hướng dẫn cho JohnCMS bạn xài mã nguồn khác cũng có thể tùy cơ ứng biến.
Yêu cầu có Mod tag bài viết
Và đây là Canvas HTML5 nên bạn cần
- Xem bạn đang dùng HTML phiên bản nào. Nếu <!DOCTYPE html> nằm trên tài liệu html của bạn thì bạn đang sử dụng HTML5
- Trình duyệt "cùi" không dùng được đâu à nghe.

Vào mainmenu.php hoặc ở đâu cũng được nơi bạn muốn hiện tag cloud

$tag_f = mysql_query("SELECT `tag` FROM `forum` WHERE `type` = 't' AND `close`!='1' ORDER BY RAND() DESC LIMIT 5");
$tags=array();
$i = 0;
while ($tag_g = mysql_fetch_assoc($tag_f)):
$tag[$i] = explode(', ', $tag_g[tag]);
$tags=array_merge($tags,$tag[$i]);
$i++;
endwhile;

Copy Code:

Bạn có thể chỉnh đoạn query trên cho phù hợp. Thường thì ORDER BY view và LIMIT cao cao tí để ra được nhiều từ khóa nổi bật.

Rồi hiện tag thôi nào

<section class="category hidden-xs hidden-sm">
 <h2 class="page-header text-center">Tags Cloud</h2>
   <div id="myCanvasContainer">
     <canvas width="300" height="300" id="tagCanvas">
       <p>Trình Duyệt Của bạn không hỗ trợ Canvas</p>
       <ul>
    <?php foreach ( $tags AS $tag ): ?>
       <li><a href="<?=$home?>/forum/search.php?search=<?=$tag?>"><?=$tag?></a></li>
    <?php endforeach; ?>
       </ul>
     </canvas>
   </div>
</section>
<script type="text/javascript">
  window.onload = function() {
   var tagcanvas_opt = {
  textColour: 'teal',
  animTiming: 'Linear',
  textHeight: 20,
  zoomMax: 1.0,
  zoomMin: 1.0,
  depth: 0.9
  };
    try {
      TagCanvas.Start('tagCanvas','',tagcanvas_opt);
      TagCanvas.SetSpeed('tagCanvas', [0.25, 0]);
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
</script>
<script src="http://www.goat1000.com/tagcanvas.min.js?2.8" type="text/javascript"></script>

Copy Code:

<section class="category hidden-xs hidden-sm">
 <h2 class="page-header text-center">Tags Cloud</h2>
   <div id="myCanvasContainer">
     <canvas width="300" height="300" id="tagCanvas">
       <p>Trình Duyệt Của bạn không hỗ trợ Canvas</p>
       <ul>
    <?php foreach ( $tags AS $tag ): ?>
       <li><a href="<?=$home?>/forum/search.php?search=<?=$tag?>"><?=$tag?></a></li>
    <?php endforeach; ?>
       </ul>
     </canvas>
   </div>
</section>
<script type="text/javascript">
  window.onload = function() {
   var tagcanvas_opt = {
  textColour: 'teal',
  animTiming: 'Linear',
  textHeight: 20,
  zoomMax: 1.0,
  zoomMin: 1.0,
  depth: 0.9
  };
    try {
      TagCanvas.Start('tagCanvas','',tagcanvas_opt);
      TagCanvas.SetSpeed('tagCanvas', [0.25, 0]);
    } catch(e) {
      // something went wrong, hide the canvas container
      document.getElementById('myCanvasContainer').style.display = 'none';
    }
  };
</script>
<script src="http://www.goat1000.com/tagcanvas.min.js?2.8" type="text/javascript"></script>

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

- Share:
BBCode:

Link:

Cùng chuyên mục

Mod online ảo cho johncms

Modules lượt xem chuẩn cho JohnCMS

Mod like để tải file đính kèm cho JohnCMS

bbcode like mới thấy nội dung cho jonhcms

Module No Avatar cho JohnCMS

Trang Chủ

BLOGCODE.HEXAT.COM