Доброго времени суток, дамы и господа! Давненько я не баловал вас новенькими, полезными виджетами для Blogger. Сегодня будет довольно интересный гаджет - Blogger виджет слайдер случайных сообщений с вкладками для ярлыков. Как меню навигации, только устанавливается он после статьи блога. После нажатия на нужный ярлык, появятся список случайных статей. Вот как то так.
Выглядеть виджет случайных сообщений с вкладками по ярлыкам будет так (только скриншот, демо не будет):
Как установить виджет случайных сообщений в 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 указать Путин и так далее. Проделайте эти операции с каждой строкой, их семь. Вроде всё понятно объяснил, если что, пожалуйста спрашивайте в комментариях.
На этом позвольте с вами попрощаться, надеюсь не на долго. Удачи.
С уважением, Сергей
Сергей,очень красивый и функциональный виджет. Немного разнообразит блоги.
Моё мнение неудовлетворительное в плане виджетов, гаджетов и т.д. Не люблю мусорить на страницу и забочусь о работоспособности у пользователей, но всё же ради интереса (любопытство) попробовала…
И мне не понравилось.