Поиск блогу

воскресенье, 11 октября 2015 г.

Гаджет Blogger "Популярные сообщения" на отдельной странице.

    На одном из моих блогов висел гаджет "Популярные сообщения". Ввиду того, что он занимал много места появилось желание вынести его на отдельную страницу. Решил найти готовое решение в сети, но к сожалению ничего похожего и близкого не нашел. Только как сделать отдельную страницу архива (вместо гаджета "Архив Блога") и станицу с формой обратной связи (вместо гаджета "Форма для связи"). Пришлось выкручиваться самому.

     После недолгих поисков решение нашлось. Взял за основу статью о создании формы обратной связи на отдельной странице и присмотрелся к ней повнимательнее. Суть оказалась в том, чтобы "скопировать" html-код виджета обратной связи, а сам виджет скрыть. Точно так же я поступил и в моем случае.
      Добавляем гаджет на страницу. И меняем немного шаблон блога: вставляем сточку перед символами "]]"
#PopularPosts1{ display:none!important;}
    Далее создаем страницу и в неё вставляем скрипт:

<div dir="ltr" style="text-align: left;" trbidi="on">
<div id="popularPosts"></div>
<script type="text/javascript">
window.onload = function (){
var pPosts =document.getElementsByClassName("widget-content popular-posts")[0].children[0].children ;
var myDiv = document.getElementById("popularPosts");
s="";
for(var i=0; i<pPosts.length;i++){
var a = pPosts[i].children[0].children[0];
var img = pPosts[i].children[0].children[0].children[0];
var title = pPosts[i].children[0].children[1];
var txt =  pPosts[i].children[0].children[2];
s +=title.innerHTML+"<table><tr><td width='20%'>"+a.innerHTML+"</td><td width='80%'>"+txt.innerHTML+"</td></tr></table>";
}
myDiv.innerHTML = s;
}
</script></div>
   Результат получается как на изображении в начале поста. В данном случае я просто выдираю тэги и вставляю их в таблицу, но для экспериментов и украшательств есть простор.

Комментариев нет:

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