Здравствуйте, товарищи дорогие! Предлагаю вашему вниманию нужные виджеты для Blogger. Данные гаджеты не только нужные, но и будут полезные для вашего блога. Сегодня у нас будет: форма подписка по E-mail (другой набор есть, здесь); Blogger виджет случайных сообщений; блок состоящий из формы подписки по почте с соцкнопками и рекламным местом; блок с формой подписки, соцкнопками и похожие статьи без миниатюр. Все представленные виджеты/гаджеты очень симпатичные, вам они понравятся.
Первым у нас пойдёт виджет подписки по E-mail - бесплатная рассылка обновлений по электронной почте, чтобы позволить вашим посетителям блога подписаться на получение ваших новых записей по электронной почте (E-mail).
Подписка по E-mail - виджет Blogger
Выглядеть он будет так, симпатично:
Установить такой виджет и другие, представленные ниже, можно с помощью нашего любимого, и не заменимого гаджета HTML/JavaScript. Вставьте в его поле такой код:
<style> .abt-email{ background:url(https://lh3.googleusercontent.com/-3mMr7bVkJEA/T2mKAcZEBkI/AAAAAAAAAZI/IWMC_nG_foU/h120/service-email.jpg) no-repeat -8px 10px ; width:280px; padding:10px 0 0 65px; float:left; font-size:1.2em; font-weight:bold; margin:0 0 10px 0; color:#0084CE; box-shadow: 1px 1px 5px 1px #eee; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; } .abt-emailsubmit{ background:#9B9895; cursor:pointer; color:#fff; border:none; padding:4.4px; text-shadow:0 -1px 1px rgba(0,0,0,0.25); -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; font:12px sans-serif; box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1); } .abt-emailsubmit:hover{ background:#0084CE; box-shadow:inset 8px 8px 6px rgba(0,0,0,0.1); } .textarea{background: #fff !important;box-shadow:inset 4px 4px 3px rgba(0,0,0,0.1); border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #888; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } </style> <div class='abt-email'> Подписаться по Email <form action="https://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=#######', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address here" type="text" /> <input type="hidden" value="######" name="uri"/><input type="hidden" name="loc" value="ru_RU"/> <input class="abt-emailsubmit" value="Подписаться" type="submit" /> </form> </div>
Как видите, здесь, объедены стили виджета и сам HTML код и поэтому вам, дополнительно, не надо лазить в шаблон блога. Всё просто, вставили и готово. Теперь, что нужно в коде заменить. По умолчанию ширина виджета выставлена 280 px, менять в этой строке - width:280 px; (в самом верху). Естественно, надписи можете тоже заменить и самое главное, в двух местах замените решётки #### на свой ID Feedburner. Побежали дальше.
Виджет случайных сообщений с картинками
Вот такой виджет random post:
Какую роль выполняет данный гаджет? Догадаться не сложно, всё ясно по названию. Виджет будет для ваших посетителей показывать сообщения в случайном порядке, то есть, при каждом обновление страницы будут вытаскиваться и отображаться совсем разные записи.
Это как бы палочка выручалочка для вас, пусть мелькают разные заголовки статей у посетителей перед глазами, всё равно читателя, что нибудь да, и заинтересует. А значит будет больше просмотров. Вот, как то так. Ну вообщем вы меня поняли, очень надеюсь.
Для установки виджета случайных сообщений в блог, зайдите в панель управления Blogger - Дизайн и на боковой панели нажмите добавить гаджет HTML/JavaScript и в его поле вставьте код:
<style> #random-posts img { border-radius: 10px; float: left; margin-right: 5px; width: 75px; height: 75px; background-color: #F5F5F5; padding: 3px; transition: all 0.2s linear 0s; } #random-posts img:hover { opacity: 0.6; } ul#random-posts { list-style-type: none; padding: 0px; } #random-posts a { font-size: 12px; text-transform: uppercase; padding: 0px auto 5px; } #random-posts a:hover { text-decoration: none; } .random-summary { font-size: 11px; background: none; padding: 5px; margin-right: 8px; } #random-posts li { margin-bottom: 10px; border-bottom: 1px solid #EEEEEE; padding: 4px; } </style> <ul id='random-posts'> <script type='text/javaScript'> var randomposts_number = 5; var randomposts_chars = 110; var randomposts_details = 'yes'; var randomposts_comments = 'Comments'; var randomposts_commentsd = 'Comments Disabled'; var randomposts_current = []; var total_randomposts = 0; var randomposts_current = new Array(randomposts_number); function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t } document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); function getvalue() { for (var i = 0; i < randomposts_number; i++) { var found = false; var rndValue = get_random(); for (var j = 0; j < randomposts_current.length; j++) { if (randomposts_current[j] == rndValue) { found = true; break } }; if (found) { i-- } else { randomposts_current[i] = rndValue } } }; function get_random() { var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1)); return ranNum }; </script> <script type='text/javaScript'> function random_posts(json) { for (var i = 0; i < randomposts_number; i++) { var entry = json.feed.entry[i]; var randompoststitle = entry.title.$t; if ('content' in entry) { var randompostsnippet = entry.content.$t } else { if ('summary' in entry) { var randompostsnippet = entry.summary.$t } else { var randompostsnippet = ""; } }; randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, ""); if (randompostsnippet.length < randomposts_chars) { var randomposts_snippet = randompostsnippet } else { randompostsnippet = randompostsnippet.substring(0, randomposts_chars); var whitespace = randompostsnippet.lastIndexOf(" "); randomposts_snippet = randompostsnippet.substring(0, whitespace) + "…"; }; for (var j = 0; j < entry.link.length; j++) { if ('thr$total' in entry) { var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments } else { randomposts_commentsnum = randomposts_commentsd }; if (entry.link[j].rel == 'alternate') { var randompostsurl = entry.link[j].href; var randomposts_date = entry.published.$t; if ('media$thumbnail' in entry) { var randompoststhumb = entry.media$thumbnail.url } else { randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png" } } }; document.write('<li>'); document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>'); document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>'); if (randomposts_details == 'yes') { document.write('<span><div class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>' }; document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><div style="clear:both"></div></li>') } }; getvalue(); for (var i = 0; i < randomposts_number; i++) { document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>') }; </script> </ul>
Сохраните и всё готово. Проверьте работу, просто обновите страницу. Как вы можете видеть, мы поместили в гаджет всё вместе, стили виджета и скрипт, для того, чтобы вам облегчить работу и не искать в шаблоне нужные теги. Далее, пройдёмся по основным настройкам.
width: 75px; height: 75px; - размеры выводимых картинок;
var randomposts_number = 5; - количество выводимых сообщений;
var randomposts_chars = 110; - количество символов анонса;
var randomposts_details = 'yes'; - показывать дату и количество комментариев. Если не надо, то указываем значение no.
Вроде не забыл ничего, если что, обращайтесь. Что там у нас идёт далее? А дальше идут супер виджеты красавцы которые устанавливаются сразу после статьи блога.
Блок виджетов Blogger после сообщений
Я даже не знаю, как этот виджет назвать. Назову его многофункциональным виджетом три в одном. Вот он супер красивый блоггеровский виджет:
В этом блоке в дополнение к форме подписки по почте присутствует: место под рекламу 120 х 120 (использовать можно не обязательно под объявление); социальные кнопки Facebook, Google plus, Twitter, а так же присутствует в форме, название читаемой статьи (вверху блока SEO ссылка). Фон у меня получился серенький, но у вас должен быть по идее белый, хотя, как знать, смотря куда его установите.
Стиль CSS для данного виджета:
/***************************************** Name :Widget Email subscribe with Advertise ******************************************/ #bdrs-subscribe { width:590px; /* LEBAR WIDGET */ min-height:60px; border-radius: 5px; box-shadow: 0px 0px 5px #BBB; background: none repeat scroll 0 0 transparent; border: 1px solid #c4c4c4; padding: 8px; margin:10px 0; } #bdrs-subscribe td{ padding:3px 0; } ul.vay-social { margin:0px 0 5px -20px; display:inline-block; list-style-type: disc; margin-top: -20px; } ul.vay-social li { display:inline; float:left; } ul.vay-social li a { display:block; height:48px; margin-right:10px; position:relative; text-decoration:none; } #bdrs-subscribe #vay-skin:hover li { opacity:0.1; } #bdrs-subscribe #vay-skin li:hover { opacity:1; } #bdrs-subscribe #vay-skin li:hover a strong { opacity:1; top:-5px; } #bdrs-subscribe .bdrs-sub{ width:270px; padding:10px 0 0 15px; float:left; font-family: "Trebuchet MS",sans-serif; font-size:1.2em; font-weight:bold; margin:0 0 0px 0; color:#111; } #bdrs-subscribe .bdrs-form { padding:7px 15px 7px 5px; color:#666; font-weight:bold; text-decoration:none; border:1px solid #D3D3D3; border-radius: 4px; box-shadow: 0 0 2px #CCC inset; background-color: #E6FFFF; } #bdrs-subscribe .bdrs-submit { color:#666; font-weight:bold; text-decoration:none; padding:6px 15px; border:1px solid #c4c4c4; cursor: pointer; border-radius: 4px; background-color: #00FFFF; }/* CSS code End */
CSS стили устанавливаем в шаблон блога чуть выше строчки ]]></b:skin>.
Код HTML для установки виджета под сообщение в вашем блоге:
<!--SUBSCRIBE start --> <div id='bdrs-subscribe'> <table width='100%' > <tbody> <tr> <td height='100' style="float:left; margin-top:1px" width='340'> <p style='color:#111; font-size: 11px;font-family: "Trebuchet MS",sans-serif; margin:0px 0px 5px 0px; '> Judul :<span style="color:#990000"> <a expr:href='data:post.url'> <data:post.title/> </a> </span> </p> <div class='bdrs-sub'> Подписаться на новые статьи: <form action='https://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=###### ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='######'/> <input name='loc' type='hidden' value='ru_RU'/> <input class='bdrs-form' name='email' onblur='if (this.value == "") {this.value = "Введите адрес email…";}' onfocus='if (this.value == "Введите адрес email…") {this.value = ""}' type='text' value='Enter your email…'/> <input alt='' class='bdrs-submit' title='' type='submit' value='Получать!'/> </form> </div> </td> <td ><img alt="advertiser" src="https://3.bp.blogspot.com/-HYzvNk4gQ_0/Ui_5oWo0HNI/AAAAAAAABw0/gKvoslV3Od4/s1600/advertiser.gif" title="advertiser"/></td> <td><img alt="advertiser" src="https://3.bp.blogspot.com/-HYzvNk4gQ_0/Ui_5oWo0HNI/AAAAAAAABw0/gKvoslV3Od4/s1600/advertiser.gif" title="advertiser"/></td> </tr> </tbody> </table> <div align='left'> <ul class="vay-social" id="vay-skin"> <li> <a href="https://www.facebook.com/zagulyaevsv" target="_blank" ><img alt='facebook' src="https://3.bp.blogspot.com/-yRUxDt11GnE/UjCkLgaEmdI/AAAAAAAABxU/-3VeWp6a8o4/s1600/fbk.png" width="100" height="28" title='Like Facebook'/></a> </li> <li> <a href="https://plus.google.com/u/0/b/111471932706805203111/+DljabloggerRu" rel="nofollow" target="_blank" ><img alt='gplus' src="https://3.bp.blogspot.com/-ByzOfPrQLpc/UjCkKGJGF8I/AAAAAAAABxE/6kcQFFfdFMc/s1600/GP.png" width="100" height="28" title='invite google plus'/></a> </li> <li> <a href="https://twitter.com/zagulyaevsv" rel="nofollow" target="_blank" ><img alt='twitter' src="https://4.bp.blogspot.com/-xq_h8wkL0jM/UjCkLPHhREI/AAAAAAAABxM/q-eSJoZmE_I/s1600/twk.png" width="100" height="28" title='Follow twitter'/></a> </li></ul> <div style=" margin-top:-25px;">Спасибо за ваш визит!Получайте актуальные статьи о Blogger, заработку на сайте или в Интернете прямо на электронную почту.</div> </div> </div> <!-- SUBSCRIBE end -->
Данный код гаджета вставляется в шаблон блога после строки (чуть ниже) <data:post.body/> или после <div class='post-footer-line post-footer-line-1'>, или <div class='post-footer-line post-footer-line-2'>, или <div class='post-footer-line post-footer-line-3'>. Шаблоны у всех разные и поэтому строки тоже будут разные. Здесь, так же, замените мои данные в соцсетях на свои и надписи впишите, какие вам захочется. Вместо решёток ##### укажите ваш ID блога/сайта FeedBurner.
И напоследок, думаю на сегодня хватит, а то больно пост получится большой, не каждый дойдет до конца, чтобы поблагодарить в комментариях (я надеюсь).
Блок: форма подписки по почте; похожие сообщения без картинок и соцкнопки
Многофункциональный виджет для Blogger вам должен понравится, он просто красава. Смотрите какой он, английский не бойтесь, у вас будет русский язык:
Как вы видите блок состоит из нескольких виджетов: подписка по почте; похожие статьи без миниатюр (похожие сообщения есть ещё, здесь) и социальные кнопки. Три в одном. Экономия места в вашем блоге будет серьёзная.
CSS стиль данного виджета такой:
/***************************************** Name : widget Related post with subscribe ******************************************/ #BDRS-widget { width:580px;//lebar widget padding:3px; border: solid #999 1px; background-color: #FFFFFF; height: 200px;// tinggi widget border-radius:5px; box-shadow: 0 1px 4px #000; } #BDRS-widget .left { width:56%; padding:3px; float: left; } #BDRS-widget .right { width:40%; padding:5px; background-color: #CCCCCC; float: right; } .BDRS-box{ border:1px; solid #1A2638; border-radius:10px; padding:10px; text-align:center; background-color: #FFFFFF; height: 171px; } .BDRS-box h2{ margin-top:5px; color:#FF0000; font-family:georgia; font-size:18px; margin-bottom:5px; padding:0; text-shadow:0px 1px 1px #000; line-height:35px; font-weight: bold; } .BDRS-box .input1{background: -moz-linear-gradient(center top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;text-shadow:1px 1px 0 #FFF;width:180px; color:#990000; font-family:georgia; margin-bottom:5px;border: 1px solid rgb(9, 149, 223); border-radius: 6px 6px 6px 6px; box-shadow: 2px 4px 4px rgb(192, 191, 191); border-color: #A21009;} .BDRS-box .BDsubmit{background:#09f; border: 2px solid rgb(9, 149, 223); border-radius: border-radius:10px 10px 10px 10px; box-shadow: 2px 4px 4px rgb(113, 112, 112); color:#fff; cursor:pointer; font-family:verdana; font-size:12px; padding:0px; text-shadow:1px 1px 0 rgba(0,0,0,.4); text-transform:uppercase; width:100px; height:36px; background-color: #990000; border-color: #FF0000; } .BDRS-box .BDsubmit:hover{background-color: #DD0000; color: #000000; border-color: #550000;} .BDRS-box .submit:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px; background-color:#5B0A00;} #related-posts { float : left; width:100%; margin-left : 5px; font : 11px Verdana; margin-bottom:2px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 14px; font-weight: bold; margin : 5px 7px 0; padding : 0 0 5px; font-family: Geneva; font-style: italic; border-bottom:dashed #990000 1px; } #related-posts a { text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #000099; } #related-posts a:hover { text-decoration : none; color: #990000; } #related-posts ul { border : medium none; padding : 0; } #related-posts ul li { display : block; background : url("") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 0px; margin-bottom : 0px; } #related-posts ul li{ background:transparent url(http://1.bp.blogspot.com/-LZRTi6LiSXc/UfOaqASxwSI/AAAAAAAABlU/TcibyuwSwJo/s1600/ico-rss.jpg) no-repeat; display:block; list-style-type:none; margin-bottom: 5px; padding-left: 20px; padding-top:0px; } #related-posts ul li a {block;color: #222} #related-posts ul li a:hover {block; color: #990000; } .BD-sosial a { background-color:#99FF00; font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; font-size: 13px; color: #6C0000; font-weight: bold; text-decoration: none; padding:3px 10px; margin-right:2px; border: solid #999900 1px; margin-bottom:2px; text-shadow: 0px 1px 0px #111; border-radius:3px; } .BD-sosial a:hover { background-color:#E6FFBF; color: #333333; text-shadow: 0px 1px 0px #111; border: solid #666 1px; box-shadow:0 0 2px #666; }/*** Blog Design CSS and ***/
А код для вставки после сообщения:
<!--BDRS start for widget --> <div id='BDRS-widget'> <div class='left'> <div id='related-posts'> <h2><b>Статьи по теме:</b> </h2><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'> <data:label.name/> <b:if cond='data:label.isLast != "true"'>,</b:if> <b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> var relatedTitles=new Array();var relatedTitlesNum=0; var relatedUrls=new Array();function related_results_labels(json) {for(var i=0;i<json.feed.entry.length;i++) {var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]= entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate') {relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break;}}}} function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0); for(var i=0;i<relatedUrls.length;i++){if (!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length- 1]= relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length- 1]=relatedTitles[i];}} relatedTitles=tmp2;relatedUrls=tmp;} function contains(a,e){for(var j=0;j<a.length;j++)if(a[j]==e)return true;return false;} function printRelatedLabels(){var r=Math.floor((relatedTitles.length- 1)* Math.random());var i=0;document.write('<ul>'); while(i<relatedTitles.length&&i<20) {document.write('<li><a href="'+ relatedUrls[r]+'">'+ relatedTitles[r]+'</a></li>');if(r<relatedTitles.length- 1){r++;}else{r=0;} i++;} document.write('</ul>');document.write();} </script> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels& max-results=5"' type='text/javascript'/> </b:if></b:loop></font> <script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();</script> </div> <div class="BD-sosial" style="margin-bottom:10px;"> <a href="LINK GPLUS " target="_blank" title="gplus">Gplus</a> <a href="LINK FACEBOOK " target="_blank" title="facebook">Facebook</a> <a href="LINK TWITTER " target="_blank" title="twitter">Twitter</a> <a href="https://www.blogger.com/follow-blog.g?blogID=ID BLOGGER " target="_blank" title="follow">Blogger</a> </div></div> <div class='right'> <div class='BDRS-box'><h2> подписка на статьи по электронной почте </h2> <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=ID Feedburner', 'popupwindow', 'scrollbars=yes,width=600,height=550');return true' target='popupwindow'> <input class='input1' name='email' onblur='if (this.value == "") {this.value = "Введите Email Address...";}' onfocus='if (this.value == "Введите Email Address...") {this.value = ""}' type='text' value='Введите Email Address...'/> <input class='BDsubmit' name='submit' type='submit' value='Получать!'/> <input name='uri' type='hidden' value='ID Feedburner '/> <input name='loc' type='hidden' value='ru_RU'/> </form></div></div></div><div style='clear: both;'/> <!--BDRS clear for widget -->
Все так же, ссылки на профили соцсетей, текст свой и так далее. На этом у меня все. Конечно есть ещё запасы, но это в следующий раз. Чтобы не пропустить новые статьи прошу подписаться на мой блог. До встречи. Пока, пока.
Некоторые виджеты одолжил у индонезийского автора - rivai-silaban, дай ему господь здоровья и побольше создать хороших и разных виджетов для нас, пользователей Blogger.