Habbo Imager (Página HTML)

por Alex 15.03.17 15:55

Detalhes da questão

Endereço do fórum: http://dophabbo.forumeiros.com
Versão do fórum: ModernBB

Descrição

Boa tarde, caro Convidado !

Bom, ando a exprimentar a nova verão da forumeiros (e é ótima, recomendo a todos). Como o fórum é destinado a uma dependência do jogo Habbo Hotel, gostaria de criar uma página HTML com um Habbo Imager (gerador de avatares do Habbo).

Realmente, fi-lo, copiando os códigos do primeiro modelo deste site: http://arquivosecretohabbo.blogspot.pt/p/imager.html

Porém, ao colocar os códigos, o conteúdo ficou desformatado. Em baixo vai um print do meu problema e em conjunto, a formatação da página HTML.

O link da página HTML é: http://dophabbo.forumeiros.com/h1-habbo-imager

Os códigos que eu coloquei são exatamente iguais aos da página do primeiro link.
Agradeço a todos que me ajudem!

por while 15.03.17 16:37

Olá autor, boa tarde.

Troque o conteúdo da sua pagina HTML por este:

Código:: <!DOCTYPE html> <html class='v2' dir='ltr' 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'> <head> <meta content='width=1100' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/> <meta content='blogger' name='generator'/> <link href='http://arquivosecretohabbo.blogspot.com.br/favicon.ico' rel='icon' type='image/x-icon'/> <link href='http://arquivosecretohabbo.blogspot.com/p/imager.html' rel='canonical'/> <link rel="alternate" type="application/atom+xml" title="Arquivo Secreto - Atom" href="http://arquivosecretohabbo.blogspot.com/feeds/posts/default" /> <link rel="alternate" type="application/rss+xml" title="Arquivo Secreto - RSS" href="http://arquivosecretohabbo.blogspot.com/feeds/posts/default?alt=rss" /> <link rel="service.post" type="application/atom+xml" title="Arquivo Secreto - Atom" href="https://www.blogger.com/feeds/7876480379888302692/posts/default" />  <meta content='http://arquivosecretohabbo.blogspot.com/p/imager.html' property='og:url'/> <meta content='Habbo Imager' property='og:title'/> <meta content='templates habbo' property='og:description'/>  <title>Arquivo Secreto: Habbo Imager</title> <script src='http://connect.facebook.net/pt_BR/all.js#xfbml=1'></script> <script src='http://code.jquery.com/jquery-latest.js'></script> <meta content='MarcoCuel' property='fb:admins'/> <meta content='370170209815335' property='fb:app_id'/> <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'/> <link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'/> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/> <link href='http://2.bp.blogspot.com/-eZFaJepTdeY/VFeuWnltfMI/AAAAAAAABJI/Fx57QGzQDOY/s1600/touch-icon-iphone.png' rel='apple-touch-icon'/> <link href='http://4.bp.blogspot.com/-SO1EaV5zdpM/VFeuWGoGjdI/AAAAAAAABJE/8JEp-yooCbk/s1600/touch-icon-ipad.png' rel='apple-touch-icon' sizes='76x76'/> <link href='http://1.bp.blogspot.com/-a9hf2YA4xE4/VFeuWE4Z5tI/AAAAAAAABJA/WhN6cJkM_KQ/s1600/touch-icon-iphone-retina.png' rel='apple-touch-icon' sizes='120x120'/> <link href='http://4.bp.blogspot.com/-MOYO9EHZn4o/VFeuWBW3DhI/AAAAAAAABI8/Sxme1ysutOs/s1600/touch-icon-ipad-retina.png' rel='apple-touch-icon' sizes='152x152'/> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/static/v1/widgets/1691512649-css_bundle_v2.css' /> <link type='text/css' rel='stylesheet' href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=7876480379888302692&zx=8b56ebd2-7249-4fa1-b92e-3e33d0629d47' /> <style id='page-skin-1' type='text/css'></style> <style id='template-skin-1' type='text/css'></style> </head> <body> <nav><div id='centro'> <ul> <li><a href='/'>Início</a></li> <li class='drop'> <a>Arquivo</a> <div class='dropdownContain'> <div class='dropOut'> <div class='triangle'></div> <ul> <li><a href='/p/sobre.html'>Sobre</a></li> <li><a href='/p/equipe.html'>Equipe</a></li> </ul> </div> </div> </li> <li><a href='/p/contato.html'>Contato</a></li> <li><a href='/p/chat.html'>Chat</a></li> <li class='drop'> <a>Extras</a> <div class='dropdownContain'> <div class='dropOut'> <div class='triangle'></div> <ul> <li><a href='/p/imager.html'>Habbo Imager</a></li> </ul> </div> </div> </li> <div style='float: right; padding: 20px; '> <iframe allowTransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FArquivoSecretoX&width&layout=button_count&action=like&show_faces=false&share=false&height=21&appId=370170209815335' style='border:none; overflow:hidden; height:21px; width: 100px;'></iframe> </div> </ul> </div></nav> <div class='content'> <div class='content-outer'> <div class='fauxborder-left content-fauxborder-left'> <div class='content-inner'> <div class='main-outer'> <div class='fauxborder-left main-fauxborder-left'> <div class='region-inner main-inner'> <div class='columns fauxcolumns'>  <div class='columns-inner'> <div class='column-center-outer'> <div class='column-center-inner'> <div class='main section' id='main'><div class='widget Blog' data-version='1' id='Blog1'> <div class='blog-posts hfeed'> <div class="date-outer"> <div class="date-posts"> <div class='post-outer'> <div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> <meta content='7876480379888302692' itemprop='blogId'/> <meta content='6792067144826093869' itemprop='postId'/> <a name='6792067144826093869'></a> <h3 class='post-title entry-title' itemprop='name'> Habbo Imager </h3> <div class='post-header'> <span class='item-control blog-admin'> <div class='edit-post'> <span class='item-control blog-admin pid-941638838'> <a href='https://www.blogger.com/page-edit.g?blogID=7876480379888302692&pageID=6792067144826093869&from=pencil' title='Editar página'> <i class='fa fa-pencil-square-o' style='color: #444; padding: 4px 0;'></i> </a> </span> </div> </span> <div class='post-header-line-1'> </div> </div> <div class='post-body entry-content' id='post-body-6792067144826093869' itemprop='description articleBody'> Os scripts abaixo são código é aberto. Ou seja... você pode editar, alterar, fazer oque quiser.<br> Mas por favor mantenha os créditos de seus autores (Eles estão localizados na parte no código, nem aparecem). <br/><br/> <iframe height='430' scrolling='no' src='http://codepen.io/MarcoCuel/embed/VaOzxe/?height=430&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 95%;'>See the Pen <a href='http://codepen.io/MarcoCuel/pen/VaOzxe/'>Habbo Imager (Habbo PT/BR)</a> by Marco Cuel (<a href='http://codepen.io/MarcoCuel'>@MarcoCuel</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe> <br/><br/> <iframe height='500' scrolling='no' src='http://codepen.io/MarcoCuel/embed/GZaxxb/?height=500&theme-id=0&default-tab=result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 95%;'>See the Pen <a href='http://codepen.io/MarcoCuel/pen/GZaxxb/'>Imager </a> by Marco Cuel (<a href='http://codepen.io/MarcoCuel'>@MarcoCuel</a>) on <a href='http://codepen.io'>CodePen</a>. </iframe> <br/> <div style='clear: both;'></div> </div> <div class='post-footer'> <div class='post-footer-line post-footer-line-1'> <span class='post-icons'> </span> <div class='post-share-buttons goog-inline-block'> </div> </div> <div class='post-footer-line post-footer-line-2'></div> <div class='post-footer-line post-footer-line-3'></div> </div> </div> <div id='comments'> <div class='comments-page' id='fb-comments-page'> </div> <div class='comments comments-page' id='blogger-comments-page'></div> </div> <div class='comments' id='comments'> <a name='comments'></a> <div id='backlinks-container'> <div id='Blog1_backlinks-container'> </div> </div> </div> </div> </div></div> </div> <div class='blog-pager' id='blog-pager'> <a class='home-link' href='http://arquivosecretohabbo.blogspot.com.br/'></a> </div> <div class='clear'></div> <div class='blog-feeds'> <div class='feed-links'> Assinar: <a class='feed-link' href='http://arquivosecretohabbo.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Postagens (Atom)</a> </div> </div> <script type="text/javascript">window.___gcfg = {'lang': 'pt_BR'};</script> </div></div> </div> </div> <div class='column-left-outer'> <div class='column-left-inner'> <aside> </aside> </div> </div> <div class='column-right-outer'> <div class='column-right-inner'> <aside> <div class='sidebar section' id='sidebar-right-1'><div class='widget ContactForm' data-version='1' id='ContactForm1'> <div class='clear'></div> <span class='widget-item-control'> <span class='item-control blog-admin'> <a class='quickedit' href='//www.blogger.com/rearrange?blogID=7876480379888302692&widgetType=ContactForm&widgetId=ContactForm1&action=editWidget&sectionId=sidebar-right-1' onclick='return _WidgetManager._PopupConfig(document.getElementById("ContactForm1"));' target='configContactForm1' title='Editar'> <img alt='' height='18' src='https://resources.blogblog.com/img/icon18_wrench_allbkg.png' width='18'/> </a> </span> </span> <div class='clear'></div> </div></div> </aside> </div> </div> </div> <div style='clear: both'></div>  </div>  </div> </div> </div>  </div> </div> </div> </div> <script type='text/javascript'> window.setTimeout(function() { document.body.className = document.body.className.replace('loading', ''); }, 10); </script> <script style='text/javascript'> var pageCount=7;var displayPageNum=7;var upPageWord="Anterior";var downPageWord="Próxima";</script> <script src='http://static.tumblr.com/y66747w/DqWm7hhf3/page-nav.js' style='text/javascript'> </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ $(window).load(function() { // makes sure the whole site is loaded $('#status').fadeOut(); // will first fade out the loading animation $('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website. $('body').delay(350).css({'overflow':'visible'}); }) //]]> </script> <script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/3896972790-widgets.js"></script> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type='text/javascript'> window['__wavt'] = 'AOuZoY6u04B2MbNGr93boVuCWy7fRQgBMw:1489595503094';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d7876480379888302692','http://arquivosecretohabbo.blogspot.com.br/p/imager.html','7876480379888302692'); _WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '7876480379888302692', 'bloggerUrl': 'https://www.blogger.com', 'title': 'Arquivo Secreto', 'pageType': 'static_page', 'pageId': '6792067144826093869', 'url': 'http://arquivosecretohabbo.blogspot.com.br/p/imager.html', 'canonicalUrl': 'http://arquivosecretohabbo.blogspot.com/p/imager.html', 'homepageUrl': 'http://arquivosecretohabbo.blogspot.com.br/', 'searchUrl': 'http://arquivosecretohabbo.blogspot.com.br/search', 'canonicalHomepageUrl': 'http://arquivosecretohabbo.blogspot.com/', 'blogspotFaviconUrl': 'http://arquivosecretohabbo.blogspot.com.br/favicon.ico', 'hasCustomDomain': false, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'useUniversalAnalytics': false, 'pageName': 'Habbo Imager', 'pageTitle': 'Arquivo Secreto: Habbo Imager', 'metaDescription': '', 'encoding': 'UTF-8', 'locale': 'pt-BR', 'localeUnderscoreDelimited': 'pt_br', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Arquivo Secreto - Atom\x22 href\x3d\x22http://arquivosecretohabbo.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Arquivo Secreto - RSS\x22 href\x3d\x22http://arquivosecretohabbo.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Arquivo Secreto - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/7876480379888302692/posts/default\x22 /\x3e\n', 'meTag': '', 'openIdOpTag': '', 'mobileHeadScript': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'ieCssRetrofitLinks': '\x3c!--[if IE]\x3e\x3cscript type\x3d\x22text/javascript\x22 src\x3d\x22https://www.blogger.com/static/v1/jsbin/3357874291-ieretrofit.js\x22\x3e\x3c/script\x3e\n\x3c![endif]--\x3e', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/a742fb502c68b628', 'plusOneApiSrc': 'https://apis.google.com/js/plusone.js', 'sharing': {'platforms': [{'name': 'Gerar link', 'key': 'link', 'shareMessage': 'Gerar link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Compartilhar no Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'Twitter', 'key': 'twitter', 'shareMessage': 'Compartilhar no Twitter', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Compartilhar no Pinterest', 'target': 'pinterest'}, {'name': 'Google+', 'key': 'googlePlus', 'shareMessage': 'Compartilhar no Google+', 'target': 'googleplus'}, {'name': 'E-mail', 'key': 'email', 'shareMessage': 'E-mail', 'target': 'email'}], 'googlePlusShareButtonWidth': 300, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27pt_BR\x27};\x3c/script\x3e'}, 'jumpLinkMessage': 'INFORMAÇÕES'}}, {'name': 'features', 'data': {'enhancedSourcesets': 'true', 'unsupported_browser_message': 'false'}}, {'name': 'messages', 'data': {'linkCopiedToClipboard': 'Link copiado para a área de transferência.', 'postLink': 'Link da postagem'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Personalizar', 'isResponsive': false, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Habbo Imager', 'description': 'templates habbo', 'url': 'http://arquivosecretohabbo.blogspot.com.br/p/imager.html', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': true, 'isPost': false, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'pageId': 6792067144826093869}}]); _WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'lightboxEnabled': true, 'lightboxModuleUrl': 'https://www.blogger.com/static/v1/jsbin/3301811140-lbx__pt_br.js', 'lightboxCssUrl': 'https://www.blogger.com/static/v1/v-css/368954415-lightbox_bundle.css'}, 'displayModeFull')); _WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar-right-1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Enviando...', 'contactFormMessageSentMsg': 'Sua mensagem foi enviada.', 'contactFormMessageNotSentMsg': 'Não foi possível enviar a mensagem. Tente novamente mais tarde.', 'contactFormInvalidEmailMsg': 'Um endereço de e-mail válido é necessário.', 'contactFormEmptyMessageMsg': 'O campo de mensagem não pode ficar vazio.', 'title': 'Contato', 'blogId': '7876480379888302692', 'contactFormNameMsg': 'Nome', 'contactFormEmailMsg': 'E-mail', 'contactFormMessageMsg': 'Mensagem', 'contactFormSendMsg': 'Enviar', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull')); </script> </body> </html>

Falta editar... mas, você faz isto né?

OBS: Deixe assim a configuração da pagina HTML:
- Você deseja utilizar o início e o final da página do seu fórum ? Assinalado em não.
- Usar esta página como página inicial? Assinale a opção desejada, se for sim, coloque no final da pagina ajuda.forumeiros.com

Até mais.

por Alex 15.03.17 16:41

Sim, sim. Muito obrigado!

por while 15.03.17 16:47

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".

Habbo Imager (Página HTML)