Pentru cine doreste sa isi personalizeze blogul / site-ul cat mai mult si intr-un mod cat mai frumos, atunci are nevoie de iconite cu efect de rotire foarte interesant concepute. Dupa cum se vede, putem observa o parte din acestea si la mine pe blog. Cu ajutorul acestora, putem face trimitere catre pagina site-ului / blog-ului din Facebook, Google +, Twitter, Pinterest; dar are si buton de legatura pentru abonare la fluxurile RSS, Email RSS, si de asemenea putem gasi si un counter pentru a vedea cati abonati avem.
Avantajul acestor iconite este acela ca nu trebuie sa folosim un plugin special care si asa ar face blogul sa se incarce tot mai greu. Folosirea multor plugin-uri incetineste viteza de incarcare a paginii.
Live Demo
Le puteti incerca fara nici o frica, puteti vedea efectul ducand mouse-ul deasupra acestora. Iconitele fac deja legatura cu paginile principale ale blogului meu, si de asemenea va puteti abona la articolele mele. Puteti da si like – follow ca nu ma supar :).
Tutorial adaugare iconite pe blog
In continuare vom putea invata cum putem adauga acest gadget pe blogul WordPress si pe blogul Blogger.
WordPress
1. Accesam WordPress Dashboard, apoi facem click pe “Apperance – Widgets”. Alegem elementul “Text” si facem drag & drop in slider-ul unde vrem sa apara. Lipim codul de mai jos si apoi apasam save.
COD:
<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id=”social”> <!–Start Rss Icon–> <a title=”Grab Our Rss Feed” href=”YOUR-FEED-URL-HERE” target=”_blank”><img border=”0″ src=”https://3.bp.blogspot.com/-JJAnjTFe4mQ/UA6_gexOboI/AAAAAAAAH8w/pUVfxnjRUM4/s1600/RSS-48×48.png” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Rss Icon–> <!–Start Email Rss Icon–> <a rel=”nofollow” title=”Get Free Updates Via Email” href=”YOUR-EMAIL-RSS-URL-HERE” target=”_blank”><img border=”0″ src=”https://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48×48.png” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Email Rss Icon–> <!–Start Facebook Icon–> <a rel=”nofollow” title=”Like Our Facebook Page” href=”YOUR-FACEBOOK-PAGE-URL-HERE” target=”_blank”><img border=”0″ src=”https://4.bp.blogspot.com/-dkmDM3RXcoE/UA6_d28wCyI/AAAAAAAAH8Y/9E3PI3lXueM/s1600/FACEBOOK-48×48.png” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Facebook Icon–> <!–Start Twitter Icon–> <a rel=”nofollow” title=”Follow Our Updates On Twitter” href=”YOUR-TWITTER-URL-HERE” target=”_blank”><img border=”0″ src=”https://3.bp.blogspot.com/-TrNf8cdHE6w/UA6_iRAUK_I/AAAAAAAAH88/Jo7RAX207xo/s1600/TWITTER-48×48.png” style=”margin-right:1px;” alt=”Icon”/></a> <!–End Twitter Icon–> <!–Start Pinterest Icon–> <a title=”Follow Our Pins” rel=”nofollow” href=”YOUR-PINTEREST-URL-HERE” target=”_blank”><img style=”margin-right:1px;” src=”https://4.bp.blogspot.com/-uSSbLLRLSIE/UA6_fTHiLrI/AAAAAAAAH8k/OxlFAJozvX8/s1600/PINTEREST-48×48.png” alt=”Follow Me on Pinterest” /></a> <!–End Pinterest Icon–> </div><br/> <!–Start Feed Count Button–> <a href=”YOUR-FEEDBURNER-URL-HERE” target=”_blank”><img alt=”spice up your blog” src=”https://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1″ style=”border:0″ /></a><!–End Feed Count Button–> </center>
Important
Inlocuim textul subliniat cu adresele paginilor sociale si cu adresa feed-ului.
Eliminarea anumitor iconite
Codul pentru fiecare iconita se afla intre tagurile (ex: <!–Start Rss Icon–> Code here<!–End Rss Icon>. Pentru a elimina o iconita stergem codul dintre aceste doua taguri.
Blogger
Pentru a insera acest gadget pe Blogger, parcurgem urmatoarea cale:
1. In noul Dashboard Blogger facem click pe meniul drop down pentru blogul nostru > Choose “Layout” > Add a Gadget > Choose “HTML Javascript” > pastam codul.
PS: codul este acela de mai sus, fiind identic atat pentru WordPress cat si pentru Blogger. Difera doar calea parcursa in panoul de administrare.
Pana la urma iti merg?
E straniu.. eu folosesc codul cu ghilimele..asa se folosesc ghilimelele, in orice cod. Nu stiu in legatura cu utilizarea acestora in site-uri doar html. Daca probezi, astept rezultatul tau, m-ar interesa.
PS: acum pregatesc un articol interesant pentru categoria wp. Poate iti fi de ajutor.
Sunt superbe insa la mine nu merg. Sunt pe WP si nu imi aduce si imaginile in widgetul text, ci imi arata in loc de inconite textul icon / icon / icon. Vreo idee?
Da. Copiaza imaginile in calculator, de la mine de pe pagina cu click dreapta si salvare pe hdd. Intri in Dashboard la WP si incarci media. Adica incarci imaginile la tine pe blog / site. Apoi le ai in propriile fisiere si ai propria adresa. Inlocuiesti adresa iconitei (src=”http://4.bp.blogspot.com/-1BWe2ZnJHas/UA6_hrD6_GI/AAAAAAAAH80/exs4JwDuyhY/s1600/RSS-EMAIL-48×48.png”) cu cea de la tine de pe blog, in cazul meu este (http://mystreet7.com/wp-content/uploads…bla bla bla ). Sper sa rezolvi problema.
Mersi pt feed-back. Da, uite ca nu ma gandisem ca imaginile sunt gazduite in afara siteului meu si nu au cum sa apara. Asa ca le-am urcat in media – pe site, am schimbat adresa de upload in cod, dar tot nu functioneaza. Nu stiu poate tema mea nu e ok, desi pana acum mi-a acceptat modificari chiar si in linii de cod sau esti sigur ca in codul de la tine trebuie sa fie dupa caracterul #. Zic si eu…Asta este nu merge si basta, tot cu pluginuri rezolvam desi codul html ocupa putin spatiu… Multumesc inca o data pentru ajutor!
Nu, codul incepe exact ca in post cu style. Eu tot wordpress folosesc si la widget pur si simplu am ales Text si am pastat codul in el si apoi Save. (cu modificarile de vigoare pentru acele conturi de fb, g+ etc).
Tema ta e destul de ok si nu ar fi nici o problema. In plus, acestea functioneaza si pe platforma blogger. Nu e vorba de spatiu daca folosesti pluginuri, e vorba ca poate afecta viteza de incarcare a blogului, de aceea sunt mai bune codurile.
Legat de iconite, acestea ar trebui sa functioneze si daca sunt hostate in alta parte, dar daca de acolo sunt sterse, automat nu vor mai aparea la tine. De aceea e indicat sa le incarci la tine pe blog. Dupa ce le-ai schimbat adresa cu cea de pe blog, si le-ai inserat in wodget., nu apare absolut nimic, sau apare ceva iar la imagini apare link-ul rupt?
Alex! Ori nu am inteles din prima, ori trebuie sa modifici un pic codul. Trebuie eliminate ghilimelele de la zona de URL si cea a adresei pozei. Eu lipeam adresele intre ghilimele si de accea nu-mi arata nici imaginea si nu-mi punea nici url-urile siteurilor sociale. In fine, am reusit si mi-a placut si back-up-ul cu Dropbox ( mai se face si in Gmail, dupa cate stiu ). Intrebare: codul asta se poate folosi desigur si pe siteuri facute fara CMS, adica in siteuri facute in html, nu?!
Mersi si continua ca am gasit la tine niste chestii avansate de customizare WP!
Dar poti gasi iconitele (la set). Uite-te la mine in josul paginii. Am si pentru Youtube. Le am pe toate 3 si le poti folosi.
Aaa, gata, mi-am adus aminte ca downloadasem mai de mult un set cu vreo 20 de butoane :) o sa le caut in PC :)
Ce frumoase sunt :D
Intradevar sunt superbe. Le poti pune si tu pentru ca merg si pe blogger.
Stiu (am citit titlul :D ). Era tare daca exista si una cu Youtube, as putea sa caut iconita pe net si sa inlocuiesc link-ul ei in cod, dar ar da urat, ar trebuie una asemanatoare cu celelalte.
Da, era interesant si cu Youtube. Poti cauta una separat, chiar daca are alta forma..si o poti insera singura in script iar apoi o adaugi in footer..sau in alt loc..chiar daca este singura..cred ca vine bine. Nu trebuie sa fie neaparat la gramada cu celelalte :)
Eu vreau sa-mi pun iconita pentru Twitter, Google Plus si Youtube, la Facebook si restu nu le pun icon ca nu prea le folosesc.
Cred ca-mi fac eu in Gimp niste iconite (vor iesi urat :)) dar cel putin vor fi toate la fel :)