blogger技巧 « WOW派

Posts filed under 'blogger技巧'

blogger 3.0:做一个使文章标题分类的页面元素

依然感谢 Hoctro作了这个hack。
此hack的能够做出一个页面元素，根据你的标签来分类你的文章标题的显示页面元素。
效果如下图：

制作这个hack的方法很简单：首先给你的模板增加一个页面元素，然后找到这个页面元素，用下面的代码替换之。

<b:widget id=’HTML50′ locked=’false’ title=’Contents By Category’ type=’HTML’>
<b:includable id=’main’>
<!– *****************http://hoctro.blogspot.com*****Dec,2006****************** –>
<!– <b:if cond=’data:blog.pageType == ”item”‘> –>
  <!– only display title if it’s non-empty –>
  <b:if cond=’data:title != ”"‘>
    <h2 class=’title’><data:title/></h2>
  </b:if>

var homeUrl2 = "hoctro.blogspot.com";
var labels = ["Killer Hacks","Simple Hacks",
"3 Column Templates", "Ajax Hacks","Custom Widgets", "Hacking Techniques"];

function listEntries2(json) {
var ul = document.createElement('ul');

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var alturl;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        alturl = entry.link[k].href;
        break;
      }
    }
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.href = alturl;

    var txt = document.createTextNode(entry.title.$t);
    a.appendChild(txt);
    li.appendChild(a);
    ul.appendChild(li);
  }

  for (var l = 0; l < json.feed.link.length; l++) {
    if (json.feed.link[l].rel == 'alternate') {
      var raw = json.feed.link[l].href;
      var label = raw.substr(homeUrl2.length+21);
      var label1 = label.replace("%20", " ");
      var label2 =label1.replace("%20", " ");
      var txt = document.createTextNode(label2);
      var h = document.createElement('h4');
      h.appendChild(txt);
      document.getElementById('data2006').appendChild(h);
      document.getElementById('data2006').appendChild(ul);
    }
  }
}

function search2(query, label) {

var script = document.createElement('script');
script.setAttribute('src', 'http://' + query + '/feeds/posts/default/-/' + label +
'?alt=json-in-script&callback=listEntries2');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

for (var i=0; i < labels.length; i++)
if (labels[i])search2(homeUrl2, labels[i]);
</script>
</div>

<b:include name=’quickedit’/>
<!– </b:if> –>
</b:includable>
</b:widget>

然后按上面颜色较深的部分的改成你的博客设计即可。

不过此hack有个小问题，你的标签不能太长或是中文，否则会显示出乱码。

2006年12月14日晚上7点21分由GG派首次翻译介绍！转载此文章请注明首次介绍翻译者GG派！

Add comment 十二月 14, 2006

blogger 3.0:google自定义搜索如何加在你的ajax搜索代码上/外加代码详解

才跟大家讲了如何为自己的博客制作google ajax搜索样式。现在跟大家讲讲如何把Google Custom Search /自定义搜索，添加到你的google ajax搜索上去.
首先在http://google.com/coop/ 这个网页创建一个google 自定义搜索的引擎。

然后在My search engines/我的搜索引擎这一项里找到你刚刚自定搜索引擎的control panel/控制面板，点击进入，找到code这一项，前面依次是Basics（基本设定）| Sites（在这里添加你要自定义搜索的站点） | Refinements（设定你自定义搜索的搜索后出现的关键词） | Look and feel（设定你自定义搜索的外观），外观后面这一项就是我们要找的code/代码块了。

点击code，前面的代码依次是一般搜索框代码，把搜索和搜索结果都放在你网页或博客上的样式代码。无需js的代码，能够把自定搜索添加到你的google自定义页上的代码。

最后一项代码就是我们要找的，能够和google ajax搜索匹配的代码，这段代码大概就是这样一个形式：像我做的中文博客搜索的形式：003117241993791897404:-hoflajhuok

如何把这段代码添加进我们前面讲的google ajax搜索呢？

注意看我前面讲的那段ajax代码新增的汉字解释：

<script

src=’http://www.google.com/maps?file=api&v=2&key=这里换成你申请到的KEY代码‘ type=’text/javascript’/>
<script

src=’http://www.google.com/uds/api?file=uds.js&v=1.0&key=这里换成你申请到的KEY代码‘ type=’text/javascript’/>
<link href=’http://www.google.com/uds/css/gsearch.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://www.google.com/uds/css/gsearch_darkgrey.css’ rel=’stylesheet’ type=’text/css’/>

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

/* hover colors */
div.more_gsvsc:hover { color : rgb(170, 221, 153); }
div.tag-control_gsvsc:hover { color : rgb(170, 221, 153); }
.search-form-complete_gsvsc div.search-form-save_gsvsc:hover { color : rgb(170, 221, 153); }
.footerBox_gsvsc a:hover { color : rgb(170, 221, 153); }
.playerBox_gsvsc a.title_gsvsc:hover { color : rgb(170, 221, 153); }

/* secondary colors */
div.more_gsvsc { color : rgb(204, 204, 204); }
div.tag-control_gsvsc { color : rgb(204, 204, 204); }
.searchForm_gsvsc { color : rgb(204, 204, 204); }
.search-form-input_gsvsc { color : rgb(204, 204, 204); }
td.edit-form-input_gsvsc input { color : rgb(204, 204, 204); }
div.edit-form-submit-box_gsvsc { color : rgb(204, 204, 204); }
.footerBox_gsvsc a { color : rgb(204, 204, 204); }
.playerBox_gsvsc a.title_gsvsc { color : rgb(204, 204, 204); }
div.edit-tag_gsvsc { color : rgb(204, 204, 204); }

/* special settings, not called out in standard color overrides */
.tiny-results_gsvsc div.tiny-video-result_gsvsc { border-color : #000000; }
.results_gsvsc div.video-result_gsvsc { border-color : #000000; }
.search-form-input_gsvsc {
color : #676767;
background-color : #e0e0e0;
}
.gsc-control {
width: 100%;
}

</style>
<script type=’text/javascript’>
var coreSearch;

function SolutionLoad() {

var controlRoot = document.getElementById(“searchControl”);

// create the search control
coreSearch = new GSearchControl();
coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

// prep for decoupled search form
var searchFormElement = document.getElementById(“searchform”);
var drawOptions = new GdrawOptions();
drawOptions.setSearchFormRoot(searchFormElement);
drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

// populate – web, this blog, all blogs
var searcher = new GwebSearch();
searcher.setUserDefinedLabel(“网络”);
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setUserDefinedLabel(“全部博客”);
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();
searcher.setSiteRestriction(“你的博客地址“);
searcher.setUserDefinedLabel(“你的博客名称“);
coreSearch.addSearcher(searcher);

searcher = new GwebSearch();《——这里要使用 GwebSearch(); 表示是搜索整个互联网
searcher.setSiteRestriction(“003117241993791897404:-hoflajhuok”);《——这里就填写上面说的你的自定义搜索里得到的代码
searcher.setUserDefinedLabel(“中文博客”);
coreSearch.addSearcher(searcher);

searcher = new GwebSearch();
searcher.setSiteRestriction(“http://www.blogger.com/”);
searcher.setUserDefinedLabel(“博客作者”);
coreSearch.addSearcher(searcher);

searcher = new GblogSearch();《——这里的 GblogSearch(); 表示是使用google的博客搜索，注意这里其实还可以使用“ GnewsSearch(); ”这段代码表示使用google新闻资讯搜索
searcher.setSiteRestriction(“http://ggpai.blogspot.com”);
searcher.setUserDefinedLabel(“GG派”);
coreSearch.addSearcher(searcher);

coreSearch.draw(controlRoot, drawOptions);

}

function doCoreSearch(q) {
coreSearch.execute(q);
}

registerLoadHandler(SolutionLoad);

Add comment 十二月 13, 2006

blogger 3.0:运用google AJAX搜索API到你的博客，横向式

感谢作者 Hoctro，这个hack技巧实在太完美了~~~超级推荐大家使用。

具体效果如图：或者参见本博客右上搜索。

安装方法：
第一步: 在下面的网址申请一个google AJAX搜索API的key ：http://code.google.com/apis/ajaxsearch/signup.html
很容易就能申请到，只需输入你要申请的网址，然后同意google条款，确定~~得到一个key的代码。

第二步：把下面的css编码加入你的排头，正好放在 ] ] ></b:skin> 后面， </head> 前面。
替换下面代码中的key为你在第一步申请到的key。还有再往下把你的博客地址写上去。看我的加深颜色的提示！两个wW9cday6o7K3g的位置替换成你申请地key。然后再把下面深色的http://hoctro.blogspot.com/博客地址变更为你的地址，地址下面的Hoctro’s Place 替换成你的博客名称。

<script

src=’http://www.google.com/maps?file=api&v=2&key=wW9cday6o7K3g‘ type=’text/javascript’/>
<script

src=’http://www.google.com/uds/api?file=uds.js&v=1.0&key=wW9cday6o7K3g‘ type=’text/javascript’/>
<link href=’http://www.google.com/uds/css/gsearch.css’ rel=’stylesheet’ type=’text/css’/>
<link href=’http://www.google.com/uds/css/gsearch_darkgrey.css’ rel=’stylesheet’ type=’text/css’/>

/* selected tag */
div.tag-selected_gsvsc { color : rgb(170, 221, 153); }

</style>
<script type=’text/javascript’>
var coreSearch;

function SolutionLoad() {

var controlRoot = document.getElementById("searchControl");

    // create the search control
    coreSearch = new GSearchControl();
    coreSearch.setLinkTarget(GSearch.LINK_TARGET_SELF);
    coreSearch.setResultSetSize(GSearch.LARGE_RESULTSET);

    // prep for decoupled search form
    var searchFormElement = document.getElementById("searchform");
    var drawOptions = new GdrawOptions();
    drawOptions.setSearchFormRoot(searchFormElement);
    drawOptions.setDrawMode(GSearchControl.DRAW_MODE_TABBED);

    // populate - web, this blog, all blogs
    var searcher = new GwebSearch();
    searcher.setUserDefinedLabel("The Web");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setUserDefinedLabel("Blogsphere");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setSiteRestriction("http://hoctro.blogspot.com/");
    searcher.setUserDefinedLabel("Hoctro's Place");
    coreSearch.addSearcher(searcher);

    searcher = new GblogSearch();
    searcher.setSiteRestriction("http://googleblog.blogspot.com/");
    searcher.setUserDefinedLabel("Google Blog");
    coreSearch.addSearcher(searcher);

    searcher = new GwebSearch();
    searcher.setSiteRestriction("http://www.blogger.com/");
    searcher.setUserDefinedLabel("Blogger");
    coreSearch.addSearcher(searcher);

coreSearch.draw(controlRoot, drawOptions);

}

    function doCoreSearch(q) {
      coreSearch.execute(q);
    }

registerLoadHandler(SolutionLoad);

第三步: 增加两个新的页面元素到你的博客, 注明是搜索，和搜索结果的页面元素名称，并且把两个页面元素放到你想显示的位置。

然后再用以下代码整体替换你刚刚加在博客上的两个页面元素：

<b:widget id=’HTML41′ locked=’false’ title=’搜索’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<div id=’searchform’>读取中/Loading…</div>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>

<b:widget id=’HTML42′ locked=’false’ title=’搜索结果’ type=’HTML’>
<b:includable id=’main’>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<div id=’searchControl’>读取中/Loading…</div>
</div>
<b:include name=’quickedit’/>
</b:includable>
</b:widget>

第五步，恭喜，完成了~~看看效果吧~~~

注意有的浏览器可能会如图这样报错，点击ok忽略即可。

Add comment 十二月 13, 2006

blogger 3.0:一键增加随机显示10条信息的页面元素hack

多得不说了，首先感谢原作者Hackosphere接着就放出我汉化的一键增加随机显示10条页面元素的hack，点击这里

这个页面元素的功能就是每次打开页面随机显示10条信息，可以是名人名言之类~~汉化的很明白了，应该没有什么要多说明的。

Add comment 十二月 10, 2006

blogger 3.0:把标签栏改成RSS订阅标签文章

想要标签栏RSS也能和标签那样直接选择订阅？这里有非常简单的方法。感谢 PurpleMoggy.

<b:widget id='Label1' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><ul><b:loop values='data:labels' var='label'><li>  <a expr:href='data:post.url + "/feeds/posts/default/-/" + data:label.name'><img src='http://img304.imageshack.us/img304/3518/rect18st2.png'/></a>  <b:if cond='data:blog.url == data:label.url'>    <data:label.name/>  <b:else/>    <a expr:href='data:label.url'><data:label.name/></a>  </b:if>  (<data:label.count/>)</li></b:loop></ul>

<b:include name='quickedit'/></div></b:includable></b:widget>

把上面颜色加深的代码加进的标签栏即可。

如果你想要下拉式菜单的标签形式来给大家订阅标签RSS呢？

用下面这段代码替换：

<b:widget id='Label1' locked='false' title='Labels' type='Label'><b:includable id='main'><b:if cond='data:title'><h2><data:title/></h2></b:if><div class='widget-content'><select onchange="'location="this.options[this.selectedIndex].value;'"><option>选择标签RSS</option><b:loop values="'data:labels'" var="'label'"><option value="'data:post.url"><data:label.name/>(<data:label.count/>)</option></b:loop></select>

<b:include name='quickedit'/></div></b:includable></b:widget>

Add comment 十二月 9, 2006

blogger:不必通过外部JS文件使RSS供稿超过20的方法

首先说明有最简单的方法，如80通过GOOGLE READER订阅10个以下的RSS供稿方法。

还有斑斓通过JSON的一键hack制作RSS供稿的方法。

我这里介绍的是直接修改你的模块的方法，好处是不必调用外部的JS文件，在博客上显示的也比较整齐。方法由hoctro 提供，原文在此

简单就是先切换到模版项，然后在页面元素项目上添加一个新的页面元素，选择添加HTML/JavaScript项目，然后给个命名“最新评论”。然后切换到修改html项目，在修改模版下面的扩展窗口小部件项目前的方框打勾，然后在代码方框里面搜索你刚刚添加的有“最新评论”的那个项目。然后完整替换类似这样的一块代码：
从
<b:widget id=’HTML20′ locked=’false’ title=’最新评论’ type=’HTML’>

到

</b:includable>
</b:widget>

全部替换成以下代码：

<b:widget id=’HTML20‘ locked=’false’ title=’最新评论’ type=’HTML’>
<b:includable id=’main’>

<!– only display title if it’s non-empty –>
<b:if cond=’data:title != “”‘>
<h2 class=’title’><data:title/></h2>
</b:if>
<div class=’widget-content’>
<!– <data:content/> –>
</div>

/** Code taken from Sample at Code.Google.com **/

/**
* Lists blog entries from the specified JSON feed
* by creating a new ‘ul’ element in the DOM. Each
* bullet is the title of one blog entry, and contains
* a hyperlink to that entry’s URL.
*/
function listEntries(json) {
var ul = document.createElement(‘ul’);

for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == ‘alternate’) {
alturl = entry.link[k].href;
break;
}
}

var li = document.createElement(‘li’);
var a = document.createElement(‘a’);
a.href = alturl;

var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}

document.getElementById(‘data’).appendChild(ul);
}

function search(query, type) {
removeOldQueryResults();

var script = document.createElement(’script’);
script.setAttribute(’src’, ‘http://’ + query + ‘/feeds/’ + type +
‘/default?alt=json-in-script&callback=listEntries’);
script.setAttribute(‘type’, ‘text/javascript’);
document.documentElement.firstChild.appendChild(script);
}

/**
* Removes results from the previous search, including
* the bullet list of blog entries and the script object
* used to obtain the feed.
*/
function removeOldQueryResults() {
// Remove the script element used to perform the query.
var script_nodes = document.getElementsByTagName(’script’);
for (var i = 0; i < script_nodes.length; i++) {
var cur_node = script_nodes[i];

if (cur_node.src && cur_node.src.indexOf(‘json’) != -1) {
cur_node.parentNode.removeChild(cur_node);
}
}

// Remove the bullet list of blog entries.
var div = document.getElementById(‘data’);
if (div.firstChild) {
div.removeChild(div.firstChild);
}
}

homeUrl = “<data:blog.homepageUrl/>”;
var arr = new Array(4);
arr = homeUrl.split(“/”,4);

// To change from your blog to someone else (like mine,) do this:
// search(“hoctro.blogspot.com”, “comments”);
// To change from recent comments to recent posts, do this:
// search(arr[2], “posts”);

search(arr[2], “comments”);

</script>
</b:includable>
</b:widget>

上面的替换方法是针对评论的，用上面的代码替换的结果是该模块能显示超过20个以上的最新评论。另外注意这一行
<b:widget id=’HTML20′ locked=’false’ title=’最新评论’ type=’HTML’>

的HTML20，那个20数字是你的模块代号，不可以和已有的模块代号重复！所以最好替换的时候把这个20替换成被你替换模块的数字代号。

然后上面说的是评论的修改方法，要帖子的RSS怎么办呢？

只需修改代码后面的那个

search(arr[2], “comments”);

变成：

search(arr[2], “posts”);

就可以了。如果你希望看其他人博客的评论，例如我的博客的评论，你可以把这一行改成：

search(“gfancn.blogspot.com”, “comments”);

如果你想限制显示的评论数，你可以修改以上代码
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var alturl;

的var i = 0 ，修改0为你想显示的文章数，我自己的测试好像这里的限制有点问题，例如我设置成14，则显示12篇评论，15则11篇评论，类推12则12篇评论。具体大家自己尝试。

如果你要如上文所述显示自己的标签的RSS供稿呢?修改代码：

‘http://’ + query + ‘/feeds/’ + type +
‘/default/-/[如上文所说方法得到的标签名称]

这里有个英文效果图：

IE6下的效果：

Add comment 十二月 7, 2006

WOW派

Posts filed under 'blogger技巧'

blogger 3.0:做一个使文章标题分类的页面元素

blogger 3.0:google自定义搜索如何加在你的ajax搜索代码上/外加代码详解

blogger 3.0:运用google AJAX搜索API到你的博客，横向式

blogger 3.0:一键增加随机显示10条信息的页面元素hack

blogger 3.0:把标签栏改成RSS订阅标签文章

blogger:不必通过外部JS文件使RSS供稿超过20的方法

Category Cloud

Top Posts

Top Clicks

最近文章

最近评论

存档

Blog Stats

Feeds

十一月 2009
一	二	三	四	五	六	日
« Jul
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30