Latest News

Showing posts with label HTML Gadget. Show all posts
Showing posts with label HTML Gadget. Show all posts

Music Is Personal - And Player Choice Will Be, Also

Some blog owners decide to include music, to accessorise their blogs - and the first thing they ask for is instructions.
Please give me step by step instructions, to add music.
They don't consider that adding music, for any blog, will be their personal choice - and a music player will be personal too.

The choice of music player needs to be based on the music library provided.

You will probably want your music choice to match the blog content.

Some one who wants to provide classical music won't want to add a music player, published by a disco / techno website. Similarly, if you want to decorate your blog with country music, you will not be pleased by a player provided with a jazz website.

Each music website will provide their own player, to accompany their music library - and their own installation instructions, to install their player. You will probably be provided HTML / JavaScript code, by the website - so you will want to add an HTML / JavaScript gadget.

Position the player so it is convenient and visible, to your readers.

You will want the player controls to be visible - so you should position the new gadget, in a convenient and visible location, on the blog.

The one suggestion, that is consistently provided, is that you should choose a player that lets your readers choose whether to listen to the music. Please, don't use any player that only provides "autoplay".

The choice of music will be yours - and some readers will choose to view your blog. But some will choose to not listen to your music - and unless you want to limit reader population to those who can listen as they view, you will want to make the music optional.



Some #Blogger blog owners want to decorate their blogs with music - and they request detailed instructions for adding a music player. Music players are individual to the website providing the music - and the smart blog owner will choose the website, for one offering an appropriate music library.


The "About Me" Gadget, And Google+

Some blog owners are accustomed to editing their Blogger profiles, from time to time.

Publishing a blog that presents oneself to ones readers, openly, is important to some blog owners. The Blogger profile becomes a blog component that is edited, periodically, to keep the blog reader friendly.

The Blogger profile editor produces content which is displayed in the "About Me" gadget, for single owner blogs. Multiple owner blogs, complementarily, display "About Us" - which provides a different display.

Google+ profiles are edited using the Google+ desktop - and Google+ desktop content does not display in "About Me", in Blogger.

"About Me" displays Blogger Profile content. Once you upgrade to a Google+ profile, you won't have access to the Blogger Profile Editor - and you'll have no way to edit Blogger Profile content.


If the blog has been upgraded, you won't be able to edit your Blogger profile.



If you can edit your Google+ profile, sufficiently, you'll be good. If not, you can work around the problem.

Just create your own custom "About Me" gadget, using a Blogger HTML or Text gadget. You can do this in under an hour.



Add an "HTML / JavaScript" gadget. That's how you start.



Use the Layout "Add a Gadget" page, add an "HTML" or "Text" gadget, and fill the gadget content with your profile. With a little work, you can make a gadget with as much detail as any Google+ page or profile.

  • Desktop banner background / icon.
  • Photos.
  • Text.
  • Video.
  • Whatever interests you - and your readers.

With a little work and imagination, you can have a blog that looks like part of your Google+ desktop.



Owners of #Blogger blogs that use Google+ profiles want to edit their "About Me" gadgets - but find no way to do that. With a Google+ profile edited using the Google+ desktop, no "About Me" displayed content is produced.

Fortunately, it's not difficult to produce a custom "About Me" gadget.

https://productforums.google.com/forum/#!category-topic/blogger/Ifg3aW2yMrg



Blogger Magic - Add An HTML Gadget

Many popular accessories start with raw HTML / JavaScript code, from different third party services.

One of the advantages of publishing a Blogger blog is the abundance of available accessories. With Blogger being in the top 3 of Internet publishing platforms, every third party service wants customers who publish using Blogger.

There are plenty of abusive or malicious accessories, that should not be installed, even when offered - and there are ways to best install the accessories, that can be safely installed.

Most accessories, from third party services, will be provided as HTML / JavaScript.

To add HTML / JavaScript code, to a blog, you can use any of several techniques - though a new HTML / JavaScript gadget is the smartest choice. Adding an HTML gadget, to a Blogger blog, is not difficult.

Add an HTML / JavaScript gadget, using "Add a Gadget" in Layout.

Start from the dashboard Layout page, and select any convenient link to "Add a Gadget". Select "HTML/JavaScript" from the "Basics" tab, in the "Add a Gadget" wizard.



Select "HTML/JavaScript" in "Basics".



Paste the code, that you have to add, into the "Content" window, in the "Configure HTML/JavaScript" wizard. And if you wish, give your new gadget a Title.



Paste the code that you have, into "Content" - with the wizard in HTML mode ("Rich Text" displayed).



Avoid several well known mistakes, when adding gadgets.

There are mistakes, that you can avoid - if you know what to do.

  • Be selective, when adding third party code.
  • Add a gadget, using "Basics".
  • Edit an HTML gadget, with "Rich Text" displayed as the caption.
  • With a dynamic template, attach or embed the content in a static page.
  • With a mobile display, enable the gadget, if you want it to be viewed.

Be selective, when adding third party code.

It's your blog - and you are allowed to install any accessories and tweaks that interest you. For long term stability and success, though, you should try to only install code from reliable sources.

Your readers will be happier, with your blog using reliable accessories.

Add a gadget, using "Basics".

You'll start with an "Add a Gadget" link, on the dashboard Layout page - and the "Add a Gadget" wizard.

The "Add a Gadget" wizard has the "Basics" tab, with the "HTML / JavaScript" gadget in the list - and it has the "Add your own" tab. You should find the "HTML / JavaScript" gadget, in "Basics".

Edit an HTML gadget, with "Rich Text" displayed as the caption.

The "HTML" / "Text" gadgets, intriguingly have the "Edit Html" / "Rich Text" tabs. If you want to add / edit HTML or JavaScript, the caption should read "Rich Text".



The HTML gadget, in HTML mode.



With a dynamic template, attach or embed the content in a static page.

Adding gadgets to dynamic templates is not a straightforward process. Gadgets have to be written specifically to support dynamic templates - and the HTML gadget is not written for this.

If you want an HTML gadget to work in a dynamic template, you'll need to attach or embed the gadget, in a static page.

With a mobile display, enable the gadget, if you want it to be viewed.

By default, the "HTML / JavaScript" gadget does not display, on a mobile browser. You will have to use the Template Editor, and enable the gadget to display, in mobile mode.

It's your blog.

There are ways to make an HTML gadget work, differently. Long term success will be much more likely, though, with attention to the advice above.



One of the most common accessories, added to a #Blogger blog, starts with an HTML / JavaScript gadget. This is a very versatile gadget - and it's not difficult to install. There are several common sense details, however.

Add A Fixed Location "Subscribe" Button To Your Blog

To encourage email subscriptions, and other social connections, some blog owners provide gadget toolbars, with useful links.

Some blog owners would like to position their gadgets in fixed screen positions.
I want to have a subscribe button hover at the top of the page, while people read my blog.
This blog has a hovering AddThis toolbar, which provides selected social sharing options. And, it has a hovering "Top of Page" button.

Adding a custom subscription gadget, in a fixed screen location, is not complicated.

AddThis has a large library of social sharing gadgets, with their icons - but they don't have any email subscription selections. But you can add an icon based "subscribe" button, "hovering" at the top of the page.

An occasional request suggests using a popup window, containing a subscription form. We don't recommend using a popup window - but a subscription form, on a FeedBurner hosted page, will provide the same function.

  1. Add FeedBurner "Subscribe by Email".
  2. Add a "Subscribe by Email" FeedBurner hosted form, and a link.
  3. Add a suitable icon, containing the FeedBurner subscription link.
  4. Try It.

See below "Try It.", for the detailed procedure.

Add FeedBurner "Subscribe by Email".

Using the dashboard Layout page, and "Add a Gadget", add a "Subscribe by Email" gadget. This creates a blog posts FeedBurner hosted feed.

FeedBurner provides the "Subscribe by Email" gadget, with the choice to display either an on screen form - or a simple link to a FeedBurner hosted form page.

Add a "Subscribe by Email" FeedBurner hosted form, and a link.

Once a "Subscribe by Email" gadget has been added, get the gadget link from the FeedBurner dashboard, at Publicize - "Email Subscriptions" - "Subscription Management" - "Preview Subscription Link…".


Start from the dashboard, at Publicize - "Email Subscriptions" - "Subscription Management".




The "Preview Subscription Link…" window contains the code, that we need.



Add a suitable icon, containing the FeedBurner subscription link.

Choose an attractive icon to contain the FeedBurner supplied link. Add an HTML gadget using "Add a Gadget", containing the icon with the link to the FeedBurner form - and displayed in a fixed location.


Try It.

I added a button, and a new subscription, to my test blog, "Chucks Tech World".


See the icon, in the top right margin?




See how the new icon floats?




See how it floats from the top - and from the right?



Start with an icon, uploaded:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-R3uaQFsSkF7azHhm7XAnONPpN0QRrpZ0hhW9S0Y5AqdP3Ar3iopGgFViycf75jvJ-tcpRgd_sSJsGrdb-qHCRsJtyMcq_1dQ7RfZnlhbEveDjdAYj16U6TrBivx0ym6VfzLJwQtT9Fk/s1600/Subscribe+Icon.png" imageanchor="1" ><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-R3uaQFsSkF7azHhm7XAnONPpN0QRrpZ0hhW9S0Y5AqdP3Ar3iopGgFViycf75jvJ-tcpRgd_sSJsGrdb-qHCRsJtyMcq_1dQ7RfZnlhbEveDjdAYj16U6TrBivx0ym6VfzLJwQtT9Fk/s320/Subscribe+Icon.png" /></a>

Here's the FeedBurner Subscription Link:

<a href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US">Subscribe to Chucks Tech World by Email</a>

Here's the Floating Top Of Page Button:

<a style="display:scroll;position:fixed;bottom:20px;right:60px;" href="#" title="Top"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik2HLf375pL7ukmgwXSv3ti2luCRyGVIsZEL5d6FGjrsfaN_HYL8vy8Jr1BNRzB6cRoLeBP_JSX5r6FX8l7tjV5fkOdQU3ISmbtwLORtbbwnHACD1QWmEPawWFylh4lCixVTPGc2tpaRhA/s320/Up+Arrow+4.jpg" /></a>

And put them all together:

<a style="display:scroll;position:fixed;top:40px;right:60px;" href="https://feedburner.google.com/fb/a/mailverify?uri=ChucksTechWorld&loc=en_US" title="Subscribe by Email" target="_blank"><img border="0" height="60" width="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH-R3uaQFsSkF7azHhm7XAnONPpN0QRrpZ0hhW9S0Y5AqdP3Ar3iopGgFViycf75jvJ-tcpRgd_sSJsGrdb-qHCRsJtyMcq_1dQ7RfZnlhbEveDjdAYj16U6TrBivx0ym6VfzLJwQtT9Fk/s320/Subscribe+Icon.png" /></a>

And that's it.

I now have a hovering subscription icon, in my test blog. Given a collection of icons, carefully arranged, you can have a hovering toolbar - to maybe complement a social media button toolbar.



Some #Blogger blog owners would like a hovering button or toolbar, to provide an email subscription form. This is an accessory that is not difficult to add.

Add A FaceBook Gadget With FaceBook SDK Code

Some blog owners can't get their new FaceBook gadgets to work, on their blogs.

We see the occasional report, in Blogger Help Forum: Get Help with an Issue.

The blog won't accept the code that Facebook Developer generated for me.

Adding HTML gadgets - and HTML gadgets using FaceBook code - can be frustrating. But, it's possible.

Adding a FaceBook gadget, to your blog, is not difficult - but success is found, in the details.

  • Add the gadget as a new HTML gadget.
  • Add the FaceBook SDK code, to the first FaceBook gadget.

Add the gadget as a new HTML gadget.

Blog maintenance is far easier, with a FaceBook gadget - or any other HTML / JavaScript based accessory - added as content, in a new HTML gadget - far smarter than using Template Editor.

Add the FaceBook SDK code, to the first FaceBook gadget.

FaceBook instructs us to add SDK code to each page which will display a FaceBook gadget - but advises that we should only add the SDK code once / page.

Gadget code, as provided by FaceBook Developers:

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>

Gadget code, as added to a new HTML gadget:

<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5&appId=528167400699401";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="fb-comments" data-href="http://ourladyofoutrage.blogspot.com/" data-numposts="5">
</div>


A new FaceBook gadget, being added.



Just pay attention to the details, for best results.



Some #Blogger blog owners try to add accessories provided by FaceBook Developers, without success. They don't realise the importance of the details involved.

Claiming Your Blog, In BlogLovin

When you use the BlogLovin supplied instructions to claim your blog, you will get a BlogLovin link, with an embedded token, which you install in your blog.
Paste this text into a new blog post ... In some blogs, it's necessary to put the code at the top of the blog post.

BlogLovin would have you publish a new post, and put the link / token at the top of the post. This ensures that the claim link displays at the top of the page, in the blog.

I'm not going to publish a new post, for joining yet one more non Blogger service.

I try not to clutter the blog feed, with posts that are only needed, to host a link - particularly a link for verifying a new service connection. With Blogger blogs, you may be able to use a gadget, in the sidebar. The sidebar is static - so what you position in one place stays in that place.

First, get the BlogLovin blog claim token, using "Claim blog".

You start, by getting the BlogLovin link, and embedded token, from the "Claim blog" wizard in "Blog analytics".

Either publish a new post, or position an HTML gadget properly.

You will probably have to position the gadget, containing the BlogLovin link, near the top of the sidebar. Apparently BlogLovin claiming verification only reads the top of the blog content - whether posts or template objects.
  1. Get the claim link / token, from BlogLovin.
  2. Add the link / token to a post, or an HTML gadget.
  3. Publish the post, or position the HTML gadget, near the top of the sidebar.
  4. Return to BlogLovin, and click "Claim".
  5. Wait, anxiously.

Maybe, BlogLovin only reads content above the fold. BlogLovin is allowing for blogs with activity, where new posts would push the post containing the claim link token, down the page - before the BlogLovin claim verification can find and read the claim token. Or maybe they want the new link so it's visible - and advertises their service.

The uncertainty about claim link location, combined with the need for a valid feed - but criteria for valid feed being itself uncertain - will make claiming some blogs, in BlogLovin, a bit of trial and error.

Then replace the claim link / token with a properly decorative button.

Once your blog is claimed, you can replace the ugly claim link with a semi decorative BlogLovin button ("Get the Bloglovin button"). I was able to consolidate two BlogLovin claims, for this blog - so I removed the two ugly links, from the sidebar.


My sidebar HTML gadget, with two ugly links. They are now gone.



I used the "Move Followers to" option, so I can have one page for this blog.

Why they had two entries, for this one blog, I don't know. Their advice here is a bit vague.
This might happen when a blog have two or more different addresses to its RSS feed.
All Blogger blogs, publishing a blog feed, have at least two diffeent feed addresses. Does BlogLovin only use RSS, specifically? Or are they unaware that Blogger publishes one feed, in two flavours - Atom and RSS?

Anyway, BlogLovin lets you move Followers, from one blog to another - and I now have one BlogLovin page for this blog.

---

Some #Blogger blog owners use the BlogLovin social sharing service, to provide access to their blog. The BlogLovin "Claim your blog" process uses a BlogLovin link with an embedded token, to verify blog ownership.

The claiming process requires proper positioning of the claim link - plus (as previously noted) proper blog feed availability. This combination of requirements makes a BlogLovin claim somewhat unpredictable.

Contact Us

24x7 online , we happy to answer you
tamilcypc@gmail.com

Disclaimer

This Blog and its TUT's are intended for educational purposes only, no-one involved in the creation of this TuT may be held responsible for any illegal acts brought about by this Blog or TuT.



Featured Post

Custom Domains And HTTPS Redirection Code