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:

mariemosley / codepen_button.html
Last active August 15, 2017 14:57 — forked from junyper/codepen_button.html
codepen button
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 November 5, 2016 09:25
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 February 2, 2017 15:24
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 December 31, 2015 13:09
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 December 16, 2013 15:10
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 August 7, 2013 21:37
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 September 19, 2012 12:42
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 October 8, 2015 07:57
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 September 28, 2022 15:17 — 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>');