Loop Picasa slideshow

Etiketter: , ,
Picasa web album

2013-09-28
All right, just noticed that google did something that makes this solution NOT working properly so. Huh, I give up, don't use google any more, use something else as http://www.photosnack.com

Good luck!


<-- OLD SOLUTION -->

Go to your web-picasa album and start the slideshow. Now copy the web address and put it on your blog post or page in a <iframe>
Youre done :)

<div style="position:relative;
 top:-20px;
overflow-y:hidden;overflow-x:hidden;height:440px;width:580px">
<div style="position:relative;
 top:-50px;
 left:-40px;
overflow-y:hidden;overflow-x:hidden;height:100%;width:100%">
<iframe name="g26" style="border:0px double " width=650 height=510 src="https://picasaweb.google.com/108048850740176980730/Sample?noredirect=1#slideshow/"></iframe>
</div>
</div>



Here is was example with scroll bar and that iritating black frame removed (adjust size):



FormEmailer

Etiketter:
How to send the google spreadsheets value change to email?

https://sites.google.com/site/formemailer/getstarted


Note: If you're upgrading from a previous version, take a look at the "Upgrading steps" below.
  1. Open your Spreadsheet/Form. (It should already have at least the basic structure of your data, i.e. the 1st row filled with the data headers. In case of a Form it's done automatically when you create the form).
  2. Click menu Insert > Script.
  3. A internal popup window should open, click the search box and type: formemailer
  4. A list with some scripts should appear, locate the "FormEmailer" script, developed by hgabreu and click its install button. (nowadays this search returns two scripts and FormEmailer is the 2nd one)
  5. A authorization popup shows up and you need to click Authorize to proceed.
  6. A browser popup window shows up, it should close itself automatically. And back to the main window, you can close the Script Gallery internal popup window by clicking Ok.




New install instructions:
You need to set up the trigger so the script can run automatically. Steps:
- Click the menu "Tools" > "Script editor..."
- In the editor's window
-- Make sure the Form sheet script is opened and selected (it normally is)
-- Click the menu "Triggers" > "Current script's triggers..."
--- Click the only link and set up a new trigger as follows:
timeDriven - Time-driven - Minutes timer - Every minute
--- Click save
-- You may close the editor
The status indication in this sheet (cell B2) may take some minutes to update.

How To Add A Gadget/Widget Inside Your Blogger Blog Header

Etiketter:
Maybe you have seen that many blogs have AdSense Units or other ads and widgets in the header section of the blog, the most popular format being the AdSense 468x60 ad unit - see in the screenshot below:

But how we can add something inside blogger header - be it a Adsense unit, a search bar, social media buttons or a widget? By simply adding a section in the header. First off, to give space for the extra gadget to fit in, our blogger header should be resized.

A. Resize blogger header

Step 1: Go to Blogger Dashboard >> Design >> Edit HTML and backup your template

Step 2: Check the "Expand widget templates" box

Step 3: Find (CTRL + F) this piece of code:

/* Header
----------------------------------------------- */

 Step 4: Replace it with this code:

/* Header
----------------------------------------------- */
.header-left{
display: inline-block;
height: 35px;
width: 350px;
float: left;
}
.header-right {
display:inline-block;
float:right;
}

Change the pixels in red with the image's height and width of your blogger header and change float: left; tofloat: right; if you want to change the position of your logo.

Step 5: Find the below code:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Step 6: Replace it with:

<b:section class='header header-left' id='header' maxwidgets='1' showaddelement='no'>

Now "Preview" your template, you will find that the background color of Blogger's header is not visible or it's missing. To bring it back, you need to add some more snippets:

Step 7. Find the following code:

    </div>
    </div>
    <div class='header-cap-bottom cap-bottom'>
      <div class='cap-left'/>

Step 8. Just above it, paste this:

<div style='clear:both;'/>

Note: if you can't find the code from step 7, search for this instead:

      <b:include name='description'/>
    </div>
  </b:if>
</b:includable>
</b:widget>
</b:section>
... and paste the code from step 8 just below it.

Step 9. Save Template.

B. Add extra gadget/widget section to Blogger Header

Let's go one step forward and add an extra gadget section within Blogger header in new template designers. 

Step 1: Go to Dashboard >> Design >> Edit HTML and backup your template.
Step 2: Find for the below code which you have implemented in previous step:

<div style='clear:both;'/>

Step 3. Paste before/above it, the following code:

<b:section class='header-right crosscol' id='header-right' maxwidgets='1' showaddelement='yes'/>

Step 4. Now find:

]]></b:skin>

Step 5. Paste just above it, this CSS code:


.header-right {
display:inline-block;
float:right;
width:400px;
}

Change the width that is marked in red color. Increase or decrease the pixels according to your needs and positioning new header section.

Step 6. Save Template.

Now all you have to do is to go to Design >> Page Elements tab and add a new gadget to the newly created extra header section in Blogger. You may find that the extra gadget section is created just under your Blogger header as shown in the image below.


Don't worry about its position, the widget now should appear side by side.

If you have any questions or need some help, leave a comment below
Prenumerera på: Inlägg ( Atom )