PDA

View Full Version : How to post and link a blinkie in Blogger or any HTML



GingerScraps
10-13-2008, 11:43 PM
<span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" >I was recently asked by one of the ladies in a Cafe Mom group a question on posting blinkies. I thought I would write a quick tutorial on the subject... hope it helps someone out there!!
T</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" ><span style="">hese are the codes for MY </span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhiddenspellword" ><span style="">blinkie</span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" ><span style="">,</span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" ><span style=""> saved on my PC….

This one is linked to my GingerScraps site- store- forum etc...
<a href="http://www.gingerscraps.net/" target="_blank"><img alt="Photobucket" src="http://i106.photobucket.com/albums/m255/gingerlooper/Fan.gif" border="0" /></a>

This info is the codes for this blinkie. Linked to GingerScraps.net </span></span><span style="font-size:85%;"><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://www.gingerscraps.net/"><img style="cursor: pointer; width: 143px; height: 56px;" src="http://i106.photobucket.com/albums/m255/gingerlooper/Fan.gif" alt="" border="0" /></a></span> <p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span style="font-size:85%;"><a href="http://www.gingerscraps.net/"><span style=""><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);">http://</span></span><span class="mceitemhiddenspellword">gingerscraps</span><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);">.</span></span><span class="mceitemhiddenspellword">net</span><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);"></span></span></span></a></span></p> <p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span style="font-size:85%;"><a href="http://i106.photobucket.com/albums/m255/gingerlooper/Fan.gif"><span style=""><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);">http://i106.</span></span><span class="mceitemhiddenspellword">photobucket</span><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);">.com/albums/m255/gingerlooper/Fan</span></span><span class="mceitemhidden"><span style="text-decoration: none; color: rgb(0, 0, 0);">.</span></span><span class="mceitemhiddenspellword">gif</span></span></a></span></p><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" ><span style="text-decoration: underline;">Here is what the completed code will look like. You can use this code as an out line for any blinkie.... you can also grab this code as is and put it on you blog or in a sigi just because you love me hehehe :)

</span>&lt;a href="http://www.gingerscraps.net/" target="_blank"&gt;&lt;img border="0" alt="Photobucket" src="http://i106.photobucket.com/albums/m255/gingerlooper/Fan.gif"/&gt;&lt;/a&gt;</span><p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span style="font-size:85%;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600" spt="75" preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f"> <v:stroke joinstyle="miter"> <v:formulas> <v:f eqn="if lineDrawn pixelLineWidth 0"> <v:f eqn="sum @0 1 0"> <v:f eqn="sum 0 0 @1"> <v:f eqn="prod @2 1 2"> <v:f eqn="prod @3 21600 pixelWidth"> <v:f eqn="prod @3 21600 pixelHeight"> <v:f eqn="sum @0 0 1"> <v:f eqn="prod @6 1 2"> <v:f eqn="prod @7 21600 pixelWidth"> <v:f eqn="sum @8 21600 0"> <v:f eqn="prod @7 21600 pixelHeight"> <v:f eqn="sum @10 21600 0"> </v:formulas> <v:path extrusionok="f" gradientshapeok="t" connecttype="rect"> <o:lock ext="edit" aspectratio="t"> </v:shapetype><v:shape id="_x0000_i1025" type="#_x0000_t75" alt="" style="'width:112.5pt;"> <v:imagedata src="file:///C:/DOCUME~1/Ginger/LOCALS~1/Temp/msoclip1/01/clip_image001.jpg" href="http://images2.cafemom.com/images/user/gallery/post_828772_1214418197_med.jpg?imageId=7671585"> </v:shape><![endif]--><!--[if !vml]-->
</span></p><p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span style="font-size:85%;">To make it easy, and to save the info.. copy and past this code outline to a note pad or word document and save it on your computer. Then you will know where it is, and you can easily change it by copying and pasting codes for any blinkie.
</span></p><p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span style="font-size:85%;">Here are two ways-</span></p> <p style="color: rgb(51, 51, 51);font-family:arial;" class="MsoNormal"><span class="mceitemhidden" style="font-size:85%;"><span style="">You can right click on any blinkie and save the image, upload it to </span></span><span class="mceitemhiddenspellword" style="font-size:85%;"><span style="">photobucket</span></span><span class="mceitemhidden" style="font-size:85%;"><span style=""> (or whichever one you choose) and then copy the HTML code. Then change the first "http://…photobucket…" to your blog address to make the </span></span><span class="mceitemhiddenspellword" style="font-size:85%;"><span style="">blinkie</span></span><span class="mceitemhidden" style="font-size:85%;"><span style=""> link to your blog.</span></span><span style="font-size:85%;"> <span class="mceitemhidden">The second "http://…" is the actual </span><span class="mceitemhiddenspellword">photobucket</span><span class="mceitemhidden"> image code. </span></span></p> <p style="color: rgb(51, 51, 51);font-family:arial;"><span class="mceitemhidden" style="font-size:85%;"><span style="">One other way is to right click on any </span></span><span class="mceitemhiddenspellword" style="font-size:85%;"><span style="">blinkie</span></span><span class="mceitemhidden" style="font-size:85%;"><span style="">, and at the bottom of the pop out menu you will see properties. Click properties. A box will open with “Address” and “Image Location”. If Blog Address is empty or you can tell that it is not the proper address then go up in you address bar and copy and paste the address from it (assuming you are at the address you want the blinkie to link to.)
</span></span></p><p style="color: rgb(51, 51, 51);font-family:arial;"><span class="mceitemhidden" style="font-size:85%;"><span style="">You can take this code (which is for my </span></span><span class="mceitemhiddenspellword" style="font-size:85%;"><span style="">blinkie</span></span><span class="mceitemhidden" style="font-size:85%;"><span style="">) and change the blog address (first http://) and the image location (second http://) to your own. </span></span></p> <p style="color: rgb(51, 51, 51);font-family:arial;"><span style="font-size:85%;">Again, this is what it will look like with my info codes for GingerScraps.</span></p><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >&lt;a href="http://www.gingerscraps.net/" target="_blank"&gt;&lt;img border="0" alt="Photobucket" src="http://i106.photobucket.com/albums/m255/gingerlooper/Fan.gif"/&gt;&lt;/a&gt;
</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" ><a href="http://gingerscraps.blogspot.com/" target="_blank"></a></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >
</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >
To post them on your blog, in blogger (which is what I use) You need to go to edit your Layout. Select to add page element. Then from the menu of options select</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" ><span style=""> "HTML/JavaScript Add third-party functionality or other code to your blog." Then copy and paste any codes for </span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhiddenspellword" ><span style="">blinkies</span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" class="mceitemhidden" ><span style=""> there. I have my long list of codes each separated by a few spaces so if I ever need to change any of them I know where one starts and another begins...
</span></span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >You can also use this code for putting your blinkie in your signature in galleries and fourms.</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >
</span><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" > (depending on the rules of the site you may or may not be allowed to link the to another site).
So go have some fun adding blinkies to your blog and or in your sigi's. </span><!--WISESTAMP_SIG_START--><div dir="ltr"><div>Happy Scrapping!
<a href="http://www.gingerscraps.net/"><img style="width: 241px; height: 133px;" src="http://i106.photobucket.com/albums/m255/gingerlooper/GS-sigi-web-2.png" /></a>
</div><div dir="ltr" style="padding: 5px 0pt;font-family:arial,sans-serif;font-size:13.3px;"><span style="color:gray;">Contact Me</span> <a href="http://www.facebook.com/home.php#/pages/GingerScraps/240882785639" target="_service" style="padding: 0pt 2px;"><img src="http://www.images.wisestamp.com/facebook.png" alt="Facebook" style="vertical-align: middle; padding-bottom: 5px;" width="16" border="0" height="16" /></a> <a href="http://blog.gingerscraps.net/" target="_service" style="padding: 0pt 2px;"><img src="http://www.images.wisestamp.com/wordpress.png" alt="Wordpress" style="vertical-align: middle; padding-bottom: 5px;" width="16" border="0" height="16" /></a> <a href="http://twitter.com/GingerScraps" target="_service" style="padding: 0pt 2px;"><img src="http://www.images.wisestamp.com/twitter.png" alt="Twitter" style="vertical-align: middle; padding-bottom: 5px;" width="16" border="0" height="16" /></a> </div></div><!--WISESTAMP_SIG_END--><span style="color: rgb(51, 51, 51);font-family:arial;font-size:85%;" >

</span>

knittinjen
07-15-2009, 02:08 PM
Yes, this was totally helpful! I have been wondering and wondering how to link the blinkies to the blog sites of all my fabulous people! Of which you are now one. I have seriously been dying to know this, and one person explained it, but I was too dense then to understand...probably just didn't know enough at the time to understand. But now I do! Going to edit the blinkies on my blog, thanks SOOOO much!:rocker1:

Digi-Scrap
08-15-2009, 02:42 AM
Awesome: it is easy to add to a signature however, I've been wondering how I get these on my blogs.

I' creating a background to my blog, do you know what size I should make it & the banner & how & where to apply it?

Thanks!! I'll take up your advice on this.