2 красивых виджета последние сообщения для блога.

Здравствуйте все, кто читает мои шпаргалки. Сегодня я хочу предложить вам красивые виджеты  последние сообщения блога. Нужны они или нет каждый решает для себя. Многие говорят, что не к чему, так как они и так видны на главной
странице блога. А я считаю, что вполне имеют место быть. Ведь у многих по 1-3 поста на главной.
Почему не показать с помощью виджета больше. С другой стороны, не всегда читатель приходит на блог через главную страницу. Тут как нельзя кстати можно заинтересовать другими статьями своих посетителей.

Ну давайте уже приступим.

Вариант 1. На них отображаются последние сообщения с картинками и количество комментариев  к ним. При наведении курсора картинка вращается.

Вариант 2. Очень оригинальный виджет  с вращающемся эффектом . При наведении курсора всплывает окно с анонсом сообщения.

Работу их вы можете посмотреть на тестовом блоге. Ну если вы уже определились с выбором, давайте приступим к установке. 

Идём ДИЗАЙН-ДОБАВИТЬ ГАДЖЕТ-  HTML/JavaScript и вставляем выбранный код. 

Код первого виджета. 

<style type="text/css" media="screen">

#spylist {
overflow:hidden;
margin-top:4px;
padding:0px 0px;
height:400px;
}

#spylist ul{
width:300px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}

#spylist li {
width:295px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:85px;
overflow: hidden;
background: #000
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO3g-ngxCWnwcqb9bDinVUs9KWqthrD3j2bdT4Saxs7LD6uBTN-aiV-PUvD-lCslCiIW_sQ0GtHbFx3a3TMDdnwg_wKgIwDIno4rjYlR4aUEs1sem30roh6Wu8n0EOxGgFa6x-m-pFZtg/s1600/helperblogger.com-post.jpg)
repeat-x;
border: 1px solid #ddd;
}

#spylist li a {
text-decoration:none;
color:#000;
font-size:12px;
height:17px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#spylist li img {
float:left;
margin-right:5px;
background:#f4eeee;
border:0;
}

#spylist img { float: left; margin-top: 10px; margin-right: 15px; background: #EFEFEF; border: 0; }

#spylist img {
-webkit-transition:
all 0.5s ease; -moz-transition: all 0.5s ease; transition: all 0.5s
ease; padding: 4px; background: #eee; background:
-webkit-gradient(linear, left top, left bottom, from(#eee),
color-stop(0.5, #ddd), color-stop(0.5, #c0c0c0), to(#aaa)); background:
-moz-linear-gradient(top, #eee, #ddd 50%, #c0c0c0 50%, #aaa);
-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
-webkit-box-shadow: 0 0 3px rgba(0,0,0,.7); -moz-box-shadow: 0 0 3px
rgba(0,0,0,.7); box-shadow: 0 0 3px rgba(0,0,0,.7);
}

#spylist img:hover {
-moz-transform:
scale(1.2) rotate(-350deg); -webkit-transform: scale(1.2)
rotate(-350deg); -o-transform: scale(1.2) rotate(-350deg);
-ms-transform: scale(1.2) rotate(-350deg); transform: scale(1.2)
rotate(-350deg); -webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0
20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,0,0,.4),
inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px
rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);
 }

.spydate{
overflow:hidden;
font-size:11px;
color:#007cb5;
padding: 3px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,sans-serif;
}

.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:9px;
color:#272b2e;
padding:2px 0px;
margin:0px 0px;
}

/* ==== Scrolling Recent Posts Widget By SafeTricks.Net ===== */
-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[1] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[2] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[3] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";
imgr[4] = "https://lh5.googleusercontent.com/-jpWYcHExk_o/UUVu-TKOXeI/AAAAAAAABA0/jN2dyzOde10/h120/noimage.png";

showRandomImg = true;
boxwidth = 300;
cellspacing = 5;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 69;
thumbheight = 72;
fntsize = 13;
acolor = "#555";
aBold = false;
icon = " ";
text = "comments";
showPostDate =true;
summaryPost = 39;
summaryFontsize = 9;
summaryColor = "#555";
icon2 = " ";
numposts = 4;
home_page = "http://poluhka.blogspot.ru/";
limitspy=7;
intervalspy=3000
</script>
<div id="spylist">
<script src='https://googledrive.com/host/0B_1mqJd2tC8qLUJMTGZqTE1qTUU' type='text/javascript'></script>
</div>

Код второго виджета.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
#post-gallery {width:100%; margin:0px auto;font:normal 11px Arial,Sans-Serif;color:##000000;padding:8px;}
#post-gallery .rp-item {float:left;display:inline;  position:relative;  margin:2px;  padding:0px 0px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf_Xmc1l3SRSARRm7gzsY96JDNEV6HDz8UHOVZaD-Zunm-P3iVcCZ9t14_0k0MsMdXOFnUC9OcfmnJwQtJ-_dTyckObN1cx2dU4RDq7utpeJGcLOCnyfqXzGOjirkV7jqkJt4b0d61n4sb/s1600/LOAD+(66).gif') no-repeat 50% 50%;  width:79px;  height:79px;}
#post-gallery .rp-item img {  width:69px;  height:69px;  border:none !important;  margin:0px 0px !important;  padding:0px 0px !important;  background:transparent !important;  display:none;}
#post-gallery .rp-item img:hover{-moz-transform: scale(1.2) rotate(-350deg);-webkit-transform: scale(1.2) rotate(-350deg);-o-transform: scale(1.2) rotate(-350deg);-ms-transform: scale(1.2) rotate(-350deg);transform: scale(1.2) rotate(-350deg);-webkit-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);-moz-box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);box-shadow: 0 0 20px rgba(255,0,0,.4), inset 0 0 20px rgba(255,255,255,1);}
#post-gallery .rp-item .rp-child {  position:relative;  top:10%!important;  left:10%!important;  z-index:1000;  width:200px;  background-color:white;  border-bottom:5px solid #1BA1E2;  -webkit-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  -moz-box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  box-shadow:5px 5px 10px rgba(0, 0, 0, 0.7);  padding:10px 15px;  overflow:hidden;  word-wrap:break-word;  display:none;  opacity: 0.9;}
#post-gallery .rp-item .rp-child h4 {  font-size:12px;  margin:0px 0px 5px;  color:#1BA1E2;}
#post-gallery .rp-item:hover .hidden {display:block;}</style>
<script type="text/javascript">
var rpTitle     = "последние сообщения",       // Widget Title
    numposts    = 6,      // Number of Posts to show
    numchar     = 200,      // Number of Characters to be displayed
    rcFadeSpeed = 600,      // Speed
    pBlank      = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",      // If No Image
    blogURL     = "http://hpargallka.blogspot.ru//";    
</script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-recent-posts.js" type="text/javascript"></script>

Сейчас о настройках. В обоих кодах выделенное красным меняем на адрес своего блога. Синим height:400px(высота) и width:300px(ширина)-подбираем свои значения. И зелёным-количество отображаемых сообщений.

Думаю вам может ещё пригодится кнопка случайный пост.

Ну, не буду больше отнимать ваше время. Пробуйте и всё получится. Возникнут вопросы-спрашивайте.
Благодарю автора блога http://www.allbloggertricks.com за предоставленную информацию.

хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :