Showing posts with label Embedded Objects. Show all posts
Showing posts with label Embedded Objects. Show all posts

Saturday, 2 July 2011

embedding a wix site into blogspot (or any other type of site)



Wix is great - of course! Embedding a wix file someplace else is even better! The photo gallery above was made with wix, using their photos. I just made a simple little page which is the post width of this site. However, you could get far more fancy and do some really great headers or side bar elements using wix and the custom HTML/Javascript widget here on blogspot.

Unless you have a premium wix site, you will of course have the wix preloader and their little logo on the side, however personally I find these completely appropriate and inoffensive for something which is after all free!

The embed code is given to you as you are publishing the site, shown in the image below:


And below is how the code will look. If you do not want all the social networking stuff which is located at the bottom of a regular wix site, simply remove the black highlighted bits:

<object width="513" height="310" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10.0.0"><param name="allowFullScreen" value="true"/><param name="allowNetworking" value="all"/> <param name="allowScriptAccess" value="always"/><param name="base" value="http://static.wix.com"/><param name="movie" value="http://static.wix.com/client/app.swf" /><param name="quality" value="high" /><param name="FlashVars" value="pageId=xBcJA71T1Y8-a&embedFormat=websites&embedID=0b5fc474-1689-4d89-9a28-f51fb88064e7&partner_id=WMGs4POB1ko-a" /><param name="scale" value="noScale" /><param name="salign" value="tl" /><embed src="http://static.wix.com/client/app.swf" quality="high" allowNetworking="all" allowScriptAccess="always"  allowFullScreen="true" FlashVars="pageId=xBcJA71T1Y8-a&embedFormat=websites&embedID=0b5fc474-1689-4d89-9a28-f51fb88064e7&partner_id=WMGs4POB1ko-a" style="border: Xpx solid #yourhexcode;" type="application/x-shockwave-flash" width="513" height="310" base="http://static.wix.com" scale="noscale" salign="tl" ></embed></object><br/><a href="http://www.wix.com"><b>Free website</b></a> - <a href="http://www.wix.com/create/website" ><b>Powered By Wix.com</b></a>

(Note: The border code from the previous post will work just as well with an object embedded from wix. In this case you place it before type="application/etc inside the embed tag like I am showing you above with the bit which is highlighted in red. For the wix file, which I embedded above, I used a 1 pixel border in a medium gray (#888888).

One thing to bear in mind is that if you want a border do not forget to size your output in wix accordingly before you import it to your blog/site. As an example, the post width on this site is 515 pixels, however I published the wix file at 513 pixels in order to accommodate the 1 pixel border around it).

http://www.wix.com/

.................................................................................................................................

Saturday, 4 June 2011

how to add a border around objects embedded into blog posts (such as a google map or a youtube / vimeo video)

If the images on your blog have borders you may wish to have them around other visual material as well, so as to achieve design consistency. Google maps are one such bothersome element, I think. In order to place a border around a google map, look for the embedded code in your post and add what is highlighted in black:

<iframe style="border:Xpx solid #yourhexcode" frameborder="0" width="X" height="X" marginheight="0" marginwidth="0" scrolling="no" src="yourmapurl" width="X"></iframe>



And just tried the same snippet, placed in exactly the same location on a youtube video. Yayy! Same exact result!

<iframe style="border:8px solid #111111" width="500" height="410" src="hhttp://www.youtube.com/embed/rHZUPJji6w8" frameborder="0" allowfullscreen></iframe>



And vimeo too! With this one, although the aspect ratio is the same (3 x 4) as the youtube video, I had to tweak the overall box size a bit since the player configuration seems to be slightly different. But no biggie, done in a second!

<iframe style="border:8px solid #111111" src="http://player.vimeo.com/video/3699840?title=0&amp;byline=0&amp;portrait=0" width="500" height="380" frameborder="0"></iframe>

(Note: One thing to bear in mind is that if you want a border do not forget to size the embedded output accordingly. As an example, the post width on this site is 515 pixels, however I set the video files at 500 pixels in order to accommodate the 8 pixel border around them).

.................................................................................................................................
Girls Generation - Korean