Приветствую вас, дорогой читатель! Сегодня я представлю вам набор полезных виджетов для вашего блога. Widget для Blogger - Элемент интерфейса - примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия. Слово «виджет» также используется и как название класса вспомогательных мини-программ - графических модулей, которые размещаются в рабочем пространстве соответствующей родительской программы и служат для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. Спасибо wikipedia, за разъяснение.
Виджет случайных сообщений для Blogger
Этот виджет выводит сообщения в случайном порядке на боковой панели блога. Каждый раз при обновление браузера, Вы не сможете угадать какие посты на этот раз покажет данный виджет. Очень полезный виджет для блога, выведет и покажет вашим посетителям более старые сообщения, про которые Вы наверняка и сами забыли. Это увеличит просмотры ваших статей и задержит на неопределенное время читателей на блоге. Вот как то так.
Для установки виджета случайных сообщений в блог, зайдите в панель управления Blogger - Дизайн и на боковой панели нажмите добавить гаджет HTML/JavaScript и в его поле вставьте код:
<style scoped="" type="text/css"> ul.rdmrcpostag{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul.rdmrcpostag,ul.rdmrcpostag li{margin:0;padding:0;list-style:none;overflow:hidden} ul.rdmrcpostag{background:aliceBlue} ul.rdmrcpostag li{padding:5px} ul.rdmrcpostag b a{color:#00699B} ul.rdmrcpostag .thumbp{float:left;margin:0 5px 3px 0} ul.rdmrcpostag img{padding:3px;border:1px solid #B1B1B1;background:#F3F3F3} ul.rdmrcpostag .datex{font-size:8px;margin:3px 0 0} ul.rdmrcpostag .dt{margin:0 5px 0 0;padding:0 5px 0 0;border-right:1px solid #7A7A7A} ul.rdmrcpostag p{margin:5px 0 0} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rdmrecpostajax.js" type="text/javascript"></script> <div id="randomcecent_posts_id"></div> <script type="text/javascript"> //<![CDATA[ $(window).load(function(){ RandomRecenTag({ blogURL: "", MaxPost: 6, RandompostActive: true, thumbSize:55, jumlahhuruf:100, cmtext:"Komentar", NoCmtext:"No Comment", tagName:false, idcontaint: "#randomcecent_posts_id" }); }); //]]> </script>
Если у вас подключена библиотека jQuery то эту строчку можно удалить - <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>. В коде можете изменить: MaxPost: 6, - количество выводимых сообщений; thumbSize:55, - размер изображения в пикселях; jumlahhuruf:100, - количество символов анонса статьи; tagName:false, - если Вы хотите выводить случайные сообщения определенной категории, то замените false на название ярлыка; aliceBlue - цвет фона. Вот основные настройки виджета. Гаджет проверен на стандартном и на нестандартном ( как в демо) шаблоне Blogger, везде работает отлично.
Виджет Blogger последние комментарии с эффектом анимации
Последние комментарии - два стиля светлый и темный:
В поле гаджета HTML/JavaScript вставьте этот код:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script> <div id="rcentcomnets"><span class="loadingxrcm">Загрузка...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:10, url_blog:"URL_вашего_блога", adminBlog:"имя_аккаунта_blogger/google+" }); }); //]]> </script>
Здесь, так же библиотеку jQuery не копировать ( если она уже подключена к вашему блогу). Настройки такие: url_blog:"URL_вашего_блога", - введите адрес вашего блога; numComments:10, - количество выводимых комментарий; animatedRecentcomments:true, - по умолчанию эффект анимации активирован, если без анимации, тогда вставьте false; adminBlog: "имя_аккаунта_blogger или google+" - как Вы хотите подписывать ваш комментарий. Сохраните гаджет. Далее, надо установить стиль CSS виджета, светлый или темный. Найдите в шаблоне вашего блога тег - ]]></b:skin> и чуть выше добавьте код. Для светлого:
.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}
Для темного код такой:
.loadingxrcm {background:transparent url(http://2.bp.blogspot.com/-Hus9BJOr9-8/UOsgyp7_8rI/AAAAAAAAH34/g2TQbl7GcsY/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black} ul#kmtranimasi p{margin:15px 0 0}
Готово. И последний виджет на сегодня.
Виджет лучших комментаторов блога с аватарами для Blogger
Widget Top Commentators с аватаркой, будет показывать ваших наиболее активных комментаторов блога, то есть. кто больше оставил комментарий. Для установки его, вставьте в поле гаджета HTML/JavaScript большущий код:
<div id="topkoment"> <style type="text/css"> .top-commenter-line {margin: 0px;border-top: 1px solid #8D8C8C;border-bottom: 1px solid #E7E7E7;background-color: #CECECE;padding: 2px 3px;} .top-commenter-avatar {display:inline-block;vertical-align:middle;} #topkoment {width: 300px;margin: 0 auto;padding: 5px;border: 3px solid #797979;} #topkoment a {color: #B10C0C;} .profile-name-link {padding-left: 2px;} </style> <script type="text/javascript"> // Top Commentators gadget with avatars. // Gets a list of top commentators from all comments, or specified number of days in the past. // CONFIG: var maxTopCommenters = 10, // How much? minComments = 1, // How many comments must top commentator have at least numDays = 0, // From how many days (ex. 30), or 0 from "all the time" excludeMe = true, // true: exclude my own comments excludeUsers = ["Anonymous", "someothertoexclude"], // Exclude these usernames maxUserNameLength = 42, // 0: don't cut, >4: cut usernames txtTopLine = '<div style="font-weight:bold;display:inline-block;width:2em;text-align:right;"><b>[#].</b></div> [image] [user] ([count])', // List number txtNoTopCommenters = 'No top commentators at this time.', txtAnonymous = '', // Empty, or Anonymous user name localized if you want to localize sizeAvatar = 32, // Avatar size cropAvatar = true, urlNoAvatar = 'http://lh4.googleusercontent.com/-069mnq7DV_g/TvgRrBI_JaI/AAAAAAAAAic/Iot55vywnYw/s' + sizeAvatar + '/avatar_blue_m_96.png', // http://www.blogger.com/img/avatar_blue_m_96.png resizeable urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar, urlMyProfile = '', // Set if you have no profile gadget on page urlMyAvatar = ''; // Can be empty (then it is fetched) or url to image // END CONFIG // for old IEs & IE modes if(!Array.indexOf) { Array.prototype.indexOf=function(obj) { for(var i=0;i<this.length;i++) if(this[i]==obj) return i; return -1; }} function replaceTopCmtVars(text, item, position) { if(!item || !item.author) return text; var author = item.author; var authorUri = ""; if(author.uri && author.uri.$t != "") authorUri = author.uri.$t; var avaimg = urlAnoAvatar; var bloggerprofile = "http://www.blogger.com/profile/"; if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile) avaimg = author.gd$image.src; else { var parseurl = document.createElement('a'); if(authorUri != "") { parseurl.href = authorUri; avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname; } } if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "") avaimg = urlMyAvatar; if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "") avaimg = urlNoAvatar; var newsize="s"+sizeAvatar; avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/"); if(cropAvatar) newsize+="-c"; avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); var authorName = author.name.$t; if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar) authorName = txtAnonymous; var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />'; if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; if(maxUserNameLength > 3 && authorName.length > maxUserNameLength) authorName = authorName.substr(0, maxUserNameLength-3) + "..."; var authorcode = authorName; if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; text = text.replace('[user]', authorcode); text = text.replace('[image]', imgcode); text = text.replace('[#]', position); text = text.replace('[count]', item.count); return text; } var topcommenters = {}; var ndxbase = 1; function showTopCommenters(json) { var one_day=1000*60*60*24 var today = new Date(); if(urlMyProfile == "") { var elements = document.getElementsByTagName("*"); var expr = /(^| )profile-link( |$)/; for(var i=0 ; i<elements.length ; i++) if(expr.test(elements[i].className)) { urlMyProfile = elements[i].href; break; } } if(json && json.feed && json.feed.entry && json.feed.entry.length) for(var i = 0 ; i < json.feed.entry.length ; i++ ) { var entry = json.feed.entry[i]; if(numDays > 0) { var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601 var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); //Calculate difference btw the two dates, and convert to days var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day)); if(days > numDays) break; } var authorUri = ""; if(entry.author[0].uri && entry.author[0].uri.$t != "") authorUri = entry.author[0].uri.$t; if(excludeMe && authorUri != "" && authorUri == urlMyProfile) continue; var authorName = entry.author[0].name.$t; if(excludeUsers.indexOf(authorName) != -1) continue; var hash=entry.author[0].name.$t + "-" + authorUri; if(topcommenters[hash]) topcommenters[hash].count++; else { var commenter = new Object(); commenter.author = entry.author[0]; commenter.count = 1; topcommenters[hash] = commenter; } } if(json && json.feed && json.feed.entry && json.feed.entry.length && json.feed.entry.length == 200) { ndxbase += 200; document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>'); return; } // convert object to array of tuples var tuplear = []; for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); tuplear.sort(function(a, b) { if(b[1].count-a[1].count) return b[1].count-a[1].count; return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1; }); // list top topcommenters: var realcount = 0; for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) { var item = tuplear[i][1]; if(item.count < minComments) break; document.write('<di'+'v class="top-commenter-line">'); document.write(replaceTopCmtVars(txtTopLine, item, realcount+1)); document.write('</d'+'iv>'); realcount++; } if(!realcount) document.write(txtNoTopCommenters); } document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></' + 'script>'); </script> </div>
Какие настройки можно произвести здесь: var maxTopCommenters = 10, - число выводимых комментаторов; sizeAvatar = 32, - размер аватара. На этом дорогие друзья, я с вами прощаюсь не надолго. До встречи.
Виджеты - SatankMKR
С уважением, Сергей
Эммм. Опасно вы поставили блок эдсенса в пост. Место неудачное, прямо под подзаголовком. Таким образом вы побуждаете ошибочно кликнуть на рекламу. Можете потерять аккаунт за это.
Привет! Рад что заглянул на огонек.Блок всё таки выделяется, по моему его трудно не заметить.Я видел у иностранцев строка рекламы вставлена вместо меню и ничего. У Сосновского Яндекс.Директ вставлен в текст почти не отличается от основного текста, да и у многих так.Рекомендации от AdSense — это слияние, дополнение и контраст. Слияние это как понимать? Хотя ты меня напугал.
Чуть не забыл. Что то редко ты стал обновлять свой блог.
Интересные виджеты. Но почему про blogger в вордпрессе?
Привет, Павел! У меня и на blogger есть три блога про платформу блоггер. А почему на WordPresse — чтобы блог монетизировать и не зависеть не от кого.Сам себе хозяин и так далее.