sábado, 12 de novembro de 2016

Widget Media Social + Subscribe Box blogger

widget social media mais subscribe box

Hoje trazemos um novo widget inovador by CB isso tem um diferencial que traz botões de redes sociais mais caixa de subscrição para feed isso é muito interessante é um widget com layout limpo que pode ser alterado conforme a necessidade isso pode ser colocado na sidebar do Blogger para melhor resultado


Como adicionar Widget social media + Subscribe box blogger

Faça login no Blogger então:
clique no menu layout procure pela sidebar do Blogger
então adicionar novo gadget JavaScript então adicione o seguinte código:

<style>
div.subscribe{width:100%; padding:15px 0; height:50px}
#bor-social{ background: #FFFFFF; border: 1px solid #E6E6E6; margin: 0 0 20px;}
.subscribe{ border-bottom: 1px solid #E6E6E6; padding: 15px 0;}
.subscribe li a{display: block; float: left; line-height: 1.3; margin: 0 2px 0 0; padding: 38px 0 0 2px; width: 64px;  text-align:center; color: #777777; font-size: 11px;}
.subscribe ul{list-style:none;}
.subscribe li{margin:0 0 0 15px}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.subscribe .sub-google a{background: url(http://1.bp.blogspot.com/-lC9AgvCg208/UxDjlzEVdDI/AAAAAAAACSQ/6VNDJSyNM_Y/s1600/ico-google.png) no-repeat 13px 0;}
.subscribe .sub-twitter a{background: url(http://1.bp.blogspot.com/-NB2cMSawG8o/UxDjn7IaE7I/AAAAAAAACSg/cOC-YMt_Mtg/s1600/ico-twitter.png) no-repeat 15px 0;}
.subscribe .sub-facebook a{background: url(http://3.bp.blogspot.com/-G4_BfjWP96s/UxDjm8r6eRI/AAAAAAAACSY/2rV1MJlKoe0/s1600/ico-facebook.png) no-repeat 15px 0;}
.subscribe .sub-rss a{background: url(http://1.bp.blogspot.com/-2jhfGbPuYho/UxDjlNGxPFI/AAAAAAAACSI/qQy51oqO2g4/s1600/ico-rss.png) no-repeat 16px 0;}
.subscribe .sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
.linked {width:100%; cursor: auto;}
.linked form { margin:0; padding:0;}
.linked p.intro {font-size: 14px; line-height: 1.5; color:#000; padding:10px 20px 0; margin:0 0 5px; font-weight:bold;}
.linked a{ color:#777 !important;}
.linked p.feed { margin:0 10px 0 18px; font-size:12px; color:#777777; }
.form-go{ background: url(http://3.bp.blogspot.com/-wTLtzwr6Z7w/UXpe75Yi78I/AAAAAAAAA1k/TkaF6yr7AWA/s1600/alert-overlay.png); color: #2C2F32; margin-left: 10px; height: 29px; padding: 0px 6px; border: 1px solid #ddd; cursor: pointer; margin-bottom: 9px;moz-border-radius: 5px; width:67px; margin-left:0px;
-webkit-border-radius: 5px; text-shadow: 1px 1px 0 #fff;}
.form-go:hover{opacity: 0.8;}
</style>
<div id='bor-social'>
<div class='subscribe'>
<ul>
<!-- Social Profile Icons -->
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-google'><a href='YOUR-GOOGLE+-URL' rel='nofollow' target='_blank'>GooglePlus</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
</ul>
</div><div class='clear'/>
<div class='linked'>
<p class='intro'>E-mail Newsletter</p>
<p class='feed'>Receive Latest Posts  Straight in Your Email Inbox</p>
<!-- Configure Subscribe Form -->
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=idfeedburner&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' style='padding:8px 3px 12px 15px; margin:0 0 0 3px;' target='popupwindow'>
<p><input class='form-subscibe' name='email' placeholder='E-mail' style='width:160px;border-color: #ccc #efefef #efefef #ccc; border-width: 1px; border-style: solid; color: #777; padding: 6px 6px 6px 10px;' type='text'/>
<input name='uri' type='hidden' value='idfeedburner'/><input name='loc' type='hidden' value='en_US'/>
<input class='form-go' type='submit' value='Submit'/></p></form>
</div></div>
<div class='clear'/></div></div>


Nota: modifique o realçado em amarelo coloque os links das redes sociais e também id do feedburner

Salve e pronto.
NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post

Nenhum comentário:

Postar um comentário

NEXT ARTICLE Next Post
PREVIOUS ARTICLE Previous Post
 

Delivered by FeedBurner