Полезные виджеты для Blogger

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

blogger_vidgetПриветствую вас, дорогой читатель! Сегодня я представлю вам набор полезных виджетов для вашего блогаWidget для Blogger - Элемент интерфейса - примитив графического интерфейса пользователя, имеющий стандартный внешний вид и выполняющий стандартные действия. Слово «виджет» также используется и как название класса вспомогательных мини-программ - графических модулей, которые размещаются в рабочем пространстве соответствующей родительской программы и служат для украшения рабочего пространства, развлечения, решения отдельных рабочих задач или быстрого получения информации из интернета без помощи веб-браузера. Спасибо wikipedia, за разъяснение.

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

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

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

Для установки виджета случайных сообщений в блог, зайдите в панель управления 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 последние комментарии с эффектом анимации

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

vidget_kommentarii
Последние комментарии - два стиля светлый и темный

В поле гаджета 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, - по умолчанию эффект анимации активирован, если без анимации, тогда вставьте falseadminBlog: "имя_аккаунта_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

top_kommentator
Виджет лучших комментаторов блога

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

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


5 комментариев к “Полезные виджеты для Blogger”

  1. Эммм. Опасно вы поставили блок эдсенса в пост. Место неудачное, прямо под подзаголовком. Таким образом вы побуждаете ошибочно кликнуть на рекламу. Можете потерять аккаунт за это.

    Ответить
    • Привет! Рад что заглянул на огонек.Блок всё таки выделяется, по моему его трудно не заметить.Я видел у иностранцев строка рекламы вставлена вместо меню и ничего. У Сосновского Яндекс.Директ вставлен в текст почти не отличается от основного текста, да и у многих так.Рекомендации от AdSense — это слияние, дополнение и контраст. Слияние это как понимать? Хотя ты меня напугал.

      Ответить
    • Привет, Павел! У меня и на blogger есть три блога про платформу блоггер. А почему на WordPresse — чтобы блог монетизировать и не зависеть не от кого.Сам себе хозяин и так далее.

      Ответить

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