Виджет Blogger Последние сообщения / СТАБИЛЬНОСТЬ

Меню

Виджет Blogger Последние сообщения

08.04.2016

Приветствую вас, дорогой читатель! Сегодня хочу предложить пользователям бесплатной платформы Blogger ещё пару виджетов: Последние сообщения/статьи. Виджет Blogger Последние сообщенияотображает ваши новые опубликованные записи, он устанавливается на боковую панель блога при помощи не заменимого гаджета HTML/JavaScript. Код совмещён со стилями и поэтому, вам не нужно будет отдельно устанавливать стиль CSS в шаблон, вставили код виджета в поле гаджета HTML/JavaScript и всё. Ни каких лишних телодвижений, очень легко и просто, вам только нужно выбрать подходящий стиль последних записей и будет вам счастье. И так, смотрим.

Последние сообщения виджет для Blogger

Красивый виджет, с перелистыванием - кнопки Предыдущая - Главная - Следующая. Данный виджет можно установить при помощи этого кода:

<scripttype='text/javascript'>
varnumfeed=4;
varstartfeed=0;
varurlblog="######";
varcharac=50;
varurlprevious,urlnext;
functioncyberghost(ghost,banget){
varshowfeed=ghost.split("<");
for(vari=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i]=showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed=showfeed.join("");
showfeed=showfeed.substring(0,banget-1);
returnshowfeed;
}
functionshowterbaru(json){
varentry,posttitle,posturl,postimg,postcontent;
varshowblogfeed="";
urlprevious="";
urlnext="";
for(vark=0;k<json.feed.link.length;k++){
if(json.feed.link[k].rel=='previous'){
urlprevious=json.feed.link[k].href;
}
if(json.feed.link[k].rel=='next'){
urlnext=json.feed.link[k].href;
}
}
for(vari=0;i<numfeed;i++){
if(i==json.feed.entry.length){
break;
}
entry=json.feed.entry[i];
posttitle=entry.title.$t;
for(vark=0;k<entry.link.length;k++){
if(entry.link[k].rel=='alternate'){
posturl=entry.link[k].href;
break;
}
}
if("content"inentry){
postcontent=entry.content.$t;
}elseif("summary"inentry){
postcontent=entry.summary.$t;
}else{
postcontent="";
}
if("media$thumbnail"inentry){
postimg=entry.media$thumbnail.url;
}else{
postimg="http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif";
}
showblogfeed+="<div class='cg-elemen'>";
showblogfeed+="<a =href='"+posturl+"' target='_blank'><img src='"+postimg+"' /></a>";
showblogfeed+="<h6><a href='"+posturl+"'>"+posttitle+"</a></h6>";
showblogfeed+="<p>"+cyberghost(postcontent,charac)+"...</p>";
showblogfeed+="</div>";
}
document.getElementById("terbaru").innerHTML=showblogfeed;
showblogfeed="";
if(urlprevious){
showblogfeed+="<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
}else{
showblogfeed+="<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext){
showblogfeed+="<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
}else{
showblogfeed+="<span class='noactived next'>Next ►</span>";
}
showblogfeed+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("cg-navigasifeed").innerHTML=showblogfeed;
}
functionnavigasifeed(url){
varp,parameter;
if(url==-1){
p=urlprevious.indexOf("?");
parameter=urlprevious.substring(p);
}elseif(url==1){
p=urlnext.indexOf("?");
parameter=urlnext.substring(p);
}else{
parameter="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script"
}
parameter+="&callback=showterbaru";
incluirscript(parameter);
}
functionincluirscript(parameter){
if(startfeed==1){
removerscript();
}
document.getElementById("terbaru").innerHTML="<div id='cg-loading'></div>";
document.getElementById("cg-navigasifeed").innerHTML="";
vararchievefeed=urlblog+"/feeds/posts/default"+parameter;
varterbaru=document.createElement('script');
terbaru.setAttribute('type','text/javascript');
terbaru.setAttribute('src',archievefeed);
terbaru.setAttribute('id','MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed=1;
}
functionremoverscript(){
varelemen=document.getElementById("MASLABEL");
varparent=elemen.parentNode;
parent.removeChild(elemen);
}
onload=function(){
navigasifeed(0);
}
</script>
<style>
/*Recent Post Navigation*/
a,
a:visited{
color:#555;
outline:none;
text-decoration:none;
}
a:hover,
a:focus,
a:visited:hover{
color:#22a1c4;
text-decoration:none;
}
.terbaru-container{
background:#fff;
width:320px;
margin:20pxauto;
padding:15px;
border:1pxsolid#ccc;
}
#cg-terbaru{
border:1pxsolid#585858;
width:100%;
margin:0auto;
}
#terbaru{
margin:0px;
}
.cg-elemen{
margin:5px0;
padding:5px;
height:79px;
background:#FFFurl("http://smruthycollege.com/images/shadow2.png")no-repeatscrollcenterbottom;
overflow:hidden;
padding-bottom:20px;
}
.cg-elemen img{
padding:0;
float:left;
height:70px;
margin-right:15px;
width:70px;
}
.cg-elemen h6,
.cg-elemen h6 a{
font-size:14px!important;
font-weight:500;
margin:0;
color:#222;
font-family:'Oswald';
line-height:18px;
text-transform:uppercase;
text-aligaln:'center';
}
.cg-elemen p{
font-size:12px;
font-family:'Oswald';
text-align:left;
color:#555;
line-height:normal;
margin:5px0;
}
#cg-loading{
color:#888;
font-family:inherit;
font-size:100px;
letter-spacing:-10px;
text-align:center;
text-shadow:-5px01px#444;
background:#fffurl(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif)no-repeat50%50%;
height:470px;
}
#cg-navigasifeed{
color:#bbb;
font-family:Oswald;
font-size:12px;
text-align:center;
margin:0px;
}
#cg-navigasifeed a{
color:#141414!important;
font-family:inherit!important;
font-size:12px!important;
font-weight:400!important;
display:block;
padding:5px10px;
}
#cg-navigasifeed span{
padding:5px10px;
}
#cg-navigasifeed .next{
float:right;
}
#cg-navigasifeed .previous{
float:left;
}

#cg-navigasifeed .home{
text-align:center;
}
#cg-navigasifeed a:hover,
#cg-navigasifeed span.noactived{
color:transparant!important;
}
@media screen and (max-width:700px) {
.terbaru-container, #terbaru, #cg-navigasifeed {
width:auto;
}
}
@media screen and (max-width:300px) {
.cg-elemen img {
display:none;
}
}
Lanjut,SekarangTinggalMemasukanJavascriptnya.
Cari
</style>
<divclass="terbaru-container">
<divid="terbaru"></div>
<divid="cg-navigasifeed"></div>
</div>

Здесь, в коде в место решёток вставьте свой URL блога, установите количество вывода сообщений, текст (кнопок) поменяйте на русский, а между строк <style> и</style> вы можете изменить размер виджета, цветовые настройки и так далее. Следующий виджет можно установить над сообщениями, так как, он сделан в виде слайдера.

Виджет слайдер Последние сообщения для Blogger

Симпатичный слайдер с автоматическим показом последних ваших статей. Такой виджет устанавливается в блог при помощи кода:

<scriptsrc="http://s.codepen.io/assets/libs/modernizr.js"type="text/javascript"></script>
<scripttype="text/javascript"src="https://arlina-design.googlecode.com/svn/slider-post.js">
</script><divid="featuredpost"></div>
<scripttype="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script><scripttype='text/javascript'>
//<![CDATA[
$(document).ready(function(){
FeaturedPost({
blogURL:"#######",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>
<style>
/* CSS Slider Recent Post */
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4),
#slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4{overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px10px10px90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px2px0rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text{font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px3px0rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd{display:block;font-size:30px;padding:12px15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm{display:block;font-size:14px;background:#333;color:#fff;
padding:5px21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;
-moz-transform:scale(1.0)rotate(0);-webkit-transform:scale(1.0)rotate(0);-ms-transform:scale(1.0)rotate(0);transform:scale(1.0)rotate(0);transition:all0.6slinear;}
#slides li a:hover img{-moz-transform:scale(1.1)rotate(1deg);-webkit-transform:scale(1.1)
rotate(1deg);-ms-transform:scale(1.1)rotate(1deg);transform:scale(1.1)rotate(1deg);
transition:all0.3slinear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/
s1600/fade.png);background-position:50%40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all.4sease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
#slides ul{height:600px}
#slides li:nth-child(1){width:100%;height:50%}
#slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
#slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
#slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
#slides li:nth-child(5){display:none;}}
@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}
</style>
<divid="wrapper">
<divid="featuredpost"></div>
</div>

В коде также нужно в место решёток вставить свой адрес блога и лучшее место этому виджету над вашими статьями. Вставьте код в гаджет и перетащите его:

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

Дамы и господа, а это вы читали?:

Купить ссылку здесь за руб.

Поставить к себе на сайт

Создано на конструкторе сайтов Okis при поддержке Flexsmm - накрутка инстаграм

Виджет Blogger Последние сообщения

Как изменить стартовую заставку в Windows 7

Слайд-шоу в шапке сайта

Бесплатный Яндекс диск

Обтекание картинки текстом

Russian TOP

• Profitcentr

• Fastprom

• Web-ip

• CashTaller

• SEO last
• SocPublic

• MigBux

• VipBux

• M2Net

• CarmoneyTaxi