Download - Wordpress Html_Text_Widget - PDF document
![Page 1: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/1.jpg)
Using the WordPress HTML Text
Widget To Build Some Extra Things
Presented by:
Anh ThienWeb Developer, WordPress Enthusiast
I ���� WordPress
![Page 2: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/2.jpg)
May 2014 2
Agenda
I ���� WordPress
1. HTML Text Widget – What is it?
1.1. Definition
1.2. Its Applications
2. Building some extra things
2.2. Adding your favorites: Music Playlist, Flickr, YouTube
2.1. Building your own Social Buttons
4. Conclusion
3. Suggestion & Notes
![Page 3: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/3.jpg)
May 2014 3
1. HTML TEXT WIDGET
I ���� WordPress
NEXT
![Page 4: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/4.jpg)
May 2014 4
1.1. HTML Text Widget – What is it?
I ���� WordPress
HTML Text Widget
����HTML = Hyperlink Text Markup Language, is used for creating
Website or Web Application.
���� It has its own syntax (code) to instruct the Web Browser to “draw”
Web Interface, or to implement some commands.
���� HTML is the Fundamental for any Web Technology (Both ASP,
ASP.NET, PHP, JSP : “understand” HTML codes)
���� HTML codes are easy to learn and work!
![Page 5: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/5.jpg)
May 2014 5
1.1. HTML Text Widget – What is it?
I ���� WordPress
HTML Text Widget
�WordPress offers users this Text Widget for making their own
extra things (e.g.: Social Link Buttons, Favorite Music Playlist,
YouTube, Flickr, :)
�Just write simple HTML codes, then enjoy!
![Page 6: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/6.jpg)
May 2014 6
1. HTML TEXT WIDGET
I ���� WordPress
NEXT
![Page 7: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/7.jpg)
May 2014 7
1.2. HTML Text Widget – Some Applications
I ���� WordPress
![Page 8: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/8.jpg)
May 2014 8
Live Action
I ���� WordPress
1. Login your WordPress Site
2. Go to your Admin’s Dashboard
![Page 9: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/9.jpg)
May 2014 9
Admin Dashboard
3. Scroll to “Appearance”
4. Select “Widgets”
![Page 10: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/10.jpg)
May 2014 10
5. Seek for “Text Widget”
6. Choose this Text Widget to your
side bar
![Page 11: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/11.jpg)
May 2014 11
7. Write or Paste your
HTML codes here :
![Page 12: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/12.jpg)
May 2014 12
2. Building some extra things
I ���� WordPress
NEXT
![Page 13: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/13.jpg)
May 2014 13
2.1. Building your own Social Buttons
I ���� WordPress
We can create this easily with
ONLY 2 LINES of HTML code
(for each Social Button)
� To hold our Social Link � using HTML tag <a>
� To show visitors Social Icon to click on � using HTML
tag <img>
![Page 14: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/14.jpg)
May 2014 14
2.1. Building your own Social Buttons (cont’d)
I ���� WordPress
� Our “recipe”:
� For the tag <a>
<a href=“your_web_address”
target=“_Blank” title=“your_title” >
Put some text or image
here :
</a>
a: HTML tag to “anchor” our Link
href: syntax for the Web Browser
know where our Link refers
target=“_Blank”: open New
Window for a Web page
title: to show visitors “prompt” when
they hover their mouse on our Social
Button (eg.: “We are on Facebook”)
![Page 15: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/15.jpg)
May 2014 15
2.1. Building your own Social Buttons (cont’d)
I ���� WordPress
� Our “recipe” (cont’d):
� For the tag <img>
< img src=“your_image_link”
width=“80px” alt=“your_image_here” >
width: the “breadth” attribute, in “pixel”
alt: Text represents when the image is
lost or cannot be loaded
src: to show the Path of stored
image on Web Server
img: HTML tag to show our image
![Page 16: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/16.jpg)
May 2014 16
2.1. Building your own Social Buttons (cont’d)
I ���� WordPress
� Live codes:
� For Facebook:
<a href=“http://www.facebook.com/your_page”
target=“_Blank” title=“I’m on Facebook” >
We will have the tag <a> (�)
nests the tag <img> (�)
�
</a>
<img src=“fb_icon_link” width=“80px” alt=“fb_icon_here”>�
To draw a “space” between
each Social Button
/* Do the same for other Social Buttons (Twitter, Google Plus, etc.) */
/* There are many FREE Social Icons on the Internet to “grab” Link & enjoy */
![Page 17: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/17.jpg)
May 2014 17
Choose FREE & Beautiful Social Icons
I ���� WordPress
1. Go to “search”
![Page 18: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/18.jpg)
May 2014 18
Choose FREE & Beautiful Social Icons
I ���� WordPress
2. Image Result
![Page 19: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/19.jpg)
May 2014 19
Choose FREE & Beautiful Social Icons
I ���� WordPress
3. Pick a Free Icon & Grab its Link (Right Click)
![Page 20: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/20.jpg)
May 2014 20
Choose FREE & Beautiful Social Icons
I ���� WordPress
4. Choose the Link & Paste it to your < img src = “:”
![Page 21: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/21.jpg)
May 2014 21
Social Buttons – Live Demo
I ���� WordPress
NEXT
Let’s visit this WordPress Site:
http://applefantips.wordpress.com
![Page 22: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/22.jpg)
May 2014 22
2. Building some extra things (cont’d)
I ���� WordPress
NEXT
![Page 23: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/23.jpg)
May 2014 23
2.2. Adding your favorites - Music Playlist
I ���� WordPress
WordPress has been
Partner with
To offer users the
Music feature for FREE
(with limit)
(*) The SoundCloud FREE offer is limited to
2 hours of Total Song Duration
All things we need are just Sign In (or Sign up)
SoundCloud � Create or Select the Set of
Songs we like, then SoundCloud will give us the
HTML Generated Code to embed into our
WordPress
![Page 24: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/24.jpg)
May 2014 24
1. Go to SoundCloud
![Page 25: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/25.jpg)
May 2014 25
2. Search for a playlist
![Page 26: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/26.jpg)
May 2014 26
3. Hit “Share”
![Page 27: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/27.jpg)
May 2014 27
Pick the “Embed” Tab
![Page 28: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/28.jpg)
May 2014 28
4. In the “Embed” tab,
scroll down & Expand
the Options
5. Pick the HTML Generated
Code for WordPress
![Page 29: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/29.jpg)
May 2014 29
6. Paste it to your Text Widget
![Page 30: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/30.jpg)
May 2014 30
All done!
![Page 31: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/31.jpg)
May 2014 31
Music Playlist – Live Demo
I ���� WordPress
NEXT
Let’s visit this WordPress Site:
http://mywpblogdemo.wordpress.com
![Page 32: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/32.jpg)
May 2014 32
2. Building some extra things (cont’d)
I ���� WordPress
NEXT
![Page 33: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/33.jpg)
May 2014 33
2.2. Adding your favorites - Flickr
I ���� WordPress
Flickr is the Large & FREE
online sharing Photo service
of Yahoo!
We can “embed” our favorite Flickr
Gallery by the 2 HTML codes
� To hold our favorite Gallery Link � using HTML tag <a>
� To show visitors the Cover Photo to click on � using HTML
tag <img>
/* Do the same as the above section (2.1) “Building your own Social
Buttons” */
![Page 34: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/34.jpg)
May 2014 34
2.2. Adding your favorites - Flickr
I ���� WordPress
� Live codes:
<a href=“Flickr_Gallery_Link” target=“_Blank”>�
</a>
<img src=“Cover_Photo_link” width=“200px”>�
Next, we will have some “snapshots” to show how to “catch” the 2
links above easily.
Let’s begin! �
![Page 35: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/35.jpg)
May 2014 35
1. Go to Flickr
![Page 36: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/36.jpg)
May 2014 36
2. Search a Flickr photo to add to the Favorite Gallery
![Page 37: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/37.jpg)
May 2014 37
3. Pick a Flickr photo to add to the Favorite Gallery
Remember to
“like” � - to
encourage its
photographer
![Page 38: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/38.jpg)
May 2014 38
4. Go to your Flickr Gallery
![Page 39: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/39.jpg)
May 2014 39
5. Choose the “Light box” View
![Page 40: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/40.jpg)
May 2014 40
6. Grab the Light Box Link below, to add to <a href=“ :”
![Page 41: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/41.jpg)
May 2014 41
7. Choose a Cover Photo to display on WordPress
(For example, we select this “Red Leaf” to
be our Cover Photo)
![Page 42: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/42.jpg)
May 2014 42
8. Grab its Link (Right Click), to add to <img src=“ :”
![Page 43: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/43.jpg)
May 2014 43
9. We will have the Full & Simple HTML codes (<a> nests <img>)
![Page 44: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/44.jpg)
May 2014 44
The Result
When we click on
the Cover Photo,
it will direct us to
the “Image Slide
Show”
![Page 45: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/45.jpg)
May 2014 45
“Image Slide Show”
![Page 46: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/46.jpg)
May 2014 46
2. Building some extra things (cont’d)
I ���� WordPress
NEXT
![Page 47: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/47.jpg)
May 2014 47
2.2. Adding your favorites - YouTube
I ���� WordPress
WordPress allowed users
to add YouTube Video or
YouTube Playlist to any
WordPress Site.
Just “Pick” a YouTube Video or YouTube
Playlist you love, then paste their
generated codes to WordPress
(*) WordPress may also correct that code,
but it still displays properly the embedded
YouTube Videos.
LIVE ACTION
![Page 48: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/48.jpg)
May 2014 48
1. Go to YouTube & find your favorite playlist
![Page 49: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/49.jpg)
May 2014 49
2. Hit “Share”, then choose “Embed”
Share this
Embed this
![Page 50: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/50.jpg)
May 2014 50
Paste that generated code to
your HTML Text Widget.
See what’s different?
(*) WordPress has corrected it,
but it’s still OK
![Page 51: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/51.jpg)
May 2014 51
Flickr, YouTube – Live Demo
I ���� WordPress
NEXT
Let’s visit this WordPress Site:
http://lukhachquan.wordpress.com
![Page 52: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/52.jpg)
May 2014 52
3. Suggestion & Notes
I ���� WordPress
NEXT
![Page 53: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/53.jpg)
May 2014 53
3. Suggestion & NotesI ���� WordPress
� Wordpress HTML Text Widget for FREE Site only accepts
HTML tags (Free Wordpress sites are recognized as:
sitename.wordpress.com)
� If you want to do more with JavaScripts (e.g.: to run
AdsWord in Wordpress HTML Text Widget), you need a Self
– Hosted Wordpress Site (that’s recognized as yoursite.com,
etc.)
� YouTube, SoundCloud : are allowed to embed into
WordPress sites, while the others are not. So, the 2 HTML
Codes which <a> nests <img> will help you build your own
things with HTML Text Widget.
![Page 54: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/54.jpg)
May 2014 54
4. Conclusion
I ���� WordPress
NEXT
![Page 55: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/55.jpg)
May 2014 55
4. ConclusionI ���� WordPress
� All Demos above just show us that, with WordPress HTML
Text Widget, we can do by ourselves many things we want.
� Visit my site to discover more:
http://anhnguyen88.wordpress.com
![Page 56: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/56.jpg)
THANK YOU!
May 201456
I ���� WordPress
![Page 57: Wordpress Html_Text_Widget - PDF document](https://reader036.vdocuments.us/reader036/viewer/2022070323/559a67c91a28abdb348b467b/html5/thumbnails/57.jpg)
Q&A
May 201457
I ���� WordPress
Having question(s)?
Reach me at:
Or: