Porém eram apenas 3 redes sociais, o Facebook o G+ e o
Atendendo a pedidos alterei este gadget acrescentando mais duas redes sociais o Pinterest e o Instagram e deu um resultado bem legal!
Como colocar um Gadget das Redes Sociais no Estilo Metro
O procedimento é o mesmo do post anterior com a diferença de ter mais dois links de redes sociais.→ Vá em Layout» Escolha a Coluna que deseja colocar o Gadget » Clique em Adicionar um gadget » Escolha um gadget tipo HTML
►Cole o código abaixo no espaço reservado para isto:
<div class="MBD2B-social"> <li><a class="fb2" href="URL_Facebook" target="_blank"></a></li> <li><a class="tw2" href="URL_Twitter" target="_blank"></a></li> <li><a class="gp2" href="URL_Google+" target="_blank"></a></li> <li><a class="fd2" href="URL_Feedburner" target="_blank"></a></li> <li><a class="in2" href="URL_Instagram" target="_blank"></a></li> <li><a class="pi2" href="URL_Pinterest" target="_blank"></a></li> </div> <style type='text/css'> .MBD2B-social {width: 285px} .MBD2B-social li { position: relative; cursor: pointer; padding: 0; list-style: none } .MBD2B-social .fb2,.tw2,.gp2,.fd2,.in2,.pi2 { z-index: 7; float: left; margin: 1px; position: relative; display: block } .MBD2B-social .fb2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSkjOECkQ5NMYfxk_j7LJnVgN_grTbjtMpkVrXyByWJseNeWDTfHjbHhLZQL5bsXGuyCGq429e8pNxp8-VGd1boW5EyPzXiFEvi7XjUlAdbK1Ncc0HyyjascHVDO3-giZVZLTyRwG2Euo/s1600/Facebook1.png) no-repeat center center #1f69b3; width: 140px; height: 205px } .MBD2B-social .tw2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcoV1qXX0l31wW3ZSY2RSDTTDGYUqQ_vNb2uCpeB-k2SDT1xMf_clpVm1IQdpsbGBjZawRU77u7MWmCXkvzYeeheBYz9N3ofeGjiFk66e4vBKFNOa_lW-TOG0hsIIzn3X4Ww-bb432zos/s1600/twitter1.png) no-repeat center center #43b3e5; width: 140px; height: 70px } .MBD2B-social .gp2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbcaaSVDo0BYH6I7n0GRiejlDNwYElvWts6h55rNtSStr7OwoILgq3_-e-9ViPQ7lLpJmjqjzBRObYVoT_Ajl1scOmmSlIluBbts3sIDWGSlFnHK9P6GRQeUCPgreDwg1CMgDqHn8kGo/s1600/g+1.png) no-repeat center center #da4a38; width: 140px; height: 133px } .MBD2B-social .fd2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm5LmytDBfrsXR3Rl8wsijvk8LV9kAsXlWg0HaA66OLjAwTJGHDQItzfIXwrP4WQvUJGFFLhRBCcV8GJmiKsn3mDpBYwBw2Mf-RbBB9jQ6CHv65RXa4bMj04f0SpOMDU7f1rSDPzSyS6U/s1600/Feed1.png) no-repeat center center #e9a01c; width: 140px; height: 77px } .MBD2B-social .in2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuoPSmDfezELdgbfonBfwIYwQvecsX5iThDhT3a-PZRmUEc3vUSnaxgqAljSPVjVTiSASC4K_F6WN2o9N6DtAlYFXSPvTJteMP89GHXqk22PANOehWKl0ZtklJ5oUbosOo1-WHja5Kbb0/s1600/instagram1.png) no-repeat center center #3D739C; width: 140px; height: 77px } .MBD2B-social .pi2 { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAI6Yqqq_fIftb8bU68UBsNQteFGmklQmSuY-tMq4lHHa7qoADqvssL7SRS1hhTbkJ1Aw1_HZondWkhyCFxN7DN0HATLLWDmmvQeVtoaKYO_c45MH4swoakuNNHTghP5SPwo9UJ0DwwGA/s1600/pinterest1.png) no-repeat center center #B93936; width: 282px; height: 70px } .MBD2B-social li:hover .fb2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT70KhtMPXmtBlrOcFe38-tsyq09iYRZdE4XtP6J0f2jv0yos77Q2BS0YfO6REbU51mNP3faWDjOgzNCgXqriP-RVP1Kpj56r_bplWtth7wa9mLfEGetPjg5yXQwJYCSjGqtVZ1WUJbe0/s1600/Facebook2.png) no-repeat center center #1f69b3} .MBD2B-social li:hover .tw2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDAhqdHseIh60FhDEvStxrV9OZ00xmXs10btREs9hlNaFd_JwagyJTPyGOlBZVslAH7u5oLYtCoHJHrboJtOwr5b9LG491RjQJKnKjsSuKMgC1KG12MSlgBIyccex8Om33FAeIiguG5Wc/s1600/twitter2.png) no-repeat center center #43b3e5} .MBD2B-social li:hover .gp2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9GWCDblVGP3PbSz_kCrMGXiXC9VN1t_bsydvg-4ri2wkbQXJOpBRGDwNUz7g3jJr1n_W5r-RvOBAfv_1DME-G__6eyARWrYXJJZ4-vWPHNZ7piarZVsFK5btDFEs_46ycV4dKGH6trSw/s1600/g+2.png) no-repeat center center #da4a38} .MBD2B-social li:hover .fd2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfDkuyS51GJ45K2wNW2_Q5Uiely56HBYbl7ffhB0xf53822LMxlRxGE8sD6Mm37mujABOlIdt_G0SiBE0WfLIQ7LK4rtUGJK2zObNrMpssb0tS5yzwLvjncoyPWkYvZsnU7AHVU7WEkf4/s1600/Feed2.png) no-repeat center center #e9a01c} .MBD2B-social li:hover .in2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDnXUgMC8uDgVEh8Bm_gbKzSZEeRz05y7Xw26eBtp8uo7NJ8qHUkRKjrpKrNwRFyuaBCkN4zPAxS9DYsDWtcO9UcBU6DbzA-MkZxnvkVV0RMG-jC-GveZpqIpiUBK7xy09P4lqbyif0mc/s1600/instagram2.png) no-repeat center center #3D739C} .MBD2B-social li:hover .pi2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghhz15nwh_nbfrtuKGxHKTQCuJwFHJ2F_aP5R6EB_Wq7greIYrGQuksz9Kai9xKw859TxJlJT6pAn6mFZHGRfBfarMicfy_BcPAAiFvv4CoqlH3o1ZvgUqPeq6PEDlOjvUzzMHcC0rKlY/s1600/pinterest2.png) no-repeat center center #B93936} </style>
Como configurar o seu Gadget
1- Configure as URLs das Redes Sociais♦ Em URL_Facebook » Coloque o link da sua página do Facebook
♦ Em URL_Twitter » Coloque o link do seu Twitter
♦ Em URL_Google+ » Coloque o link da sua página no G+
♦ Em URL_Feedburner » Coloque o link dos Feeds do seu Blog
♦ Em URL_Instagram » Coloque o link do seu Instagram
♦ Em URL_Pinterest » Coloque o link do seu perfil no Pinterest
Obs: Se você ainda não ativou os Feeds para o seu blog » Leia este artigo: O que são feeds e entenda a importância de ter feeds para o seu blog.
Baixe-as - Hospede em seu blog e substitua os links em azul no código acima.
Marcadores: DICAS E TUTORIAL