sexta-feira, 4 de outubro de 2013

Como editar um html

Olá Penguins Designers,
Hoje eu Venho aqui para ensinar a vocês, como fazer um template! é muito avançado...Porem quero ensinar a vocês isso. Primeiro pegue esse codigo:

  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  4. <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>
  5.   <head>
  6.     <link href='.' rel='shortcut icon'/>
  7.     <title><data:blog.pageTitle/></title>
  9.     <b:include data='blog' name='all-head-content'/>
  10.     <b:skin><![CDATA[/*
  11. /*
  12. -----------------------------------------------
  13. Nome: Nome do Blog
  14. Layout por Seu Nome
  15. Editado por Seu nome
  16. Contribuições para Seu nome
  17. ----------------------------------------------- */
  18. /* Variable definitions
  19. ====================
  20. <Variable name="cordasidebar" description="Cor do Background da Sidebar"
  21. type="color" default="#1f9ddf" value="#1f9ddf">
  22. <Variable name="bgcolor" description="Page Background Color"
  23. type="color" default="#279cd8" value="#279cd8">
  24. <Variable name="textcolor" description="Text Color"
  25. type="color" default="#000000" value="#000000">
  26. <Variable name="linkcolor" description="Link Color"
  27. type="color" default="#000000" value="#000000">
  28. <Variable name="pagetitlecolor" description="Blog Title Color"
  29. type="color" default="#000000" value="#000000">
  30. <Variable name="descriptioncolor" description="Blog Description Color"
  31. type="color" default="#000000" value="#000000">
  32. <Variable name="titlecolor" description="Post Title Color"
  33. type="color" default="#16110D" value="#16110D">
  34. <Variable name="bordercolor" description="Border Color"
  35. type="color" default="#FDFDFD" value="#FDFDFD">
  36. <Variable name="sidebarcolor" description="Sidebar Title Color"
  37. type="color" default="#E7B99A" value="#E7B99A">
  38. <Variable name="sidebartextcolor" description="Sidebar Text Color"
  39. type="color" default="#000000" value="#000000">
  40. <Variable name="visitedlinkcolor" description="Visited Link Color"
  41. type="color" default="#1f9ddf" value="#1f9ddf">
  42. <Variable name="bodyfont" description="Text Font"
  43. type="font" default="normal normal 100% 'Palatino Linotype',Trebuchet,Verdana,Sans-serif" value="normal normal 100% IM Fell Double Pica SC">
  44. <Variable name="headerfont" description="Sidebar Title Font"
  45. type="font"
  46. default="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif">
  47. <Variable name="pagetitlefont" description="Blog Title Font"
  48. type="font"
  49. default="normal bold 0% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 0% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">
  50. <Variable name="descriptionfont" description="Blog Description Font"
  51. type="font"
  52. default="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif" value="normal normal 0% 'Trebuchet MS', Trebuchet, Verdana, Sans-serif">
  53. <Variable name="postfooterfont" description="Post Footer Font"
  54. type="font"
  55. default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif">
  56. */
  57. body {
  58. background: #FFFFFF url(LINK DO FUNDO DO BLOG) fixed;
  59. ;
  60. color:#000000;
  61. font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
  62. font-size/* */:/**/small;
  63. font-size: /**/small;
  64. text-align: lcenter;
  65. }
  66. a:link {
  67. color:#000000;
  68. text-decoration:none;
  69. }
  70. a:visited {
  71. color:#000000;0
  72. text-decoration:none;
  73. }
  74. a:hover {
  75. color:#000000;
  76. text-decoration:underline;
  77. }
  78. a {
  79. outline: none;
  80. }
  81. a img {
  82. border-width:0;
  83. }
  84. #navbar #Navbar1 iframe{
  85. display:none;
  86. visibility:none;
  87. }
  88. /* Header
  89. -----------------------------------------------
  90. */
  91. #header-wrapper {
  92. width:982px;
  93. height:400px;
  94. margin:0 auto 0px;
  95. border-bottom: 0px solid #63e812;
  96. }
  98. #header {
  99. margin: 0px auto 0px;
  100. padding: 0px 0px 0px 0px;
  101. width:982px;
  102. height:400px;
  103. background:  url() bottom center no-repeat;
  104. text-align: ;
  105. color: transparent;
  106. }
  108. #header h1 {
  109. margin:0px auto 0px;
  110. padding: 0px 0px 0px 0px;
  111. line-height:1.2em;
  112. text-transform:capitalize;
  113. letter-spacing:.2em;
  114. font: normal normal 0% Trebuchet, Trebuchet MS, Arial, sans-serif;
  115. }
  117. #header a {
  118. color:#ffffff;
  119. text-decoration:none;
  120. }
  122. #header a:hover {
  123. color:#ffffff;
  124. }
  126. #header .description {
  127. margin:0px auto 0px;
  128. padding: 0px 0px 0px 30px;
  129. max-width:895px;
  130. text-transform:capitalize;
  131. letter-spacing:.2em;
  132. line-height: 1.2em;
  133. font: 0px;
  134. color: #e6e6e6;
  135. }
  137. #header-center{
  138. margin: 0px;
  139. border-bottom: 0px solid #bf0e0e;
  140. text-align: center;
  141. float:center;
  142. width:100%;
  143. color:#F2C888;
  144. }
  145. /* Outer-Wrapper
  146. ----------------------------------------------- */
  147. #outer-wrapper {
  148. width: 982px;
  149. margin:0 auto 0px;
  150. padding:0px;
  151. text-align:left;
  152. font: normal normal 88% Verdana, sans-serif;
  153. background-color:transparent;
  154. border: 0px solid #bf0e0e;
  155. -moz-border-radius:31px;
  156. -webkit-border-radius:31px;
  157. -goog-ms-border-radius:31px;
  158. }
  160. #content-wrapper {
  161. background:transparent url(LINK DA SIDEBAR) repeat scroll center top;
  162. }
  164. #outerbottom-wrap1 {
  165. background:url(http://img167.imageshack.us/img167/2618/bgpagetopel1.gif)  no-repeat left top;
  166. margin:0 0 px;
  167. padding:0px;
  168. }
  169. #outerbottom-wrap2 {
  170. background:url()  no-repeat left bottom;
  171. margin:0 0 px;
  172. padding: 0px;
  173. }
  175. #main-wrapper {
  176. margin-left: 37px;
  177. _margin-left: 37px;
  178. margin-right: 0px;
  179. _margin-right: 0px;
  180. margin-top: 0px;
  181. margin-bottom: 0px;
  182. border-left: 0px solid #bf0e0e;
  183. border-right: 0px solid #bf0e0e;
  184. border-bottom: 0px solid #bf0e0e;
  185. background: #ffffff repeat-y;
  186. width: 642px;
  187. float: left;
  188. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  189. overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  190. }
  191. #mainbottom-wrap1 {
  192. background:url()  no-repeat left top;
  193. margin:0 0 px;
  194. padding:0px;
  195. }
  196. #mainbottom-wrap2 {
  197. background:url()  no-repeat left bottom;
  198. margin:0 0 px;
  199. padding: 0px;
  200. }
  201. #sidebar-wrapper {
  202. margin-right: 23px;
  203. _margin-right: 23px;
  204. margin-left: 0px;
  205. margin-top: 0px;
  206. color: transparent;
  207. background-color: transparent;
  208. width: 232px;
  209. float: right;
  210. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  211. overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  212. }
  214. #newsidebar-wrapper {
  215. margin-left: 0px;
  216. _margin-left: 0px;
  217. margin-top: 0px;
  218. color: transparent;
  219. background-color: transparent;
  220. width: 208px;
  221. float: left;
  222. word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  223. overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  224. }
  226. /* Headings
  227. ------------------------------------------------ */
  228. h2 {
  229. margin:1.5em 0 .75em;
  230. font:normal bold 95% Arial, sans-serif;
  231. line-height: 1.4em;
  232. text-transform:capitalize;
  233. letter-spacing:.2em;
  234. color:#000000;
  235. }
  236. /* Posts
  237. -----------------------------------------------
  238. */
  239. h2.date-header {
  240. text-align: center;
  241. font: normal normal 0% Verdana, sans-serif;
  242. color: transparent;
  243. }
  244. .post {
  245. padding: 9px 16px 15px;
  246. line-height: 1.4em;
  247. border:0px dotted #000000;
  248. }
  249. .post h3 {
  250. padding: 0 0 2px;
  251. font-size: 140%;
  252. font-weight: bold;
  253. line-height: 1.1em;
  254. color: #00000;
  255. border-bottom: 2px solid #009933;
  256. text-align:center;
  257. }
  258. .post h3 a, .post h3 a:visited, .post h3 strong {
  259. display:block;
  260. text-decoration: none;
  261. color: #000000;
  262. }
  263. .post h3 strong, .post h3 a:hover {
  264. color:#000000;
  265. color: #000000;
  266. }
  267. .post p {
  268. margin:10 0 .75em;
  269. line-height:1.1em;
  270. }
  271. .post-footer {
  272. margin: .75em 0;
  273. color:#000000;
  274. padding-left: 5px;
  275. text-transform:normal;
  276. letter-spacing:.1em;
  277. font: normal normal 86% 'Tahoma', Trebuchet, Trebuchet MS, Verdana, Sans-serif;
  278. font-weight: normal;
  279. line-height: 1.1em;
  280. border:3px solid #009933;
  281. text-align:center;
  282. }
  283. .comment-link {
  284. margin-left:.6em;
  285. color: #000000;
  286. }
  287. .post img {
  288. padding:4px;
  289. }
  290. .post blockquote {
  291. margin: 12px 20px 12px 20px;
  292. padding: 0px 0px 0px 10px;
  293. color: #000000;
  294. font: Arial Italic
  295. line-height: 1.6em;
  296. color: #000000;
  297. border: 2px solid #009933;
  298. background: #1fab1f;
  299. }
  300. .post blockquote p {
  301. }
  303. /* Comments
  304. ----------------------------------------------- */
  305. #comments h4 {
  306. padding-left: 10px;
  307. margin:1em 0;
  308. font-weight: bold;
  309. line-height: 1.4em;
  310. text-transform:uppercase;
  311. letter-spacing:.2em;
  312. color: #000000;
  313. }
  314. #comments li {
  315. padding-top: 0;
  316. padding-right: 0;
  317. padding-bottom: 1px;
  318. padding-left: 17px;
  319. background: url() no-repeat left 3px;
  320. }
  321. #comments-block {
  322. padding-left: 5px;
  323. margin:1em 0 1.5em;
  324. line-height:1.3em;
  325. }
  326. #comments-block .comment-author {
  327. padding-left: 5px;
  328. margin:.5em 0;
  329. }
  330. #comments-block .comment-body {
  331. padding-left: 5px;
  332. margin:.25em 0 0;
  333. }
  334. #comments-block .comment-footer {
  335. padding-left: 5px;
  336. margin:-.25em 0 2em;
  337. line-height: 1.4em;
  338. text-transform:uppercase;
  339. letter-spacing:.1em;
  340. }
  341. #comments-block .comment-body p {
  342. padding-left: 5px;
  343. margin:0 0 .75em;
  344. }
  345. .deleted-comment {
  346. padding-left: 5px;
  347. font-style:italic;
  348. color:gray;
  349. }
  350. #feed-links {
  351. padding-left: 5px;
  352. clear: both;
  353. line-height: 2.5em;
  354. text-indent:-9999em;
  355. }
  356. #blog-pager-newer-link {
  357. padding: 5px;
  358. float: left;
  359. }
  360. #blog-pager-older-link {
  361. padding: 5px;
  362. float: right;
  363. }
  364. #blog-pager {
  365. text-align: center;
  366. }
  367. /* Sidebar Content
  368. ----------------------------------------------- */
  369. .sidebar {
  370. color: #000000;
  371. background: transparent;
  372. line-height: 1.6em;
  373. margin:0px;
  374. }
  375. .sidebar h2 {
  376. text-align: center;
  377. color:  #ffffff;
  378. height: 40px;
  379. margin:0px;
  380. padding-top: 1px;
  381. font-weight: bold;
  382. line-height: 3em;
  383. background:url(LINK DO TITULO DE GADGET)  no-repeat left top;
  384. }
  385. .sidebar ul {
  386. list-style:none;
  387. margin:0px;
  388. padding:0 0 0;
  389. color:#2f96b9
  390. backround:#2f96b9
  391. border-bottom : 1px solid #f2f2f2;
  392. }
  393. .sidebar li {
  394. margin:0px;
  395. padding:0 0 .50em 20px;
  396. text-indent:1px;
  397. line-height:1.5em;
  398. border-bottom : 2px solid #009933;
  399. background:transparent url(http://img227.imageshack.us/i/setinha.png/) no-repeat;}
  400. }
  401. .sidebar .widget {
  402. margin: 0px 0 0;
  403. padding: 9px 16px 15px;
  404. color: #bf0e0e;
  405. border:1px solid #2f96b9;
  406. }
  407. .main .widget {
  408. margin: 0px;
  409. padding:0 0 0.9em;
  410. }
  411. .main .Blog {
  412. border-bottom-width: 0;
  413. }
  414. /* Profile
  415. ----------------------------------------------- */
  416. .profile-img {
  417. float: center;
  418. margin: 5px;
  419. padding: 4px;
  420. border: 1px solid #009933;
  421. }
  422. .profile-data {
  423. margin:5px;
  424. text-transform:uppercase;
  425. letter-spacing:.1em;
  426. font: normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  427. color: #000000;
  428. font-weight: bold;
  429. line-height: 1.2em;
  430. }
  431. .profile-datablock {
  432. margin:5px;
  433. }
  434. .profile-textblock {
  435. margin: 5px;
  436. line-height: 1.6em;
  437. }
  438. .profile-link {
  439. margin: 5px;
  440. font: normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif;
  441. text-transform: uppercase;
  442. letter-spacing: .1em;
  443. }
  444. /* Footer
  445. ------------------------------------------------ */
  446. #footer {
  447. width:982px;
  448. height:150px;
  449. clear:both;
  450. background:transparent url(LINK DO RODAPE) no-repeat scroll left top;
  451. margin-top: 0px;
  452. padding-top:0px;
  453. line-height: 1.6em;
  454. text-transform:uppercase;
  455. letter-spacing:.1em;
  456. text-align: center;
  457. border-top: 0px solid #bf0e0e;
  458. }
  460. /* Credit
  461. ------------------------------------------------ */
  462. #credit {
  463. width:900px;
  464. margin:0 auto;
  465. text-align: center;
  466. }
  467. /** Page structure tweaks for layout editor wireframe */
  468. body#layout #header {
  469. margin-left: 0px;
  470. margin-right: 0px;
  471. }
  472. #navbar-iframe { height: 0px; visibility: hidden; display: none; }
  473. .feed-links {
  474. clear: both;
  475. line-height: 2.5em;
  476. text-indent:-9999em;
  477. }
  478. ]]></b:skin>
  480. <script src='http://code.jquery.com/jquery-1.4.4.min.js' type='text/javascript'/>
  481. <link href='http://hosthcp2.webs.com/jqueryhover.css' rel='stylesheet' type='text/css'/>
  482. <script type='text/javascript'>
  483. $(document).ready(function(){
  485. $(&quot;img.a&quot;).hover(
  486. function() {
  487. $(this).stop().animate({&quot;opacity&quot;: &quot;0&quot;}, &quot;medium&quot;);
  488. },
  489. function() {
  490. $(this).stop().animate({&quot;opacity&quot;: &quot;1&quot;}, &quot;medium&quot;);
  491. });
  493. });
  494. </script>
  496. <link href='' rel='shortcut icon' type='image/png'/>
  497. <script>
  498. function click() {
  499. if (event.button==2||event.button==3) {
  500. oncontextmenu=&#39;return false&#39;;
  501. }
  502. }
  503. document.onmousedown=click
  504. document.oncontextmenu = new Function(&quot;return false;&quot;)
  505. </script>
  506. <script>
  507. function click() {
  508. if (event.button==2||event.button==3) {
  509. oncontextmenu=&#39;return false&#39;;
  510. }
  511. }
  512. document.onmousedown=click
  513. document.oncontextmenu = new Function(&quot;return false;&quot;)
  514. </script>
  515. <script language='JavaScript'>
  516. //Blocker1
  517. function clique() {if (event.button==2||event.button==3) {oncontextmenu=&#39;return false&#39;;}}
  518. document.onmousedown=clique
  519. document.oncontextmenu = new Function(&quot;return false;&quot;)
  520. </script>
  521.   </head>
  523.   <body oncontextmenu='return false'>
  525.   <div id='outer-wrapper'><div id='wrap2'>
  527.    <!-- skip links for text browsers -->
  528.     <span id='skiplinks' style='display:none;'>
  529.       <a href='#main'>skip to main </a> |
  530.       <a href='#sidebar'>skip to sidebar</a>
  531.     </span>
  533.    
  534.     <div id='header-wrapper'>
  535. HTML DO CABEÇALHO MAPEADO
  536.       <b:section id='header'>
  537. <b:widget id='Header1' locked='true' title='MUNDO DO PENGUIN (Cabeçalho)' type='Header'/>
  538. </b:section>
  539.     </div>
  540. <b:section class='header-center' id='header-center' maxwidgets='1' showaddelement='yes'/>
  541.     <div id='content-wrapper'>
  542. <div id='page-footer'/>
  543.       <div id='sidebar-wrapper'>
  544.         <b:section class='sidebar' id='sidebar' preferred='yes'>
  545. <b:widget id='HTML1' locked='false' title='' type='HTML'/>
  546. <b:widget id='Stats1' locked='false' title='Total de visualizações de página' type='Stats'/>
  547. <b:widget id='BlogArchive1' locked='false' title='Arquivo do blog' type='BlogArchive'/>
  548. <b:widget id='Followers1' locked='false' title='Seguidores' type='Followers'/>
  549. </b:section>
  550.       </div>
  552.       <div id='newsidebar-wrapper'>
  553.         <b:section class='sidebar' id='newsidebar' preferred='yes'/>
  554.       </div>
  557. <div id='main-wrapper'>
  558.         <b:section class='main' id='main' showaddelement='yes'>
  559. <b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
  560. </b:section>
  561.       </div>
  563.      <!-- spacer for skins that want sidebar and main to be the same height-->
  564.       <div class='clear'>&#160;</div>
  567.     </div> <!-- end content-wrapper -->
  569.     <div id='footer-wrapper'>
  570.       <b:section class='footer' id='footer'>
  571. <b:widget id='Feed1' locked='false' title='Blog and web' type='Feed'/>
  572. </b:section>
  573.     </div>
  575. <div align='center' class='credit'>
  576.     </div>
  578.   </div></div> <!-- end outer-wrapper -->
  579. <script type='text/javascript'>
  580. var gaJsHost = ((&quot;https:&quot; == document.location.protocol) ? &quot;https://ssl.&quot; : &quot;http://www.&quot;);
  581. document.write(unescape(&quot;%3Cscript src=&#39;&quot; + gaJsHost + &quot;google-analytics.com/ga.js&#39; type=&#39;text/javascript&#39;%3E%3C/script%3E&quot;));
  582. </script>
  583. <script type='text/javascript'>
  584. try {
  585. var pageTracker = _gat._getTracker(&quot;UA-7250311-1&quot;);
  586. pageTracker._trackPageview();
  587. } catch(err) {}</script>
  588. </body>
  589. </html>

    Agora baixa essas imagens são componentes do template(cabeçalho,sidebar,rodapé, e titulo) editem  apenas as cores e margens, as paginas se Você quiser colocar mais no menu, titulo do blog e coloquem imagens de penguins no cabeçalho ao lado do titulo, etc  

    Aqui estão as imagens para vocês fazerem download 

    Cabeçalho  edite do jeito que vocês quiserem se voces quiserem fazer o titulo com a letra do cp baixe a letra bumbastika clicando aqui e cole na pasta fonts






     
                                                Depois de editar voces vao mapear a imagem se nao souberem
                                                                                             clique aqui
                                                   

                                                            Sidebar Mudem apenas as cores


    Titulo de gadget Edite as cores
     


    Rodape edite os nomes e a imagem e a cor 



    Fundo


     


    AGORA VAMOS EDITAR O HTML

    Depois de editar as imagens hospedem elas no site http://tinypic.com/  Menos o cabeçalho pois ele ta mapeado 
    Depois de hospedar as imagens copie os links das imagens que esta dentro da caixa direct link e vamos alterar o template

    Voces irao colocar os links no lugar dessas seguintes palavras dentro dos *( ) OBS: coloque os links dentro dos *( ) o unico que nao tem parenteses e do cabeçalho mapeado

    Aperte crtl-F  e pesquise as seguintes palavras obs: quando acharem essas palavras troquem elas pelolink da imagem deixando o ( )

    LINK DO FUNDO DO BLOG  aki vc irar colocar o link da imagem do fundo 

    LINK DA SIDEBAR aki vc irar colocar o link da imagem da sidebar

    LINK DO TITULO DE GADGET 

    LINK DO RODAPE 

    HTML DO CABEÇALHO MAPEADO (essas palavras sao sem parenteses porque nao precisam)
    Nesse lugar voce irar colocar o codigo HTML do cabeçalho mapeado

    Se vc fez tudo ao conforme do tutorial o seu html ta pronto e certo para que seja colocado no blog

    Agora vou ensinar a colocar o layout no blog e an seguinte forma

     Vc irar no painel principal do blog e irar em modelo quando abrir a pagina de modelo vc a aperta EDITAR HTML
     
    Quando vc apertar irar aparece a seguinte pagina e aperte prosseguir

                                                            e irar abrir essa seguinte pagina







    Nessa pagina vc irar trocar os HTMLs vc irar copiar o html do layout (template) que vc fez e irar substituir pelo akele la em cima dpis de trocar os htmls aperte salvar modelo se aperecer uma pagina amarela aperte cancelar,  essa pagina irar dizer que seu html nao tem os seguintes widgets entao ignore e dpis que vc salvo olhe seu blog ele estara com um visual diferente se vc encontrar erros vc irar que descobrir como retirar esses erros

    Electricshade

Postado por às

Nenhum comentário:

Postar um comentário

Assinar: Postar comentários (Atom)