Виджет случайных сообщений

Привет, дорогие мои друзья! Давненько я здесь не появлялся с новыми предложениями для Вас. Времени совершенно не хватает. Занимаюсь новыми проектами. Купил домены, хостинг (совсем не дорого) и создал свои блоги на движке WordPress. Знаете, отличная вещь. Больше возможностей, а следовательно в ближайшей перспективе надеюсь на хорошие заработки (тьфу, тьфу, чтоб не сглазить). И вам советую сделать тоже самое. Если возникнет желание, напишите, помогу, расскажу где, что, когда и сколько. А теперь давайте перейдём к нашей основной теме.

Виджет случайных сообщений для вашего блога

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

Случайные сообщения.

Для того, что бы установить красивый виджет случайных сообщений в блог, зайдите в панель инструментов blogger, выберите шаблон - дизайн - добавить гаджет HTLM/JavaScript и в его поле вставить код:

<style scoped="" type="text/css"> #random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px} </style> <ul id='random-posts'> <script type='text/javaScript'> var rdp_numposts=5; var rdp_snippet_length=150; var rdp_info='no'; var rdp_comment='Комментарии'; var rdp_disable='Off комментарии'; var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum}; </script> <script type='text/javaScript'> function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"…";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0Go1CpfXI017QAKoHeuV6QsU7_ENEyo1KQBRwWLugMd9b8dhI_uVOFv4dnY_aU6T87MSPNNGTG-prSrB9Braj1cYnioqBCTJLDbssPvxyRAV_PxqZaRjWQF-pryQgdWuMQbRZ9gVD0h3d/"}}};document.write(' <li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div> <a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div> ');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"> </div> </li> ')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')}; </script> </ul>

Сохраните гаджет. Перетащите его в нужное вам место на боковой панели. В коде можете настроить различный цвет. : 5, - указать количество вывода сообщений и т.д.
Добавлю ещё один виджет - Случайные сообщения без миниатюр
Выберите гаджет HTLM/JavaScript и в его поле вставить код: <script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=5;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('<ul>'); 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 = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li> "; document.write(item);}} }document.write('</ul> ');} </script> <script src="http://demo-school-blogger.blogspot.ru/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"> </div>

Замените адрес блога http://demo-school-blogger.blogspot.ru на свой. 

источник

Виджет последние статьи с анимацией для Blogger

Привет всем! Представляю Вам виджет для Blogger: последние статьи (сообщения) с анимацией. Виджет с большим выбором опций. Скриншот виджета  Вы видите, если есть желание посмотреть в живую, пожалуйста сюда.

Теперь давайте установим виджет последние сообщения с анимацией в блог.

Вам нужно сделать следующее. Перейти в Blogger. Выбрать дизайн блога. Затем нужно - добавить гаджет HTML / JavaScript, а затем скопируйте представленный код и вставьте его в поле гаджета. Гаджету не давать название.

Вот код виджета:

<style type="text/css"> div.spy-outer { border:2px solid white; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); margin:0px auto; } div.spy-outer h2 { margin:0px 0px; padding:5px 10px; background-color:#646464; background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D); background-image:linear-gradient(top, #8B8B8B, #3D3D3D); color:white; font:bold 12px Arial,Sans-Serif; text-transform:none; text-shadow:0px 1px 2px black; } ul.spy { margin:0px 0px; padding:0px 0px; font:normal 10px/12px Arial,Sans-Serif; color:#353535; overflow:hidden; } ul.spy li { list-style:none; text-align:left; margin:0px 0px; padding:5px 7px; background-color:#9E9E9E; background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7); background-image:linear-gradient(top, #B1B1B1, #F7F7F7); border-top:1px solid #4E4E4E; border-bottom:1px solid #FFFFFF; word-wrap:break-word; overflow:hidden; } ul.spy a {text-decoration:none;} ul.spy li em { font-weight:bold; color:#0B5D94; } ul.spy a.header { font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif; display:block; color:#C00000; text-shadow:0px 1px 0px rgba(0,0,0,0.2); } ul.spy a.header:hover { color:#0556CF; text-decoration:underline; } ul.spy li .summ { margin-top:5px; overflow:hidden; } ul.spy li .imgwrap, ul.spy li img { float:right; margin:0px 0px 2px 7px; width:72px; height:72px; border:4px solid #E6E6E6; background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%; padding:0px; } ul.spy li .imgwrap { -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7); -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7); box-shadow:0px 0px 2px rgba(0,0,0,0.7); } ul.spy li img { border:none !important; float:none; margin:0px 0px; padding:0px 0px; display:none; } </style> <script type='text/javascript'> var <span style="color: #990000;">spyTitle = "Последние статьи блога"</span>, <span style="color: #990000;">numposts = 7</span>, numchars = 127, komentar = "Комментарии", pBlank = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg", modeID = true, showSummaries = true, openNewTab = false, showPostDate = true, showComment = true, showThumbnails = true, animatedRecentPost = true, limitspy = 4, intervalspy = 4000,<span style="color: #990000;"> tickspeed = 1000;</span> </script> <script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script> <script src="<span style="color: #990000;">http://forbloggerhelp.blogspot.ru</span>/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>

Далее меняем http://forbloggerhelp.blogspot.ru на свой адрес блога. numposts = 7- указать сколько последних постов Вы хотите, что бы выводил виджет. spyTitle = "Последние статьи блога"- напишите свой текст. tickspeed = 1000; - скорость прокрутки. Многое сможете настроить сами.

Сохраните гаджет и переместите его в нужное Вам место на боковой панели. Вот вроде всё. Всем пока. До новых встреч.

 Виджет взят за бугром -- mkr-site.blogspot.com

Гаджет событий для Blogger

Для информирования о событиях важных и не очень, интересных и не особо, общественных и частных, онлайновых и реальных, локальных и мировых существует гаджет Event (Событие) для Blogger. Подробности установки и настройки – далее по тексту.

Для установки гаджета «Событие» нужно перейти на вкладку Дизайн и щелкнуть ссылку «Добавить гаджет». Скрывается он в группе Избранные (featured), либо можно добавить гаджет по его URLиспользуя пункт Добавьте свой собственный (add your own).
http://www.google.com/ig/modules/calendar/socialevent/bloggerevent.xml

Какую бы последовательность ты не избрал, это должно привести тебя к окну настройки гаджета Event:



Здесь тебе предстоит ввести Заголовок (Title) и Описание (Description) события, указать дату и время начала и окончания, Местоположение(Location) и Адрес явочной квартиры. Время указывается как во всех нормальных странах – в 24-часовом формате, дата задается в виде: ГГГГ-ММ-ДД. И не делай заголовок и описание слишком длинными, а то получишь ошибку 414: Request-URI Too Large.

Гаджет позволяет твоим читателям присоединиться к событию, а также видеть кто из их друзей, использующих FriendConnect тоже заявил об участии. В дополнение, любой имеющий аккаунт в Google Calendar может поместить данное событие в свое расписание в календаре Google.



Так же ты можешь разместить несколько событий в блоге и, задав им разные заголовки или ID, отслеживать присоединившихся к каждому «ивенту» в отдельности.

Виджет объявления для Blogger

Полезный виджет для Вашего блога. Виджет можно использовать для показа заголовков ваших объявлений, последних обновлений вашего блога или ссылки на ваши лучшие статьи. Возможностей много. Текст с прокруткой, при наведении курсора мыши он останавливается. Можно настроить цвет, скорость показа, размер шрифта, использовать свою картинку, установить ширину виджета.

Перейдите Дизайн. Выберите HTML/JavaScript гаджет. Вставьте в его поле следующий длинный код: <style type="text/css"> /*Example CSS for the two demo scrollers*/ #pscroller2{ background:url(https://lh3.googleusercontent.com/-j_Gl9nMOfYM/TuGZtu3yIbI/AAAAAAAACpo/Zc3qQ2y63V8/s30/upda%25D1%2582.png) no-repeat top left; width: 430px; height: 20px; border: 1px solid #ddd; padding: 3px 3px 3px 40px; margin:10px 0; } #pscroller2 a{ text-decoration: none; color:#0080ff; } #pscroller2 a:hover{ text-decoration: underline; } .someclass{ } </style> <script type="text/javascript"> /*Example message arrays for the two demo scrollers*/ var pausecontent2=new Array() pausecontent2[0]='<a href="#">Ваш текст здесь</a>' pausecontent2[1]='<a href="#">Ваш текст здесь</a>' pausecontent2[2]='<a href="#">Ваш текст здесь</a>' pausecontent2[3]='<a href="#">Ваш текст здесь</a>' </script> <script type="text/javascript"> function pausescroller(content, divId, divClass, delay){ this.content=content //message array content this.tickerid=divId //ID of ticker div to display information this.delay=delay //Delay between msg change, in miliseconds. this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over scroller (and pause it if it is) this.hiddendivpointer=1 //index of message array for hidden div document.write('<div id="'+divId+'" class="'+divClass+'" style="position: relative; overflow: hidden"> <div class="innerDiv" style="position: absolute; width: 100%" id="'+divId+'1"> '+content[0]+'</div> <div class="innerDiv" style="position: absolute; width: 100%; visibility: hidden" id="'+divId+'2"> '+content[1]+'</div> </div> ') var scrollerinstance=this if (window.addEventListener) //run onload in DOM2 browsers window.addEventListener("load", function(){scrollerinstance.initialize()}, false) else if (window.attachEvent) //run onload in IE5.5+ window.attachEvent("onload", function(){scrollerinstance.initialize()}) else if (document.getElementById) //if legacy DOM browsers, just start scroller after 0.5 sec setTimeout(function(){scrollerinstance.initialize()}, 500) } // ------------------------------------------------------------------- // initialize()- Initialize scroller method. // -Get div objects, set initial positions, start up down animation // ------------------------------------------------------------------- pausescroller.prototype.initialize=function(){ this.tickerdiv=document.getElementById(this.tickerid) this.visiblediv=document.getElementById(this.tickerid+"1") this.hiddendiv=document.getElementById(this.tickerid+"2") this.visibledivtop=parseInt(pausescroller.getCSSpadding(this.tickerdiv)) //set width of inner DIVs to outer DIV's width minus padding (padding assumed to be top padding x 2) this.visiblediv.style.width=this.hiddendiv.style.width=this.tickerdiv.offsetWidth-(this.visibledivtop*2)+"px" this.getinline(this.visiblediv, this.hiddendiv) this.hiddendiv.style.visibility="visible" var scrollerinstance=this document.getElementById(this.tickerid).onmouseover=function(){scrollerinstance.mouseoverBol=1} document.getElementById(this.tickerid).onmouseout=function(){scrollerinstance.mouseoverBol=0} if (window.attachEvent) //Clean up loose references in IE window.attachEvent("onunload", function(){scrollerinstance.tickerdiv.onmouseover=scrollerinstance.tickerdiv.onmouseout=null}) setTimeout(function(){scrollerinstance.animateup()}, this.delay) } // ------------------------------------------------------------------- // animateup()- Move the two inner divs of the scroller up and in sync // ------------------------------------------------------------------- pausescroller.prototype.animateup=function(){ var scrollerinstance=this if (parseInt(this.hiddendiv.style.top)>(this.visibledivtop+5)){ this.visiblediv.style.top=parseInt(this.visiblediv.style.top)-5+"px" this.hiddendiv.style.top=parseInt(this.hiddendiv.style.top)-5+"px" setTimeout(function(){scrollerinstance.animateup()}, 50) } else{ this.getinline(this.hiddendiv, this.visiblediv) this.swapdivs() setTimeout(function(){scrollerinstance.setmessage()}, this.delay) } } // ------------------------------------------------------------------- // swapdivs()- Swap between which is the visible and which is the hidden div // ------------------------------------------------------------------- pausescroller.prototype.swapdivs=function(){ var tempcontainer=this.visiblediv this.visiblediv=this.hiddendiv this.hiddendiv=tempcontainer } pausescroller.prototype.getinline=function(div1, div2){ div1.style.top=this.visibledivtop+"px" div2.style.top=Math.max(div1.parentNode.offsetHeight, div1.offsetHeight)+"px" } // ------------------------------------------------------------------- // setmessage()- Populate the hidden div with the next message before it's visible // ------------------------------------------------------------------- pausescroller.prototype.setmessage=function(){ var scrollerinstance=this if (this.mouseoverBol==1) //if mouse is currently over scoller, do nothing (pause it) setTimeout(function(){scrollerinstance.setmessage()}, 100) else{ var i=this.hiddendivpointer var ceiling=this.content.length this.hiddendivpointer=(i+1>ceiling-1)? 0 : i+1 this.hiddendiv.innerHTML=this.content[this.hiddendivpointer] this.animateup() } } pausescroller.getCSSpadding=function(tickerobj){ //get CSS padding value, if any if (tickerobj.currentStyle) return tickerobj.currentStyle["paddingTop"] else if (window.getComputedStyle) //if DOM2 return window.getComputedStyle(tickerobj, "").getPropertyValue("padding-top") else return 0 } </script> <script type="text/javascript"> //new pausescroller(name_of_message_array, CSS_ID, CSS_classname, pause_in_miliseconds) new pausescroller(pausecontent2, "pscroller2", "someclass", 1000) </script>
Теперь настройки: width: 430px;--ширина виджета.color:#0080ff;--цвет выводимого текста. Можно подобрать генератором цвета.

#--замените на Ваш URL адрес ссылки. Ваш текст здесь--замените на название заголовка объявления. 1000--Изменить время задержки прокрутки. Чем меньше это значение, тем быстрее будут меняться заголовки. Теперь можно сохранить гаджет и переместить в нужное для Вас место.

источник

Похожие статьи для Blogger

По запросам «похожие статьи blogger«, «похожие посты blogger«, «похожие сообщения blogger» Яндекс не особо порадовал выдачей. Есть кое-какие скрипты, которыми пользуется большинство, но меня они не особо устроили. Потому, порыв блогосферу, наткнулся на замечательного товарища — Doctor VU, который у себя в жж выложил модифицированный скрипт «Ссылки на похожие сообщения для Blogger«. Его и установил. Схожесть ссылки определяется только её принадлежностью к метке.

Плюсы скрипта:
1. Отсутствие ссылок на сторонние ресурсы;
2. Возможность исключать из выдачи метки, не имеющие ни одной ссылки;
3. Возможность переименовывать метки в выдаче и объединять разные метки под одним названием;
4. Возможность отдельно указать, какие метки следует всегда исключать из выдачи;
5. Возможность встроить название метки в заголовок;
6. Возможность указать заголовок, который отображается, когда нет ни единой релевантной ссылки;
7. Простота настройки.

Установка скрипта «Похожие статьи»:
1. Заходим в панель управления блогом и переходим на вкладку «Изменить HTML». Ставим галочку напротив «Расширить шаблоны виджета».
2. Находим строчку <data:post.body/> и вставляем после неё следующий код:

<b:if cond=’data:blog.pageType == "item"’> <div class=’similiar’> <div class=’widget-content’> <br/> <div id=’data2007840981’/> <div id=’data2007840980’/> <br/> <script type=’text/javascript’> var headerN = «Похожие статьи:»; /* Заголовок виджета, когда в нём отображается более чем одна метка. */ var header1 = «Еще статьи из категории \»__LABEL__\»:»; /* Заголовок виджета, когда в нём отображается одна метка. Если в заголовке есть слово __LABEL__, то вместо него будет подставлено имя метки. */ var header0 = «»; /* Текст, выводимый, если нет ни одной метки и ссылки. */ var homeUrl3 = "<data:blog.homepageUrl/>"; /* Адрес блога, откуда берём список постов. */ var maxNumberOfPostsPerLabel = 5; /* Максимальное число постов, отображаемых для каждой метки. */ var maxNumberOfLabels = 4; /* Максимальное число отображаемых меток. */ var excludeEmptyLabels = true; /* Скрывать ли метки, для которых нет подходящих постов. true — скрывать, false — отображать. */ var excludeLabels = []; /* Метки, которые не следует отображать. */ /* Смена отображаемых имён. Здесь перечисляем соответствия реального имени метки и названия, которое будет показано на странице. Если для двух меток указать одно название, они при отображении склеятся в одну метку. Если метка здесь не перечисляется, то отображается под своим настоящим названием. */ var renameLabels = {}; function is_in(item, array) { for (k in array) if (array[k] == item) return true; return false; } function label_title(label) { if (renameLabels[label]) return renameLabels[label]; return label; } totalLabels = 0; receivedReplies = 0; var receivedItems = []; var k_label; function labelReceived() { receivedReplies++; if (receivedReplies != totalLabels) return; var labelCount = 0; for (k_label in receivedItems) { var items = receivedItems[k_label]; if (items.length == 0 && excludeEmptyLabels) continue; labelCount++; } var labelCount1 = 0; for (k_label in receivedItems) { var items = receivedItems[k_label]; if (items.length == 0 && excludeEmptyLabels) continue; var ul = document.createElement('ul'); var itemsCount = 0; for (var k_item in items) { item = items[k_item]; var li = document.createElement('li'); var a = document.createElement('a'); a.href = item.href; var txt = document.createTextNode(item.title); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); itemsCount++; if (itemsCount == maxNumberOfPostsPerLabel) break; } var txt = document.createTextNode(k_label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); if (!(labelCount == 1 && header1.search && header1.search(/(LABEL)/) != -1)) div1.appendChild(h); div1.appendChild(ul); document.getElementById('data2007840980').appendChild(div1); labelCount1++; if (labelCount1 == maxNumberOfLabels) break; } var txt; if (labelCount == 1 && header1) txt = document.createTextNode(header1.replace(«__LABEL__», k_label)); else if (labelCount) txt = document.createTextNode(headerN); else if (header0) txt = document.createTextNode(headerN); if (txt) { var h = document.createElement(«h4»); h.appendChild(txt); document.getElementById('data2007840981').appendChild(h); } } function receiveReply_123(json) { var label = «»; 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(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); label = decodeURI(label); break; } } var labelTitle = label_title(label); if (typeof receivedItems[labelTitle] != «object») receivedItems[labelTitle] = []; for (var k in json.feed.entry) { var entry = json.feed.entry[k]; var href = «»; for (var kl in entry.link) { if (entry.link[kl].rel == «alternate») { href = entry.link[kl].href; break; } } if(href != «» && href != location.href) { var item = { «href» : href, «title» : entry.title.$t}; receivedItems[labelTitle].push(item); } } labelReceived(); } function sendQueryForLabel(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=receiveReply_123'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var parsedlabels = []; var labelsCount = 0; function list_items(textLabel) { if (labelsCount >= maxNumberOfLabels || is_in(textLabel, excludeLabels) || is_in(textLabel, parsedlabels)) { labelReceived(); return; } labelsCount++; parsedlabels.push(textLabel); sendQueryForLabel(homeUrl3, textLabel); } <b:loop values=’data:posts’ var=’post’> <b:loop values=’data:post.labels’ var=’label’> totalLabels++; </b:loop> </b:loop> <b:loop values=’data:posts’ var=’post’> <b:loop values=’data:post.labels’ var=’label’> list_items("<data:label.name/>"); </b:loop> </b:loop> </script> </div> </div> </b:if>

3. Изменяем настройки виджета на свой вкус.
4. Пользуемся!

Если вам необходимы какие-то особые возможности, которые данный код предоставить не в состоянии, вы можете обратиться за помощью, посетив ЖЖ автора скрипта.

источник

Виджет похожие сообщения без миниатюр для Blogger

Для лучшей навигации и поиска необходимой информации, применяется виджет похожие сообщения без миниатюр для Blogger. С помощью ссылок похожие сообщения которые обычно размещаются под статьёй обеспечивается внутренняя перелинковка повышающая статический вес страниц, применение виджета похожие статьи без миниатюр для Blogger необходимо, в целях обеспечения удобной навигации, и SEO оптимизации Blogger.
Скрипт похожие сообщения без миниатюр выводит заголовки статей связанные общими ярлыками. В похожей статье я описал, как установить виджет похожие сообщения с миниатюрами для Blogger

Рассмотрим установку виджета похожие сообщения без миниатюр.

Перейдём в Шаблон - Изменить HTML.
Отмечаем галочкой “Расширить шаблоны виджетов”
С помощью поиска (Ctrl+F) находим строку:

 </head>

и прямо над ней вставляем код:

<!--Related Posts Scripts and Styles Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts .widget{ padding-left:6px; margin-bottom:10px; } #related-posts .widget h2, #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:blue; } #related-posts a:hover{ color:blue; } #related-posts ul{ list-style-type:none; margin:0 0 0px 0; padding:0px; text-decoration:bold; font-size:15px; text-color:#000000 } #related-posts ul li{ background:transparent url(https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png) no-repeat ; display:block; list-style-type:none; margin-bottom: 13px; padding-left: 30px; padding-top:0px;} </style> <script type='text/javascript'> var relatedpoststitle="Похожие сообщения:"; </script> <script src='http://slivsol-pc-user.googlecode.com/files/related-posts.js' type='text/javascript'/> <!--Remove--></b:if> <!--Related Posts Scripts and Styles End-->

Эта ссылка ведёт на изображение в виде зелёной галочки перед заголовком сообщения: https://lh6.googleusercontent.com/-2JWL1R0i0i0/TxsH-tOc_lI/AAAAAAAAENs/pgk0U-IDGsE/w10/green.png его вы можете заменить на своё или полностью удалить выделенную строчку если не хотите, чтобы изображение присутствовало.В этой строке var relatedpoststitle="Похожие сообщения:"; вы можете поменять название заголовока виджета.

Дальше находим строку:

<div class='post-footer-line post-footer-line-1'>

если такой нет, то такую:

<p class='post-footer-line post-footer-line-1'> 

и сразу под строкой вставляем этот код (код не содержит скрытых сторонних ссылок) :

<!-- Related Posts Code Start--> <!--Remove--><b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=7"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=7; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script> </div> <!--Remove--></b:if> <!-- Related Posts Code End -->

В строках:

var maxresults=

и
max-results=

можно настроить количество выводимых ссылок на похожие сообщения без миниатюр.

Если вы хотите, чтобы виджет выводился не только в конце каждой статьи, но и на главной странице тоже, то  удалите из кода все эти строки:
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>

<!-- remove --></b:if>Если возникнут вопросы по более детальной настройке виджета похожие сообщения без миниатюр для Blogger, спрашивайте в комментариях.

источник

Как в Blogger добавить похожие статьи для каждого сообщение

Сегодня мы научимся добавлению очень полезного виджета ⇨"похожие статьи" для каждого сообщения, на основании ярлыков.Это очень нужный виджет, после каждого вашего поста посетитель будет наблюдать ваши похожие записи с миниатюрами.

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

Как добавить "похожие сообщения" на блог

1. Сначала заходим в панель управления blogger. Выбираем вкладку"Шаблон ⇨ Изменить HTML". Далее с помощью сочетаний клавиш (Ctrl+F),  находим строку в вашем шаблоне </head> и прямо над ней вставляем код:

<!--Related Posts with thumbnails Scripts and Styles Start--> <b:if cond='data:blog.pageType == "item"'> <style type="text/css"> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 1.6em; font-weight: bold; color: black; font-family: Georgia, “Times New Roman”, Times, serif; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ color:black; } #related-posts a:hover{ color:black; } #related-posts a:hover { background-color:#d4eaf2; } </style> <script src='http://dl.dropbox.com/u/48089857/relatedthumbs19.js' type='text/javascript'/> </b:if> <!--Related Posts with thumbnails Scripts and Styles End-->

2. Теперь ищем одну из этих строчек <div class='post-footer-line post-footer-line-1'> 
Если вдруг не найдёте, то  <p class='post-footer-line post-footer-line-1'> 

Если уж вдруг нет никакой из эти строчек, то находим <data:post.body/>

Далее сразу после любой из этих строчек вставляем этот код:

<!-- Related Posts with Thumbnails Code Start--> <b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='#' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='#' style='display:none;'>blogger widgets</a> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=5; var relatedpoststitle="Похожие сообщения"; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script> </div> <div style='clear:both'/> </b:if> <!-- Related Posts with Thumbnails Code End-->

источник

Добавляем гаджет над заголовком в Blogger(Blogspot)

Иногда возникает необходимость разместить гаджет над шапкой блога на Blogger. Добавить на это место рекламу или меню, а может что еще. И как оказалось, чтобы сделать это, никаких особых усилий прилагать не нужно. Необходимо только чуть подкорректировать HTML код шаблона, а точнее , изменить уже существующие значения...  Итак, открываем "Дизайн" - "Изменить HTML" и находим там с вот такую строку кода :

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

  Полностью она выглядит так: 

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id="Header1" locked="false" title="Название вашего блога (заголовок)" type="Header">
</b:widget></b:section>

  Но чтобы иметь возможность добавлять гаджеты над секцией с заголовком, необходимо изменить значение некоторых параметров:
- maxwidgets - это количество гаджетов которое вы хотите разместить, цифра указывает сколько максимально можно расположить виджетов в этой секции, например: 1, 2, 3 и т.д. Если ни указано ничего, количество не ограничено. Нам необходимо поменять "1" на любое нужное число.
- showaddelement - параметр, который делает видимым поле для добавления виджета - "Добавить гаджет". Изменяем no на yes

  Так будет выглядеть итоговый вариант:

<b:section class="header" id="header" maxwidgets="3" showaddelement="yes">
...

  Теперь легким движением руки и курсора перетягиваем гаджет в поле над шапкой. Там можно разместить дополнительное меню или рекламный баннер, а может и флеш-презентацию тут уж кто на что горазд :)

Размещение гаджета над шапкой

  Вот и все. Буду рад вашим комментариям.

источник

Похожие статьи для Blogger с миниатюрами

Приветствую вас, бесценный мой читатель! Сегодня хочу предложить вашему вниманию ещё один виджет - похожие статьи для Blogger с миниатюрами. Данный виджет отличается от предыдущих (смотрите здесь и тут), тем, что отображаются похожие сообщения не только с эскизами изображений, заголовком поста, но и анонсом записи. Да, ещё есть эффект вращения миниатюры при наведение на неё курсором мыши, а также, есть два стиля виджета - для тёмного блога и светлого. Будет из чего выбирать.
Вот, как то так.

Как установить похожие статьи для Blogger с миниатюрами и анонсом поста в блог

Похожие статьи для Blogger с миниатюрами и анонсом поста. Светлый стиль.

Скриншот светлого стиля, правда симпатично и стильно смотрится виджет связанных сообщений. И так, кто хочет установить похожие сообщения после каждой записи вашего блога следуйте этой инструкции. Только не пугайтесь, будет побольше шагов для установки этого стильного гаджета. К делу.Найдите в шаблоне вашего блога, при помощи сочетания клавиш Ctrl+F строчку </head>:

Тег в Blogger

Чуть выше данного тега вставить такой код:

&lt;script type='text/javascript'&gt;//&lt;![CDATA[var relatedTitles = new Array();var relatedUrls = new Array();var relatedpSummary = new Array();var relatedThumb = new Array();var relatedTitlesNum = 0;var relatedPostsNum = 4; // number of entries to be shownvar relatedmaxnum = 75; // the number of characters of summaryvar relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj11mnjJ56uSJlHUT74SP_C7MpUESqOSONVgSuuzNJC4i0c8BEF8xY9B52Yvh6QOTka3XkP-KsmvfNa5T9r38MntqFEMRKooKVmvq-c1yc5hFdovowxFHQYPQ0Rd8YQ9OcAX66kf-I4Q2Q5/s1600/no_image.jpg"; // default picture for entries with no image//]]&gt;&lt;/script&gt;&lt;script src="http://makingdifferent.github.io/blogger-widgets/related-posts-with-thumbs-and-summaries.js" /&gt;

Здесь, в этом коде вы сразу можете настроить - сколько выводить похожих записей, по умолчанию 4, а также, установить количество символов сниппета (анонса), по умолчанию 75. Идем далее, для светлого стиля виджета (смотрите скрин) нужно установить CSS, чуть выше всё того же тега </head> такой код:

 <style>
.relatedsumposts {
float: left;
padding: 0px 10px;
overflow: hidden;
text-align: center;
/* width and height of the related posts area */
width: 120px;
height: 200px;
border-right: 1px solid #E5E5E5;
display: inline-block;
}
.relatedsumposts:hover {
background-color: #F7F7F7;
}
.relatedsumposts img:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
.relatedsumposts a {
/* link properties */
color: #linkcolor;
display: inline;
font-size: 10px;
line-height: 1;
}
.relatedsumposts img {
/* thumbnail properties */
margin-top: 2px;
height: 82px;
padding: 5px;
width: 82px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow: hidden;
}
.relatedsumposts h6 {
/* title properties */
display: table-cell;
height: 3em;
margin: 5px 0 0;
overflow: hidden;
padding-bottom: 2px;
vertical-align: middle;
width: 130px;
}
.relatedsumposts p {
/* summary properties */
border-top: 1px solid #E5E5E5;
border-bottom: 1px solid #E5E5E5;
color: #summarycolor;
font-size: 10px;
height: 4em;
line-height: 1;
margin: 5px 0 0;
overflow: hidden;
padding: 5px 0 15px 0;
text-align: left;
}
#relatedpostssum {
background: #F3F3F3;
height: 200px; /* related posts container */
padding: 5px;
width: 100%;
}
.relatedpoststitle {
font-size: 19px;
font-weight: bold;
border-top: 3px solid #FB8227;
color: #777;
display: inline-block;
padding: 5px 10px;
width: 190px;
float: left;
margin: 0px -200px 0px 20px;
transform: rotate(90deg);
transform-origin: left top 0;
-ms-transform: rotate(90deg);
-ms-transform-origin:left top 0;
-webkit-transform: rotate(90deg);
-webkit-transform-origin:left top 0;
font-family: Gill Sans / Gill Sans MT, sans-serif;
}
</style>

 А если вам нужен такой стиль:

Темный стиль виджета похожих статей для Blogger

Тогда вам нужно вставить такой код CSS:

<style>.relatedsumposts {float: left;padding: 0px 10px;overflow: hidden;text-align: center;/* width and height of the related posts area */width: 120px;height: 200px;border-right: 1px solid #0A0A0A;display: inline-block;}.relatedsumposts:hover {background-color: #0A0A0A;}.relatedsumposts img:hover {-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-o-transform: rotate(360deg);}.relatedsumposts a {/* link properties */color: #linkcolor;display: inline;font-size: 10px;line-height: 1;}.relatedsumposts img {/* thumbnail properties */margin-top: 2px;height: 82px;padding: 5px;width: 82px;border: 1px solid #000;background:#282828;-webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);box-shadow: 0 1px 2px rgba(0, 0, 0, .4);-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;-o-transition-duration: 0.8s;transition-duration: 0.8s;-webkit-transition-property: -webkit-transform;-moz-transition-property: -moz-transform;-o-transition-property: -o-transform;transition-property: transform;overflow: hidden;}.relatedsumposts h6 {/* title properties */display: table-cell;height: 3em;margin: 5px 0 0;overflow: hidden;padding-bottom: 2px;vertical-align: middle;width: 130px;}.relatedsumposts p {/* summary properties */border-top: 1px solid #0A0A0A;border-bottom: 1px solid #0A0A0A;color: #summarycolor;font-size: 10px;height: 4em;line-height: 1;margin: 5px 0 0;overflow: hidden;padding: 5px 0 15px 0;text-align: left;}#relatedpostssum {background: #121212;height: 200px; /* related posts container */padding: 5px;width: 100%;}.relatedpoststitle {font-size: 19px;font-weight: bold;border-top: 3px solid #FB8227;color: #ccc;display: inline-block;padding: 5px 10px;width: 190px;float: left;margin: 0px -200px 0px 20px;transform: rotate(90deg);transform-origin: left top 0;-ms-transform: rotate(90deg);-ms-transform-origin:left top 0;-webkit-transform: rotate(90deg);-webkit-transform-origin:left top 0;font-family: Gill Sans / Gill Sans MT, sans-serif;}</style>

Обратите внимание, что стили для виджета можно вставить чуть выше строчки ]]></b:skin>, нужно лишь убрать из кода <style> ..</style>. Ещё в стилях можно изменить высоту и ширину виджета: 120 и 200 по умолчанию, а также, размер эскиза изображения 82. Поехали дальше, теперь вам нужно в шаблоне найти вот такой код:

<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
<b:if cond='data:label.isLast != &quot;true&quot;'>
,
</b:if>

Ищем нужный код в шаблоне

Далее, вам нужно чуть ниже добавить вот этот кодик, после </b:if>:

<b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/></b:if>

И в итоге у нас получится вот так:

<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/></b:if>

И последний шаг, ищем ещё одну строчку в вашем шаблоне:

</b:includable>
<b:includable id='postQuickEdit' var='post'>

И выше строки </b:includable> вставляем (смотрите скриншот):

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='post-footer-line post-footer-line-4'><div class='relatedpoststitle'>ПОХОЖИЕ СТАТЬИ</div><div id='relatedpostssum'><script type='text/javascript'>showrelated();</script></div><div style='clear:both;'/></div></b:if>

 Здесь, в коде можете написать свой текст вместо моего. Сохраняйте шаблон и готово. Вот как у меня:

Виджет - Похожие сообщения с миниатюрами

Вот вроде и всё. Надеюсь, инструкция моя будет всем ясна. Дамы и господа, кому, что то не понятно, не стесняемся спрашивать в комментариях, даже можно поблагодарить, я не гордый. А теперь, позвольте с вами попрощаться не надолго. До новых встреч. Пока, пока.

источник