忍者ブログ

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


樹形日志分類、評論、鏈接、最新日志 shinobi BLOG Ver.

按照这个步骤成功的同学也请留言告诉我吧^O^

开始前的扫盲:(能人请跳过)

所谓template的html/css代码:

按照这个步骤打开口的窗口,在右上方的框框里的就是template的html代码;右下方的框框里是template的css代码。其中html代码对应的是整个面板的布局;而css代码用于整个面板的字体背景等等的美化。

所谓plugin的html代码:

按这个步骤打开看到的就是plugin的html代码。作用部分是页面边栏,写在这个位置的代码,即使换了面板也不会受影响。

-----------------------------正文-------------------------------

ツリー化スクリプト shinobi BLOG Ver.

第一步,把下面的代码复制到template的html中,<body>和</body>这两个标签之间,建议直接找</body>(一般都在倒数第二行),然后复制到它上面

<script type="text/javascript">
<!--
function makeTreeElements (idName,objList) {
if (!objList.innerHTML) return;
var objLink = objList.getElementsByTagName('a')[0];
var linkUrl = objLink.getAttribute('href');
if (idName.indexOf('comment') > -1 || idName.indexOf('tb') > -1) {
var tmplinkUrl = linkUrl.split("#")
var tmpText = objList.innerHTML.split("⇒");
tmpText[0] = tmpText[0].slice(0,tmpText[0].search(/<BR/i));
this.base = Array('<a href="',tmplinkUrl[0],'">',tmpText[0],'</a>').join('');
this.elem = objLink.innerHTML;
} else if (idName.indexOf('entry') > -1) {
var tmpText = objList.innerHTML;
tmpText.match(/\((\d\d\/\d\d)\)/);
this.base = Array('[',RegExp.$1,']').join('');
this.elem = Array('<a href="',linkUrl,'">',objLink.innerHTML,'</a>').join('');
} else if (idName.indexOf('link') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>[',RegExp.$1,']</strong>').join('');
this.elem = Array('<a href="',linkUrl,'" target="_blank">',RegExp.$2,'</a>').join('');
}
} else if (idName.indexOf('category') > -1) {
var tmpText = objList.innerHTML;
if ( tmpText.match(/\[(.+)\](.+)/) ) {
this.base = Array('<strong>',RegExp.$1,'</strong>').join('');
this.elem = Array('<a href="',linkUrl,'">',RegExp.$2,'</a>').join('');
}
}
return this;
}
function createTreeList(idName,option) { // version 2.2
var objFocus = this.document.getElementById(idName);
if (!objFocus) return;
if (!objFocus.innerHTML) return;
var objLists = objFocus.getElementsByTagName('li');
var linkList = new Array();
var outText = new Array();
if (objLists.length > 0) {
for (i=0;i<objLists.length;i++) {
var chckFlag = true;
var elemText = new makeTreeElements(idName,objLists[i]);
if (!elemText.base || !elemText.elem) return;
for (j=0;j<linkList.length;j++) {
if ( linkList[j].base.indexOf(elemText.base) > -1 ) {
chckFlag = false;
linkList[j][linkList[j].length] = elemText.elem;
}
}
if (chckFlag) {
var tmpNum = linkList.length;
linkList[tmpNum] = new Array();
linkList[tmpNum][0] = elemText.elem;
linkList[tmpNum].base = elemText.base;
}
}
if (linkList.length > 0) {
outText[outText.length] = '<ul>\n';
for (i=0;i<linkList.length;i++) {
outText[outText.length] = Array('<li>',linkList[i].base,option.top).join('');
if (linkList[i].length > 0 && option.sort) linkList[i].reverse();
for (j=0;j<linkList[i].length;j++) {
outText[outText.length] = (j == linkList[i].length - 1) ? option.end : option.list;
outText[outText.length] = Array(linkList[i][j],option.leef).join('');
}
outText[outText.length] = Array(option.btm,'</li>').join('');
}
outText[outText.length] = '</ul>\n';
objFocus.innerHTML = outText.join('');
}
}
}

var gTreeOption = new Array;
gTreeOption['sort'] = false; /* ツリー内の表示順 true:並び替える false:そのまま */
gTreeOption['list'] = '<li>'; /* ツリー用マーク(通常) */
gTreeOption['end'] = '<li class="end">'; /* ツリー用マーク(末端) */
gTreeOption['leef'] = '</li>\n'; /* 各枝の末尾 */
gTreeOption['top'] = '<ul class="tree">\n'; /* ツリー本体の最初 */
gTreeOption['btm'] = '</ul>\n'; /* ツリー本体の最後 */

createTreeList('newentrylist',gTreeOption); // 最新エントリリストのツリー化
createTreeList('entrylist',gTreeOption); // エントリリストのツリー化
createTreeList('commentlist',gTreeOption); // 最新コメントリストのツリー化
createTreeList('tblist',gTreeOption); // 最新トラックバックリストのツリー化
createTreeList('linkslist',gTreeOption); // リンクリストのツリー化
createTreeList('categorylist',gTreeOption); // カテゴリリストのツリー化
// -->
</script>

第二步,保存下面的两个图片。上传后获取地址。


tree_list.gif

tree_end.gif

然后复制下面的代码,贴入template的css部分。
红色的地方填上上面两张图片的url地址。

.plugin_data ul{
list-style: none;
margin: 0px;
padding: 0px;
}
.plugin_data ul.tree li{
margin: 0px;
padding: 0px 0px 0px 16px;
background-image: url(http://file.*****.blog.shinobi.jp/tree_lst.gif);
background-repeat: no-repeat;
}
.plugin_data ul.tree li.end {
background-image: url(http://file.*****.blog.shinobi.jp/tree_end.gif);
background-repeat: no-repeat;
}

第三步,选择下面的相应代码,贴入对应プラグイン(plugin、侧边栏)的html部分。替换原本的内容。

コメント(comment、评论)的树形代码:

<div class="plugin_data" id="commentlist">
<ul>
<!--plugin_comment-->
<li><!--$plugin_comment_entry_title--><br />⇒<a href="<!--$plugin_comment_link-->"><!--$plugin_comment_title-->(<!--$plugin_comment_mon-->/<!--$plugin_comment_day-->)</a></li>
<!--/plugin_comment-->
</ul>
</div>

カテゴリ(category、日志分类)的树形代码:

<div class="plugin_data" id="categorylist">
<ul>
<!--plugin_category-->
<li><a href="<!--$plugin_category_link-->"><!--$plugin_category_title-->(<!--$plugin_category_num-->)</a></li>
<!--/plugin_category-->
</ul>
</div>

然后将所有的日志分类改成:[兴趣]音乐 这样的格式。

以下部分的原文:リンクのツリー化

リンク(link、链接)的树形代码:

<div class="plugin_data" id="linkslist">
<ul>
<!--plugin_link-->
<li><a href="<!--$plugin_link_link-->" target="<!--$plugin_link_target-->"><!--if_link_img--><img src="<!--$plugin_link_img_link-->" width="<!--$plugin_link_img_width-->" height="<!--$plugin_link_img_height-->" border="0"><br><!--/if_link_img--><!--$plugin_link_title--></a></li>
<!--/plugin_link-->
</ul>
</div>

一样也需要把所有的链接文本设置成:[好友]shinobi 这样的格式
注意:只有文本形式的链接会树形显示,图片Bannar无法表示成树形。

如果想在一个侧边栏里同时实现文本链接的树形和图片链接的非树形(如下图),建议使用フリーエリア(Free area),代码如下:

<div class="plugin_data" id="linkslist">
<ul>
<li><a href="http://www.shinobi.jp/" target="_blank">[Official]shinobi.jp</a></li>
<li><a href="http://blog2.community.shinobi.jp/" target="_blank">[Official]カスタマイズBBS</a></li>
<li><a href="http://blog.community.shinobi.jp/" target="_blank">[Official]ユーザーサポートBBS</a></li>
<li><a href="http://blog.shinobi.jp/Tag/" target="_blank">[Official]独自タグ解説書</a></li>
<li><a href="http://start.blog.shinobi.jp/" target="_blank">[BLOG]カスタマイズin忍者ブログ</a></li>
<li><a href="http://torajirobellepuu.blog.shinobi.jp/" target="_blank">[BLOG]★ ぼやき。 ★</a></li>
<li><a href="http://playground.blog.shinobi.jp/" target="_blank">[BLOG]The Preparation Room</a></li>
<li><a href="http://kisato.blog.shinobi.jp/" target="_blank">[BLOG]kisatonomori blog</a></li>
<li><a href="http://torin717.blog.shinobi.jp/" target="_blank">[BLOG]ゆっくりと(^-^)しっかりと</a></li>
</ul>
</div>

<div class="plugin_data">
<ul>
<li><a href="http://shinobibloglab.blog.shinobi.jp/"><img src="http://file.shinobibloglab.blog.shinobi.jp/shinobibloglab_s.png" border="0" alt="ニンブロラボ." width=88 height=31></a></li>
</ul>

其中这部分是文本链接的代码,这部分是图片链接的代码,也就是说链接必须自己在html中通过代码添加,而无法使用后台的链接编辑(リンクの編集)。

最新日志(最新記事)的树形代码:

<div class="plugin_data" id="newentrylist">
<ul>
<!--plugin_entry-->
<li><a href="<!--$plugin_entry_link-->"><!--$plugin_entry_title--></a>(<!--$plugin_entry_mon-->/<!--$plugin_entry_day-->)</li>
<!--/plugin_entry-->
</ul>
</div>

以上。

PR

COMMENT

NAME
TITLE
E-MAIL
URL
CONTENT
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
PASSWORD

setsunayu: 無題

  • 2012/06/12 17:53 EDIT
成功了!
謝謝姑娘><

Backlinks: backlinks

  • 2012/05/14 01:54 EDIT
Check out this crazy service that sends thousands of visitors to your web page automatically!

Hey kirara.syoyu.net admin

I wanted to tell you about this website I used with great results, that drives thousands of targeted visitors to your site who are dying to spend money!

You’ve probably already know that creating great content is only half the battle when it comes to running a successful website. The second half of the equation is DRIVING TRAFFIC!

With this service, you can forget about the tedious process of posting backlinks because they do everything for you so you can focus on more important things, like dealing with the flood of traffic to your site!

And that’s not all! this service is SUPER AFFORDABLE and will direct thousands of new visitors to your site in just hours, GUARANTEED!

This is the only service that can skyrocket your page to the top of the search engines!

You can check it out here:

<a href=http://xrumerservice.org>backlink service</a>

Best,

Jason

ntk: 無題 URL

  • 2011/09/07 23:38 EDIT
一次成功!
各種感謝原POwww

kolo: 球、球助TUT URL

  • 2011/05/11 19:31 EDIT
QVQ評論和文章分類都成功了,就是LINK不知道爲什麽……TUT

影落音。: 成功~

  • 2011/04/02 11:40 EDIT
自從用上樹形之後就愛上樹形了~ 太感謝~~
尤其是link方面的(個人很喜歡分類

但最近發現一個link方面的小bug(不知算不算bug
如果將link部份分part,那第二或往後的part都會沒有了樹形效果
做的link已經超出了字節範圍……
想問下這個有辦法解決么?

KIRARA

  • 2011/04/03 18:54
什么是分part?怎么分的?能给个截图么

dainchyin: 成功!!

  • 2011/03/25 23:21 EDIT
大谢!!!!

page: 已成功~

  • 2011/02/20 18:13 EDIT
教程很清晰~
另外还有一个小问题,树形上的小图案如何添加?

野生妖精: 教程很好用= 3= URL

  • 2010/11/05 04:36 EDIT
RT,感谢教学= 3=
终于调教好了link部分> <

壹: 無題

  • 2010/10/07 21:46 EDIT
谢谢教学~~~终于成功了>口<!!!

伯夜酱: 你好~ URL

  • 2010/10/06 22:57 EDIT
可以称呼Kirara吗?按照你的做了,成功了XD~也去弄了那个会变的头像,蛮有意思的,亲好厉害哈~\(≧▽≦)/~

贪心的问下,像亲的COMMENT的树形里那种前面有个爱心符号的是怎么弄的捏?


KIRARA

  • 2010/10/07 03:36
别别别,我都是参考别人的教程的…

爱心的话是在第三段代码那里改的,在适当的位置加上♥就好

黒沢みつよ: 無題 URL

  • 2010/08/21 13:30 EDIT
成功了的说XD

時代: 無題 URL

  • 2010/06/13 14:35 EDIT
你好QAQ……很死蠢的沒有成功(替換頭像那個倒是很快就成功了)……一步一步按照做下來的,可是分類顯示不是樹形而是每個分類前面出現標題,無論是日誌還有鏈接都是這樣……OTZ我表達不清……可以移步來看一下嗎……

philia: 無題 URL

  • 2010/06/11 22:58 EDIT
我還是失敗了
我果然很蠢啊

imino: 無題 URL

  • 2010/05/24 16:15 EDIT
哦……自己弄好了……0 0
再次感謝你的分享

imino: 無題 URL

  • 2010/05/24 16:09 EDIT
你好~
非常感谢你的分享,帮了很大的忙,非常感谢!
我的问题跟前几位一样……分类的树形显示出不来囧……

Utopia: 無題

  • 2010/05/18 23:46 EDIT
他喵的,又可以了Orz

Utopia: 無題

  • 2010/05/18 23:31 EDIT
你好,有个问题要麻烦一下……那啥心血来潮想改树形,用了上面的代码,结果评论可没问题可以显示,可是分类zenzen么反应啊TAT
我我我我……我还是邮件吧Orz
麻烦亲了Orz

小雨: 無題

  • 2010/05/13 04:44 EDIT
你好,想请问一下关于FC2的模板,有的设置了边栏模块折叠,就是只显示模块标题点开才能看到内容的,怎样改代码才能不用点击也一直保持显示内容呢?十分感谢。

KIRARA

  • 2010/05/13 08:33
一般都是用script,把那段代码找出来删掉就好了。

歪: 無題 URL

  • 2010/05/12 12:35 EDIT
樹形已經設置OK,就是不知道為毛每個分類下面都會還會有一條虛線,尋求幫助TAT,萬分感謝,連接已寫在URL裏

KIRARA

  • 2010/05/12 14:00
你好,这和树形无关,是面板的效果

sa: 無題

  • 2010/05/07 13:54 EDIT
非常感谢亲的回复~~我昨天找到了那个日BO,大致的看了一下,不过我发现那个BO本身的用的树形跟教程不一样,而且它就是即时显示,大概是用了JS文件之类的吧,然后今天试着调了一下第一段代码的位置,基本上没有什么差别,对速度好像没什么影响,可惜代码有这个缺憾了……看以后能不能等能人研究出更好的方法了^^,非常感谢亲提供的教程哈

sa: 無題

  • 2010/05/06 17:00 EDIT
刚刚又试验了一下,发现成功了囧,然后有点问题想问问亲~树形好像不会立刻显示,偶尔会迟疑一两秒,如何可以立即显示呢,然后是可不可以实现大类的文章统计呢,比如【兴趣】音乐,可不可以实现【兴趣】这个大类也可以点击看到全部文章的那种呢?

不知道表达清楚没

KIRARA

  • 2010/05/06 20:47
你好,树形延迟大概是因为页面打开的时候是从上往下显示的,树形代码放在页面的下部(/body上面)所以出来得晚,于是有几秒的时间差。亲可以试一下移动第一段代码的位置。

亲说的那个功能用javascript应该能编出来。那得找学过这个的人了(js程序我只会读没编过)

sa: 無題

  • 2010/05/06 16:53 EDIT
亲好,打扰了……那啥,我用了亲的代码,很囧的发现,评论可以改成亲的形式,但是我想改的分类却怎么也没反应,评论可以改应该说明代码是成功的吧,但是为什么唯独分类没反应呢?我想改的是分类啊TAT

kumiv: 無題 URL

  • 2010/05/02 16:52 EDIT
感谢亲的教程,已经弄好树形了。
但还有问题啊。
就是最新记事上弄了树形就无法显示“new”了。link上也是。
另外还有个问题,但是说不清楚,我已经发你邮箱了。

KIRARA

  • 2010/05/09 21:24
mission cleared囧

littlevan: 無題

  • 2010/04/30 15:33 EDIT
我沒成功TAT...已經發郵件給你咯~麻煩下

KIRARA

  • 2010/04/30 16:24
你好~已经OK了。
之前无法树形是因为“管理画面”没有更改成“[XX]管理画面”的形式。

littlevan: 無題

  • 2010/04/30 01:22 EDIT
請問你說的第二步把代碼貼入template的css部份,是全部黏貼在結尾的地方還是什麽?這裡我有點搞不懂.....麻煩親~

KIRARA

  • 2010/04/30 08:59
放在哪里都可以,css是没有顺序的~

line: 無題 URL

  • 2010/04/24 02:31 EDIT
亲 我想让CM显示名字而不是题目 就是像你那个一样~那个代码是要改成什么?谢谢!

KIRARA

  • 2010/04/24 09:56
你好,写了教程了~

葉乙: 無題

  • 2010/04/22 11:25 EDIT
謝謝親啦,樹形完成,哦耶~

团团: 無題

  • 2010/04/18 19:46 EDIT
我也发了ID和PW~~麻烦亲了...奇怪的是我在TT看是对的,但是在IE看左侧栏到底下去了.........

Else: 無題

  • 2010/04/18 18:45 EDIT
发了=。=谢谢。

KIRARA

  • 2010/04/18 19:45
搞定了~
具体问题我用邮件回复给亲了

Else: 無題

  • 2010/04/18 18:29 EDIT
就是我模板部分的代码加过了

让后再在プラグインの設定链接啊评论啊什么不都是一个一个插件么,然后那里面的代码我也分别替换了但是还是没有变化啊=。=

我能同求大大进后台帮我改一下么。。。大大邮箱是什么?

KIRARA

  • 2010/04/18 18:33
kiraramai@126.com

团团: 無題

  • 2010/04/18 14:55 EDIT
5555~~~還是米變化...哎~~還有親template的css里沒有.PluginContents { ..我太白了不好意思~~~

KIRARA

  • 2010/04/18 17:57
啊~css是每个template不一样的囧
亲的那个在div#plugin{ 下面直接加上一句 font-size: 10px; 就ok了

或者亲把树形的第一部分代码放在某一个plugin里面看看(新建一个free area的plugin也可以)
我换成亲的template也可以树形成功呢

再失败的话亲可以把用户名密码发到我邮箱,我进后台看一下
(真的很好奇为什么会不行?!)

Else: 無題

  • 2010/04/18 13:22 EDIT
请问我还能直接在プラグインの設定里面修改评论,分类之类的代码啊。我好像木有成功=.=

KIRARA

  • 2010/04/18 18:00
我不是很明白亲的意思呢。
是说没能成功修改plugin的代码?

团团: 無題

  • 2010/04/17 17:43 EDIT
我只想把日誌給分類.....求助親了~~~
紧贴</body>的上面 是</body>的上面!!!!還想問下怎麼把側欄的字改小~~~~

KIRARA

  • 2010/04/17 18:31
你好,我去亲家里看了一下,亲可以试着把日志分类那栏移到最顶上看看。
以前在FC2貌似听说过代码必须在目标栏的下方才有效。

改侧栏字体大小的方法:
进入template的css代码,找.PluginContents {
把里面的font-size: 12px;的数字改掉就行了,我这里是10px
注意不要弄丢;什么的

团团: 無題 URL

  • 2010/04/17 17:39 EDIT
親啊~~~我爲什麽改了和沒改一樣555555~~~一個下午都在糾結這個~~~但是還是弄不好= =

renka: 無題

  • 2010/04/16 21:37 EDIT
感谢大人的教程><
已经都OK了~~XD

紋: http://mowen.3rin.net/

  • 2010/04/12 16:48 EDIT
現在改了下...主頁是看到了,可是顯出來的不是樹狀而是圓圈....而且鏈接那突然重復了好幾段出來..

紋: http://mowen.3rin.net/

  • 2010/04/12 12:08 EDIT
請問我在改plugin的時候總是會出現這個是什么意思呢?
構造上のエラー:<!--plugin_entry-->タグの終了タグが 1 足りません。
<!--plugin_entry-->に対応する終了タグが見つかりません。[開始タグ位置:4行目付近]
還有贴入template的css部分這個是隨便放在CSS的哪部分都可以?
話說我現在改著改著就只能進后臺主頁進不了OTL

KIRARA

  • 2010/04/12 14:41
你好~
<!--plugin_entry-->
<!--/plugin_entry-->
标签必须成对出现,就像html的<font></font>一样。我之前试过不加这两个标签,中间的代码会无法运行,所以确保它们出现在entry相关代码的一头一尾。
css代码是放在哪里都行的~
我去亲家里看了,现在显示“当前使用的template或者plugin的代码有问题,无法显示页面”

EIIN: 無題

  • 2010/04/11 14:24 EDIT
小白俺想请问template是哪地方呀?TOT

KIRARA

  • 2010/04/11 16:13
EIIN亲你好,我在开头添加了截图~希望能帮到你^^

❉小 雪❉: 無題 URL

  • 2010/04/09 16:13 EDIT
后来我弄好了..笑~

❉小 雪❉: 無題 URL

  • 2010/04/09 14:13 EDIT
额...我弄出来,
link..和评论都可以树形...
就是分类不行啦..~囧
不知道是什么问题,想不通的说...

KIRARA

  • 2010/04/09 15:52
我去亲家里看了一眼,貌似一切完好囧

路人甲: 無題

  • 2010/04/08 17:40 EDIT
哦哦,不用麻煩博主了,弄好鏈接代碼了~

liao7428: 無題

  • 2010/04/08 17:31 EDIT
一番努力后成功了,感謝!!!
博主能不能把鏈接的代碼也放出來~~~~

aoi: 無題

  • 2010/04/07 17:36 EDIT
T_T不行,完全就是按照这样的做法,但是为什么不行呢……

xiuxiu: 無題

  • 2010/04/07 12:02 EDIT
我試著把css也放進了plugin里,中❤,這下真的換template也不用改了www

aoi: 無題

  • 2010/04/07 03:28 EDIT
爲什麽怎麼改都不行呢,究竟哪兒出問題了。淚……

KIRARA

  • 2010/04/07 10:32
亲把第一段代码放在< body>和< /body>之间的各个不同位置试一下吧,也可以试一下放在某个不相干的plugin的html里面,我目前是放在rss那栏。

后面两步应该不会有问题啊,注意最后的代码是要整个替换的。

xiuxiu: 無題

  • 2010/04/06 14:55 EDIT
我是把那些代码放进plugin里面的,这样换template就不用再改了,哈哈。

你看的那个shinobi的blog我也有在看,不过日文看不太懂,自己摸索了一下午囧

KIRARA

  • 2010/04/06 15:26
css貌似必须改呢。
以后不换template直接改代码得了orz

TRACKBACK

TRACKBACK

ABOUT ME

Kirara 留言簿

0型血狮子座
80后女青年
一个人在伦敦
怎么就学了金融
为了开小店奋斗
要养虎斑猫
水彩纸上画丙烯
单反大光圈
恋声癖耳朵生物
最爱薄荷绿
搜罗陶瓷杯
 →kiraramai@126.com

----------------------
涂鸦日志导航 new→old
キラッ☆リクルート 修女服和手槍 沒有防走光緊身褲的戰國時代 做臣下的可不能讓主人餓肚子 覺醒!軍裝控之魂 推倒凱文計劃

COMMENT

ALBUM

COUNTER

忍者アナライズ