next
Helplogger
Home
Blog DesignWidgets SEO Menus Po ...
How to embed a youtube playlist on your blogger blog
3 comments
In this tutorial you will see how to create a YouTube video gallery using jQuery and add the Youtube playlist to your Blogger blog. Inside this gallery/playlist, you can add your favorite youtube videos or any video that you want to share with your visitors. Because of its default dimensions (width of 765px), it is recommended to add it just below the blog header, however, you can edit CSS code to fit anywhere you want to add it.
Demo here
To add this video slider/youtube playlist to your blog, please follow these steps below:
Step 1.From your blogger dashboard, go toTemplate>Edit HTMLand click anywhere inside the code area to open the Blogger search box by pressing the CTRL + F keys.
Step 2.Type or paste thetag inside the search box and hit Enter to find it.
Just above this tag, add the following scripts:
Step 3.Now let's add the CSS code. Just above the sametag, add this code:
Step 4.Click on theSave Templatebutton
To make this youtube playlist work we need to add the HTML structure of it:
Step 5.Go toLayoutor Pages or anywhere you want to add it and add the following code inside the HTML area (if you want to add it as a widget, paste the code inside a HTML/Javascript gadget by clicking onAdd a gadgetlink within the Layout/Page Elements section):
Add the IDs of your videos to where it says video_ID_..., titles (Video Name) and a brief description (Description).
To get the ID of a video, open the video on YouTube and look at the address bar - you need only the last characters after "v="
Note that each video ID should be added two times, the ones in red are for the video and the ones in orange are for the tabs thumbnail.
To add more videos, add two lines like the ones in bold above and then change thevideo[]and#vid...number. If you decided to add it inside a post or page, please make sure that you don't switch back to theComposetab and publish your post while you're still on theHTMLtab, otherwise the#vidlocation will be replaced with some other odd Blogger URLs.
Like
2
Random Posts
How To Remove Blogger Attribution Gadget22/03/2012 - 130 Comments
Recent Comments Widget For Blogger11/03/2012 - 209 Comments
How to Write SEO Optimized Blog Posts09/11/2013 - 4 Comments
Related Posts:
How to Add Numbered Page Navigation...
Share blog posts in social medias u...
Add floating social media sharing b...
Add A CSS Animated Share Button on ...
Orbit - jQuery Image Slider Plugin ...
3 comments:
Anonymous 11/06/2013
Thanks for this... but there's no content scroller and that's the problem Reply
dejavu80 1/22/2014
Hi bro! You have to change all those codes "$" to "jQuery". I mean, you have to rename all "$" as "jQuery". Reply
Anonymous 4/11/2014
Hello, I thank you for the beginning ..
I have a problem which is how high column tabs
I have tried to change it from here, but failed
#videoslider, #videoslider-content, #videoslider-tabs {
height:340px; }
What is the solution Please help me, Where I want to make the Height 250px. Reply
Add comment
Comment as: Sign out
Notify mePublishPreview
Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED
Search
Search
Follow on Facebook
Helplogger
Like
2,786 people like Helplogger .
Facebook social plugin
Follow on Blogger
Subscribe via Email
Receive Quality Tutorials Straight in your
Inbox by submitting your Email below.
Submit
Or subscribe via RSS Feed
Recent Posts
How to Add Numbered Page Navigation Widget for Blogger
5 Easy Ways to Improve the SEO of a blog & Boost Traffic
What is the difference between padding and margins?
Add a Custom jQuery Lightbox To Blogger
How to Use Cookies in Javascript
Recent Comments
irsah imihar
Customizing will always be easy with jquery and javascript. Even...
Missy G
Yay! Thank you for making this so easy! This is just what I...
divakar sivashankar
admin i have a problem even if i add the tag the ad is showing up...
Anonymous
I don't understand the instructions you have given :(
Nanette Benablo
your site is very helpful and easy to follow tutorials. thank you...
Popular Posts
Simple Recent Posts Widget for Blogger/Blogspot
Create A Rollover Image Effect (change image on mouseover)
Recent Comments Widget For Blogger
How to remove Blogger Picture/Image Shadow and Border
Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger next
No comments:
Post a Comment