Hướng dẫn sử dụng HTML Text Widget của Wordpress

1. Using the WordPress HTML Text
Widget To Build Some Extra Things
Presented by:
Anh Thien (Alice Ng.)
Web Developer, WordPress Enthusiast
I  WordPress

2. 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

3. May 2014 3
1. HTML TEXT WIDGET
I  WordPress
NEXT

4. 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!

5. 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!

6. May 2014 6
1. HTML TEXT WIDGET
I  WordPress
NEXT

7. May 2014 7
1.2. HTML Text Widget – Some Applications
I  WordPress

8. May 2014 8
Live Action
I  WordPress
1. Login your WordPress Site
2. Go to your Admin’s Dashboard

9. May 2014 9
Admin Dashboard
3. Scroll to “Appearance”
4. Select “Widgets”

10. May 2014 10
5. Seek for “Text Widget”
6. Choose this Text Widget to your
side bar

11. May 2014 11
7. Write or Paste your
HTML codes here …

12. May 2014 12
2. Building some extra things
I  WordPress
NEXT

13. 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>

14. 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”)

15. 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

16. 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”>
&nbsp; 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 */

17. May 2014 17
Choose FREE & Beautiful Social Icons
I  WordPress
1. Go to “search”

18. May 2014 18
Choose FREE & Beautiful Social Icons
I  WordPress
2. Image Result

19. May 2014 19
Choose FREE & Beautiful Social Icons
I  WordPress
3. Pick a Free Icon & Grab its Link (Right Click)

20. May 2014 20
Choose FREE & Beautiful Social Icons
I  WordPress
4. Choose the Link & Paste it to your < img src = “…”

21. May 2014 21
Social Buttons – Live Demo
I  WordPress
NEXT
Let’s visit this WordPress Site:
http://applefantips.wordpress.com

22. May 2014 22
2. Building some extra things (cont’d)
I  WordPress
NEXT

23. 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

24. May 2014 24
1. Go to SoundCloud

25. May 2014 25
2. Search for a playlist

26. May 2014 26
3. Hit “Share”

27. May 2014 27
Pick the “Embed” Tab

28. May 2014 28
4. In the “Embed” tab,
scroll down & Expand
the Options
5. Pick the HTML Generated
Code for WordPress

29. May 2014 29
6. Paste it to your Text Widget

30. May 2014 30
All done!

31. May 2014 31
Music Playlist – Live Demo
I  WordPress
NEXT
Let’s visit this WordPress Site:
http://mywpblogdemo.wordpress.com

32. May 2014 32
2. Building some extra things (cont’d)
I  WordPress
NEXT

33. 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” */

34. 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! 

35. May 2014 35
1. Go to Flickr

36. May 2014 36
2. Search a Flickr photo to add to the Favorite Gallery

37. May 2014 37
3. Pick a Flickr photo to add to the Favorite Gallery
Remember to
“like”  - to
encourage its
photographer

38. May 2014 38
4. Go to the your Flickr Gallery

39. May 2014 39
5. Choose the “Light box” View

40. May 2014 40
6. Grab the Light Box Link below, to add to <a href=“ …”

41. May 2014 41
7. Choose a Cover Photo to display on WordPress
(For example, we select this “Red Leave”
to be our Cover Photo)

42. May 2014 42
8. Grab its Link (Right Click), to add to <img src=“ …”

43. May 2014 43
9. We will have the Full & Simple HTML codes (<a> nests <img>)

44. May 2014 44
The Result
When we click on
the Cover Photo,
it will direct us to
the “Image Slide
Show”

45. May 2014 45
“Image Slide Show”

46. May 2014 46
2. Building some extra things (cont’d)
I  WordPress
NEXT

47. 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

48. May 2014 48
1. Go to YouTube & find your favorite playlist

49. May 2014 49
2. Hit “Share”, then choose “Embed”
Share this
Embed this

50. 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

51. May 2014 51
Flickr, YouTube – Live Demo
I  WordPress
NEXT
Let’s visit this WordPress Site:
http://lukhachquan.wordpress.com

52. May 2014 52
3. Suggestion & Notes
I  WordPress
NEXT

53. May 2014 53
3. Suggestion & Notes
I  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.

54. May 2014 54
4. Conclusion
I  WordPress
NEXT

55. May 2014 55
4. Conclusion
I  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

56. May 2014 56
THANK YOU!
I  WordPress

57. May 2014 57
Appendix: About the presenter
I  WordPress
Anh Thien (Alice Ng.)
Web Developer, WordPress Enthusiast
Reach me at: thecoder2013@gmail.com
Another Project I’m working on:
HTML5 Music Playlist