佳礼资讯网

 找回密码
 注册

ADVERTISEMENT

查看: 5262|回复: 0

【兽课堂】为你的 blogger 加入有缩图的“相关文章”功能

[复制链接]
发表于 31-5-2011 10:07 AM | 显示全部楼层 |阅读模式
本帖最后由 牛牛好累 于 31-5-2011 10:10 AM 编辑



常看别人的 blog 文,下面都会有一个图文并茂的相关文章连结,除了让部落格看起来内容更丰富外,还可以增加你的文章游览率,非常好用。以下要教的编码可以让 blogger 透过标籤、文章标题等相关资讯帮我们筛选跟目前网页相关的文章,并将网页中的任意图片用缩图展示出来,放在网页下方展示其他类似的文章让兽友点选。

我们还没开始动手之前,谨记先将模板备份起来!不然发生什么事后悔莫及啊啊啊~

1. 首先以自己的账号登入自己的 blogger。在“Dashboard”的“Design”里点击“Edit HTML”。进入后记得在“Expand Widget Templates”旁边的小格子打钩。

2. 使用 Ctrl+F 功能寻找:
  1. </head>
复制代码
然后用 copy 下面的代号取代 </head>:
  1. <!--Related Posts with thumbnails Scripts and Styles Start-->
  2. <!-- remove --><b:if cond='data:blog.pageType == "item"'>
  3. <style type="text/css">
  4. #related-posts {
  5. float:center;
  6. text-transform:none;
  7. height:100%;
  8. min-height:100%;
  9. padding-top:5px;
  10. padding-left:5px;
  11. }

  12. #related-posts h2{
  13. font-size: 1.6em;
  14. font-weight: bold;
  15. color: black;
  16. font-family: Georgia, “Times New Roman”, Times, serif;
  17. margin-bottom: 0.75em;
  18. margin-top: 0em;
  19. padding-top: 0em;
  20. }
  21. #related-posts a{
  22. color:black;
  23. }
  24. #related-posts a:hover{
  25. color:black;
  26. }

  27. #related-posts  a:hover {
  28. background-color:#d4eaf2;
  29. }
  30. </style>
  31. <script type='text/javascript'>
  32. var defaultnoimage="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";
  33. var maxresults=5;
  34. var splittercolor="#d4eaf2";
  35. var relatedpoststitle="Related Posts";
  36. </script>
  37. <script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
  38. <!-- remove --></b:if>
  39. <!--Related Posts with thumbnails Scripts and Styles End-->
  40. </head>
复制代码
3. 然后找这行:
  1. <div class='post-footer-line post-footer-line-1'>
复制代码
如果找不到,可以尝试找:
  1. <p class='post-footer-line post-footer-line-1'>
复制代码
如果最后还是找不到。尝试找:
  1. <div class='post-footer'>
复制代码
找到后,将下面的代码 copy and paste 在找到的代码的后面。
  1. <!-- Related Posts with Thumbnails Code Start-->
  2. <!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
  3. <div id='related-posts'>
  4. <b:loop values='data:post.labels' var='label'>
  5. <b:if cond='data:label.isLast != &quot;true&quot;'>
  6. </b:if>
  7. <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
  8. <script type='text/javascript'>
  9. removeRelatedDuplicates_thumbs();
  10. printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
  11. </script>
  12. </div><div style='clear:both'/>
  13. <!-- remove --></b:if>
  14. <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
  15. <a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
  16. </b:if></b:if>
  17. <!-- Related Posts with Thumbnails Code End-->
复制代码
4. 一般上,基本的“相关文章”是 5 个。你可以更改以下的代码增加你的“相关文章”数量:
  1. var maxresults=5;
复制代码
若要了解更多设定的方法,可以点按下面的引用来源。

引用来源:www.bloggerplugins.org
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

 

ADVERTISEMENT



ADVERTISEMENT



ADVERTISEMENT

ADVERTISEMENT


版权所有 © 1996-2023 Cari Internet Sdn Bhd (483575-W)|IPSERVERONE 提供云主机|广告刊登|关于我们|私隐权|免控|投诉|联络|脸书|佳礼资讯网

GMT+8, 29-3-2024 04:05 AM , Processed in 0.058874 second(s), 23 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表