Skip to content

Instantly share code, notes, and snippets.

@mariemosley
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="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 / 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
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="//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 / 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
<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 / 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
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: http://www.codeitpretty.com/2015/01/a-pinterest-gadget-for-blogger-updated.html Unminified version at: https://gist.github.com/mariemosley/27fdb7e8a171eec16dae
View pinterest-on-blogger.html
<!-- BEGIN CODE IT PRETTY PINTEREST GALLERY -->
<style>
#pinterest-gallery {
overflow: auto;
width: 210px;
list-style: none;
}
@mariemosley
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: http://www.codeitpretty.com/2014/10/new-related-posts-gallery-for-blogger.html
View blogger-related-posts
View codepen_button.html
<!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
View keybase.md

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 / Pinterest Gadget for Blogger
Last active Aug 22, 2018 — forked from richardmackney/Instagram RSS Image Feed
Display Pinterest images in a "gadget" for Blogspot/Blogger blogs
View Pinterest Gadget for Blogger
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
/**
* Plugin: jquery.zRSSFeed
*
* Version: 1.0.1
* (c) Copyright 2010, Zazar Ltd
*
* Description: jQuery plugin for display of RSS feeds via Google Feed API
* (Based on original plugin jGFeed by jQuery HowTo)
You can’t perform that action at this time.