Saturday, May 18, 2013

Flashy Fiction widget


In trying to increase the traffic to the Flashy Fiction website, we've developed the graphic above for friends and fans of the site to post on their websites, blogs, etc.  Below we have provided instructions for how to put this image on your site as a link back to the Flashy Fiction site.  The image is 150 pixels by 150 pixels and has a white background with no border.

A preview of the linked image on a WordPress blog can be seen here: http://pubwrite.wordpress.com/.

On WordPress:
Method One:  Text widget
  1.  Add the "Text" widget to a sidebar
  2.  Copy the HTML code below and paste it into the widget's text box.
       <span style='display:block!important;width:150px;height:150px;text-align:center;font-family:sans-serif;font-size:12px;border:1px solid #000000;'>

       <a href="http://flashyfiction.blogspot.com/">

       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png" title="Flashy Fiction ...daily writing prompts">

       </a>
       </span>

Method Two:  Image widget
  1.  Add an "Image" widget to a sidebar
  2.  Copy and paste this URL into the Image URL field:
       https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png
  3.  Copy and paste this URL into the Link URL field:
       http://flashyfiction.blogspot.com/

On Blogger:
Method One:  HTML/Javascript gadget
  1.  Add the "Text" widget to a sidebar
  2.  Copy the HTML code below and paste it into the widget's text box
       <div style='display:block!important;width:200px;height:150px;text-align:center;font-size:10px;margin-bottom:30px;'>
       <a href="http://flashyfiction.blogspot.com/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png" title="Flashy Fiction ...daily writing prompts" style="border:1px solid #000000;" />
       </a><br />
Add this widget to your site to share your love for Flashy Fiction.
       </div>

Method Two:  Image gadget
  1.  Add the "Image" gadget where you want it
  2.  Copy and paste this URL into the Image URL field:
       https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png
  3.  Copy and paste this URL into the Link URL field:
       http://flashyfiction.blogspot.com/
  4.  Save the gadget

On a Website:
Method One:  Code/HTML view
  --In the code, add the following code snippet where you want the linked image to appear:
       <a href="http://flashyfiction.blogspot.com/">
       <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png" title="Flashy Fiction ...daily writing prompts">
       </a>

Method Two:  Design/GUI view
  1.  'Insert an image/picture' where you want the linked image to be
  2.  Use the URL below as the source/location of the image:
       https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-l1t-2O35ayE_YqJzD3wqbKp7i-fyUcCJ0REAH26h8anhkP6N-638Duwc3s2yBXwMsW8XhNpb9jDsky7HG4iBjeYpbXZVtl-FcwMwR8RFMGqVJBP03LsQ613OqEWdIsNTKvSRR7V4jtQ/s1600/FlashyFiction.png"
  3.  Enter 'alt/alternate text' and 'title/hover' text as you see fit.  We recommend: Flashy Fiction ...daily writing prompts"
  4.  Select the new image and add/edit a hyperlink to the following URL:
       http://flashyfiction.blogspot.com/
   **These are general guidelines for design/GUI implementation.  Your specific web development software may use different words/fields/methods for accomplishing this task.

1 comment:

  1. Nice work, Rob. Now that I see it, your original position for it would be perfect. If you wish to move it, I think it would enhance out page!

    ReplyDelete