Megosztási ikonok egyszerűen
Hogy az oldalunk tartalmát könnyebben tudják megosztani látogatóink, érdemes megosztási ikonokat kihelyeznünk. Ezek azt szolgálják, hogy a kiválasztott közösségi oldalra beküldik a bejegyzés linkjét, amit így még több ember láthat.
Megosztási gombok
A bejegyzésünk aljába vagy tetejére - épp, ahol szimpatikus nekünk - szúrjuk be a következő sorokat, amik magát a gombokat és az eseményüket tartalmazzák:
<div class='sociable'>
<ul>
<li><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='"http://iwiw.hu/pages/share/share.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='iWiW' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/iwiw.png' title='iWiW'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Reddit' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank'><img alt='Technorati' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='"http://twitter.com/home?status=" + data:post.title + " " + data:post.url' target='_blank'><img alt='Twitter' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/twitter.png' title='Twitter'/></a></li>
</ul>
</div>
Ezután a <head> után szúrjuk be a következő sort:
<link href='http://dl.dropbox.com/u/4121097/social/sociable.css' media='screen' rel='stylesheet' type='text/css'/>
Ha kész vagyunk vele, akkor úgy kell kinéznie, mint a bejegyzés alján található ikonsor.
Retweet gomb
Ez a bejegyzés jobb oldalán található számláló, amivel retweetelni tudunk és megjeleníti, hogy hányan tették ezt.
A következő sorokat illeszük a bejegyzés felső részébe:
<div style='float:right; margin-right:10px;margin-top:10px;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'></script>
</div>
Szia!
VálaszTörlésNagyon örülök, hogy rátaláltam a blogodra, de sajnos nem sikerült a megosztási gombok beszúrása. :( Nem tudnád picit szájbarágósabban leírni? köszi előre is.
Szia!
VálaszTörlésA Blogger irányítópulton válaszd a Tervezés/HTML-kód szerkesztése menüpontot. Pipáld ki a Vezérlõsablonok kibontását.
Ezután keresd meg a következõt: <head> Ez alá másold be a <link href... kezdetû részt. Ebben a posztban a második bekeretezett rész.
Majd keresd meg ezt: <div class='post-footer-line post-footer-line-1'> és ez alá másold be a legelsõ bekeretezett részt. Így kezdõdik: <div class='sociable'>
Ha bemásoltad, sablon mentése és úgy kell kinéznie, mint nálam:)
Szia!
VálaszTörlésTudnál segíteni? :) A problémám az, hogy egyedi a blogom kinézete, vagyis feltöltött témát használok.
www.angyaliharcos.blogspot.com - on és ezen is -> http://yzarr-blog-fire-themar.blogspot.com/ a bajom, az, hogy az eredeti bloggeres megosztási gombokat vmiért nem jeleníti meg a bejegyzés alá. A facebook lájk gombot már sikerült be tennem, de ezt a legújabb plus1 őrületet is szeretném betenni hasonló képen mint a fb lájkolósat. Viszont, láttam, ezt a sokkal egyszerűbb megoldást, csak azt, nem tudom eldönteni, hogy hova tegyem be a fenti kódba a google lájk gombját?o.O Tudnál segíteni nekem ebben?
Köszi, Yzarr.
Hello!
VálaszTörlésEzt így még én sem tudtam betenni, de nézd meg ezt http://gianniblogja.blogspot.com/2011/07/google-1-gomb-elhelyezese-bloggerben.html
Szia, köszi a segítséget! :)
VálaszTörlésKedves Gianni!
VálaszTörlésÚjból hozzád fordulok segítségért!
A blogoban már fent van a face és a twitter megosztási gomb, én most az iwiw-t szeretném csak. Tudnál segíteni, hogy ezt hogyan kell.
Illetve, ha a fentieket beillesztem, akkor a már meglévőkkel mi történik? Ez biztos buta kérdés volt!!!
Fáradozásodat előre is köszönettel!
Mazsola
Szia!
VálaszTörlésHa bemásolod a fentit, akkor mindkettő lesz. Ami szerintem felesleges. Egyszerűbb, ha csak egy iwiw gombot teszel be pluszban. A fenti hosszú kód helyett a lentit kell beillesztened és természetesen a fent leírt másik részt a headbe bemásolni:
<div class='sociable'>
<ul>
<li><a expr:href='"http://iwiw.hu/pages/share/share.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='iWiW' class='sociable-hovers' src='http://dl.dropbox.com/u/4121097/social/iwiw.png' title='iWiW'/></a></li>
</ul>
</div>
Köszönöm, megpróbálom! Nagyon igyekszem!
VálaszTörlésMazsola
Nagyon, nagyon köszönöm sikerült!
VálaszTörlésBár nem tudom, hogy az hiba-e, hogy nem a többi ikonnal került egy sorba, hanem feljebb?
De ott van az a lényeg!!!
Mazsola