Blogger Blogspot

Home » Posts filed under Blogger Gadgets

Showing posts with label Blogger Gadgets. Show all posts

Blogger AdSense Code Converter

Posted by Unknown Saturday, September 22, 2012 1 comment

hy guys If you want to add Adsense Ad units or any other ad scripts inside the Blogger Post or anywhere in the Blog, You can't directly Paste it in the template code. You need to first convert the code using this HTML Entities Encoder tool and then you can put ads anywhere you want ;)

hhmmm its work

Instructions:

Fill the Adsense/other Code in the Below Box
Click "Convert Ad Code".
Next, Sign into Blogger Dashboard » Layout » Edit html and then Paste the code where ever you want the ad to be displayed.

Good LUCK

Follow buttons integrate with a Blogger Blogspot blog

Posted by Unknown 1 comment

How do you integrate a Twitter Follow Button to Blogger Blogspot? How do you integrate a Follow button for Facebook to Blogger Blogspot? How do you integrate a Follow button for Google+ to Blogger Blogspot ?

How do you integrate an RSS feed button a Blogger Blogspot? How do you integrate an eMail button a Blogger Blogspot? How do you integrate a Flattr button a Blogger Blogspot?

There are numerous ways and designs, buttons to integrate the consequences on social networks, or to subscribe to the feed via email or in a Blogger Blogspot.

Often these buttons available in different sizes and it is just a little difficult to create a unified design. In this example, a simple and robust design will be presented, as it can also be seen on this blog.

Folgen Button Twitter Facebook Google* RSS Newsfeed eMail Blogger Blogspot

Follow buttons, RSS feed button and email button integrated on Blogspot

at blogger.com log and seek appropriate Blog
Layout >> Add a Gadget >> in HTML / JavaScript on the blue check button, it opens a window, there is the following code inserted >> Save >> Save Layout (orange button at the top right)
Reload this blog and the new buttons should be seen and fully functional

Code:

As this code is structured and how it works?

If you add the code in the side bar of the buttons are centered, that is placed in the middle of the side bar (center). If the buttons are placed to the left, is replaced by center left. If the buttons are aligned to the right, then center is replaced by right.

Will be seen as the same, followed by the structure of the code to a schema. For each button, the image, the corresponding link and the arrangement (layout) is defined.

Facebook button

margin-left: 5px - the distance of the Facebook button to the left side with 5px

margin-right: 5px - the distance of the Facebook button on the right side with 5px

title = "blogger Latin follow on Facebook" and "Follow Latin bloggers on Facebook" alt = is used for labeling of the buttons, you go with your mouse cursor over it then a title is displayed, both lines can be changed as desired or replaced

here to add the link to his Facebook profile, or his Facebook page (from the browser address bar, copy)

target = "_blank" opens the link to the profile and linked to the linked web page in a new window in the browser when you click on the button, if you do not want the piece can be deleted

img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2B7NOCJsv8KhXQD-e1dkI8vN1mPowq8zVo5azKlWv2lfSHb2v8M-KIOPiE-UdRYpef9MbWXhqkQCH-TuUBJsUnGotxU4tnp-OUgbFbA17qfO-2ylN7nEC9IGPu9qdr0eou3WRoQZLatk6/" is the link to the Facebook button, who wants a different button sets, there just its URL (web address ) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post of the post must not be published because the image after uploading automatically stored in Picasa Web Album is), click on editor to HTML and the first link (this is the new URL to the button) to copy and use the code above (the post can then be deleted, because the button is now stored in your own Picasa Web Album)

width = "24" - the button is 24px wide

height = "24" - the button is 24px high

border = "0" there is no border around the button created

Twitter Button

margin-left: 5px - the distance of the Twitter buttons to the left side with 5px
margin-right: 5px - the distance of the Twitter buttons to the right side with 5px
title = "blogger Latin follow on Twitter" and "follow on Twitter Blogger Latin" alt = is used for labeling of the buttons, you go with the mouse cursor over it, then a title is displayed, both lines can be changed as desired or replaced
href = "http://twitter.com/BloggerLatein" (copy from the browser address bar) here to add the link to his Twitter profile is a
target = "_blank" opens the link to the profile linked in a new window in the browser when you click on the button, if you do not want the piece can be deleted
img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZzPfshFth9VJDAgALEpzJ4Gu0TRVxG2Qzb26I3Ag2pqZozyRcp4q5N3kK7eqIhvGxTb50Y1N9tfwSq4vrbJP4sP44XM2-YO0a3wC4lw0x3izUtowgQk71wtVtLp9Kk-MJYQWRfESiECP/" is the link to the Twitter button, who wants a different button sets, there just its URL (web address ) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post of the post must not be published because the image after uploading automatically stored in Picasa Web Album is), click on editor to HTML and the first link (this is the new URL to the button) to copy and use the code above (the post can then be deleted because the button is now stored in your own Picasa Web Album)
width = "24" - the button is 24px wide
height = "24" - the button is 24px high
border = "0" there is no border around the button created

Google Plus Button

margin-left: 5px - the distance of the Google Plus button to the left side with 5px
margin-right: 5px - the distance of the Google Plus button to the right with 5px
title = "blogger Latin follow on Google+" and "Latin bloggers follow on Google+" alt = is used for labeling of the buttons, you go with your mouse cursor over it then a title is displayed, both lines can be changed as desired or replaced
href = "https://plus.google.com/115524128076631144939" here to add the link to your Google Plus profile or to its Google Plus page (from the browser address bar, copy)
target = "_blank" opens the link to the profile and linked to the linked web page in a new window in the browser when you click on the button, if you do not want the piece can be deleted
img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTTQf_cTyHl8GimrSe9qypfcX7k3JneeuYaHxUT9-SWIs68ucvsxWD1y1C-WNzhMKzGvSDVaneA89NDjznwnkUMfoAeyuocVUlh3vYC5QhQ6joKlYNX3o0tTEOx9An75H7SAQgLQztwprZ/" is the link to the Google Plus button, who wants a different button is there just a URL (web address) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post the post must not be published because the image after uploading the automatic Picasa web album is stored), click on editor to HTML and the first link (which is copy the new URL to the button) and (insert in the code above the post can then be deleted, because the button is now stored in your own Picasa Web Album)
width = "24" - the button is 24px wide
height = "24" - the button is 24px high
border = "0" there is no border around the button created

News Feed button

margin-left: 5px - the distance of the News Feed button to the left side with 5px
margin-right: 5px - the distance of the News Feed button to the right with 5px
"Subscribe to News Feed" and title = "Subscribe to News Feed" alt = is used for labeling of the buttons, you go with your mouse cursor over it then a title is displayed, both lines can be changed as desired or replaced
href = "http://feeds.feedburner.com/Bloggerlatein" here to add the link to his feed

Who has set up for his feed redirect to FeedBurner can this format href = "http://feeds.feedburner.com/Bloggerlatein." Use and replace it with its own link
Who has not changed his feed uses the standard link. Blogger Blogspot blogs are the feeds already built and also the structure of the URL (web address) follows a pattern. You can choose between 2 predefined formats, which one is used a matter of opinion. For completeness, both formats will be added:

RSS: http://bloggerlatein.blogspot.com/feeds/posts/default?alt=rss

Atom: http://bloggerlatein.blogspot.com/feeds/posts/default

The blue spot is replaced with your own blog address.

If the feed does not display: Settings >> General >> Site Feed >> Blog Posts Feed >> Complete >> Save Settings (orange button at the top right)

target = "_blank" opens the link to the profile and linked to the linked web page in a new window in the browser when you click on the button, if you do not want the piece can be deleted

img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-J26bdC0ghiYdeHhzX1XL8ow_lH6jRCNta9ckiMjxlT5-r4dVyhv5tquekid2kwDF8a4ygeHFtEPaq-lJ0fcvDeOVyGVFMpGCyvjdrj26fOSbiJ8cpBvG7LPtWQ9PTl368627CiRM33rI/" is the link to the News Feed button, who wants a different button sets, there just its URL (web address ) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post of the post does not have to be released because the image after the upload is automatically stored in Picasa Web Album ) in HTML editor and click the first link (this is the new URL to the button) to copy and use the code above (the post can then be deleted, because the button is now stored in your own Picasa Web Album)

width = "24" - the button is 24px wide

height = "24" - the button is 24px high

border = "0" there is no border around the button created

email button

margin-left: 5px - the distance of the News Feed button to the left side with 5px
margin-right: 5px - the distance of the News Feed button to the right with 5px
title = "get the latest articles by email" and "get the latest articles by email" alt = is used for labeling of the buttons, you can take the mouse cursor over it, then a title is displayed, both lines can be changed or replaced as desired will
href = "http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE" here to add the link to the form for an email subscription
Who has set up for his feed redirect to FeedBurner can use this format href = "http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE" and replace it with its own link.
Who has not changed his feed would, now the gadget Email Add follow his blog. Then forwards the request to Blogger.com Feedburner, and the form for an email subscription is provided by Feedburner ready. So there is no link to this form, because the above gadget only be added and the release must be enabled in.
But anyone who wants to try this link, something else. At Blogger.com, log open a new tab in your browser and visit the website of FeedBurner. Since Feedburner is a Google service, as well, is now taken to the login page from the FeedBurner email address with which you are logged into their Blogger Dashboard. When password is the same password you as if you were to log in to Blogger.com. This should now be the feed for the blogs listed on the Blogger dashboard, find. If a very specific feed is missing, then the FeedBurner link the affected blogs under Layout >> Add Gadgets >> Email >> follow FeedBurner Copy URL and open in a new browser tab. Since the feed has now been called at least once, he should after reloading the FeedBurner website will also appear in the index. Then click on the appropriate feed title (actually the blog title), for which it would set up the email subscription. Menu to Publicize >> Email Subscriptions (left) and click on the big button Activate. Set the language on the following page and copy the link from the box below, which should look like this: http://feedburner.google.com/fb/a/mailverify?uri=Bloggerlatein&loc=de_DE
In Latin bloggers should now find their own blog title. Use this link in the above code and the form for email subscription should be opened by clicking the email button. Bit complicated but doable.
target = "_blank" opens the link to the profile and linked to the linked web page in a new window in the browser when you click on the button, if you do not want the piece can be deleted
img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXfakMaLGm6P4QKyUnS4zlI-1yUy1d6LMQAxgSPdxYpUpSlmHXRH9FdSdf8l2pR97b7mDD4HgeZ_yQpYqNJgnaHBTrCOnS5c1xq4zGSHQsX3p8Cn-ITtcIAgdUBmpndlXr0RcFq7crzl9y/" is the link to the e-mail button, who wants a different button sets, there just its URL (web address ) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post of the post must not be published because the image after uploading automatically stored in Picasa Web Album is), click on editor to HTML and the first link (this is the new URL to the button) to copy and use the code above (the post can then be deleted, because the button is now stored in your own Picasa Web Album)
width = "24" - the button is 24px wide
height = "24" - the button is 24px high
border = "0" there is no border around the button created

Flattr button

margin-left: 5px - the distance of the Flattr buttons to the left side with 5px
margin-right: 5px - the distance of the Flattr buttons on the right side with 5px
title = "Flattr this" and alt = "Flattr this" is the caption of the buttons, you can take the mouse cursor over it then a title is displayed, both lines can be changed as desired or replaced
href = "http://flattr.com/thing/482810" here to add the link to his Flattr profile (from the browser address bar, copy)
target = "_blank" opens the link to the profile and linked to the linked web page in a new window in the browser when you click on the button, if you do not want the piece can be deleted
img src = src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ_yXykzyDznn-hAxTM3oiYPvjjAxoiGKgrTjX1fae3F0PeMX8hyphenhyphenNnUDLgySOk8356xaAmxhUuPrMdKeanqB1Qi1Fi53TmT3vT6w3o_wWrUR_N6nxGu2k_ekinIptq3rAQjL4lqB-CdE40/" is the link to the Flattr button, who wants a different button is there just a URL (web address) for an image: one can copy this link and email address in the address bar of the browser, download the button (upload at Blogspot in a new post the post must not be published because the image after uploading the automatic Picasa web album is stored), click on editor to HTML and the first link (which is copy the new URL to the button) and (insert in the code above the post can then be deleted, because the button is now stored in your own Picasa Web Album)
width = "24" - the button is 24px wide
height = "24" - the button is 24px high
border = "0" there is no border around the button created

Create your own code

the base system should now become clear
then you need the "beginning" and "end" of the code, and in between is the code for each button added - just as it is stated above each
The code begins with <div align="center"> next row, the code for the desired buttons are ranked (see 1 above code) and behind the very last button code will be </div> Embed
the URL's (web addresses) for the profiles or pages will be replaced by your own links
The URL's for the buttons can also be replaced

Example - for Facebook (gray), Twitter (blue) and newsfeeds (gray)

<div align="center"><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Facebook folgen" href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2B7NOCJsv8KhXQD-e1dkI8vN1mPowq8zVo5azKlWv2lfSHb2v8M-KIOPiE-UdRYpef9MbWXhqkQCH-TuUBJsUnGotxU4tnp-OUgbFbA17qfO-2ylN7nEC9IGPu9qdr0eou3WRoQZLatk6/" width="24" height="24" alt="BloggerLatein auf Facebook folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="BloggerLatein auf Twitter folgen" href="http://twitter.com/BloggerLatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWZzPfshFth9VJDAgALEpzJ4Gu0TRVxG2Qzb26I3Ag2pqZozyRcp4q5N3kK7eqIhvGxTb50Y1N9tfwSq4vrbJP4sP44XM2-YO0a3wC4lw0x3izUtowgQk71wtVtLp9Kk-MJYQWRfESiECP/" width="24" height="24" alt="BloggerLatein auf Twitter folgen" border="0" /></a><a style="margin-left: 5px; margin-right: 5px;" title="Newsfeed abonnieren" href="http://feeds.feedburner.com/Bloggerlatein" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-J26bdC0ghiYdeHhzX1XL8ow_lH6jRCNta9ckiMjxlT5-r4dVyhv5tquekid2kwDF8a4ygeHFtEPaq-lJ0fcvDeOVyGVFMpGCyvjdrj26fOSbiJ8cpBvG7LPtWQ9PTl368627CiRM33rI/" width="24" height="24" alt="Newsfeed abonnieren" border="0" /></a></div>

Facebook Like Box bei Blogger Blogspot einbinden

Posted by Unknown Saturday, June 2, 2012 1 comment

How can a Facebook Like Box in a Blogger Blogspot embed embed? How can you integrate the Facebook Like Box to Blogger Blogspot in the side bar or in the footer? Where to get the gadget or Facebook Like Box Facebook Like Box ?

If you already have a Facebook page or even a Facebook page set up to match his Blogger Blogspot blog, then the Facebook Like Box and Facebook Like Box involve me. For a normal Facebook profile, it does not work.

The code has been drafted to be very easy to add on gadgets in a Blogger Blogspot blog can be integrated. A somewhat more complicated procedure in the template template is thus spared.

Is the Facebook Like Box included in the blog, readers can:

"Like" button and press to win new fans for its Facebook page
a preview to see what is being posted on the Facebook page, so an overview of recent activities
see how many people like the Facebook page, by these individuals is the profile photo to see and link

Simple instructions for quick installation of the Facebook Like Box:

Gadget for HTML / JavaScript in the old Blogger interface add

at blogger.com log and seek appropriate Blog
Design >> Page Elements >> Add a Gadget >> Select HTML / JavaScript and paste the code >> Save

Gadget for HTML / JavaScript in the new Blogger interface add

at blogger.com log and seek appropriate Blog
Layout >> Add a Gadget >> Select HTML / JavaScript and paste the code >> Save

Code for the Facebook Like Box and Facebook Like Box

<div class="fb-like-box" data-href="http://www.facebook.com/pages/BloggerLatein-Blogger-Blogspot-Tipps-und-Tricks/283692315026862" data-width="292" data-show-faces="true" data-stream="true" data-header="true"></div>
<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/de_DE/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Rote Markierung: dort wird die eigene Webadresse (URL) der eigenen Facebook Seite eingesetzt. Wer diese nicht auswendig kennt, loggt sich bei Facebook ein, sucht seine Seite auf und kopiert die URL aus der Adresszeile des Browsers. Die Webadresse (URL) endet mit der Seiten ID (eine längere Zahl).

Blaue Markierung: um die Box breiter zu machen wird eine größere Zahl eingegeben und um die Box schmaler zu machen gibt man eine kleinere Zahl ein.

Grüne Markierung: möchte man im unteren Teil der Box keine Profilbilder anzeigen lassen, wird das Wort true mit dem Wort false ersetzt.

Orange Markierung: möchte man den scrollbaren Mittelteil (Postvorschau der Facebook Seite) ausblenden und nur die Profilfotos anzeigen lassen, wird das Wort true mit dem Wort false ersetzt.

Rosa Markierung: möchte man die Überschrift Finde uns auf Facebook ausblenden, wird das Wort true mit dem Wort false ersetzt.

Wie man eine Facebook Like Box mit Hover Effekt (ausklappbar beim Anklicken) einbindet, wird in diesem Artikel erklärt: Facebook Like Box mit Hover Effekt bei Blogspot einbinden

Embed the new Google +1 Button to your Blogger Blogspot blog

Posted by Unknown Friday, June 1, 2012 1 comment

As you can at Blogspot integrate the new "Google Plus One" button? As you make your bed the new "Google +1" button, a blogger at a Blogspot ?

Google has the design of the "Google +1" or "Google Plus" buttons changed. The new design of the buttons is automatically applied to many products, including Blogger Blogspot blogs. Those who did not make friends with the old colorful design could have perhaps cause for celebration.

The old design, there will be in this article, go to "admire".

Why do we need all these just share buttons (social media buttons)? You need them, but they have many benefits.

Who wants to make known its website and would like to improve the ranking in the search engines will come no more to social media buttons.

One advantage is that the reader quickly to the content of the page on which it is located, can share in social networks. What make you want? It brings more visitors and new readers might find the page or the blog interesting. Perhaps this share again the links to specific posts or articles in their own blogs. Thus, a link to a website or a blog and spread more rapidly and bring more traffic to the blog.

Very good it is, if there is still someone the contents of their own blogs as well or is recommended that he or his blog on his website is a link to your own blog. We then speak of a backlink. Also, the backlinks play an important role and it is a very simplified not insignificant criterion for the ranking of the blog in the search engines.

The "Google Plus One" button is also a social media button and has "Like" roughly the same function as the button of Facebook. With the "Google +1" button, readers can review the contents of the blog and it brings positive any other visitors to the blog.

The code for the "Google +1" button is in a Blogger Blogspot blog about the gadget HTML / JavaScript (mostly in the side bar) inserted.

Gadget for HTML / JavaScript in the old Blogger interface add

at blogger.com log and seek appropriate Blog
Design >> Page Elements >> Add a Gadget >> Select HTML / JavaScript and the code of the "Google +1" button to insert >> Save
Invite new blog and the button should be visible

Gadget for HTML / JavaScript in the new Blogger interface add

at blogger.com log and seek appropriate Blog
Layout >> Add a Gadget >> Select HTML / JavaScript and paste the code of the "Google +1" button >> Save
Invite new blog and the button should be visible

Neue Google +1 Buton in Blogger Blogspot einbetten. Neue Google Plus Eins Button in Blogger Blogspot einbetten.

Google +1 Buttons & Codes

Button – large

Code

<g:plusone size="tall" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button – standard

Code

<g:plusone annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button – medium

Code

<g:plusone size="medium" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button – small

Code

<g:plusone size="small" annotation="none"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – large

Code

<g:plusone size="tall"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – standard

Code

<g:plusone></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – medium

Code

<g:plusone size="medium"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – small

Code

<g:plusone size="small"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – Large

Code

<g:plusone size="tall" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – standard

Code

<g:plusone annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – medium

Code

<g:plusone size="medium" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Button mit Counter – small

Code

<g:plusone size="small" annotation="inline"></g:plusone>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{lang: 'de'}
</script>

Blogger Blogspot

Blogger AdSense Code Converter

Follow buttons integrate with a Blogger Blogspot blog

Facebook Like Box bei Blogger Blogspot einbinden

Embed the new Google +1 Button to your Blogger Blogspot blog

Best Tips Blogger SEO

Entri Populer

Followers