Template da semana #1 – Salahuddin Ayubi

Olá amigos do Mundo Informal! Hoje disponibilizo para vocês um incrível template, para mim um dos melhores templates de 2013 até o momento. Semanalmente postarei ao menos um template para vocês. Esse é um daqueles que certamente eu instalaria em algum de meus blogs.

Nome do template : Salahuddin Ayubi

Plataforma : Blogger

Designer : Mohammad Mustafa Ahmedzai

Data de Lançamento : 01 Jan 2013

Preço: Gratuito

Como configurar o template

1. Caixa de inscrição no Feed

<style> #salahuddin-ayubi { border: 0; margin-bottom: 10px; margin: 0 auto; width:300px; } #email-news-subscribe .email-box{ padding: 5px 5px; font-family: "Arial","Helvetica",sans-serif; height:38px;} #email-news-subscribe .email-box input.email{ background:#FFFFFF; border: 1px solid #dedede; color: #999; padding: 7px 10px 8px 10px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -ms-border-radius: 3px; -khtml-border-radius: 3px; border-radius: 3px; border-image: initial; font-family: "Arial","Helvetica",sans-serif;} #email-news-subscribe .email-box input.email:focus{color:#333} #email-news-subscribe .email-box input.subscribe{ background: -moz-linear-gradient(center top,#666 0,#333 100%); background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#666),color-stop(1,#333)); font-family: "Arial","Helvetica",sans-serif; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:white; padding:7px 14px; margin-left:3px; font-weight:bold; font-size:12px; cursor:pointer; border-image: initial;} #email-news-subscribe .email-box input.subscribe:hover{ background-image:-moz-linear-gradient(top,#333,#666); background-image:-webkit-gradient(linear,left top,left bottom,from(#333),to(#666)); filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#ffffff,endColorStr=#ebebeb); outline:0;-moz-box-shadow:0 0 3px #999; -webkit-box-shadow:0 0 3px #999; box-shadow:0 0 3px #999 -pie-background:linear-gradient(270deg,#ffda4d,#ff9b00); border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; border:1px solid #333; color:#FFFFFF; } #other-social-bar { padding: 0px; overflow: hidden; height:37px; margin-top:-8px; } #other-social-bar ul {list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow { float: left; overflow: hidden; padding:5px; width: 270px;} #other-social-bar .other-follow ul { list-style: none outside none; padding-left: 4px;} #other-social-bar .other-follow li { display:inline; border:0; } #other-social-bar .other-follow li a { font-size: 12px; color:#666; font-weight: bold; font-family:arial; display:inline; } #other-social-bar .other-follow li.my-rss { background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px; margin-left:5px;} #other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-twitter a, #other-social-bar .other-follow li.my-gplus a{ text-decoration:none; } #other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-twitter a:hover, #other-social-bar .other-follow li.my-gplus a:hover{ text-decoration:underline; } #other-social-bar .other-follow li.my-twitter { background: url('http://2.bp.blogspot.com/-KsALKRN7Zzo/T0vKkSG3AfI/AAAAAAAAF_k/l-VHD5xxzps/s400/twitter%2527.png') no-repeat transparent; line-height: 1; padding: 0px 3px 1px 20px; width: 60px; margin-bottom:0px;} #other-social-bar .other-follow li.my-gplus { background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent; line-height: 1; width: 60px; padding: 0px 3px 1px 20px; margin-bottom:0px;} .emailicon { background: url("http://3.bp.blogspot.com/_7wsQzULWIwo/Sty6EvZmTlI/AAAAAAAACGU/ArK94-9iDS0/s400/MBT-RSS-FEED.gif") no-repeat scroll 0px 2px transparent; padding: 0px 20px 0px 95px; min-height:100px; margin: 0px; width: 183px; line-height: 20px; vertical-align: middle; font-size: 14px; color: rgb(51, 51, 51); } .emailicon p { color:#FF8604; font-size: 20px; font-weight: normal; font-family: impact; padding:40 0px 10px 0px; margin:0; padding-top: 20px; line-height: 25px; text-shadow: 0px 1px 0px #fff, 0px 2px 0px #C6C6C6; } </style> <!--[if IE]> <style> #email-news-subscribe .email-box input.subscribe{ background: #333; } </style> <![endif]--> <div id="salahuddin-ayubi" > <div class="emailicon"><p>Se inscreva gratuitamente para receber nossas atualizações! </p></div><div id="email-news-subscribe"><div class="email-box"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=in4mal', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="email" type="text" style="width: 160px; font-size: 12px;" id="email" name="email"value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Insira seu email aqui...') {this.value = '';}" type="text" /> <input type="hidden" value="tntbystc" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input class="subscribe" name="commit" type="submit" value="Inscreva-se" /> </form></div></div><div id="other-social-bar"><ul class="other-follow"><li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/in4mal" target="_blank">RSS Feed</a> </li><li class="my-twitter"> <a rel="nofollow" title="twitter" rel="author" href="http://twitter.com/mundo_informal" target="_blank">Twitter</a> </li><li class="my-gplus"> <a rel="nofollow" title="Google Plus" rel="author" href=https://plus.google.com/1111214334130358474387 target="_blank">Google Plus</a> </li></ul></div></div>
Substitua os links com o nome in4mal com o nome de usuário de sua conta no feedburner. Substitua o link http://twitter.com/mundo_informal com sua conta no twitter.
Substitua o link https://plus.google.com/1111214334130358474387 com os detalhes de sua conta no Google +.
2. Menu de topo

Adicione novas páginas acessando o "painel do blogger" >> "páginas" e adicione ou excluas páginas. As páginas aparecerão no menu automaticamente.

3. Menu principal

Para adicionar ou editar os links desse menu, basta procurar pelo seguinte código no template:<div id='botmenu'>

4. Menu de rodapé

Para editar o menu do rodapé, basta procurar pelo seguinte código no template:<ul id='footer-navigation'><li><a href='#'>Home</a></li><li><a href='#'>Typography</a></li><li><a href='#'>Sitemap</a></li><li><a href='#'>Services</a></li><li><a href='#'>Contact</a></li></ul>

5. Barra de notificação no topo

Para editar a mensagem fixa no topo do blog, encontre o seguinte código: 

<body>

Você encontrará esse código logo após a tag <body>Download this Blogger Template by <a class='link' href='http://www.mybloggertricks.com' target='_blank'>Clicking Here!</a>

6. Imagem do autor

Altere a imagem do autor substituindo essa imagem:https://lh4.googleusercontent.com/-f8qSqNLtpBU/AAAAAAAAAAI/AAAAAAAAGQY/Sl371AuVYfM/s250-c-k/photo.jpg
Obs. Pode ser inserida qualquer imagem maior que 30x30.

7. Informação do autor

Para editar as informações do autor, procure pelo seguinte código, o resumo aparecerá logo abaixo:<div id='about-author'>

8. Multi tabs

Você pode adicionar mais seções ao menu multitab facilmente apenas encontrando o código abaixo:<ul class='MBT-tabs MBT-tabs-widget-MBT-id'><li><a href='#widget-MBT-id1'>Latest Posts</a></li><li><a href='#widget-MBT-id2'>Video</a></li><li><a href='#widget-MBT-id3'>Recent Comments</a></li></ul>

9. Sobre o autor

Adicione um novo widget Html/Javascript e cole o código abaixo:<!--[if !IE]> --> <style> #profilemohammad{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profilemohammad:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; margin-left: 50px; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; -moz-transform: rotate(7deg); -o-transform: rotate(7deg); -webkit-transform: rotate(7deg); -ms-transform: rotate(7deg); transform: rotate(7deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand'); zoom: 1; } .opacity:hover { opacity: 1; margin-left: 0px; -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand'); zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <![endif]--> <style> #profilemohammad{ border:2px solid #888; margin:2px 5px 0px 0px; padding:2px; } #profilemohammad:hover { border:2px solid #ccc; cursor:pointer; } .opacity { opacity: 0.5; -moz-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; -webkit-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; transition: all 0.5s ease-out; zoom: 1; } .opacity:hover { opacity: 1; zoom: 1; -moz-box-shadow: 1px 1px 4px #000; -webkit-box-shadow: 1px 1px 4px #000; box-shadow: 1px 1px 4px #000; } </style> <img class="opacity" id="profilemohammad" src="http://4.bp.blogspot.com/-E3Hlr5QLtBI/T8dQkXuF7WI/AAAAAAAAGkE/U6pCWGo7qZ4/s1600/mohammadmustafa.jpg" align="left"/>Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. <a style="color:#888;" href="http://www.mybloggertricks.com/2008/06/something-about-me.html">Read More..</a> <br/> </![endif]-->

11. Baixar:

Para fazer o download gratuitamente, basta clicar em CURTIR, e o link para download aparecerá. Se você já tiver curtido a nossa página no facebook, o link para download já aparece para você. ;)

Obrigado pela ajuda! Esse é o link para download [Salahuddin Ayubi.rar]

Comente e nos diga o que achou do template!

Share This :