ShiftActif fórum


Participe da melhor comunidade sobre fóruns!

Bem vindo ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Venha participar desta grande comunidade!!!
Compartilhe
Ver o tópico anteriorIr em baixoVer o tópico seguinte
avatar
Meriteiro
Meriteiro
Masculino
Idade : 18
PointActif's : 2135
ReputActifs : 53
Mensagens : 179
Inscrição : 22/04/2012

Localização : Baker street
100%
Ver perfil do usuáriohttp://narutorpgstorm.ultimaterpg.net/forum

[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial

em Sab 29 Dez - 18:06


Javascript

Este tutorial irá ensinar como criarmos uma função - através de códigos Javascript - que irá nos mostrar na página inicial nossos cinco últimos tópicos.


--> Tutoriais, dicas e astúcias <--
[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial



- Adicionando o código Javascript
Como já vimos o efeito será conseguido através de um código, para adicionarmos o tal iremos aceder ao Painel de controle -> Módulos -> HTML e Javascript -> Gestão dos códigos Javascript -> Criar um novo código Javascript

Investimento: Marcaremos "No índice"
Código:
jQuery(document).ready(function(){var i=5;jQuery('#main-content').prepend('<ul class="topiclist topics quespende"><h1 class="page-title tquespende"> Últimos tópicos</h1><div id="tpccont"></div></ul>');jQuery.get('/search?search_topics='+jQuery('#i_icon_mini_logout').attr('alt').split('[')[1].split(']')[0].replace(/ /g,''),function(p){var o=0;if(jQuery('#main-content li.row',p).length){jQuery('#main-content li.row',p).each(function(){if(i>o){var m=jQuery(this).html();jQuery('#tpccont').append('<li class="row">'+m+'</li>');o++;}});}else{jQuery('#tpccont').closest('ul').remove();}});});

Vermelho -> Aqui você poderá editar a quantidade de tópicos que irão aparecer.


- Adicionando o código CSS
Para darmos o visual agradável ao painel iremos adicionar alguns códigos CSS, para isso acederemos à:
Painel de controle -> Visualização -> Imagens e Cores -> Cores -> Aba 'Folha de estilo CSS'

Colaremos o código abaixo e iremos salvar.
Código:
.quespende{margin-bottom:10px}.quespende .row:last-child{border-bottom:1px solid #E5E5E5}.quespende .row{border-bottom:0;border-top:1px solid #E5E5E5}.quespende .views,.quespende img{display:none}.quespende .icon{background-image:url()!important}.quespende .row .icon dd{border-left:0;padding-left:1px}.quespende .dterm{font-size:0!important;margin-left:-1px;padding-left:11px!important}.quespende a.topictitle{color:#222;cursor:pointer;display:inline-block;font-family:arial, sans-serif;font-size:13px;font-weight:700;margin-top:5px}.quespende .lastpost{float:right;margin-right:10px;width:auto}.quespende .lastpost a{color:#222}.quespende .posts{width:100px}.quespende .posts:after{content:' mensagens'}.quespende #buttonsolved{float:right;margin-left:3px;margin-right:10px;margin-top:5px}.tquespende{font-family:arial, sans-serif!important;font-size:18px!important;margin:10px 0 6px 6px !important}


- Resultado
Resultado como mostrado na imagem abaixo:
http://i12.servimg.com/u/f12/16/63/75/54/result14.png



© ShiftActif


Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[TUTORIAL] Mostrar seus cinco últimos tópicos na página inicial


Última edição por MateusV. em Dom 30 Dez - 15:11, editado 3 vez(es)
Ver o tópico anteriorVoltar ao TopoVer o tópico seguinte
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum