CPA заработок или Как заработать свои первые 100 000 рублей! БЕСПЛАТНО!


пятница, 7 февраля 2014 г.

Виджет выдвижных социальных кнопок на Blogspot "4в1"

Приветствую вас дорогие друзья на блоге bloguspeh.ru. Сегодня, я хочу поделиться с вами ещё одной фишкой, которую вы наверняка видели на некоторых блогах расположенных на Вордпресс, это виджет выдвижных социальных кнопок или подписок, как вам будет угодней. Четыре в одном, Вконтакте, Твиттер, Гугл+ и подписка на Email.

На вордпрессе, такая штука устанавливается с помощью плагина, ну а мы с вами будем вставлять рукописный код на Blogspot. Как этот виджет выглядит, вы можете посмотреть у меня на блоге справа.

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

И так, первым делом меняем код Вконтакте он выделен жёлтым цветом. Заходим по этому адресу: https://vk.com/dev/Community  вставляете свою ссылку на вашу страницу или группу, настриваете виджет, копируете получившийся код и вставляете его вместо того который выделен жёлтым цветом.

Дальше, настраиваем Твиттер. Заходим в свой аккаунт, в верху нажимаем "Настройки и помощь", нажимаем кнопку "Настройки", слева выбираем "Виджеты", справа вверху нажимаем "Создать новый". Настраиваете его, нажимаете кнопку "Создать виджет", копируете код и вставляете его вместо того который выделен зелёным цветом.

Ну и последнее, остаётся заменить всё что выделено синим цветом в двух местах, это ваш код на Feedburner, для подписки на Емайл. Для этого заходим сюда: http://feedburner.google.com/

<style> img,a { border: 0;} #on { visibility: visible;} #off { visibility: hidden;} #facebook_div { width: 196px; height: 340px; overflow: hidden;} #twitter_div { width: 246px; height: 353px; overflow: hidden;} #google_plus_div { width: 152px; height: 97px; overflow: hidden; margin-left: 50px; margin-top: 10px;} #knfeedburner_div { width: 300px; height: 97px; overflow: hidden; margin-top: 5px; margin-left: -4px;} #kakinetwork_div { width: 300px; height: 97px; overflow: hidden; }/* right side style */#facebook_right { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; right: -200px;} #facebook_right img { position: absolute; top: -2px; left: -35px;} #facebook_right iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; left: -2px; top: -3px;} #twitter_right { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; right: -250px;} #twitter_right_img { position: absolute; top: -2px; left: -35px; border: 0;} #google_plus_right { z-index: 10003; background-color: #F2F2F2; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-right: 2px solid #0056a0; border-left: hidden; width: 152px; height: 97px; position: fixed; right: -154px;} #google_plus_right_img { position: absolute; top: -2px; left: -33px; border: 0;} #feedburner_right { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-right: 2px solid #5b5b5b; border-left: hidden; width: 300px; height: 97px; position: fixed; right: -303px;} #feedburner_right_img { position: absolute; top: -2px; left: -33px; border: 0;} #kakinetwork_right { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_right img { position: absolute; top: -2px; left: -101px; }/* left side style */#facebook_left { z-index: 10005; border: 2px solid #3c95d9; background-color: #fff; width: 196px; height: 353px; position: fixed; left: -200px;} #facebook_left img { position: absolute; top: -2px; right: -35px;} #facebook_left iframe { border: 0px solid #3c95d9; overflow: hidden; position: static; height: 360px; right: -2px; top: -3px;} #twitter_left { z-index: 10004; border: 2px solid #6CC5FF; background-color: #6CC5FF; width: 246px; height: 353px; position: fixed; left: -250px;} #twitter_left_img { position: absolute; top: -2px; right: -35px; border: 0;} #google_plus_left { z-index: 10003; background-color: #006ec9; border: 2px solid #006ec9; border-top: 2px solid #0056a0; border-bottom: 2px solid #0056a0; border-left: 2px solid #0056a0; border-right: hidden; width: 152px; height: 97px; position: fixed; left: -154px;} #google_plus_left_img { position: absolute; top: -2px; right: -33px; border: 0;} #feedburner_left { z-index: 10003; background-color: #fefefe; border: 2px solid #5b5b5b; border-top: 2px solid #5b5b5b; border-bottom: 2px solid #5b5b5b; border-left: 2px solid #5b5b5b; border-right: hidden; width: 300px; height: 97px; position: fixed; left: -303px;} #feedburner_left_img { position: absolute; top: -2px; right: -33px; border: 0;} #kakinetwork_left { z-index: 10003; border: 2px solid #303030; background-color: #fff; width: 300px; height: 97px; position: fixed;} #kakinetwork_left img { position: absolute; top: -2px; right: -101px;} .box-title1 { border: 1px solid #ddd; /*border-radius*/ -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; /*box-shadow*/ -webkit-box-shadow: 5px 5px 5px #CCCCCC; -moz-box-shadow: 5px 5px 5px #CCCCCC; box-shadow: 5px 5px 5px #CCCCCC; padding: 10px; margin: 10px 0;} .enteryouremail { background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; /*border-radius*/ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; margin: 0px;} .submitbutton { background: #F2F2F2; border: 1px solid #F66303; /*box-shadow*/ -webkit-box-shadow: 3px 3px 3px #666; box-shadow: 3px 3px 3px #666; font: bold 12px Arial, sans-serif; color: #000000; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; /*border-radius*/ -webkit-border-radius: 5px; border-radius: 5px; cursor: pointer;} </style><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); }); jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); }); jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); }); jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); }); });</script> <div id="on"> <div id="facebook_right" style="top: 18%;"> <div id="facebook_div"> <img src="http://img-fotki.yandex.ru/get/9833/61590320.2/0_e7a67_5c15c633_S.png" alt=""/> <script type="text/javascript" src="//vk.com/js/api/openapi.js?105"></script> <!-- VK Widget --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 2, width: "200", height: "400"}, 65049071); </script> </div> </div> </div> <div id="on"> <div id="twitter_right" style="top: 35%;"> <div id="twitter_div"> <img id="twitter_right_img" src="http://2.bp.blogspot.com/-ggLNgeprfJo/T_CUf8BMk8I/AAAAAAAABuk/f38udn9GKo4/s1600/twitter-icon.png"/> <script src="http://widgets.twimg.com/j/2/widget.js"></script> <a class="twitter-timeline" href="https://twitter.com/olymp63" data-widget-id="431888072108564480">Твиты пользователя @olymp63</a> <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> </div> </div> </div> <div id="on"> <div id="google_plus_right" style="top: 52%;"> <div id="google_plus_div"> <img id="google_plus_right_img" src="http://1.bp.blogspot.com/-zwfLV74trKg/T_CUcBJIkVI/AAAAAAAABuU/LVVwVCRESpI/s1600/google-plus-icon.png"/> <div style="float:left;margin:10px 10px 10px 0;"> <g:plusone size="tall" expr:href="data:post.url"></g:plusone> </div> </div> </div> <div id="on"> <div id="feedburner_right" style=" top: 69%;"> <div id="knfeedburner_div"> <center> <br /> <h4 style="color:#F66303;">Подпишитесь на обновления блога:</h4> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open ('http://feedburner.google.com/fb/a/mailverify?uri=bloguspeh/JrXo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> <input gtbfieldid="10" class="enteryouremail" name="email" value="Введите свой email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Введите свой email...&#39;;}" onfocus="if (this.value == &#39;Введите свой email...&#39;) {this.value = &#39;&#39;;}" type="text"/> <input value="bloguspeh/JrXo" name="uri" type="hidden"/><input value="Подписаться" class="submitbutton" type="submit"/> </form> </center><img id="feedburner_right_img" src="http://img-fotki.yandex.ru/get/9747/61590320.2/0_e7a60_4cba2a02_S.png"/> </div> </div> </div> </div>
Feedburner: bloguspeh/JrXo  - меняем на свой.

Ну вот друзья и всё, после того как вы всё заменили, копируете код, заходите в "Панель управления Блоггера", выбираете вкладку "Дизайн", дальше нажимаете "Добавить гаджет", выбираете HTML/JavaScript, и вставляете код. Всё, сохраняем и переходим на блог для просмотра того, что у вас получилось.

Для большей наглядности, в основном для новичков, я записал видеоролик. В котором показал всё пошагово. Приятного просмотра:
Надеюсь получилось не плохо. Я думаю, виджет выдвижных социальных кнопок на вашем блоге будет здоровски смотреться. Так же по теме, хочу предложить вам ещё один виджет формы подписки синего цвета. А я с вами прощаюсь, желаю удачи и до новых встреч.

P.S. Получите 50 сайтов "под ключ" с пожизненным доходом от 6750 р/день. Подробности Здесь!

Хотите получать свежие статьи?

0 коммент.:

Отправить комментарий

Посещаемость сайта