torsdag, februari 24, 2011

Hur Man Lägger Till En Rörlig Social Media Knapp Till En Blogger Blogg

Jag har fått lite frågor angående den rörliga knappen som följer efter er till vänster. Det kvittar hur fort du än scrollar så hinner den med ;) Tro mig, jag har försökt att vinna över den ett antal gånger redan...

Många har frågat hur dom kan få en sådan knapp till sin egen blogg så då är det ju bara att lyssna på sina läsare och skriva ihop en komplett guide så alla kan ta del av denna smarta marknadsföringsmetod. Efter att man har surfat in på bloggen ett antal gånger så känner man sig nästan tvingad att använda facebook "share" knappen eller twitter "tweet" knappen.

Jag trodde först att det skulle störa navigeringen på bloggen väldigt mycket men jag har anpassat knappen så den ska sitta längst ut på vänster sidebar. Ser proffsigare ut än när den ligger på höger sida gentemot blogginläggen. Det såg verkligen förskräckligt ut plus att lite av texten täcktes över när man scrolla neråt. Men efter en liten modifikation av javascript koden så blev det mycket bättre!

Det bästa med denna koden är att den är utformad så att du slipper gå in och redigera din HTML kod. Den fungerar precis som en vanlig gadget så det enda man behöver göra är att kopiera koden och lägga in den som en HTML/Javascript gadget. Jag tycker om det enkla och enklare än såhär blir det inte :)


I den ursprungliga koden så kommer du att hitta Facebook Share, Twitter Tweet, StumbleUpon, Google Buzz och Digg This knappar. Men som ni kan se så har jag bara facebook och twitter knapparna. Anledningen till detta är att den här bloggen är skriven på svenska och vi svenskar använder inte Google Buzz, Digg och StumbleUpon lika mycket som Facebook och Twitter så det är ett medvetet val att ta bort dessa 3.

Men jag vill ändå ge alla andra möjligheten att skaffa dessa knappar. Kanske att man har en blogg på engelska och då hade dessa 3 knappar kommit väl till pass. Men alla som bara vill ha Facebook och Twitter knappen kan vara lugna, jag kommer att presentera den rätta koden för detta också :)

Bilden som ni ser till höger är en exakt kopia av hur er social media knapp kommer att se ut när ni har lagt in den på er egen blogg.

Visst är den vacker ?

Nu ska jag sluta tala om oviktiga saker för nu ska vi get down to business istället!

Hur Man Lägger Till En Rörlig Social Media Knapp Till Blogger

1. Vi tar det från början, så logga in på ditt blogger konto.

2. Klicka dig fram till "Design" och sedan "Lägg Till En Gadget".

3. När "Lägg Till En Gadget" fönstret öppnas, välj och klicka på "HTML/Javascript".

4. Kopiera den här koden och klistra in i gadget fönstret:

<!-- floating page sharers Start tjana-pengar-pa-clickbank-och-adsense.blogspot.com-->
<style>
#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>
<div id='pageshare' title="">
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</div>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
</div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script>
<a class="DiggThisButton DiggMedium"></a>
</div>
<div class='sbutton' id='gb'>
<a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'>
<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script>
</a></div>
<div style="clear: both;font-size: 9px;text-align:center;"><a href=http://tjana-pengar-pa-clickbank-och-adsense.blogspot.com/2011/02/hur-man-lagger-till-en-rorlig-social.html>Få Knapp</a></div>
</div>
<!-- floating page sharers End -->


5. Klicka på "Spara" gadget.

6. Dra din nya gadget och lägg den längst ner till vänster på din sidebar och klicka på "Spara".

7. KLART ! :) Nu ska du ha en exakt likadan social media knapp som du ser i detta blogginlägg. Fungerar det inte som det ska så skriv en kommentar så hjälper jag dig. Men det ska fungera korrekt.


Använder du denna koden så kommer din knapp att synas på din vänster sida precis som min gör men vill du istället ha den på höger sidan så ska du göra såhär:

1. Använd samma kod som jag precis har givit dig.

2. Titta på rad 3, ändra margin-left till margin-right. Glöm inte heller att lägga dra din gadget till höger sidebar annars kommer den fortfarande att synas till vänster.

3. KLART !

Som ni kan se, så jag har bara Facebook och Twitter knappen tillgängliga. Vill du också skippa Google Buzz, Digg och StumbleUpon knapparna så ska du klistra in följande kod som en HTML/Javascript gadget och följa samma steg som jag precis beskrev lite längre upp:

<!-- floating page sharers Start tjana-pengar-pa-clickbank-och-adsense.blogspot.com-->
 <style> 
 #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;} 
 #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} 
 .fb_share_count_top {width:48px !important;} 
 .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} 
 .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;} 
 .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} 
 </style> 
 <div id='pageshare' title=""> 

 <div class='sbutton' id='fb'> 
 <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> 
 </div> 
 <div class='sbutton' id='rt'> 
 <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
<div style="clear: both;font-size: 9px;text-align:center;"><a href="http://tjana-pengar-pa-clickbank-och-adsense.blogspot.com/2011/02/hur-man-lagger-till-en-rorlig-social.html">Få Knapp</a></div>
</div>

</div> 
 <!-- floating page sharers End -->

Nu har du en väldigt effektiv Facebook och Twitter knapp som kommer att följa efter varenda besökare på din blogg och till slut så kommer dom att ge upp och dela med sig av din blogg så du får fler besökare! :)

Enkelt, smidigt och framförallt GRATIS!

Problem eller frågor? Va inte rädd för att skriva en kommentar! Jag ska göra mitt bästa för att hjälpa dig.

Maverick Money Makers - Lär dig av ett internet proffs (Mack Michaels) att tjäna pengar på internet. Money Maker Kursen är en av de mest kompletta kurser på nätet och Mack tar upp allt som du behöver veta för att börja tjäna pengar.

Inga kommentarer:

Skicka en kommentar