I've always been intrigued by websites or blogs that has sharing widgets (the buttons that appear over pictures when you hover your mouse). So I decided to add them to my blog as well. But more importantly, these widgets can help me drive traffic (hope so...). So I went on a research and found Markerly! Yey!
I'll show here how to add it to your blog. It's very simple! Later I'll post another topic about how to exclude your banner from the sharing widgets.
A. Go to this link:: Markerly Standard Widgets
B. Customize your widget::
✿ Choose the type of services that you want to appear on your widget. I chose Facebook, Twitter, Pinterest, Google+, and Email::
✿ Select if you want the widgets to appear on images as well as on text. The widget for text will appear once a word or group of words on your page is highlighted. This will allow your viewer to post that text to FB or twitter, etc.
✿ Select a color for your widget. This is my favorite part. This allowed me to customize the color of the widget to compliment the theme on my blog.
✿ Select if you want also a widget for page sharing. This usually appears on the left side bar of your page and will allow your viewer to share your blog or blog post. I want my posts to be shared so I chose ON.
You will see a preview of what your widgets will look like on a page on the left side of the screen.
C. Scroll down, enter your email and hit the GET THE CODE button.
D. You will then be shown a code and will be told to copy and paste it to the
E. Highlight and copy the code.
F. Go to your Blogger dashboard, select Template::
G. Then click Edit HTML. This will show you the html version of your blog. If you are already a pro on this, you might skip this steps. But if not, then just follow through. Just remember, DON'T try to DELETE or EDIT any text inside the box if you don't know what you are doing. Just follow the next steps and you're safe...Yey!
H. Click inside the box and hit CTRL+F on your keyboard. This will open a Search box inside the html box.
I. In the Search box type::
then press Enter. This will bring your selection to the tag in your html code.
J. Place your cursor above the tag then type::
You might observe though that these widgets appear on ALL images on your page. And you might be like me going i-don't-like-that-on-my-banner!. Next post I'll help you with this one.
'Til next time! (>‿◠)✌
I'll show here how to add it to your blog. It's very simple! Later I'll post another topic about how to exclude your banner from the sharing widgets.
A. Go to this link:: Markerly Standard Widgets
B. Customize your widget::
✿ Choose the type of services that you want to appear on your widget. I chose Facebook, Twitter, Pinterest, Google+, and Email::
✿ Select if you want the widgets to appear on images as well as on text. The widget for text will appear once a word or group of words on your page is highlighted. This will allow your viewer to post that text to FB or twitter, etc.
✿ Select a color for your widget. This is my favorite part. This allowed me to customize the color of the widget to compliment the theme on my blog.
✿ Select if you want also a widget for page sharing. This usually appears on the left side bar of your page and will allow your viewer to share your blog or blog post. I want my posts to be shared so I chose ON.
You will see a preview of what your widgets will look like on a page on the left side of the screen.
C. Scroll down, enter your email and hit the GET THE CODE button.
D. You will then be shown a code and will be told to copy and paste it to the
<body></body> tag of your blog. (What???)Don't fret, I'll show you how...E. Highlight and copy the code.
F. Go to your Blogger dashboard, select Template::
G. Then click Edit HTML. This will show you the html version of your blog. If you are already a pro on this, you might skip this steps. But if not, then just follow through. Just remember, DON'T try to DELETE or EDIT any text inside the box if you don't know what you are doing. Just follow the next steps and you're safe...Yey!
H. Click inside the box and hit CTRL+F on your keyboard. This will open a Search box inside the html box.
I. In the Search box type::
</body> then press Enter. This will bring your selection to the tag in your html code.
J. Place your cursor above the tag then type::
< !--markerly-->
This is a comment tag. This doesn't affect the html code. I placed it so I'll know where I will find the Markerly script that I pasted on the html code of my blog next time if ever I wanted to set some changes.
K. Just to be sure, go back again to the code you got from the Markerly website. Copy it again then paste it below the comment tag you just typed. Your html code should now look like this::
L. Click Save Template button.
M. View your blog and enjoy your widgets!
You might observe though that these widgets appear on ALL images on your page. And you might be like me going i-don't-like-that-on-my-banner!. Next post I'll help you with this one.
'Til next time! (>‿◠)✌
No comments:
Post a Comment