Blogger 小工具

使用 CSS 樣式碼，改變新舊留言的排列順序 

假如、你只純粹要讓最新留言浮在最上面，在範本內、或自已寫的 <style>... </style> CSS樣式表裡，加入以下這行 CSS 樣式碼 ，將留言區塊的 Display 屬性設為 flex，方向設為反轉。

#comments .comment-thread ol { display: flex; flex-direction: column-reverse; }

讓我們來為 Blogger 的回應留言，添加沒有的功能， 任意切換排列順序小工具，共有3種款式可選擇...

如果你希望有醬功能 ~ 廢話不多說，趕緊把這些小工具喬進 Blogger

首先、請先檢查你的範本或其他小工具裡，看看是否已有安裝過 jQuery 程式庫，因為這些工具會使用到，如果沒有安裝過請多加入以下，這行程式碼。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

進入 >> 後台管理 >> 版面配置 >> 新增一個「HTML/JavaScript」小工具

樣式 1 的程式碼 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script> <script language="JavaScript"> if(document.getElementById('comments')){ jQuery(function() { var cx=0; $('.comments-content').before($('#comm_order')); $('#comm_order').css('display','inline-block'); $("#comm_point").click(function(){ if(cx==0){ cx=1; $('#comm_order img').css('transform' , 'rotateX(180deg)'); $('#comments .comment-thread ol').css('flex-direction','column'); } else{cx=0; $('#comm_order img').css('transform' , 'rotateX(0deg)'); $('#comments .comment-thread ol').css('flex-direction','column-reverse'); } }); }); } </script> <style type="text/css"><!-- #comments .comment-thread ol { display: flex; flex-direction: column-reverse; } #comm_order {width: 92%; display:none; position: absolute;top: -15px;} #comm_order img { position: absolute; top: 0; left: 0; transition: 1.2s;} #comm_order img:first-child { z-index: 2; backface-visibility: hidden; } #comm_point{position: relative;width:100px;height:43px;display: inline-block; MARGIN-BOTTOM: -12PX;} --></style> <div id="comm_order"><span style="color: red; font-size: large; margin-left: calc(100% - 200px); "><b>留言排序 :</b> <div id="comm_point"> <img src="https://pic.pimg.tw/e717/1610886907-438630138-g.jpg" /> <img src="https://pic.pimg.tw/e717/1610886913-274274742-g.jpg" /></div></span> </div>

樣式 2 的程式碼   新 > 舊  新 < 舊 <script language="JavaScript"> if(document.getElementById('comments')){ jQuery(function() { var cx=0; $('.comments-content').before($('#comm_order')); $('#comm_order').css('display','inline-block'); $('#comments .comment-thread ol').css({'display':'flex','flex-direction':'column'}); $("#comment-title").click(function(){ if($('#comments .comment-thread ol').css('display')=="block"){$('#comments .comment-thread ol').css('display','flex')} }); }); } </script> <div id="comm_order" style="text-align: right; width: 95%; display: none; position: absolute; top: -10px;"> <span style="color: red; font-size: large;"><b>留言排序 :</b></span> <span style="border: 1px solid rgb(102, 102, 102); padding: 5px 20px;"><input name="male" onchange="$('#comments .comment-thread ol').css('flex-direction','column-reverse')" type="radio" value="reverse" />  <label>新 > 舊</label></span><span style="border: 1px solid rgb(102, 102, 102); padding: 5px 20px;"><input name="male" checked="TRUE" onchange="$('#comments .comment-thread ol').css('flex-direction','column')" type="radio" value="column" />  <label>新 < 舊</label></span></div>

樣式 3 的程式碼 新 舊 <script language="JavaScript"> if(document.getElementById('comments')){ jQuery(function() { var dx=0; $('.comments-content').before($('#comm_order')); $('#comm_order').css('display','inline-block'); $('#comments .comment-thread ol').css({'display':'flex','flex-direction':'column'}); $("#point_img").mouseover(function(){ if(dx==0){ dx=1; $(this).css('transform' , 'rotate(180deg)'); $('#comments .comment-thread ol').css('flex-direction','column-reverse'); } else{dx=0; $(this).css('transform' , 'rotate(0deg)'); $('#comments .comment-thread ol').css('flex-direction','column'); } }); }); } </script> <div id="comm_order" style="text-align: right; width: 95%; display: none; position: absolute; top: -10px;"> <span style="color: red; font-size: large;"><b>留言排序 :</b></span> <span style="border: 1px solid rgb(250, 120, 120); padding: 15px;"> 新 <img align="ABSMIDDLE" id="point_img" style=" transition: .6s;" src="https://pic.pimg.tw/e717/1565348033-1504366907.png" /> 舊 </span> </div>

填入程式碼：最後記得按儲存，醬就 OK 了!!

每個人的版型不一樣，若位子落在不是你要的地方，自己調整一下~