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

04.12.2013

Виджет социальный, одна штука в комплекте).

By andrey декабря 04, 2013 Виджеты и Гаджеты Leave a Comment

Как вы видете друзья  по картинке все должно быть понятно без слов, а если вкратце то  в виджете имеется строчка поиска, по вашему веб ресурсу так же помимо этого подписка на новости по почте, подписка на ленту новостей , твиттер, фейсбук тоже подписки и помимо того добавление в соц. закладки и прочее.
Установка не сложная как  обычно идм в шаблон, Изменить HTML пото звжимаем CTRL+F, ищем тег    </head>  ,   он в самом низу шаблона и вот этот код вставляем над ним.
<style type='text/css'>
.subbox{width:305px;border:0 solid #141414;overflow:hidden}
.addthis_toolbox{padding:15px 0 5px 0;text-align:center}
.addthis_toolbox .custom_images a{width:32px;height:32px;margin:0 4px 0 4px;padding:0}
.addthis_toolbox .custom_images a:hover img{opacity:1}
.addthis_toolbox .custom_images a img{opacity:0.85}
.rssbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.rssbox:hover{border:1px solid #92aed1}
.rssbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.rssbox a:hover{color:#7c8a9b;text-decoration:underline}
.emailsbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.emailsbox:hover{border:1px solid #92aed1}
.emailsbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.emailsbox a:hover{color:#7c8a9b;text-decoration:underline}
.twitterbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.twitterbox:hover{border:1px solid #92aed1}
.twitterbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}&gt;
.twitterbox a:hover{color:#7c8a9b;text-decoration:underline}
.facebookbox{background:#f7f6f6;border:1px solid #ccd1d7;padding:5px 10px;margin:10px 0 0 0;-moz-border-radius:10px;-khtml-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;width:125px}
.facebookbox:hover{border:1px solid #92aed1}
.facebookbox a{color:#7c8a9b;text-transform:uppercase;text-decoration:none;font:bold 12px Arial,Helvetica,Sans-serif}
.facebookbox a:hover{color:#7c8a9b;text-decoration:underline}
#search{width:290px;padding:2px 2px;background:#f7f6f6;border:1px solid #ccd1d7;height:28px;margin-top:0;margin-left:5px;display:inline;float:left}
#search:hover{border:1px solid #92aed1}
#search form{margin:0;padding:0}
#search fieldset{margin:0;padding:0;border:none}
#search p{margin:0;font-size:85%}
#s{width:200px;margin:0 0 0 0;padding:5px 5px 5px 5px;border:none;font:normal 80% &quot;Tahoma&quot;,Arial,Helvetica,sans-serif;color:#000;float:left;background:#f7f6f6;display:inline}
input#searchsubmit{float:right;display:inline;margin:0 0 0 0;height:28px;background:#b2b2b2;color:#000;border:0 solid #222}
</style>


Далее сохраняем шаблон и заходим в панель меню Дизайн, - добавить гаджет, в списке ищем HTMLjawascript  внего вставляем вот этом скрипт. Но предварительно там где я помечу маркером вставляем свои айди для сервисов Facebook,Twitter и так далее.
<div class="subbox">
<div id='search' style='display:inline;'>
<form action='/search' id='searchform' method='get'>
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}" type="text" value="Search..." />
<input id="searchsubmit" type="submit" value="Search" />
</form>
</div>
<table><tr>
<td><div class="rssbox">
<a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCq5pnHIjZsTvHixkcMmt-I2KjegwJjtEwVKjJMhJjn5PDpMviBd1ndLpiFdsxBf1pQGutZoZnUydqFvvRToEAe33qBt1tt1D8SiUFt5P6Cb_H9BUO0R55FYm6uDU-eMf7hvtABL7TCKmE/"  alt="RSS Feed" title="RSS Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feeds.feedburner.com/FEEDBURNER-ID" target="_blank" rel="nofollow">RSS Feed</a>
</div></td>
<td><div class="emailsbox">
<a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9Pa5J3yAmCiKmjz9dPLKIcRV2Rc4QZOzvdI4zqG3kCpEWqFHHizif-_E6k4LkkMeIkUh2As98lUuSt9zJVXiOerW7rpyTHenlqBTE7E62L0q4v5hFfmAWMna-DTMbcHIB1OqRILm3reZz/"  alt="EMail Feed" title="EMail Feed" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER-ID" target="_blank" rel="nofollow">EMail Feed</a>
</div></td>
</tr><tr>
<td><div class="twitterbox">
<a href="http://twitter.com/TWITTER-ИМЯ" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzjX43vwfCROURGbzYbkDGRCO9AUjb5VrkTS577BbIM6QZ8kWvk4bGhQDfzarK-Tc8J3nl12MlVOXwwsyG2tRjDWTwnvKPgP7C5i0v2FlzBU09fbGbcduDJumByXtbiab1wWT-oS4MyIag/"  alt="Twitter" title="Twitter" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://twitter.com/TWITTER-ИМЯ" target="_blank" rel="nofollow">Twitter</a>
</div></td>
<td><div class="facebookbox">
<a href="http://www.facebook.com/FACEBOOK-ИМЯ" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdbPsr84kOhR0Ax8mHS4IkqgvOT8ihdQBJmlaNfaeOmld800Cpqapon8Rrdfuf8qwzbXIUs56GjUGKCgv_CSC3YNDTVPRNfuvCNHHZcJJg5A0k3vNvkLXLcsWM93JDrzni962GrP9eKVVo/"  alt="Facebook" title="Facebook" style="vertical-align:middle; margin-right: 5px;border:none;"  /></a><a href="http://www.facebook.com/FACEBOOK-ИМЯ" target="_blank" rel="nofollow">Facebook</a>
</div></td>
</tr></table>
<p style="display:none;" align="center">Widget by <a href="http://www.ebloggertricks.com/" target="_blank">Eblogger Tricks</a></p>
<div class='addthis_toolbox'>
<div class='custom_images'>
<a class='addthis_button_twitter'><img alt='Twitter' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisw6IeOpOLlGxEROrnCcfiQ49OxM0mxi87H_jVaVAeIqivPKZgD_AmlxEKaqh6-d9EOWCWbAh4WjYLzZ0OJqfp9vU6xjg5MNzY9detog1-5z95nGsjRFL2qlRnaNZaowX0Ss8gEWA3woM/' width='32'/></a>
<a class='addthis_button_delicious'><img alt='Delicious' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic_VgwXdUAcKtbmSbYZ_pPUuEuVtTKC8Qo0rNSffCli_BbVtzZmbLJuCkGH7TIR6hEI6-2RuadIGcOwF_NyAM_Rd8hDBNhUF2c2SJyrmhQ4EYwi4o3Ypi7Dpl_uXCMvYrcX7OPBywHAPw/' width='32'/></a>
<a class='addthis_button_facebook'><img alt='Facebook' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZV1E-EVqJk8hB-WwYv1yc-ViHVY-VAUGyrtvpiBlAokB6snUMjLqVP1ARNFj4sr7FNjEObL0hdfFe5M_Rc384EnzPnBMRkDD1_KZreqNIkGmoxFyfN70mkzcyyMbaxAJ_n88i6jDElYk/' width='32'/></a>
<a class='addthis_button_digg'><img alt='Digg' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBECgvzWDjgbS3oz4goPC8dLXSo5zZ2vtGpca_SXNwuOHuSiBHl6FJ8BDCvh4BRUZf4mP93Z-UZ8fudgNvVaNm7k11X3pszwLJpHwxpEoddAzpb_tjQMBb7UX4TrBEyo0-83M_itlqfA0/' width='32'/></a>
<a class='addthis_button_stumbleupon'><img alt='Stumbleupon' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoPK9iXj70U8calKt0UCOnjTHrlAQN69euUjL26JF3cCfVGZIoWZHlgN1bkk8RTX6h2GlT8F6ydPNWGklFJ2gIR6N6QD1DK4vG3O8OqeBeeZazGYBtuqgEZekixdL0OIjQvtcy9L8HSXE/' width='32'/></a>
<a class='addthis_button_favorites'><img alt='Favorites' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3nFMjnO2kvANk1Z3Oe_NdehuO9NDJKms7_XoOsVpotC8tSSK7Y6LnEfFJVCYlL9axcy8u2r0t95DZrQZG7Uo70Zm36o0ON9hKLlBLmcFeHw4Ic2fIGM4qb5prjjnh8wkMnLiRz_nehvc/' width='32'/></a>
<a class='addthis_button_more'><img alt='More' height='32' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiacHQiuHgEz8tSguDPEYUxeKDk32t_c5x6GJ5MPs1tp2FbTr0ZIcc6QdfEgyJUs4xb4b-D2XuUx0gcur9SPo1noyhKQu1P6oartNFo7JLpQnqKfdexCFiyoJWv0FKxCov4mbcPJhaEi5E/' width='32'/></a>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
</div>
</div>


                  Нажимаем на сохранение, на этом настройка, и установка закончена.

0 коммент. :

© 2012-2017 Cash's from program