Виджет слайдер-случайная запись по ярлыкам

Просмотров: 275

Widget-bloggerДоброго времени суток, дамы и господа! Давненько я не баловал вас новенькими, полезными виджетами для Blogger. Сегодня будет довольно интересный гаджет - Blogger виджет слайдер случайных сообщений с вкладками для ярлыков. Как меню навигации, только устанавливается он после статьи блога. После нажатия на нужный ярлык, появятся список случайных статей. Вот как то так.

Выглядеть виджет случайных сообщений с вкладками по ярлыкам будет так (только скриншот, демо не будет):

Widget-blogger-slajder
Виджет слайдер - случайная запись по ярлыкам

Как установить виджет случайных сообщений в Blogger

Для установки такого виджета вам нужно зайти Шаблон - Изменить HTML. Далее, с помощью сочетаний клавиш (Ctrl+F),  найдите  эту строку ]]></b:skin> и чуть выше её вставляем код стиля CSS:

/*****************************************
Name : Jquery Slider Random Post
Update : Senin, 16 September 2013
******************************************/
#bdrsslider h2 {
margin-top: -10px;
margin-bottom: 14px;
padding: 0;
border-bottom: solid #999 1px;
width:93%;/*lebar widget*/
font-family: Georgia, "Times New Roman", Times, serif;
color: #0099FF;
text-shadow: 1px 1px 1px #000;
}
#bdrsslider {
width: 580px;/*lebar widget*/
margin: 0 auto;
position: relative;
border:solid #666 1px;
}
#bdrsslider:hover {
box-shadow:0 0 5px #666;
}
.bdrsscroll {
height: 250px;
width: 580px;/*lebar widget*/
overflow: auto;
overflow-x: hidden;
position: relative;
clear: left;
background-color: #F3F3F3;
}
.bdrsroll div.panel {
padding: 20px;
height: 210px;
width: 580px;/*lebar widget*/
}
ul.bdnav {/*menu tabber*/
list-style: none;
margin: 0;
padding: 10px 0;
background-color: #333333;
border-bottom:solid #00CCFF 4px;
border-top:solid #00CCFF 4px;
}
ul.bdnav li {
display: inline;
margin-right: 10px;
}
ul.bdnav a {
padding: 11px;
color: #CCCCCC;
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
font-style: italic;
font-weight: bold;
}
ul.bdnav a:hover {
color: #CCCCCC;
text-shadow: 0 0 5px #FFFF00;
border-top:solid #FF0000 6px;
}
ul.bdnav a.selected {
background-color: #666666;
color: #FF0000;
text-shadow: 1px 0 2px #111;
border-top:solid #FF0000 6px;
}
ul.bdnav a:focus {
outline: none;
}
.BD_title {/*CSS Random Post*/
list-style-type: none;
width:93%;
padding: 3px;
margin-top:-10px;
}
.BD_title a {
color: #000000;
line-height:18px;
letter-spacing:0.1em;
text-decoration: none;
display:block;
padding:2px 6px 5px 22px;
background:transparent url(http://1.bp.blogspot.com/-LZRTi6LiSXc/UfOaqASxwSI/AAAAAAAABlU/TcibyuwSwJo/s1600/ico-rss.jpg) no-repeat 0 2px;
font-family: Georgia, "Times New Roman", Times, serif;
font-style: italic;
font-weight: bold;
font-size: 11px;
border-bottom: dotted #ccc 1px;
}
.BD_title a:hover {
color:#990000;
text-transform: none;
background:transparent url(http://1.bp.blogspot.com/-LZRTi6LiSXc/UfOaqASxwSI/AAAAAAAABlU/TcibyuwSwJo/s1600/ico-rss.jpg) no-repeat 0 2px;
background-color: #E4E4E4;
display: block;
padding-left:22px;
} /*** Blog Design CSS and ***/

Обратите внимание, здесь, в коде вы можете настроить цвета для данного виджета под ваш дизайн блога. Следующий наш шаг, это найти в шаблоне строчку </head> и чуть ниже вставить такой код:

<!--BLOG DESIGN script Jquery Flying Menu start -->
<script type="text/javascript" src="http://yourjavascript.com/1650568139/jquery-1-2-6.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1360340911/jquery-scrollto-1-3-3.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/6329101371/jquery-serialscroll-1-2-1.js"></script>
<script type="text/javascript" src="http://yourjavascript.com/1016319351/coda-slider.js"></script>
<!--BLOG DESIGN script Jquery Flying Menu End -->

Затем ищем одну из этих строчек: <data:post.body/><div class='post-footer-line post-footer-line-2'/> или <div class='post-footer-line post-footer-line-3'/> и чуть ниже найденной вставляем такой большой код:

<!--BLOG DESIGN code start-->
<div id="bdrsslider">
<ul class="bdnav">
<li><a href="#label1">Widget</a></li>
<li><a href="#label2">Menu</a></li>
<li><a href="#label3">Post</a></li>
<li><a href="#label4">Jquery</a></li>
<li><a href="#label5">CSS</a></li>
<li><a href="#label6">Tip's</a></li>
<li><a href="#label7">HTML</a></li>
</ul>
<div class="bdrsscroll">
<div class="bdrsroll">
<div class="panel" id="label1"><h2>Widget</h2><div class="BD_title"><script type="text/javascript">
var randarray = new Array();var l=0;var flag;
var numofpost=7;function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}document.write();
for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item ="<div>" + "<a href=" + entry.link[k].href + " title=" + entry.link[k].href +">" + entry.title.$t + "</a></div>";
document.write(item);}}
}document.write();}
</script>
<script src="здесь адрес вашего блога/feeds/posts/default/-/widget?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label2"><h2>Menu</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/menu?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label3"><h2>Post</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/post?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label4"><h2>jquery</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/jquery?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label5"><h2>seo</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/seo?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label6"><h2>Tip's</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
<div class="panel" id="label7"><h2>Html</h2><div class="BD_title"><script src="здесь адрес вашего блога/feeds/posts/default/-/trik pendukung?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script></div></div>
</div>
</div>
<!-- BLOG DESIGN code start -->

Почти всё. Осталось только поменять название вкладок в первых строчках кода (можно давать любое название). Чуть ниже в коде указать вместо <h2>Widget</h2> название вашей вкладки, "здесь адрес вашего блога" URL блога и в этой же строчке присвоить нужный ярлык для каждой вкладки например, вместо widget указать Путин и так далее. Проделайте эти операции с каждой строкой, их семь. Вроде всё понятно объяснил, если что, пожалуйста спрашивайте в комментариях.

На этом позвольте с вами попрощаться, надеюсь не на долго. Удачи.

 С уважением, Сергей 


2 комментария к “Виджет слайдер-случайная запись по ярлыкам”

  1. Сергей,очень красивый и функциональный виджет. Немного разнообразит блоги.

    Ответить
  2. Моё мнение неудовлетворительное в плане виджетов, гаджетов и т.д. Не люблю мусорить на страницу и забочусь о работоспособности у пользователей, но всё же ради интереса (любопытство) попробовала…
    И мне не понравилось.

    Ответить

Оставьте комментарий