Будь в курсе событий!

08.10.2013

Последние сообщения на jQuery с прокруткой, и подсветкой.

By andrey октября 08, 2013 CSS и JQUERY Виджеты Leave a Comment
Этот 8QEFR48WJDXH учебник будет про создание виджета последних сообщений, виджет сам по себе очень красивый тем что во первых,  он с прокруткой вниз  во вторых  подсветка, и вращающиеся иконки. По мимо того так же в данном виджете отображается дата, и количество комментариев.Советую  попробовать установить  самим, что бы убедится  в полезности гаджета.Но есть маленький нюанс, поскольку данный виджет на jQuery он не у всех может пойти. Например у меня он не идет потому что, та версия jQuery  что установлена у меня более новая, так что если у кого не будет работать скорее всего проблема именно с jQuery плагином.  И так его установка:
                                                                                             


Первым делом надо зайти в шаблон блоггер, нажать изменить  HTML далее  зажать CTRL+F  и  в поле поиска что появится ввести </head>  как найдем тег </head> примо перед ним ставим код.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>

Далее нам нужно будет пройти в панель Дизайн там выбрать добавить гаджет далелее ищем в списке HTML / JavaScript и добавляем в него следующий код.

Код:
<style type="text/css" media="screen">
<!--

/* ========== Scrolling Recent Posts Widget By zarnakoom.blogspot.com ======== */

#helperblogger-widget {
    overflow: hidden;
    margin-top: 5px;
    padding: 0px 0px;
    height: 385px;
}

#helperblogger-widget ul {
    width: 295px;
    overflow: hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin: 0px 0px;
}

#helperblogger-widget li {
    width: 282px;
    padding: 5px 5px;
    margin: 0px 0px 5px 0px;
    list-style-type: none;
    float: none;
    height: 80px;
    overflow: hidden;
    background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiEILqiTm-TOwB_h8GgRST9K45_ZNgpNKHZWPAj9k3D8CibTug-0Vkq0OZke1Ehvk_F3aZ3oEd8XJOaE6Jr80ruig4G3XWV_-swqrd9LJ8I4-T6Wev42Rlo46H18rkd7am4goG57dM1EYM/s1600/helperblogger.com-post.jpg) repeat-x;
    border: 1px solid #ddd;
}

#helperblogger-widget li a {
    text-decoration: none;
    color: #4B545B;
    font-size: 15px;
    height: 18px;
    overflow: hidden;
    margin: 0px 0px;
    padding: 0px 0px 2px 0px;
}

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

#helperblogger-widget 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);
}

#helperblogger-widget 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: 10px;
    color: #0284C2;
    padding: 2px 0px;
    margin: 1px 0px 0px 0px;
    height: 15px;
    font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
    overflow: hidden;
    font-family: Tahoma,Arial,verdana, sans-serif;
    font-size: 10px;
    color: #262B2F;
    padding: 0px 0px;
    margin: 0px 0px;
}

/* ========== Scrolling Recent Posts Widget By zarnakoom.blogspot.com ======== */

-->
</style>

<script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh9w7wZB9hKDTRVF5j5G6OMB991YpJLw4fTvHTl5JW2nf2oKZHlML_Y838os_X_cNFt2JthYMNxnriD1AB-nK42TcEv8INZ57Q8mnpeLYjNsbqf-EukC1wFo9NlXqJ2-uyDpow1wJIcI/s1600/no-thumbnail.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh9w7wZB9hKDTRVF5j5G6OMB991YpJLw4fTvHTl5JW2nf2oKZHlML_Y838os_X_cNFt2JthYMNxnriD1AB-nK42TcEv8INZ57Q8mnpeLYjNsbqf-EukC1wFo9NlXqJ2-uyDpow1wJIcI/s1600/no-thumbnail.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh9w7wZB9hKDTRVF5j5G6OMB991YpJLw4fTvHTl5JW2nf2oKZHlML_Y838os_X_cNFt2JthYMNxnriD1AB-nK42TcEv8INZ57Q8mnpeLYjNsbqf-EukC1wFo9NlXqJ2-uyDpow1wJIcI/s1600/no-thumbnail.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh9w7wZB9hKDTRVF5j5G6OMB991YpJLw4fTvHTl5JW2nf2oKZHlML_Y838os_X_cNFt2JthYMNxnriD1AB-nK42TcEv8INZ57Q8mnpeLYjNsbqf-EukC1wFo9NlXqJ2-uyDpow1wJIcI/s1600/no-thumbnail.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhh9w7wZB9hKDTRVF5j5G6OMB991YpJLw4fTvHTl5JW2nf2oKZHlML_Y838os_X_cNFt2JthYMNxnriD1AB-nK42TcEv8INZ57Q8mnpeLYjNsbqf-EukC1wFo9NlXqJ2-uyDpow1wJIcI/s1600/no-thumbnail.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://zarnakoom.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="helperblogger-widget">
<script src='http://code.helperblogger.com/recent-posts-spy.js' type='text/javascript'></script>
</div>


Что я пометил маркером можно изменить первое это   10  - количество сообщений  которые будут видны при прокрутке.

Второе это заменяем мой веб  http://zarnakoom.blogspot.com   адрес на свой.

 Третье 4  количество  сообщений что будут видны одновременно в гаджете.

Четвертое - 4000  скорость прокрутки ваших сообщений в гаджете.







 На этом  настройка гаджета завешена, но есть вариант как  его установить по другому.

А именно добавляем весь код в  гаджет HTML



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>


<style type="text/css" media="screen">
#workwidget {
overflow: hidden;
margin-top: 5px;
padding: 0px 0px;
height: 385px;
}

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

#workwidget li {
width: 282px;
padding: 5px 5px;
margin: 0px 0px 5px 0px;
list-style-type: none;
float: none;
height: 80px;
overflow: hidden;
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKm_lumNf9PcPmaQBi6UmAlUyijZnz009yGlzuD2dl452tZNsnvQgqsiMDZF_9sd8NEQUigybDarOMrQENweFeBU4m4dyamL7u0ZZlP84D0PS4fk630pXTinkp6wI5a8VjClQ5ceoHaB2g/s1600/24work-blogspot-com.jpg) repeat-x;
border: 1px solid #ddd;
}

#workwidget li a {
text-decoration: none;
color: #4B545B;
font-size: 15px;
height: 18px;
overflow: hidden;
margin: 0px 0px;
padding: 0px 0px 2px 0px;
}

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

#workwidget 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);
}

#workwidget 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: 10px;
color: #0284C2;
padding: 2px 0px;
margin: 1px 0px 0px 0px;
height: 15px;
font-family: Tahoma,Arial,verdana, sans-serif;
}

.spycomment {
overflow: hidden;
font-family: Tahoma,Arial,verdana, sans-serif;
font-size: 10px;
color: #262B2F;
padding: 0px 0px;
margin: 0px 0px;
}


</style><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tips and Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tips and Tricks" border="0" style="position: fixed; bottom: 10%; right: 0%; top: 0px;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Latest Tips For Bloggers"><img src="https://bitly.com/24workpng1" alt="Latest Tips For Bloggers" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a><a href="http://24work.blogspot.com/" rel="dofollow" target="_blank" title="Blogger Tricks"><img src="https://bitly.com/24workpng1" alt="Blogger Tricks" border="0" style="position: fixed; bottom: 10%; left: 0%;" /></a><script language='JavaScript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N5aFn-q2v3Y9OWXcVEM_8GQfpb83EswLeBrfoOXbsx4jirGswx-K-2XySyZb1_5Zbeci9zslHebMROnWUJtGDJiimr7pQM89VCDCwnbybuZMFOEcYHYVJBPHZIk6nafwmAumHQCPu7Mm/s1600/noimage.png";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N5aFn-q2v3Y9OWXcVEM_8GQfpb83EswLeBrfoOXbsx4jirGswx-K-2XySyZb1_5Zbeci9zslHebMROnWUJtGDJiimr7pQM89VCDCwnbybuZMFOEcYHYVJBPHZIk6nafwmAumHQCPu7Mm/s1600/noimage.png";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N5aFn-q2v3Y9OWXcVEM_8GQfpb83EswLeBrfoOXbsx4jirGswx-K-2XySyZb1_5Zbeci9zslHebMROnWUJtGDJiimr7pQM89VCDCwnbybuZMFOEcYHYVJBPHZIk6nafwmAumHQCPu7Mm/s1600/noimage.png";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N5aFn-q2v3Y9OWXcVEM_8GQfpb83EswLeBrfoOXbsx4jirGswx-K-2XySyZb1_5Zbeci9zslHebMROnWUJtGDJiimr7pQM89VCDCwnbybuZMFOEcYHYVJBPHZIk6nafwmAumHQCPu7Mm/s1600/noimage.png";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-N5aFn-q2v3Y9OWXcVEM_8GQfpb83EswLeBrfoOXbsx4jirGswx-K-2XySyZb1_5Zbeci9zslHebMROnWUJtGDJiimr7pQM89VCDCwnbybuZMFOEcYHYVJBPHZIk6nafwmAumHQCPu7Mm/s1600/noimage.png";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 15;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://zarnakoom.blogspot.com/";
limitspy=4;
intervalspy=4000;
</script>

<div id="workwidget">
<script src='http://dl.dropboxusercontent.com/s/qegice7y4oneszj/animated-recent-posts-ycode-2.js' type='text/javascript'></script>
</div>


             Всем удачных экспериментов, и ждите новых интересных статей.

0 коммент. :

© 2012-2017 Cash's from program