Виджеты для blogspot

Новый виджет для вашего блога

2008-02-20T23:11:00.000-08:00

Хочу рассказать вам как сделать такой виджет

Назовем его Гиджет, от слова Гид.
Видимо придется писать несколько статей на эту тему, т.к. в одной статье думаю все не поместится.
Начнем!
Что нам для этого нужно.
1. Нужно взять RSS канал блога и добавить в наш гиджет, да так, что бы картинки подходили под размер гиджета.
Делаем это:
После этого идем на сайт yahoo pipes.yahoo.com что бы туда зайти нужно иметь обычный аккаунт от почты yahoo, если у вас такого нет, то его можно зарегистрировать на сайте yahoo.com. И так, зарегистрировались в yahoo, вошли, в pipes.yahoo.com, затем берем эту pipes, клонируем, для этого нужно нажать кнопку clone, после того как кнонировали нажимаете кнопку Edit Source, нажали.
Загружается рабочий стол pipes.
Если вы все правильно сделали, то должы увидеть это.

После этого берете rss канал своего блога, у меня это http://wdgts.blogspot.com/feeds/posts/default , идете в pipes.yahoo.com (у вас там уже открыт рабочий стол), и вставляете его(rss канал) в самый верхний голубенький прямоугольник, под названием Fetch Feed.

После того как вставили нажимаете справа вверху кнопку save, после того как pipes сохранится в центре вверху появится надпись # Pipe Saved Run Pipe...
Вот на Run Pipe вам и нужно нажать.
После того как вы нажмете Run Pipe появится новое окно и pipes загрузится.
У вас должно получится что-то вроде этого

Только с вашей rss...
После этого нажимаем кнопку More options и в открывшемся меню нажимаем на Get as RSS. Ссылка Get as RSS это rss канал вашего блога, только с измененными картинками.
Берем этот урл и идем в grazr.com.
Для начала нам нужно зарегистрировать аккаунт на сайте grazr.com.
Регистрируем, логинимся, нажимаем кнопку Create, перед нами непонятная html страничка с какими-то надписясями и кнопками.

Нажимаем там на рабочем столе кнопку Data и в появившееся поле втсавляем урл полученый из pipes.yahoo.com (когда вы нажали Get as RSS)/
Затем нажимаем Save Ass, в поле Title: пишете название вашего виджета-гиджета и нажимаете save. Файл сохранится и система напишет вам

File saved

после этого в правом верхним углу появится кнопка Reed (см. картинку)

Нажимаем на эту кнопку Reed, у вас загружается предпросмотр виджета, после того как он загрузился нажимаем в самом верху на кнопку Share.
Если вы все сделали правильно, то увидите что-то вроде этого, только с вашими данными.

На этом первая часть закончена.

Blogger Hack "NiceTitle"

2008-02-14T16:16:00.000-08:00

Наведите курсор на ссылку
Это очень просто!
Макет->Изменить HTML->Загрузить весь шаблон (сохраняем текущий шаблон на всякий случай)
Далее находим в коде

 <head>

Сразу после этого вставляем

<script src='http://nextfilm.ru.googlepages.com/nicetitle.js' type='text/javascript'/>

Далее ищем в коде

]]></b:skin>

И перед этим вставляем

div.nicetitle {
  text-align:center;
      background: #333;
  color: #fff;
  font: bold 13px "Trebuchet MS", Vera Sans, Verdana, Arial, sans-serif;
  left: 0;
  padding: 4px;
  position: absolute;
  top: 0;
  z-index: 20;
  -moz-border-radius: 10px;
  -moz-opacity: .87;
  min-width: 100px;
  width: auto;
  height: auto;
      max-width: 300px;
}

div.nicetitle p {
  color:#00CC33
  margin: 0;
  padding: 0 3px;
  -moz-opacity: 1;
}

div.nicetitle p.destination {
  display: none;
  color:#00CC33
  font-size: 9px;
  padding-top: 3px;
  -moz-opacity: 1;
}

div.nicetitle p span.accesskey {
  color: #d17e62;
}
#tooltip{
text-align:center;
background-color: #333;
color: #fff;
font: bold 13px "Trebuchet MS", Vera Sans, Verdana, Arial, sans-serif;
left: 0;
padding: 15px;
position: absolute;
top: 50;
z-index: 10;
-moz-border-radius: 10px;
-moz-opacity: .87;
width: auto;
height: auto;
max-width: 300px;
visibility:hidden
}

Стиль можно изменить на свой вкус, а можно оставить как есть...
Все, сохраняем и любуемся результатом

Виджет похожие сообщения

2008-02-12T18:51:00.000-08:00

Виджет похожие сообщения

У меня после каждой статьи внизу идут ссылки на похожие статьи, сейчас я вам расскажу как установить такой виджет.
Шаблоны->Изменить HTML->Загрузить весь шаблон(на всякий случай сохраняем старый шаблон)->Расширить шаблоны виджета
После найдите в своем блоге пару виджетов они содержут

"b:widget"

И между ними вставляйте

<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
</b:includable>
<b:includable id='main'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--<b:if cond='data:blog.pageType == "item"'>-->
<div class='widget-content'>
<h2>Related Articles by Labels</h2>
<div id='data2007'/><br/><br/>
<div id='hoctro'>Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a>

</u></div>
<script type='text/javascript'>

var homeUrl3 = "hoctro.blogspot.com";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

<b:if cond='data:blog.pageType == "item"'>
maxNumberOfPostsPerLabel = 100;
</b:if>
<b:if cond='data:blog.pageType == "item"'>
maxNumberOfLabels = 3;
</b:if>


function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k &lt; 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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = decodeURIComponent(raw.substr(homeUrl3.length+21));

var txt = document.createTextNode(label);
var h = document.createElement('h4');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}

function search10(query, label) {

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

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;

if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<!--</b:if>-->
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
</b:includable>
<b:includable id='backlinks' var='post'>
</b:includable>
<b:includable id='status-message'>
</b:includable>
<b:includable id='feedLinks'>
</b:includable>
<b:includable id='nextprev'>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
</b:includable>
<b:includable id='post' var='post'>
</b:includable>
</b:widget>

Не забудьте, вместо hoctro.blogspot.com, вы должны указать адрес своего блога

Шаблоны для blogspot

2008-02-12T15:14:00.000-08:00

Demo

Download (English version)

Demo

Download (English version)

Demo
Download (English version)

Demo
Download (English version)

Demo
Download (English version)

Виджет информер для blogspot

2008-02-11T16:56:00.001-08:00

Когда вы находитесь не на главной странице моего сайта, то справа вверху появляется желтенький информер(картинка слева), сейчас я расскажу как вы можете установить его в свой блог. Шаблон -> Изменить HTML -> Загрузить весь шаблон (сохраните имеющийся шаблон на всяк. случай себе на винт) ->Расширить шаблоны виджета, далее найдите в своем блоге такую строчку

<div id='sidebar_single'>

И сразу после нее вставляем код

 <b:if cond='data:blog.pageType == "item"'> <!-- Blog feed links -->
           <b:section class='postinfo' id='main2' showaddelement='no'>
<b:widget id='Blog2' locked='true' title='Ð¡Ð¾Ð¾Ð±Ñ�ÐµÐ½Ð¸Ñ� Ð±Ð»Ð¾Ð³Ð°' type='Blog'>
<b:includable id='nextprev'>

                       <div class='alignleft'>
                           <b:if cond='data:olderPageUrl'>
                             <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='"new_" + data:widget.instanceId + "_blog-pager-older-link"' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
                           </b:if>
                       </div>

                     
                       <!--
                       <b:if cond='data:blog.homepageUrl != data:blog.url'>
                         <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
                         <b:else/>
                         <b:if cond='data:newerPageUrl'>
                           <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
                         </b:if>
                       </b:if>
                       -->
                       <div class='alignright'>
                           <b:if cond='data:newerPageUrl'>
                               <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='"new_" + data:widget.instanceId + "_blog-pager-newer-link"' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
                           </b:if>
                       </div>
                 
                       <div class='clear-block'/>


               </b:includable>
<b:includable id='backlinks' var='post'>
                   <p>
                   <br/>
                   <!--
                   <h3>
                   <a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='"new_" + data:widget.instanceId + "_backlinks-create-link"' target='_blank'><data:post.createLinkLabel/></a>
             
                   </h3>
                   -->
                   </p>
                   <b:if cond='data:post.numBacklinks != 0'>
                       <dl class='comments-block' id='comments-block'>
                         <b:loop values='data:post.backlinks' var='backlink'>
                           <div class='collapsed-backlink backlink-control'>
                             <dt class='comment-title'>
                               <span class='backlink-toggle-zippy'>&#160;</span>
                               <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
                               <b:include data='backlink' name='backlinkDeleteIcon'/>
                             </dt>
                             <dd class='comment-body collapseable'>
                               <data:backlink.snippet/>
                             </dd>
                             <dd class='comment-footer collapseable'>
                               <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
                               <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
                             </dd>
                           </div>
                         </b:loop>
                       </dl>
                     </b:if>
               </b:includable>
<b:includable id='post' var='post'>
               <span class='viewing'>You are viewing &quot;<data:post.title/>&quot;</span><br/>
               <span class='comment'>
                   <b:if cond='data:post.numComments == 0'>
                       No Comment
                   <b:else/>
                       <b:if cond='data:post.numComments == 1'>
                           1 <data:top.commentLabel/>
                       <b:else/>
                           <data:post.numComments/> <data:top.commentLabelPlural/>
                       </b:if>
                   </b:if>  
                    <a href='#commentform'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Add your own!</a></a>                  
               </span><br/>
               <span class='tag'>Filed under
                   <b:if cond='data:post.labels'>
                     <data:postLabelsLabel/>
                     <b:loop values='data:post.labels' var='label'>
                       <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
                     </b:loop>
                   </b:if>
               </span><br/>
               <span class='calendar'>Posted on <data:post.timestamp/></span><br/>

               <!-- Replace the RSS Feed URL below, or just remove this single line below -->
               <span class='rss'>Subscribe through <a expr:href='data:blog.homepageUrl + "feeds/" + data:post.id + "/comments/default"'>Atom feed.</a></span><br/>
               </b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
                     <span expr:class='"item-control " + data:comment.adminClass'>
                       <a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
                         <span class='delete-comment-icon'>&#160;</span>
                       </a>
                     </span>
               </b:includable>
<b:includable id='feedLinks'>
                     <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links -->
                       <b:if cond='data:feedLinks'>
                         <div class='blog-feeds'>
                           <b:include data='feedLinks' name='feedLinksBody'/>
                         </div>
                       </b:if>

                       <b:else/> <!--Post feed links -->
                       <div class='post-feeds'>
                         <b:loop values='data:posts' var='post'>
                           <b:if cond='data:post.allowComments'>
                             <b:if cond='data:post.feedLinks'>
                               <b:include data='post.feedLinks' name='feedLinksBody'/>
                             </b:if>
                           </b:if>
                         </b:loop>
                       </div>
                     </b:if>
               </b:includable>
<b:includable id='status-message'>
                     <b:if cond='data:navMessage'>
                     <div class='status-msg-wrap'>
                       <div class='status-msg-body'>
                         <data:navMessage/>
                       </div>
                       <div class='status-msg-border'>
                         <div class='status-msg-bg'>
                           <div class='status-msg-hidden'><data:navMessage/></div>
                         </div>
                       </div>
                     </div>
                     <div style='clear: both;'/>
                     </b:if>
               </b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
                     <span expr:class='"item-control " + data:backlink.adminClass'>
                       <a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
                         <span class='delete-comment-icon'>&#160;</span>
                       </a>
                     </span>
               </b:includable>
<b:includable id='feedLinksBody' var='links'>
                     <div class='feed-links'>
                     <data:feedLinksMsg/>
                     <b:loop values='data:links' var='f'>
                        <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
                     </b:loop>
                     </div>
               </b:includable>
<b:includable id='postQuickEdit' var='post'>
                     <b:if cond='data:post.editUrl'>
                       <span expr:class='"item-control " + data:post.adminClass'>
                         <a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
                           <span class='quick-edit-icon'>&#160;</span>
                         </a>
                       </span>
                     </b:if>
               </b:includable>
<b:includable id='comments' var='post'>

                     <div id='comments'>
                       <a name='comments'/>
                       <b:if cond='data:post.allowComments'>
                       <div class='ann'>
                           This Post has
                           <b:if cond='data:post.numComments == 0'>
                             No Comment
                           <b:else/>
                               <b:if cond='data:post.numComments == 1'>
                                   1 Comment
                               <b:else/>
                                   <data:post.numComments/> Comments
                               </b:if>
                           </b:if>
                     
                             <a href='#commentform'><a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Add your own!</a></a>
                       </div>
                 
                       <div class='commentlist'>
                           <b:loop values='data:post.comments' var='comment'>
                               <a expr:name='"comment-" + data:comment.id'/>
                               <div class='c_info'/>
                               <div class='eachcomment'>
                                   <div class='top-border'>
                                       <a name='comment-85'/>
                                       <b:if cond='data:comment.authorUrl'>
                                         <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
                                       <b:else/>
                                         <data:comment.author/>
                                       </b:if>
                                 
                                       - <data:comment.timestamp/>
                                   </div>
                                       <div class='tx'>
                                           <p><data:comment.body/></p>
                                       </div>
                               </div>
                           </b:loop>
                       </div>

                       <p class='comment-footer'>
                           <br/>
                           <h3>
                               <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
                           </h3>
                         </p>
                       </b:if>

                       <div id='backlinks-container'>
                       <div expr:id='data:widget.instanceId + "_backlinks-container"'>
                          <b:if cond='data:post.showBacklinks'>
                            <b:include data='post' name='backlinks'/>
                          </b:if>
                       </div>
                       </div>
                     </div>
               </b:includable>
<b:includable id='main' var='top'>
<b:if cond='data:blog.pageType == "item"'> <!-- Blog feed links -->
   <data:adStart/>
   <b:loop values='data:posts' var='post'>
     <b:include data='post' name='post'/>
   </b:loop>
   <data:adEnd/>
</b:if>
</b:includable>
</b:widget>
</b:section>
</b:if>

После этого ищем

 <head>

И сразу после нее вставляем

  <script languange='javascript' src='http://images.jackbook.googlepages.com/jackbookDOTCOM_changedate4.js'/>

Далее находим

]]></b:skin>

И перед ним вставляем

.postinfo{
background:#FFFFCC;
border-bottom:1px solid #FF9933;
padding:4px 10px;
border-top:1px solid #FF9933;
font-size:10px;
margin-bottom:20px;
margin-right:10px;



}

#sidebar2 .postinfo{
margin-right:15px;
}
.postinfo a{
color: #008000;
}
span.viewing{
padding:0 0  3px 1px;
line-height:15px;
}
span.tag{
background: url(http://akuhaus.googlepages.com/3columns-elegant-clean_tag.png) no-repeat top left;
padding:0 0  3px 19px;
line-height:17px;

}
span.comment{
background: url(http://akuhaus.googlepages.com/3columns-elegant-clean_comment.png) no-repeat top left;
padding:0 0  3px 19px;line-height:21px;
}
span.calendar{
background: url(http://akuhaus.googlepages.com/3columns-elegant-clean_calendar.png) no-repeat top left;
padding:1px 0  3px 19px;line-height:23px;
}
span.rss{
background: url(http://akuhaus.googlepages.com/3columns-elegant-clean_rss.png) no-repeat top left;
padding:1px 0  3px 19px;
line-height:21px;
}

Сохраняем и любуемся виджетом.

Вам мешает navbar? Давайте его уберем!

2008-02-11T10:36:00.000-08:00

Navbar это такая полоска-планка вверху каждого блога на blogspot, мне лично она не машает, но некоторых людей она раздражает, а некоторые, поставив шаблон, не знают как ее включить, так что я напишу как ее убрать или добавить.

Шаблоны->Изменить HTML, ->Расширить щаблоны виджетов

Вбейте в поиск слово navbar

Деактивировать navbar в blogspot
Включить navbar


#navbar-iframe {display:none;}

{display:none;} Означает выключен, если хотите включить, вместо #navbar-iframe
{display:none;} поставте #navbar-iframe {height:40px; display:yes}