Skip to content

Instantly share code, notes, and snippets.

@marco-IT

marco-IT/- README.md

Last active August 24, 2017 13:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save marco-IT/9a309df118ad6bc4236b to your computer and use it in GitHub Desktop.
Save marco-IT/9a309df118ad6bc4236b to your computer and use it in GitHub Desktop.
Download ZIP
Code Snippets + Widgets used in Blogger and Weebly Templates
Raw
- README.md

Overview

This is a collection of HTML, CSS and JavaScript code snippets, widgets and templates I've used in some Blogger and Weebly templates. It will be extended bit by bit.
There are tons of widgets in the wild but I hope, this living collection and the sites and blogs I refer to will give you some visual suggestions and tips.

Content

Categories

Sharing

ShareThis Buttons

File(s): sharethis_buttons.html
Description: ShareThis Buttons Widget
Source: sharethis.com
Target(s): mh-personally.blogspot.de
ShareThis buttons

ShareThis Sidebar

File(s): sharethis_sidebar_head.html, sharethis_sidebar_body.html
Description: ShareThis Sidebar

Place the content of sharethis_sidebar_head.html in the <head> section and the content of sharethis_sidebar_body.html at the bottom of the <body> section.

Source: sharethis.com
Target(s): m-hemp.de
ShareThis sidebar

When you click on the last green ShareThis icon a pop-up window will be displayed where you can select further sharing options.
Some parts of the informations to be shared from the actual site and previewed in this pop-up window (e.g. the title, URL, a short site description and a thumbnail image) can be changed using so-called "Open Graph Tags". These are metatags which also have to be included in the <head> section.
Social Media Buttons
For more options to modify and share these and further informations refer to the Sharethis article Share Properties and Sharing Custom Information.

Social Media

Social Media Buttons (1)

File(s): social_media_buttons_1.html
Description: Social Media Buttons
Source (Code): marco-it.de
Source (Images): dreamstale.com
Target(s): m-hemp.de
Social Media Buttons

Social Media Buttons (2)

File(s): social_media_buttons_2.html
Description: Social Media Buttons
Source (Code): marco-it.de
Source (Images): dreamstale.com
Target(s): mh-personally.blogspot.de
Social Media Buttons

Social Media Profiles

[[DESCRIPTION FOLLOWS]]

History

05.05.2015 v0.02

  • Update: ShareThis metatags added to sharethis_sidebar_head.html.
  • New: Added googleplus_widget.html (description follows).

04.05.2015 v0.01

  • New: Added sharethis_buttons.html, sharethis_sidebar_body.html and sharethis_sidebar_head.html.
  • New: Added social_media_buttons_1.html and social_media_buttons_2.html.

Authors

Michael Hemp | marco.IT - Marketing & Consulting

Credits

Templates and Images

  • blogger.com - blog-publishing service bought and hosted by Google
  • weebly.com - drag-and-drop website builder and web-hosting service
  • sharethis.com - among other services ShareThis provides social sharing widgets for websites, blogging platforms and more
  • dreamstale.com - free and premium backgrounds, icons, templates and more

Markdown

License

Content from source marco-it.de which has been originally created from the scratch by Michael Hemp is public domain (CC0 1.0).
For licenses for all further content based on other sources please refer to the license agreements on sources sites. If possible it will be sub-licensed under the same license the source has been agreed to.

Michael Hemp | marco.IT - Marketing & Consulting | Contact | Impressum | Rev. 05.05.2015

Raw
googleplus_widget.html
<!-- Fügen Sie dieses Tag an der Stelle ein, an der die Widget erscheinen soll. -->
<div class="g-person" data-width="300" data-href="//plus.google.com/u/0/104421174404766811789" data-showtagline="false" data-showcoverphoto="false" data-rel="author"></div>
<!-- Fügen Sie dieses Tag nach dem letzten Widget-Tag ein. -->
<script type="text/javascript">
window.___gcfg = {lang: 'de'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/platform.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
Raw
sharethis_buttons.html
<!-- MHE: sharethis_buttons -->
<span id="st_finder"></span>
<script src="http://w.sharethis.com/widget/stblogger2.js"></script>
<script>
var switchTo5x= true;
stBlogger2.init("http://w.sharethis.com/button/buttons.js", {
"googleplus":["large","Google ",""],
"facebook":["large","Facebook",""],
"twitter":["large","Tweet",""],
"pinterest":["large","Pinterest",""],
"linkedin":["large","LinkedIn",""],
"xing":["large","Xing",""],
"diigo":["large","Diigo",""],
"delicious":["large","Delicious",""],
"stumbleupon":["large","StumbleUpon",""],
"blogger":["large","Blogger",""],
"sharethis":["large","ShareThis",""]});
var f = document.getElementById("st_finder");
var c = f.parentNode.parentNode.childNodes;
for (i=0;i<c.length;i++) {
try { c[i].style.display = "none"; }
catch(err) {}}
</script>
<!-- MHE: sharethis_buttons -->
Raw
sharethis_sidebar_body.html
<!-- MHE: sharethis_sidebar_body -->
<script>
stLight.options({
publisher: "109c758e-bd39-4ffc-aa8e-f95dc642875c",
doNotHash: false,
doNotCopy: false,
hashAddressBar: false});
</script>
<script>
var options = {
"publisher": "109c758e-bd39-4ffc-aa8e-f95dc642875c",
"position": "left",
"ad": {
"visible": false,
"openDelay": 5,
"closeDelay": 0},
"chicklets": {"items": [
"googleplus",
"facebook",
"twitter",
"pinterest",
"linkedin",
"xing",
"diigo",
"delicious",
"stumbleupon",
"blogger",
"sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>
<!-- MHE: sharethis_sidebar_body -->
Raw
sharethis_sidebar_head.html
<!-- MHE: sharethis_sidebar_head -->
<meta property="og:title" content="Homepage of Michael Hemp" />
<meta property="og:description" content="IT Professional + DJ, happily married, two daughters and even grandpa... Take a look on my website for more informations" />
<meta property="og:url" content="http://m-hemp.de/#ueber_mich_about" />
<meta property="og:image" content="http://shared.m-hemp.de/IMAGES/michael_hemp.jpg" />
<script>var switchTo5x=true;</script>
<script src="http://w.sharethis.com/button/buttons.js"></script>
<script src="http://s.sharethis.com/loader.js"></script>
<!-- MHE: sharethis_sidebar_head -->
Raw
social_media_buttons_1.html
<!-- MHE: social_media_buttons_1 -->
<!-- Blog "MICHAEL HEMP - personally ... but not private!" -->
<a href="http://mh-personally.blogspot.de" title="Blog" target="_blank"><img src="//shared.m-hemp.de/icons/Blogger.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Spacer -->
&nbsp;&nbsp;&nbsp;&nbsp;
<!-- Google+ (Michael Hemp) -->
<a href="http://plus.google.com/+michaelhemp" title="Google+" target="_blank"><img src="//shared.m-hemp.de/icons/GooglePlus.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Facebook (Michael Hemp) -->
<a href="http://facebook.com/dj.xcite.wi" title="Facebook" target="_blank"><img src="//shared.m-hemp.de/icons/Facebook.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Twitter (MH_personally -->
<a href="http://twitter.com/mh_personally" title="Twitter" target="_blank"><img src="//shared.m-hemp.de/icons/Twitter.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Pinterest (Michael Hemp) -->
<a href="http://www.pinterest.com/michael_hemp" title="Pinterest" target="_blank"><img src="//shared.m-hemp.de/icons/Pinterest.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Spacer -->
&nbsp;&nbsp;&nbsp;&nbsp;
<!-- LinkedIn (Michael Hemp) -->
<a href="http://linkedin.com/in/mhemp" title="LinkedIn" target="_blank"><img src="//shared.m-hemp.de/icons/LinkedIn.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- XING (Michael Hemp) -->
<a href="http://xing.com/profile/michael_hemp" title="XING" target="_blank"><img src="//shared.m-hemp.de/icons/XING.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- MHE: social_media_buttons_1 -->
Raw
social_media_buttons_2.html
<!-- MHE: social_media_buttons_2 -->
<div style="padding:0;text-align:right">
<div style="float:left;padding:0;margin:0">
<!-- RSS Feed Subscription (Blog "MICHAEL HEMP - personally ... but not private!") -->
<a href="http://feedpress.me/mh-personally-blog" title="RSS feed" rel="alternate" type="application/rss+xml" target="_blank"><img src="//shared.m-hemp.de/icons/Feed.png" alt="" width="32" height="32" style="border:0"/></a>
</div>
<!-- Google+ (Michael Hemp) -->
<a href="http://plus.google.com/+michaelhemp" title="Google+" target="_blank"><img src="//shared.m-hemp.de/icons/GooglePlus.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Facebook (Michael Hemp) -->
<a href="http://facebook.com/dj.xcite.wi" title="Facebook" target="_blank"><img src="//shared.m-hemp.de/icons/Facebook.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Twitter (MH_personally) -->
<a href="http://twitter.com/mh_personally" title="Twitter" target="_blank"><img src="//shared.m-hemp.de/icons/Twitter.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- Pinterest (Michael Hemp) -->
<a href="http://www.pinterest.com/michael_hemp" title="Pinterest" target="_blank"><img src="//shared.m-hemp.de/icons/Pinterest.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- LinkedIn (Michael Hemp) -->
<a href="http://linkedin.com/in/mhemp" title="LinkedIn" target="_blank"><img src="//shared.m-hemp.de/icons/LinkedIn.png" alt="" width="32" height="32" style="border:0"/></a>
<!-- XING (Michael Hemp) -->
<a href="http://xing.com/profile/michael_hemp" title="XING" target="_blank"><img src="//shared.m-hemp.de/icons/XING.png" alt="" width="32" height="32" style="border:0"/></a>
</div>
<!-- MHE: social_media_buttons_2 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment