Skip to content

Instantly share code, notes, and snippets.

Keybase proof

I hereby claim:

  • I am mariemosley on github.
  • I am mariemosley (https://keybase.io/mariemosley) on keybase.
  • I have a public key ASDax8Z3lR9Q9ytuvPqEIqNJf9ZmJLlZP6J4I3JHjbGRHwo

To claim this, I am signing this object:

@mariemosley
mariemosley / codepen_button.html
Last active August 15, 2017 14:57 — forked from junyper/codepen_button.html
codepen button
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<form
@mariemosley
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: http://www.codeitpretty.com/2015/01/a-pinterest-gadget-for-blogger-updated.html Unminified version at: https://gist.github.com/mariemosley/27fdb7e8a171eec16dae
<!-- BEGIN CODE IT PRETTY PINTEREST GALLERY -->
<style>
#pinterest-gallery {
overflow: auto;
width: 210px;
list-style: none;
}
@mariemosley
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: http://www.codeitpretty.com/2014/10/new-related-posts-gallery-for-blogger.html
@mariemosley
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.
<script>
$(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
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.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></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
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.
<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
mariemosley / twitter-cards-blogger
Created September 19, 2012 12:42
Twitter cards markup for Blogger/Blogspot
<!-- 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
mariemosley / grab-buttons.html
Last active October 8, 2015 07:57
Simple HTML grab button for blogs
<!--grab button header -->
<div class="grab-button" style="width: 150px; margin: 0 auto;">
<img src="http://www.codeitpretty.org/pic.png" 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
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
<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="http://pinterest.com/pin/create/button/?url=' + $permalink + '&media=' + $(this).attr('src') + '&description=' + $title + '" class="pin-it-button" count-layout="horizontal"></a>');
});
});