Skip to content

Instantly share code, notes, and snippets.


Keybase proof

I hereby claim:

  • I am mariemosley on github.
  • I am mariemosley ( on keybase.
  • I have a public key ASDax8Z3lR9Q9ytuvPqEIqNJf9ZmJLlZP6J4I3JHjbGRHwo

To claim this, I am signing this object:

View codepen_button.html
<!DOCTYPE html>
<script src=""></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
mariemosley / pinterest-on-blogger.html
Last active Nov 5, 2016
A Pinterest gallery designed for use in an HTML/JavaScript gadget on Blogger. Blogger installation tutorial at: Unminified version at:
View pinterest-on-blogger.html
#pinterest-gallery {
overflow: auto;
width: 210px;
list-style: none;
mariemosley / blogger-related-posts
Last active Feb 2, 2017
Related posts thumbnail gallery at the bottom of Blogger posts. User options section begins at line 29. Installation tutorial at:
View blogger-related-posts
mariemosley / pin-it-first-image-blogger.js
Last active Dec 31, 2015
Pin it button centered below the first image of every post in Blogger. Requires jQuery (1.7.1 earliest version tested). Only recommended for blogs that center the first image. This code skips images under 300px wide. Change the 300 in line 9 to another number if you'd like to change that.
View pin-it-first-image-blogger.js
$(document).ready(function() {
$('.entry-content').each(function() {
var image = $(this).find('img').first();
var permalink = image.parents('.post-outer').find('.timestamp-link').attr('href') || $(location).attr('href');
var title = image.parents('.post-outer').find('.entry-title').text();
var width = image.width();
if (width >= 300) {
$('.separator a').removeAttr('imageanchor style');
mariemosley / blogger-click-to-tweet
Created Dec 16, 2013
jQuery Click to Tweet - written for Blogger but can be modified for other platforms. In use: add the class "tweetable" to the element you'd like to make into a tweetable sentence.
View blogger-click-to-tweet
<script src="//"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.tweetable').each(function() {
var sentence = $(this);
var permalink = sentence.parents('.post-outer').find('.timestamp-link').attr('href') || $(location).attr('href');
var tweetable = sentence.text();
var result = encodeURIComponent(tweetable);
var link = encodeURIComponent(permalink);
mariemosley / blog-ad-rotator
Created Aug 7, 2013
HTML/JavaScript ad rotator for blogs. Drop the + in line 16 to show one ad at a time.
View blog-ad-rotator
<script type="text/javascript">
var ads = [];
ads[0] = '<a href="FIRST SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FIRST SPONSOR IMAGE URL HERE" alt="FIRST SPONSOR NAME" title="FIRST SPONSOR NAME" width="125" height="125"></a>'
ads[1] = '<a href="SECOND SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="SECOND SPONSOR IMAGE URL HERE" alt="SECOND SPONSOR NAME" title="SECOND SPONSOR NAME" width="125" height="125"></a>'
ads[2] = '<a href="THIRD SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="THIRD SPONSOR IMAGE URL HERE" alt="THIRD SPONSOR NAME" title="THIRD SPONSOR NAME" width="125" height="125"></a>'
ads[3] = '<a href="FOURTH SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FOURTH SPONSOR IMAGE URL HERE" alt="FOURTH SPONSOR NAME" title="FOURTH SPONSOR NAME" width="125" height="125"></a>'
ads[4] = '<a href="FIFTH SPONSOR URL HERE" target="_blank" rel="nofollow"><img src="FIFTH SPONSOR IMAGE URL HERE" alt="FIFTH SPONSOR NAME" title="FIFTH SPONSOR NAME" width="125" heig
mariemosley / twitter-cards-blogger
Created Sep 19, 2012
Twitter cards markup for Blogger/Blogspot
View twitter-cards-blogger
<!-- twitter card details -->
<meta content='summary' name='twitter:card'/>
<meta content='@YOUR-TWITTER-NAME' name='twitter:site'/>
<meta expr:content='data:blog.url' name='twitter:url'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image'/>
<!-- end twitter card details -->
mariemosley / grab-buttons.html
Last active Oct 8, 2015
Simple HTML grab button for blogs
View grab-buttons.html
<!--grab button header -->
<div class="grab-button" style="width: 150px; margin: 0 auto;">
<img src="" alt="Grab button for YOUR BLOG NAME" width="150" height="150" />
<!--end grab button header -->
<!-- button code box -->
<div style="margin: 0;
padding: 0;
border: 1px solid gray;
width: 150px;
height: 150px;
mariemosley / pinterest.js
Last active Nov 26, 2018 — forked from 65/pinterest.js
pinterest buttons on every image in a Blogger/Blogspot post using jquery
View pinterest.js
<script type="text/javascript">
$(document).ready(function() {
$('.entry-content img').each(function(){
$permalink = $(this).parents('.post-outer').find('.timestamp-link').attr('href') || $(location).attr('href');
$title = $(this).parents('.post-outer').find('.entry-title').text();
$(this).addClass('pinme').after('<a href="' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $title + '" class="pin-it-button" count-layout="horizontal"></a>');
You can’t perform that action at this time.