.

quarta-feira

Textual description of firstImageUrl

Box Com Caixa de Pesquisa, Ícones Para Redes Sociais e Feed para Blogger - Exclusivo

ACESSOS:
Deixe seu comentário


Nesta postagem compartilho com vocês está box simples onde tem uma caixa de busca, ícones para redes sociais e ainda uma parte onde as pessoas possam se inscrever no seu feed. Bem legal não é?



Para colocar no blogger... Entre em "Modelo" - "Editar HTML", dê um Ctrl + F e procure pela tag
]]></b:skin>
Tendo encontrada a tag, cole ACIMA dela cole o seguinte estilo css
.sidebar{color:#666666;line-height:1.5em}
.sidebar ul{list-style:none;margin:0 0 0;padding:0 0 0}
.sidebar li{margin:0;padding-top:0;padding-right:0;padding-bottom:.25em;padding-left:15px;line-height:1.5em}
.sidebar .widget,.main .widget{margin:0;padding:0}
.main .Blog{border-bottom-width:0}
.post-footer{font-size:90%}
.Label li{padding:0;font-size:90%}
.profile-img{float:left;margin-top:0;margin-right:5px;margin-bottom:5px;margin-left:0;padding:4px;border:1px solid #cccccc}
.profile-data{margin:0;text-transform:uppercase;letter-spacing:.1em;font:normal normal 78% Cuprum;color:#999999;font-weight:bold;line-height:1.6em}
.profile-datablock{margin:.5em 0 .5em}
.profile-textblock{margin:0.5em 0;line-height:1.6em}
.profile-link{font:normal normal 78% Cuprum;text-transform:uppercase;letter-spacing:.1em}
#footer{width:auto;clear:both;margin:0;padding:10px}
#footer-wrapper{background-color:white;border-left:1px solid #D8D8D8;border-right:1px solid #D8D8D8}
.krditnya{font-size:90%;padding:10px;border-top:1px solid #D8D8D8;overflow:hidden}
.botleft{float:left}
.botright{float:right}
img{max-width:100%;height:auto;width:auto}
.post-footer-line-1 span{background-image:url(http://3.bp.blogspot.com/-3ARiPrbsLqg/UHQ_SZP7vMI/AAAAAAAAFqk/QHYlF_-WtbM/s1600/sprite.png);background-repeat:no-repeat;padding-left:25px;height:20px;display:inline-block}
.post-footer-line-1 span.post-author{background-position-y:-4px}
.post-footer-line-1 span.post-timestamp{background-position-y:-99px;margin-left:5px}
.post-footer-line-1 span.post-comment-link{background-position-y:-31px;padding-left:18px;margin-left:5px}
span.fn{background:none;padding-left:0}
span.post-labels{padding-left:25px;background-image:url(http://3.bp.blogspot.com/-3ARiPrbsLqg/UHQ_SZP7vMI/AAAAAAAAFqk/QHYlF_-WtbM/s1600/sprite.png);background-repeat:no-repeat;display:inline-block;margin-top:2px;background-position-y:-146px}
.blog-pager-older-link,.blog-pager-newer-link{width:32px;height:32px;display:block;text-indent:-9999px;background-image:url(https://lh5.googleusercontent.com/-IW5bsagvxjA/T44oaGPKS0I/AAAAAAAAJNU/G6dYbMD30GQ/s32/rightarrow.png);background-repeat:no-repeat}
.blog-pager-newer-link{background-image:url(https://lh5.googleusercontent.com/-6heejKDUZIc/T44oaNe2e5I/AAAAAAAAJNQ/xrVhfv-XYsA/s32/leftarrow.png)}
.blog-pager-older-link,.blog-pager-newer-link{width:32px;height:32px;display:block;text-indent:-9999px;background-image:url(https://lh5.googleusercontent.com/-IW5bsagvxjA/T44oaGPKS0I/AAAAAAAAJNU/G6dYbMD30GQ/s32/rightarrow.png);background-repeat:no-repeat}
.blog-pager-newer-link{background-image:url(https://lh5.googleusercontent.com/-6heejKDUZIc/T44oaNe2e5I/AAAAAAAAJNQ/xrVhfv-XYsA/s32/leftarrow.png)}
.BlogArchive #ArchiveList ul.posts li{text-indent:0;padding-left:4px;line-height:1.3em}
#header-right{float:right;color:black;margin-top:20px;width:49%}
#search-form-feed{float:left;position:relative;padding:15px 10px;width:300px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;background-color:#D8D8D8}
#feed-q-input{font:normal 110%px Tahoma,Arial,Sans-Serif}
.search-button{display:block;float:left;width:13px;height:13px;padding:5px 25px;margin:0 0 0 12px;font-size:1em;color:white;border:1px solid;border-color:#AAA #AAA #888 transparent;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;cursor:pointer;top:-1px;left:-3px;position:relative;background:#CD3232;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A))}
.search-button:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838))}
#feed-q-input{display:block;width:190px;height:20px;border:1px solid #CCC;background-color:white;font:normal 13px Tahoma,Arial,Sans-Serif;color:#CCC;margin:0;padding-left:10px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;float:left}
#feed-q-input:focus{color:#333;outline:none}
#search-result-container{width:300px;height:450px;overflow:auto;position:absolute;z-index:999;padding:0;left:0;margin:20px 0 0;display:none;background-color:white;font-size:11px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#search-result-container a{text-decoration:none;color:black;font-weight:bold;font-size:12px;display:block;line-height:15px;height:auto;border:0;padding:0}
#search-result-container a:hover{color:#686868}
#search-result-container li{margin:0 0 5px;padding:7px 8px;list-style:none;background-color:white;overflow:hidden;word-wrap:break-word;border:1px solid #E2E2E2;color:#313131}
#search-result-container mark{background-color:yellow;color:black}
#search-result-container h4{margin:0 0 10px;font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;color:black}
#search-result-container ol{background:transparent;border:none;margin:0 0 10px;padding:0 0}
#search-result-container li img{display:block;float:left;margin:0 5px 1px 0;background-color:whiteSmoke;padding:0}
#search-result-loader{top:85%;position:absolute;z-index:999;width:60px;background-color:#ACACAC;color:white;padding:3px 5px;margin:-2px 0 0;font:normal bold 10px Arial,Sans-Serif;display:none}
.post-body ul,.post-body ol{margin:10px 0 10px 25px;}
#top-nav {position: fixed;cursor: pointer;background: rgba(0, 0, 0, 0.78);color: white;padding: 10px 20px;border-radius: 3px;bottom: 22px;right: 45%;}
#topcontent {margin-bottom: 10px;}
.c_images img {width: 57px;height: 57px;}
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.c_images img {width: 57px;height: 57px;}
.selectnav { display: none; }
.status-msg-wrap, .status-msg-body, .status-msg-border, .status-msg-bg, .status-msg-hidden {
display: none;
}
Tendo colado o código, salve e feche está parte por que já está finalizada.

Agora, entre em "Layout" - "Adicionar um gadget" - "HTML/JavaScript" e cole o seguinte código
<div class="widget HTML" id="HTML4">
<div class="widget-content">
<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input id="feed-q-input" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Fazer Busca&quot;;}" onfocus="if (this.value == &quot;Fazer Busca&quot;) {this.value = &quot;&quot;;}" onkeyup="resetField();" value="Fazer Busca" type="text" />
<input class="search-button" type="image" src="http://1.bp.blogspot.com/-1UgXUbi4qwk/UHYgagRyMqI/AAAAAAAAFwU/gixjZGIMUpQ/s1600/search_box_icon.png" />
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Searching...</div>
</div>

<style type="text/css">
.social ul {list-style:none; display:inline}
.social li {float:left;padding: 0px 1px 0px 0px;}
.social li:nth-child(6) {padding: 0;}
.social li a img{height:49px;width:49px}
#rss-news {background-color: #CF274B;width: 270px;color: white;padding: 0 15px 15px;margin-top: -3px;}
#rss-news input {outline: 0;}
</style>
<div class="social">
<span class="glap"><ul>
<li style="opacity: 1;"><a href="URL da sua página no facebook"><img src="http://2.bp.blogspot.com/-Z6-k6nf0nA4/UHUjbTM6LkI/AAAAAAAAFrw/4fCG6OwUc-0/s1600/facebook_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do seu twitter"><img src="http://1.bp.blogspot.com/-JqX_gSnuHBE/UHUkN1pRDuI/AAAAAAAAFso/ZwWX1qXZj8g/s1600/twitter_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do google plus"><img src="http://1.bp.blogspot.com/-3zUsyEdLh9o/UHUjhkywACI/AAAAAAAAFr4/XsMcU6wcGyk/s1600/google-plus_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do seu feed"><img src="http://3.bp.blogspot.com/-QwAJvR4WpSI/UHUkC3gKQ8I/AAAAAAAAFsQ/4rPhvbPo-Qs/s1600/rss_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do Pinterest"><img src="http://4.bp.blogspot.com/-LY01FpSt0QM/UHUj8KcYT7I/AAAAAAAAFsI/HU-ZVGPDQxs/s1600/pinterest_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL da sua página no YouTube"><img style="width:50px" src="http://2.bp.blogspot.com/-pUOXFan7ZQY/UHUkWutsLkI/AAAAAAAAFs4/rBhQxZ1JLDY/s1600/youtube_64.png" /></a></li>
<li style="opacity: 1;"><div id="rss-news">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=YOUR FEEDBURNER ID', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin-bottom: 0px" target="popupwindow"><br /><span><span class="">Registe-se Seu e-mail para não perder estes artigos todos os dias
</span></span><br /><input name="email" style="width:240px; margin: 5px 0px; border: 1px solid #ccc; padding: 4px; font-size: 1.0em; color: #555;" type="text" value="Insira seu e-mail aqui » Aperte Enter" /><input name="uri" type="hidden" value="YOUR FEEDBURNER ID" /><input name="loc" type="hidden" value="en_us" /><br /><span><span>(*) Verifique Email para a informação!</span></span></form>
</div></li>
</ul></span>
</div>
Widget by <a href="http://dicashot.blogspot.com.br/2013/11/box-com-caixa-de-pesquisa-icones-para.html">DicasHot</a>
</div>
Tendo colado o código, faça as modificações pedidas.

Tendo feita as modificações, basta salvar e pronto!!!

Se você gostou do código, dê um curtir na postagem e deixe seu comentário!!!

Cursos On-line 24 Horas - Educação a Distância de Qualidade

RESPONDA: DE 0 A 5 O QUANTO ESTE CONTEÚDO FOI ÚTIL PARA VOCÊ?
{[['']]}