MP
at
I had to do a lot of Google search before I figured this out and I thought why not share with others.
Here's how I got it done:
1. Go to your blog's dashboard
2. Add Blogger's standard SlideShow widget.
· Title (It will appear above the slide show)
· Source (Select the source for the pictures, I am using Picasa Web Album here),
· Option (Select Album)
· Username (This is your Picasa Web Album username. If you enter your gmail username, the albums might not show up. What I often do is log in to Picasa web album, select the Album I want to use to create slide show, then on the right side bar click on "Link to this Album" which will create a link something like this:
https://picasaweb.google.com/15285841623172748664/MyPics?authuser=0&feat=directlink
Then your username for the slideshow form is 15285841623172748664. Note that the album permission needs to be set to Public to World )
· Album (Select the Album name which you want to use in the Slideshow)
· Speed (Choose slide transition speed, I prefer to use Medium), Select other options as you wish and Click Save
You are done adding the slideshow, you can preview your page. Here is how you edit the size of the slideshow:
1. Switch over to Edit HTML in your Template and toggle "Expand Widget Templates."
2. Then search for: <div class='slideshow-container'
3. At the end of this line of code, before the >, add: style='width:300px; height:200px;'
4. Change the numbers to whatever size fits your interest
5. So after this change, the full code section for the widget is as follows:
<b:widget id='Slideshow1' locked='false' title='TITLE YOU ENTERED IN
THE WIDGET' type='Slideshow'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div class='slideshow-container' expr:id='data:widget.instanceId +
"_slideshow"' style='width:300px; height:200px;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<div class='slideshow-container' expr:id='data:widget.instanceId +
"_slideshow"' style='width:300px; height:200px;'>
<span class='slideshow-status'>Loading...</span>
</div>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:widget>
Smile and live Happy!
11 comments:
Hello, thank you for this post. I have been struggling for a while with increasing the size of the slideshow. My parameters now are;
style='width:700px; height:800px;' but this only changed the position of the slideshow in the page (helpful too:), but not the actual size of the pictures. Can you help, further, please! Thank you.
Obektido,
Thanks for visiting. I am not a pro here but I generally post the tricks that I used and worked for me :-) thinking it might save some of other's time.
The parameters you specified indeed changed the size of the slideshow but if the container where the slideshow is located (eg your side bar) is not big enough for this size, it will look like the slideshow has been moved. Try reducing the size to something small (like 75 or 100 px) and see if that resizes it. I tried your parameters in my template and same thing happened, it seemed to move.
If you need to change the size of your side bar, one of my posts might help you.
Hope this helps.
Thank you
We stumblеd оver here coming from a different page and thοught I mіght as well check thіngѕ
out. Ι like what I see so noω i am follοωing you. Loоκ forward tо looking oνeг your web page repeatedly.
website design
I have found this page and it was what I needed to know, after beating my head against the desk for days! Now I have increased my slideshow size and everyone is happy! Now to decide how big we want it!
www.travelwithgetawaytours.com
Thank you for helping out the rest of us with your research. Hope one day I can return the favor to someone too.
sara
First time blogger here. Setting up a blog for our 5th Grade classroom and parents. Been struggling with this. Woohoo!...it works! Thanks so much for posting.
very helpful, 10x
wow,its really helpful and easy thank you very much guys.
Does anyone know how to center this widget to the page. it seems that the automatic spacing for it is to the left on my blog
This was really helpfully and made my slideshow to the size I want it, although it left a large white space between the slideshow and my post recent post, anyone know how to get rid of that? Thanks
Best Machinery Parts
Post a Comment