Você já viu aqueles blogs que têm uma área de widget com abas na barra lateral composta por postagens populares, recentes e de recursos em um único clique? É mais comumente conhecido como widget com guias jQuery, que permite economizar muito espaço na barra lateral mantendo a interface amigável para seus usuários combinando 3 widgets diferentes em apenas um. Neste artigo, mostraremos como adicionar um widget de barra lateral com guias jQuery no Blogger.
O que é um widget com guias jQuery?
Você teria visto muitos sites que têm um widget com guias na parte superior da barra lateral que mantém três widgets em apenas um lugar, fornecendo a capacidade de selecionar um para visualizar entre eles. Ele não apenas permite que você economize um pouco de espaço na barra lateral, mas também mantém o design do seu blog limpo e profissional.
Muitos grandes sites populares estão usando a mesma técnica para exibir mais widgets em menos espaço. Neste artigo, mostraremos uma maneira de adicionar um widget de barra lateral com guias jQuery no blogger e o guiaremos em cada etapa detalhadamente.
Criando widget com guias jQuery no Blogger:
A primeira coisa que você precisa fazer é acessar Blogger >> Template >> Edit HTML e colar a seguinte codificação CSS logo acima da tag ]]></b:skin> . Se você tiver um arquivo de folha de estilo CSS separado, também poderá adicionar o seguinte CSS a ele.
/* Tab Widget */.tabviewsection {background: #f8f8f8;text-transform: uppercase;border-bottom: 5px solid #f34246;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;float: left;width: 100%;}.tabs-widget {list-style: none;list-style-type: none;margin: 0 0 10px 0;padding: 0;}.tabs-widget li {list-style: none;list-style-type: none;padding: 0;float: left;border-right: 2px solid #fff;}.tabs-widget li a {color: #fff;display: block;padding-right: 16.5px;padding-left: 16px;font-size: 13px;padding-top: 15px;padding-bottom: 15px;text-decoration: none;border-top-left-radius: 5px;border-top-right-radius: 5px;}.tabs-widget-content {}.tabviewsection {margin-top: 10px;margin-bottom: 10px;}.tags_tab {width: 80px;text-align: center;}.about_tab {width: 96px;text-align: center;}li.laster {border: 0px;width: 120px;text-align: center;}.blog-mobile-link {display: none;}.tabs-widget li a {padding-right: 20px;padding-left: 20px;}.tabs-widget {height: 51px;}.tw-authors {width: 570px;}.tabviewsection h2 {display: none;}.tabs-widget li a.tabs-widget-current {padding-bottom: 20px;margin-top: -10px;background: #f8f8f8;color: #444;text-decoration: none;border-top: 5px solid #f34246;font-size: 14px;text-transform: capitalize;}.tabs-widget li a {background: #f34246;}
Agora, esta etapa depende inteiramente da codificação do seu modelo de blogger, pois designers diferentes têm maneiras diferentes de codificação, mas compartilharemos uma maneira mais usada no modelo. Você precisa procurar o código da área do widget da barra lateral. Procure por <div id='sidebar-wrapper'> e logo abaixo cole o seguinte código.
<!-- Tab Widget [start] --><div class='tabviewsection'><script type='text/javascript'>jQuery(document).ready(function($){$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li:first a").addClass("tabs-widget-current").show();$(".tabs-widget-content-widget-themater_tabs-1432447472-id:first").show();$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").click(function() {$("ul.tabs-widget-widget-themater_tabs-1432447472-id li a").removeClass("tabs-widget-current a");$(this).addClass("tabs-widget-current");$(".tabs-widget-content-widget-themater_tabs-1432447472-id").hide();var activeTab = $(this).attr("href");$(activeTab).fadeIn();return false;});});</script><ul class='tabs-widget tabs-widget-widget-themater_tabs-1432447472-id'><li class='about_tab'><a href='#widget-themater_tabs-1432447472-id1'>About</a></li><li class='tags_tab'><a href='#widget-themater_tabs-1432447472-id2'>Tags</a></li><li class='laster'><a href='#widget-themater_tabs-1432447472-id3'>Popular</a></li></ul><!-- Tab Widget 1 --><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id1'><b:section class='sidebar' id='sidebartab1' preferred='yes'></b:section></div><!-- Tab Widget 2 --><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id2'><b:section class='sidebar' id='sidebartab2' preferred='yes'></b:section></div><div class='tabs-widget-content tabs-widget-content-widget-themater_tabs-1432447472-id' id='widget-themater_tabs-1432447472-id3'><!-- Tab Widget 3 --><b:section class='sidebar' id='sidebartab3' preferred='yes'></b:section></div></div><!-- Tab Widget [endt] -->
Depois que tudo estiver pronto e polvilhado, salve o modelo pressionando "Salvar modelo" na parte superior. Agora vá para a área Layout e você notará três áreas de widget logo acima da barra lateral. Você pode adicionar widgets em duas dessas três áreas e eles aparecem em forma de guias quando você os visualiza ao vivo em seu site.
Esperamos que este tutorial tenha ajudado seu maior problema, como adicionar um widget de barra lateral com guias jquery no blogger. Com CSS, você pode estilizar os widgets da guia de acordo com a aparência do seu blog.
Tags:
INTERNET