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

Единственное условие -  он будет работать от новостной ленты Feedburner именно того блога, где установлен.

Посмотрите его на одном из мох блогов над лентой сообщений


Код практически можно копировать ничего не изменяя и добавляя. Разве что, захотите поменять цвет фона заголовка и количество отображаемых ссылок. Я их отметила цветом.

Код

<style>#spicenewsticker.loading{display:none}
.left .news-ticker-controls,.left .ticker-content,.left .BloggerSpice-ticker-title,.left .ticker{float:left}
.right .news-ticker-controls,.right .ticker-content,.right .BloggerSpice-ticker-title,.right .ticker{float:right}
.ticker-wrapper.has-js{font-family:'Helvetica',Arial,sans-serif;width:80%;height:28px;overflow:hidden;border:1px solid #f1f1f1;margin:10px 50px 0;line-height:28px;background-color:#FFFFFF;float:none;color:#252525;position:relative}
.ticker{position:relative;overflow:hidden;width:100%}
.ticker a{color:#333}
.BloggerSpice-ticker-title{font-size:12px;text-transform:uppercase;background-color:#677E52;padding:0 10px;color:#FFFFFF;font-weight:bold}
.BloggerSpice-ticker-title:before{font-family:FontAwesome;content:"\f0e7";color:#FFF;margin-right:5px}
.ticker-content{text-transform:uppercase;margin:0;position:absolute;font-weight:bold;overflow:hidden;white-space:nowrap;line-height:26px;padding:0 10px;font-size:12px}
.ticker-content .date{padding:0 5px 0 0;border-right:1px dotted #252525}
.rabbi-ticker-swipe{position:absolute;top:0;background-color:#FFFFFF;color:#252525;display:block;width:100%;height:28px}
.rabbi-ticker-swipe span{margin-left:1px;background-color:#FFFFFF;color:#252525;height:28px;width:7px;display:block}
.news-ticker-controls{padding:0;margin:0;list-style-type:none;position:absolute;right:5px;top:0}
.news-ticker-controls li{padding:0;margin-left:5px;float:left;cursor:pointer;height:16px;width:16px;display:block}
.news-ticker-controls li{font-family:FontAwesome;color:#666666;position:relative}
.news-ticker-controls li.hover{color:#252525}
.news-ticker-controls li.down{color:#252525}
.news-ticker-controls li:before{top:0;left:0;line-height:20px}
.news-ticker-controls li.bs-play-pause:before{content:"\f04b"}
.news-ticker-controls li.bs-play-pause.paused:before{content:"\f04c"}
.news-ticker-controls li.bs-prev:before{content:"\f04a"}
.news-ticker-controls li.bs-next:before{content:"\f04e"}
.js-hidden{display:none}</style>

<script type='text/javascript'>
//<![CDATA[

(function(a){a.fn.ticker=function(c){var e=a.extend({},a.fn.ticker.defaults,c);if(a(this).length==0){if(window.console&&window.console.log){window.console.log("Element does not exist in DOM!")}else{alert("Element does not exist in DOM!")}return false}var b="#"+a(this).attr("id");var d=a(this).get(0).tagName;return this.each(function(){var g=o();var i={position:0,time:0,distance:0,newsArr:{},play:true,paused:false,contentLoaded:false,dom:{contentID:"#ticker-content-"+g,titleID:"#BloggerSpice-ticker-title-"+g,titleElem:"#BloggerSpice-ticker-title-"+g+" SPAN",tickerID:"#ticker-"+g,wrapperID:"#ticker-wrapper-"+g,revealID:"#rabbi-ticker-swipe-"+g,revealElem:"#rabbi-ticker-swipe-"+g+" SPAN",controlsID:"#news-ticker-controls-"+g,prevID:"#prev-"+g,nextID:"#next-"+g,playPauseID:"#play-pause-"+g}};if(d!="UL"&&d!="OL"&&e.htmlFeed===true){q("Cannot use <"+d.toLowerCase()+"> type of element for this plugin - must of type <ul> or <ol>");return false}e.direction=="rtl"?e.direction="right":e.direction="left";f();function l(u){var t=0,s;for(s in u){if(u.hasOwnProperty(s)){t++}}return t}function o(){var s=new Date;return s.getTime()}function q(s){if(e.debugMode){if(window.console&&window.console.log){window.console.log(s)}else{alert(s)}}}function f(){m();a(b).wrap('<div id="'+i.dom.wrapperID.replace("#","")+'"></div>');a(i.dom.wrapperID).children().remove();a(i.dom.wrapperID).append('<div id="'+i.dom.tickerID.replace("#","")+'" class="ticker"><div id="'+i.dom.titleID.replace("#","")+'" class="BloggerSpice-ticker-title"><span><!-- --></span></div><p id="'+i.dom.contentID.replace("#","")+'" class="ticker-content"></p><div id="'+i.dom.revealID.replace("#","")+'" class="rabbi-ticker-swipe"><span><!-- --></span></div></div>');a(i.dom.wrapperID).removeClass("no-js").addClass("ticker-wrapper has-js "+e.direction);a(i.dom.tickerElem+","+i.dom.contentID).hide();if(e.controls){a(i.dom.controlsID).live("click mouseover mousedown mouseout mouseup",function(t){var s=t.target.id;if(t.type=="click"){switch(s){case i.dom.prevID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("prev");break;case i.dom.nextID.replace("#",""):i.paused=true;a(i.dom.playPauseID).addClass("paused");n("next");break;case i.dom.playPauseID.replace("#",""):if(i.play==true){i.paused=true;a(i.dom.playPauseID).addClass("paused");j()}else{i.paused=false;a(i.dom.playPauseID).removeClass("paused");p()}break}}else{if(t.type=="mouseover"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("over")}else{if(t.type=="mousedown"&&a("#"+s).hasClass("controls")){a("#"+s).addClass("down")}else{if(t.type=="mouseup"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("down")}else{if(t.type=="mouseout"&&a("#"+s).hasClass("controls")){a("#"+s).removeClass("over")}}}}}});a(i.dom.wrapperID).append('<ul id="'+i.dom.controlsID.replace("#","")+'" class="news-ticker-controls"><li id="'+i.dom.playPauseID.replace("#","")+'" class="bs-play-pause controls"><a href=""><!-- --></a></li><li id="'+i.dom.prevID.replace("#","")+'" class="bs-prev controls"><a href=""><!-- --></a></li><li id="'+i.dom.nextID.replace("#","")+'" class="bs-next controls"><a href=""><!-- --></a></li></ul>')}if(e.displayType!="fade"){a(i.dom.contentID).mouseover(function(){if(i.paused==false){j()}}).mouseout(function(){if(i.paused==false){p()}})}if(!e.ajaxFeed){r()}}function m(){if(i.contentLoaded==false){if(e.ajaxFeed){if(e.feedType=="xml"){a.ajax({url:e.feedUrl,cache:false,dataType:e.feedType,async:true,success:function(w){count=0;for(var t=0;t<w.childNodes.length;t++){if(w.childNodes[t].nodeName=="rss"){xmlContent=w.childNodes[t]}}for(var u=0;u<xmlContent.childNodes.length;u++){if(xmlContent.childNodes[u].nodeName=="channel"){xmlChannel=xmlContent.childNodes[u]}}for(var s=0;s<xmlChannel.childNodes.length;s++){if(xmlChannel.childNodes[s].nodeName=="item"){xmlItems=xmlChannel.childNodes[s];var z,v=false;for(var A=0;A<xmlItems.childNodes.length;A++){if(xmlItems.childNodes[A].nodeName=="title"){z=xmlItems.childNodes[A].lastChild.nodeValue}else{if(xmlItems.childNodes[A].nodeName=="link"){v=xmlItems.childNodes[A].lastChild.nodeValue}}if((z!==false&&z!="")&&v!==false){i.newsArr["item-"+count]={type:e.titleText,content:'<a href="'+v+'">'+z+"</a>"};count++;z=false;v=false}}}}if(l(i.newsArr<1)){q("Couldn't find any content from the XML feed for the ticker to use!");return false}i.contentLoaded=true;r()}})}else{q("Code Me!")}}else{if(e.htmlFeed){if(a(b+" LI").length>0){a(b+" LI").each(function(s){i.newsArr["item-"+s]={type:e.titleText,content:a(this).html()}})}else{q("Couldn't find HTML any content for the ticker to use!");return false}}else{q("The ticker is set to not use any types of content! Check the settings for the ticker.");return false}}}}function r(){i.contentLoaded=true;a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}distance=a(i.dom.contentID).width();time=distance/e.speed;h()}function h(){a(i.dom.contentID).css("opacity","1");if(i.play){var s=a(i.dom.titleID).width()+20;a(i.dom.revealID).css(e.direction,s+"px");if(e.displayType=="fade"){a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).css(e.direction,s+"px").fadeIn(e.fadeInSpeed,k)})}else{if(e.displayType=="scroll"){}else{a(i.dom.revealElem).show(0,function(){a(i.dom.contentID).css(e.direction,s+"px").show();animationAction=e.direction=="right"?{marginRight:distance+"px"}:{marginLeft:distance+"px"};a(i.dom.revealID).css("margin-"+e.direction,"0px").delay(20).animate(animationAction,time,"linear",k)})}}}else{return false}}function k(){if(i.play){a(i.dom.contentID).delay(e.pauseOnItems).fadeOut(e.fadeOutSpeed);if(e.displayType=="fade"){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})}else{a(i.dom.revealID).hide(0,function(){a(i.dom.contentID).fadeOut(e.fadeOutSpeed,function(){a(i.dom.wrapperID).find(i.dom.revealElem+","+i.dom.contentID).hide().end().find(i.dom.tickerID+","+i.dom.revealID).show().end().find(i.dom.tickerID+","+i.dom.revealID).removeAttr("style");r()})})}}else{a(i.dom.revealElem).hide()}}function j(){i.play=false;a(i.dom.tickerID+","+i.dom.revealID+","+i.dom.titleID+","+i.dom.titleElem+","+i.dom.revealElem+","+i.dom.contentID).stop(true,true);a(i.dom.revealID+","+i.dom.revealElem).hide();a(i.dom.wrapperID).find(i.dom.titleID+","+i.dom.titleElem).show().end().find(i.dom.contentID).show()}function p(){i.play=true;i.paused=false;k()}function n(s){j();switch(s){case"prev":if(i.position==0){i.position=l(i.newsArr)-2}else{if(i.position==1){i.position=l(i.newsArr)-1}else{i.position=i.position-2}}a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break;case"next":a(i.dom.titleElem).html(i.newsArr["item-"+i.position].type);a(i.dom.contentID).html(i.newsArr["item-"+i.position].content);break}if(i.position==(l(i.newsArr)-1)){i.position=0}else{i.position++}}})};a.fn.ticker.defaults={speed:0.1,ajaxFeed:false,feedUrl:"",feedType:"xml",displayType:"reveal",htmlFeed:true,debugMode:true,controls:true,titleText:"Последние статьи",direction:"ltr",pauseOnItems:3000,fadeInSpeed:600,fadeOutSpeed:300}})(jQuery);
function spicenewsticker(a){(function(b){var c={blogURL:"",MaxPost:10,Speed:0.1,Summarylength:150,titleText:"Последние статьи",displayType:"reveal",Container:"#spicenewsticker",pBlank:"https://3.bp.blogspot.com/-IsmZS28MJMU/V6gPK2Ysu0I/AAAAAAAAPc0/wpNWe7a6EqkmWepssoXTGbgP4koYJ8xbACLcB/s1600/BloggerSpice%252Bblank.png",tagName:false,MonthNames:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]};c=b.extend({},c,a);b(c.Container).addClass("loading");b.get((c.blogURL===""?window.location.protocol+"//"+window.location.host:c.blogURL)+"/feeds/posts/summary"+(c.tagName===false?"":"/-/"+c.tagName)+"?max-results="+c.MaxPost+"&orderby=published&alt=json-in-script",function(t){var v,f,l,o,w,q,h,e,s,u,m,g="",d=t.feed.entry;if(d!==undefined){var k=d.length;for(var r=0;r<k;r++){var n=d[r].link.length;for(var p=0;p<n;p++){if(d[r].link[p].rel==="alternate"){v=d[r].link[p].href}}postcontent=("content" in d[r])?d[r].content.$t:("summary" in d[r])?d[r].summary.$t:"";f=d[r].title.$t;postcontent=postcontent.replace(/<\S[^>]*>/g,"").replace(/"/g,"&quot;");if(postcontent.length>c.Summarylength){postcontent=postcontent.substring(0,c.Summarylength)+"..."}u=d[r].published.$t.substring(0,10);l=u.substring(0,4);o=u.substring(5,7);w=u.substring(8,10);q=c.MonthNames[parseInt(o,10)-1];h=d[r].published.$t.substring(11,16);e=h.substring(0,2);s=h.substring(2,5);m=(e<12?"AM":"PM");if(e===0){e=12}if(e>12){e=e-12}g+='<li class="news-item"><span title="'+q+" "+w+", "+l+'" class="date">'+e+""+s+" "+m+'</span> <a class="title" href="'+v+'">'+f+"</a></li>"}b(c.Container).html('<ul class="js-hidden" id="newstick">'+g+"</ul>").removeClass("loading");b("#newstick").ticker({speed:c.Speed,direction:b("#outer-wrapper").attr("class"),titleText:c.titleText,displayType:c.displayType})}else{b(c.Container).html("<span>No result!</span>").removeClass("loading")}},"jsonp")})(jQuery)};
//]]>
</script>
<div id='spicenewsticker'/>
<script type='text/javascript'>
//<![CDATA[
spicenewsticker({MaxPost:10});
//]]>
</script></div>


Готовый код устанавливайте в гаджет HTML/JavaScript в разделе дизайн. Сам гаджет лучше поместить над сообщениями блога или под шапкой. Можно и над ней. Если у вас в шаблоне в этих местах нет гаджета почитайте статью как сделать дополнительный гаджет над шапкой блога.

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

Попробуйте, вариант очень интересный. А идею подцепила здесь.

Всем пока и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Здравствуйте, друзья. Хочу поделиться с вами некоторыми нюансами по выводу средств с  Google AdSense на банковский счёт. Информации сейчас об этом достаточно много, но у меня на этот раз вышла небольшая, по моей вине, заморочка. 

Google AdSense на счёт в банке

Монетизация блога с Google AdSense вполне реальна. Хоть такой вид заработка на блоге будет не совсем большим, но это всё же лучше чем ничего. На сегодня в России существует 3 способа как вывести полученные на рекламе деньги. 

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

В этот раз в конце декабря я уже видела, что мне нужно снимать честно заработанные деньги. Но тут вся предновогодняя суета и долгие каникулы, когда все были дома, настолько закрутили меня, что я просто забыла указать свой основной способ "Банковский перевод", который накануне внесла в аккаунт Адсенс. И мне пришло оповещение на электронную почту, что отправлен чек на такую то - сумму.


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

Если вы ожидаете выплаты от AdSense проверьте как у вас всё настроено в аккаунте. Но если всё же такая проблемка тоже "нарисовалась", нужно сделать следующее.
Запросите повторную выписку чека здесь. Необходимо заполнить представленную форму и в графе "Почему вы запрашиваете повторную отправку чека?" Отметить - предпочитаю другой способ оплаты. ОТПРАВИТЬ.

Теперь просто дождитесь письма на почту. Оно пришло мне буквально в этот же день обращения. Примерно такого содержания (показываю в переводе)

Благодарим Вас за обращение к нам.
Мы начали переиздание вашего чека 081135797. Просьба рассчитывать, что сумма платежа будет возвращена на ваш аккаунт AdSense. После этого сумма будет включена в следующую выплату в новый способ оплаты.
Пожалуйста, не отвечайте на это письмо. У нас есть специальные команды, которые хотели бы обрабатывать последующие вопросы. Вы можете связаться с ними здесь.
С уважением,


После этого в аккаунте Адсенс, разделе платеж появится вот такое сообщение.

 Google AdSense на счёт в банке

Пройдёт немного времени и ваши деньги спокойно будут переведены на счёт в банке.


Так что во время установите нужный способ оплаты, чтобы не было таких заковырок.

И немного хочу немного рассказать, как открыть валютный счёт Сбербанке.

 Идём в самое ближайшее к вам отделение Сбербанка. Понадобится паспорт, 5 или рубли по курсу ЦБ. Говорите, что желаете открыть валютный счёт для получения международных переводов. Уточните сразу что нужен "Универсальный".

После открытия сразу попросите реквизиты вновь открытого банковского счёта.

 Заходим в свой аккаунт AdSense. И дальше по шагам:

НАСТРОЙКИ - НАСТРОЙКИ ПЛАТЕЖЕЙ - ДОСТУПНЫЕ СПОСОБЫ ОПЛАТЫ - ДОБАВИТЬ НОВЫЙ СПОСОБ - БАНКОВСКИЙ ПЕРЕВОД НА СЧЁТ - ПРОДОЛЖИТЬ
Появится вот такая форма.

 Google AdSense на счёт в банке

Заполните поля следующим образом

  1. Имя владельца платежа. Обязательно укажите имя владельца платежа на латинице - Viktoriy Barad (мой вариант).
  2.  Название банка. Пишем Sberbank of Russia .
  3.  BIK. Это код вашего филиала банка. Он есть в распечатке реквизитов из банка. Обычно это 9 цифр.
  4.  SWIFT/BIC.  Там же в распечатке он назван SWIFT - code. У меня он состоит из 11 цифр. Внимательно все циферки вводите в нужное поле.
  5.  Номер счёта. В реквизитах обозначен как Счёт получателя. Здесь очень много цифр. Вводите внимательно. НЕ УКАЖИТЕ НОМЕР КАРТЫ. НУЖЕН ИМЕННО НОМЕР СЧЁТА.

Внимательно вводим полученные в банке реквизиты. Не торопитесь и лучше перепроверьте всё заранее.

Нажимаем Подтвердить и Продолжить.  Укажите затем в настройках платежей вновь открытый счёт как основной, чтобы избежать подобных косяков, о которых я писала выше. 

Если у вас подключен банк онлайн, то при переходе  в личный кабинет увидите 2 счёта. Легко можно переводить деньги с карты на валютный счёт и наоборот по курсу ЦБ без комиссии. 

Немного процесс кажется замороченным, но поверьте, что это только кажется. И теперь когда доход Google AdSense достигнет порога оплаты или как вы его настроите, все ваши заработанные средства буду перечислены на ваш банковский счёт.

Всем удачи. Достойной оплаты за достойный труд. Если появятся вопросы, пишите в комментариях. 


Получайте новые сообщения с блога прямо на почту

Введите Ваш email


менюДоброго времени суток, читатели и гости блога. Предлагаю вам сегодня 2 варианта фиксированного бокового меню, которые места практически не занимают и всегда перед глазами читателя. Яркие, нескучные, оригинальные без внимания не останутся. Зафиксируем обе менюшки с правой стороны макета блога.

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

1. Зелёное фиксированное выдвигающиеся меню с красивым эффектом при на ведении.

Меню при наведении курсора на панель выдвигается и появляются красивые вкладки. Используя свойства gradient получаем симпатичный эффект при наведении на них.

Код

<div id="hawkMenu">
    <a href="http://www.shpargalochki.ru/" class="hawkMenuA">Главная</a>
        <a href="http://www.shpargalochki.ru/p/blog-page.html" class="hawkMenuA">Содержание</a>
        <a href="http://www.shpargalochki.ru/p/blog-page_29.html" class="hawkMenuA">Об авторе</a>
    <a href="http://www.shpargalochki.ru/p/blog-page_34.html" class="hawkMenuA">Связь</a>
</div>

<style>
#hawkMenu {
background: rgb(180,223,91);
background: -moz-linear-gradient(-45deg,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1)));
background: -webkit-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: -o-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: -ms-linear-gradient(-45deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
background: linear-gradient(135deg,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=1 );
    position:fixed;
    width:210px;
    left:-180px;
    transition-duration:1.0s;
    border-radius:15px;
}
#hawkMenu:hover {
    left:-10px;
 
}
.hawkMenuA {
    font-f
    text-decoration:none;
    color:#000;
    border-radius:10px;
    width:140px;
    margin-left:25px;
    padding:5px;
    display:block;
    background: rgb(191,210,85);
background: -moz-linear-gradient(-45deg,  rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 51%, rgba(158,203,45,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(51%,rgba(114,170,0,1)), color-stop(100%,rgba(158,203,45,1)));
background: -webkit-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: -o-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: -ms-linear-gradient(-45deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
background: linear-gradient(135deg,  rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 51%,rgba(158,203,45,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bfd255', endColorstr='#9ecb2d',GradientType=1 );
    margin-top:5px;
    margin-bottom:5px;
 

}

.hawkMenuA:hover {
    background: rgb(180,221,180); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(180,221,180,1) 0%, rgba(131,199,131,1) 17%, rgba(82,177,82,1) 33%, rgba(0,138,0,1) 67%, rgba(0,87,0,1) 83%, rgba(0,36,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(180,221,180,1)), color-stop(17%,rgba(131,199,131,1)), color-stop(33%,rgba(82,177,82,1)), color-stop(67%,rgba(0,138,0,1)), color-stop(83%,rgba(0,87,0,1)), color-stop(100%,rgba(0,36,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(180,221,180,1) 0%,rgba(131,199,131,1) 17%,rgba(82,177,82,1) 33%,rgba(0,138,0,1) 67%,rgba(0,87,0,1) 83%,rgba(0,36,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4ddb4', endColorstr='#002400',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

 
}</style>


По необходимости добавляйте ещё пункты меню, соответственно, меняя адреса и названия страниц на свои

<a href="http://www.shpargalochki.ru/p/blog-page_29.html" class="hawkMenuA">Об авторе</a>


2. Цветное боковое меню с лёгким движением вкладок и красивым эффектом.

Код

<div class="menuHolder2">
<ul class="menu2">
<li><a href="http://www.shpargalochki.ru/" class="red">вкладка1</a></li>
<li><a href="http://www.shpargalochki.ru/" class="orange">вкладка 2</a></li>
<li><a href="http://www.shpargalochki.ru/" class="yellow">вкладка 3</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="green">вкладка 4</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="blue">вкладка 5</a></li>
<li><a href="#http://www.shpargalochki.ru/" class="indigo">вкладка6</a></li>
<li><a href="http://www.shpargalochki.ru/" class="violet">вкладка 7</a></li>
</ul>
<div class="shadow"></div>

<style>
.menuHolder2 {position: relative; margin-left:10px; float:left; overflow:hidden; width:150px; height:400px; font:normal bold 11px/35px verdana, sans-serif;}
.menuHolder2 .shadow {width:10px; height:90%; top:5%; left:-9px; position:absolute; z-index:100; background:#888;
-webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
-o-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}
ul.menu2 {margin:0 0 0 1px; list-style: none; display:block; width: 150px; position:relative; padding:60px 0;}
ul.menu2 li {margin:5px 0 0 0;}
ul.menu2 li a {background:#aaa; color:#ddd; padding:0 15px; width:90px; display:block; text-decoration:none;
-webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-o-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius:0 10px 10px 0;
-o-border-radius:0 10px 10px 0;
border-radius:0 10px 10px 0;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
ul.menu2 li a.red {background:#a00;}
ul.menu2 li a.orange {background:#da0;}
ul.menu2 li a.yellow {background:#aa0;}
ul.menu2 li a.green {background:#060;}
ul.menu2 li a.blue {background:#00a;}
ul.menu2 li a.indigo {background:#2b0062;}
ul.menu2 li a.violet {background:#682bc2;}
ul.menu2 li a:hover {background:#aaa; color:#fff; padding:0 15px 0 40px;}
ul.menu2 li a.red:hover {background:#c00;}
ul.menu2 li a.orange:hover {background:#fc0;}
ul.menu2 li a.yellow:hover {background:#cc0;}
ul.menu2 li a.green:hover {background:#080;}
ul.menu2 li a.blue:hover {background:#00c;}
ul.menu2 li a.indigo:hover {background:#5b1092;}
ul.menu2 li a.violet:hover {background:#8a2be2;}
</style>

Так же как и в первом варианте делайте необходимые изменения. Убирайте или добавляйте вкладки меню. Если нужно слегка подкорректировать расположение меню на странице пишите в комментариях.

Устанавливайте код понравившегося бокового меню в гаджет HTML/JavaScript во вкладке дизайн в любое место макета блога.

Всем спасибо и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email



спасибо

Вот уже три сотни подписчиков, мне очень приятно, что есть люди которым интересны мои шпаргалки.

Спасибо, что читаете, открываете, кликаете, комментируете и лайкаете.

Спасибо всем, кто читает меня давно или присоединился на днях. Очень вам всем и каждому по отдельности благодарна. Это мотивирует меня. Наверное и в правду кому-то интересно то о чем я пишу.

Спасибо вам за то, что вы есть. За поддержку, за комментарии, за отклики, за респект, за доверие, за мнение о блоге и желание читать превью и дальше!

Всего доброго, мне очень приятно с Вами общаться! Удачи!

спасибо


Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

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

Можно сделать список рубрик с полосой прокрутки для более компактного вида. Или обойтись просто страницей, на которую осуществляется переход при клике на определённый ярлык. По умолчанию настроено отображение только 20 постов на одной странице. Но легко увеличить их количество. Об этом почитайте здесь.

И по сегодняшней теме - попробуем красиво показать все статьи определённого ярлыка во вкладке меню на отдельной странице. В результате будут отображены посты именно этой категории с картинками и анонсом к ним. Почему бы и нет. Хорошая навигация по сайту ещё никогда не мешала.

Посмотрите сразу как это будет выглядеть на тестовом блоге. В качестве примера я взяла сообщения под ярлыком <<Картинки>> с этого блога.

Демонстрация

Установить такой вариант совсем просто. Скопируйте для удобства следующий код в блокнот, а настройки разберём ниже


<style>
  #resultados {  }
  #loadingscript {  }

  /* стили для отдельного блока*/
.paginaposts {
    border: 2px solid #528B8B;
    float: left;
    height: 80px;
    margin: 1px;
    padding: 5px;
    width: 230px;
    background: #FFFAFA;
  }

/* стили для ссылок */
  .paginaposts a {
    color: #00688B;
    display: block;
    font-size: 12px;
    text-decoration: none;
    text-indent: 0px;
  }

  /*для картинок */
.paginaposts img {
    float: left;
    height: 60px;
    width: 60px;
    padding: 2px;
    margin: 2px 5px 2px 2px;
  }

  /* для заголовков */
.paginaposts h6 {
    height: 45px;
    margin: 0;
    font-weight: normal;
  }

 /* эффект при наведении мышки */
 .paginaposts:hover {
    background-image: -moz-linear-gradient(100% 100% 90deg, #D3D3D3, #D3D3D3);
    background-image: -webkit-gradient(linear, left bottom, left top, from(#D3D3D3), to(#D3D3D3));
    filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#D3D3D3', EndColorStr='#D3D3D3');
    border: 2px solid #CC00CC;
  }

 /* нижний блок с количеством записей */
 #paginacion {
    color: #bbb;
    font-family: Lucida Grande;
    font-size: 18px;
 
    height: 15px;
    line-height: 22px;
    padding: 20px 0;
    text-align: center;
  }

 /* постраничная навигация */
#paginacion span, #paginacion a {
    border: 1px solid #ddcca3;
    color: #778899;
    display: inline-block;
    font-family: Lucida Grande;
    font-size: 18px;
 
    margin: 0 2px;
    padding: 0 5px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    text-indent: 0px;
  }

  #paginacion span.actual {
    color: #778899;
    padding: 0 5px;
    -moz-box-shadow: 0 0 30px #fff inset;
    -webkit-box-shadow: 0 0 30px #fff inset;
    box-shadow: 0 0 30px #fff inset;
  }

  #paginacion a:hover {
    color: #fff;
    -moz-box-shadow: 0 0 20px #666 inset;
    -webkit-box-shadow: 0 0 20px #666 inset;
    box-shadow: 0 0 20px #666 inset;
    text-decoration: none;
  }

  #paginacion .antesdespues { border: none; }
  #paginacion .antesdespues:hover {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }

  #paginacion span.deshabilitado {
    border: none;
    color: #778899;
  }

  #totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 50; // число записей на странице
var urlsitio = "http://www.shpargalochki.ru"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "https://upload.wikimedia.org/wikipedia/ru/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png"; // адрес изображения если картинки нет
var firsttime = 0;
var paginaactual = 1;
var cantidadpaginas = 0;
var cantidadposts = 0;

function showpageposts(json) {
  var entry, posttitle, posturl, postimg;
  var salida = "";

  if(cantidadpaginas==0) {
    cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
    cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
  }

  for (var i = 0; i < postporpagina; i++) {
    if (i == json.feed.entry.length) { break; }
    entry = json.feed.entry[i];

    posttitle = entry.title.$t;

    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = imgxdefecto;
    }

    salida += "<div class='paginaposts'>";
    salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
    salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
    salida += "</div>";
  }

  document.getElementById("resultados").innerHTML = salida;

  paginacion();
}

function paginacion() {
  contadorP = 0;
  salida = "";

  if(paginaactual>1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>следующие</a>";
  } else {
    salida += "<span class='deshabilitado'>следующие</span>";
  }

  if (cantidadpaginas<(maxpaginas+1)) {
    for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
      if (contadorP==paginaactual) {
        salida += "<span class='actual'>" + contadorP + "</span>";
      } else {
        salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
      }
    }
  } else if(cantidadpaginas>(maxpaginas-1)) {
    if(paginaactual<minpaginas) {
      for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
       if (contadorP == paginaactual) {
         salida += "<span class='actual'>" + contadorP + "</span>";
       } else {
         salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
       }
     }
     salida += " ... ";
     salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
     salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
      salida += " ... ";
      salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
      salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
    } else {
      salida += "<a href='javascript:incluirscript(1)'>1</a>";
      salida += "<a href='javascript:incluirscript(2)'>2</a>";
      salida += " ... ";
      for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
        if (contadorP==paginaactual) {
          salida += "<span class='actual'>" + contadorP + "</span>";
        } else {
          salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
        }
      }
    }
  }

  if (paginaactual<contadorP-1) {
    salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>предыдущие</a>";
  } else {
    salida += "<span class='deshabilitado'>предыдущие</span>";
  }

  document.getElementById("paginacion").innerHTML = salida;

  var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
  var finalpagina = paginaactual * postporpagina;
  var totales = "Всего сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
  document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {

  if(firsttime==1) {removerscript();}

  document.getElementById("resultados").innerHTML = "<div id='loadingscript'>загрузка ...</div>";
  document.getElementById("paginacion").innerHTML = "";
  document.getElementById("totales").innerHTML = "";

  var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

  var archivo = urlsitio + "/feeds/posts/default/-/картинки?start-index=" + iniciopagina;
  archivo += "&max-results=" + postporpagina;
  archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

  var nuevo = document.createElement('script');
  nuevo.setAttribute('type', 'text/javascript');
  nuevo.setAttribute('src', archivo);
  nuevo.setAttribute('id', 'TEMPORAL');
  document.getElementsByTagName('head')[0].appendChild(nuevo);

  firsttime = 1;
  paginaactual = pagina;
}

function removerscript() {
  var el = document.getElementById("TEMPORAL");
  var padre = el.parentNode;
  padre.removeChild(el);
}

onload=function() { incluirscript(1); }
//]]>
</script>
<div id="resultados" ></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>
<div id="totales"></div>


Что нужно поменять - 

http://www.shpargalochki.ru  - вставьте адрес вашего блога без слеша (/).

картинки - название вашего ярлыка. Будьте внимательны ко всем символам в коде.

https://upload.wikimedia.org/wikipedia/ru/thumb/a/ac/No_image_available.svg/600px-No_image_available.svg.png - адрес картинки если по каким - то причинам картинка не отображается (по необходимости).

Все другие настройки внешнего вида отметила комментариями в самом коде. Можно копировать и устанавливать вместе с ними. 

Сейчас создаём новую страницу. Админпанель - страницы - создать. Обзываем её как хотим. Переходим в редакторе в режим HTML. Чтобы не запутаться убираем всё, чтобы страница была пустая. 



Вставляем готовый код и нажимаем публикация. Бежим и смотрим что у нас получилось. Вуаля... мы это сделали.

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

Всем удачи и до новых встреч. 

Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Пользовательский поиск
Foto Saya
My Photo