Box Com Caixa de Pesquisa, Ícones Para Redes Sociais e Feed para Blogger - Exclusivo
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9x-iQm71J72rRZlP2F8k9e-hrhEFY5zLYlpH6TMob4G7akNqE08A2DfrOARqeL0Wc1jYHSImXn_GddYdxLE1A8iq5NuOjllxj7M7qWB0uv6LAcBpItJ8_kMgL_2cWjow9KVc5qan1n0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib9x-iQm71J72rRZlP2F8k9e-hrhEFY5zLYlpH6TMob4G7akNqE08A2DfrOARqeL0Wc1jYHSImXn_GddYdxLE1A8iq5NuOjllxj7M7qWB0uv6LAcBpItJ8_kMgL_2cWjow9KVc5qan1n0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXT8GL5KS5PvjbGntZKqQgu2MkG3PzTaNjHHZnOb9TFj7R0cyrJByK27De3pRvRUL_x0SenHrRdatWcrNG85fRxyyZQGp4fiLny4yDcDF4iSrBi8Evyccc-Sl8BlIF71FDoCAZXrQq0VJG/s32/rightarrow.png);background-repeat:no-repeat} .blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96XuB8ewjDfE_X-eHRWd955tX7JU0jNKxGxFHyUbsziOJFLczCrhwCMy5pvbBjH9veBXDMEWIiP4_YZP7t_jbFT6kzhS2dNOd3g7_OcgIKh1fe46XQQfCMHYKDVrDAnsxVMbPPL6dE2gy/s32/leftarrow.png)} .blog-pager-older-link,.blog-pager-newer-link{width:32px;height:32px;display:block;text-indent:-9999px;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXT8GL5KS5PvjbGntZKqQgu2MkG3PzTaNjHHZnOb9TFj7R0cyrJByK27De3pRvRUL_x0SenHrRdatWcrNG85fRxyyZQGp4fiLny4yDcDF4iSrBi8Evyccc-Sl8BlIF71FDoCAZXrQq0VJG/s32/rightarrow.png);background-repeat:no-repeat} .blog-pager-newer-link{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi96XuB8ewjDfE_X-eHRWd955tX7JU0jNKxGxFHyUbsziOJFLczCrhwCMy5pvbBjH9veBXDMEWIiP4_YZP7t_jbFT6kzhS2dNOd3g7_OcgIKh1fe46XQQfCMHYKDVrDAnsxVMbPPL6dE2gy/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 == "") {this.value = "Fazer Busca";}" onfocus="if (this.value == "Fazer Busca") {this.value = "";}" onkeyup="resetField();" value="Fazer Busca" type="text" />
<input class="search-button" type="image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw5K0Hlzkolgje5pop3wNgnc8tRX_DlQogt1U7EgD1i5PNZ8yfHSiUYzEB2gYTx7Sv7ud1LmjhTyRNRXgJBr1BbeCnyvALgwP8SwwVfTHqSvhEJnkT17IUE1dI8w_K61UQhQ1nU1MGNGU/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOT48mWoekjnJQGFQ-xAmfP6SyW9KzLhNb15ThWnsWFLA4v7atkzKqo-IYC_h2a8jmanRo8AVVY-wAPtJVlpcRkai07s6VuUPtOkgCGnDbWyg3fnHRi_tVJPjcpbl4mo5o5dqaODEXny4/s1600/facebook_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do seu twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwiKvWwvzDB5ZiMZAJVECewU-1Ccfhz0zFG7AlIheMqRTtcA6NZ22JP3ZkNJPVb8lwABA3NKaejhTsoRxqI9mqP_-JJeOiOZhx-fVwdo-RwgkO5PI8T8MPffVbo_7mgnDJjk1GCDDIu_c/s1600/twitter_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do google plus"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3pcakPlqRfXXk9MRxX8scvP2bPigWHFBPPwm28TQNIkHfFM6NfY7jjg2g7FQiZNjzuZLBzbLWl2POQ4eRCrlE_dyMW6lJQRCYYrO1OhwRqCFcqVSa9k03rTPizQVSBsb9apenX7WodQo/s1600/google-plus_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do seu feed"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcX0KObCGMWehURgZjm58dAkzCRylpP_HYczZOcnbGaz000_7vNLSR8ZxhMj_ib9NxQyDtr4f0hn5OoqRqlHXbm5D3nJ6K2O83hqwPtMLPAYWTawP_lEWhy5AC0jtxjlgac2OrordZqbg/s1600/rss_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL do Pinterest"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyuRAJcvjn4PyWZwYULK8FHd-iLcNwzVRRJl8U3DeQPI8FoOkJmqdadNdJPyufq9aH8FxE37qCID8tSv2ReO1GaM3a-_ZtapqgVdYnWpM5cqP1jmCZJr7UrIh7xn8FUb1-IT8hyphenhyphen1n9ub8/s1600/pinterest_64.png" /></a></li>
<li style="opacity: 1;"><a href="URL da sua página no YouTube"><img style="width:50px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgXxJNRx6psos9fgVBlOvlIlHUhnAG79fJN5z2iCNhxWlBK3PPFMuOkrvB8XZBPZbfLhF6lX1PsGuZHrH2dzgMYouAf1CIiDIUxx6ZBZqWZzeRcLDdai-IrfkJE7LwKi7i_4aCRC592eE/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!!!
