Back to Top
Big Cartel Blog Page Template

Blog

Page Template

Suitable for Any Theme

Free

The Blog page is displayed in Aarcade Big Cartel theme previews as an example of a custom page.

Additionally, this page uses Aarcade’s script to import blog posts into a page. It also includes inbuilt custom options and dedicated styles to allow control over the blog page layout, e.g. show/hide sidebar, use sharing tools, set date format, show/hide Twitter widget, etc.

Because the Blog page uses standalone code and dedicated Aarcade-hosted JavaScript, it can be applied to any Big Cartel theme.

Special Notes

1. This may not be the best method for incorporating a blog into your site, especially if you are happy with the appearance of your blog. As an alternative to using this Blog page, you can link directly to your blog as explained in the support article How do I add a blog to my Big Cartel shop?

2. Tumblr and other blog providers have a delay between the publishing of a new post and the update of the RSS feed. Additionally the script that imports your posts may cache results for up to an hour. You may therefore often see a delay between publishing a post at your original blog and seeing it on your Big Cartel Blog page.

See installation instructions below.

Instructions

Install Page

Create a new custom page, as detailed in the support article How do I add a page to my Big Cartel shop?, and name it “Blog” or a relevant name of your choice.

Note: You can display the Blog on the home page of an Aarcade theme by creating a new custom page named x ic home. An x ic home page replaces all home page content (refer to Insert Content for more information on x ic pages).

IMPORTANT

Switch to HTML edit mode before proceeding – refer How do I switch to HTML edit mode?

Copy all of the code in the code box below and paste it into your new custom page content area.

{{ ## START CUSTOM OPTIONS ## }}

{{ REFER TO NOTES AT: http://ok.aarcadethemes.com/product-item/blog-page/ }}

{{ BLOG DETAIL }}

{% assign blog_feed_url = 'http://featherw8.tumblr.com/rss' %}
{% assign blog_link_url = 'http://featherw8.tumblr.com/' %}
{% assign blog_link_text = 'Read more at our blog site →' %}
{% assign number_of_entries = '10' %}

{{ FORMAT OPTIONS }}

{% assign blog_link_behaviour = 'newwindow' %}
{% assign post_date_format = 'jS M, Y' %}
{% assign blog_width = '' %}
{% assign align_blog_to_center = 'no' %}

{{ NETWORK AND SHARING OPTIONS }}

{% assign share_blog_entries_tool = 'addthis' %}
{% assign addthis_pulisher_id = '' %}
{% assign share_tool_style = '1' %}

{{ SIDEBAR OPTIONS }}

{% assign display_sidebar = 'yes' %}
{% assign username_for_twitter_widget = '' %}
{% capture sidebar_content %}
<h3>This Is A Sidebar</h3>

Use the blog page custom options to add content to your sidebar, display widgets or hide the sidebar.
{% endcapture %}

{{ #### END CUSTOM OPTIONS #### }}

<div id="blog_content" class="wrp{% if display_sidebar == 'yes' %} with_side{% endif %}{% if blog_width != blank %} def_width{% endif %}">
<div class="inner" style="{% if align_blog_to_center == 'yes' %}margin: 0 auto;{% endif %}{% if blog_width != blank %}width:{{ blog_width }}px;{% endif %}">
<div id="post_jar">
<div id="loading_blog">Loading blog posts...</div>
</div>
{% if display_sidebar == 'yes' %}
<div id="side_jar" style="display:none">
{% if sidebar_content != blank %}
<div id="top_box">
{{ sidebar_content | paragraphs }}
</div>
{% endif %}
</div>
{% endif %}
<div class="clr"></div>
</div>
</div>

<script type="text/javascript">
var feedURL = '{{ blog_feed_url | strip_html | replace: "'", "\\'" }}';
var numEntries = '{{ number_of_entries | strip_html | replace: "'", "\\'" }}';
var blogURL = '{{ blog_link_url | strip_html | replace: "'", "\\'" }}';
var blogLink = '{{ blog_link_text | strip_html | replace: "'", "\\'" }}';
var linkAtts = '{{ blog_link_behaviour | strip_html | replace: "'", "\\'" }}';
var dateFormat = '{{ post_date_format | strip_html | replace: "'", "\\'" }}';
var shareEntries = '{{ share_blog_entries_tool | strip_html | replace: "'", "\\'" }}';
var addThisID = '{{ addthis_pulisher_id | strip_html | replace: "'", "\\'" }}';
var shareFormat = '{{ share_tool_style | strip_html | replace: "'", "\\'" }}';
</script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://c301955.r55.cf1.rackcdn.com/js-aarcade-blogpg.js"></script>
Set Custom Options

Review and set the Blog page Custom Options, located at the top of the blog page code, referring to the following notes (for more information on using custom options, refer to the last 3 sections of the support article How do I use the Custom Options for my Big Cartel theme?):

blog_feed_url

Defines the feed URL for the blog you wish to import. Your feed URL may also be referred to as an RSS or Atom URL.

Valid values are any valid and active feed URL and must begin with ‘http://’. For example:

{% assign blog_feed_url = 'http://my-blog-name.tumblr.com/rss' %}

If your feed link is not valid or your feed is unavailable, your blog page will display the message “Sorry, the blog is currently unavailable. Please check back later.“.

blog_link_url

Defines the main page URL for the blog you wish to import. This URL is used to link to your blog at the end of the imported blog entries.

Valid values are any valid URL and must begin with ‘http://’. For example:

{% assign blog_link_url = 'http://my-blog-name.tumblr.com' %}

Leave the value blank if you do not wish to display a link to your blog.

blog_link_text

Defines the text used for the blog link described above. This value is only relevant if a valid URL has been entered in the blog_link_url setting.

Valid values are any plain text. For example:

{% assign blog_link_text = 'View more entries in our blog archive!' %}

number_of_entries

Defines the number of blog entries to be imported into your blog page. Note that most blog feeds only provide the latest 10 to 15 posts, so setting this value higher than 10 may not necessarily result in more than 10 posts being imported.

Valid values are any positive integer. For example:

{% assign number_of_entries = '5' %}

blog_link_behaviour

Defines how post title links and the main blog link behave. Valid values are:

  • newindow – post title links and main blog link opens in a new browser window
  • normal – post title links and main blog link opens in the current browser window
  • none – post title links are disabled and main blog link opens in a new browser window

For example:

{% assign blog_link_behaviour = 'none' %}

post_date_format

Defines the format for the displayed post date. Valid values are any plain text including formatting constants from the following standard date codes:

format character Description Example returned values
Day
d Day of the month, 2 digits with leading zeros 01 to 31
D A textual representation of a day, three letters Mon through Sun
j Day of the month without leading zeros 1 to 31
l (lowercase ‘L’) A full textual representation of the day of the week Sunday through Saturday
S English ordinal suffix for the day of the month, 2 characters st, nd, rd or
th. Works well with j
Month
F A full textual representation of a month, such as January or March January through December
m Numeric representation of a month, with leading zeros 01 through 12
M A short textual representation of a month, three letters Jan through Dec
n Numeric representation of a month, without leading zeros 1 through 12
Year
Y A full numeric representation of a year, 4 digits Examples: 1999 or 2003
y A two digit representation of a year Examples: 99 or 03

For example:

{% assign post_date_format = 'm / d / y' %}

which today would give:

06 / 27 / 17

For example:

{% assign post_date_format = 'l, jS F, Y' %}

which today would give:

Tuesday, 27th June, 2017

blog_width

Defines the width, in pixels, of the blog container. This may be useful if the blog entries look too wide and/or you wish to center the blog container using the following custom option.

Valid values are any positive integer. For example:

{% assign blog_width = '600' %}

align_blog_to_center

Aligns the blog container to the center of the page. This will only work if a valid value has been entered in the blog_width setting, and that width is less than the total page width.

Valid values are ‘yes’ or ‘no’. For example:

{% assign align_blog_to_center = 'yes' %}

share_blog_entries_tool

Defines the type of sharing tools to display for each blog entry. The URL that will be shared is the original blog post permalink. Valid values are:

  • any combination of (separated with a space):
    • like – Facebook Like button
    • share – Facebook Share button
    • tweet – Twitter Tweet button
    • pinit – Pinterest Pin It button
    • email – send an email button
    • plus – Google Plus button
    • addthis – AddThis multi-share option button

For example, to display a Like button and an AddThis button:

{% assign share_product_tools = 'like addthis' %}

addthis_pulisher_id

Enter your AddThis publisher ID to allow yourself to log and view analytics for the use of your blog entry sharing tools. To get an AddThis publisher ID, register at AddThis.

share_tool_style

Defines the style of icons displayed for the sharing tool icons. Valid values are 0 – which displays text links instead of icons – or a positive integer from 1 to 8.

For example:

{% assign share_tool_style = '3' %}

display_sidebar

Hides or displays a sidebar on the right of the Blog page. Valid values are ‘yes’ or ‘no’. For example:

{% assign display_sidebar = 'yes' %}

sidebar_content

Defines content to be displayed in the sidebar. This is only applicable if the display_sidebar option has been set to ‘yes’.

Valid values are any text or HTML. For example:

{% capture sidebar_content %}
<h3>View my Posts By Tag</h3>
<ul>
<li><a href="http://my-blog-name.tumblr.com/tagged/art">Art</a></li>
<li><a href="http://my-blog-name.tumblr.com/tagged/fashion">Fashion</a></li>
<li><a href="http://my-blog-name.tumblr.com/tagged/fun">Fun</a></li>
</ul>
{% endcapture %}

To display social widgets refer to the tools provided by your social network application. For example:

So, for example, you might create your Twitter widget code using the link above and display it in your sidebar by pasting the code in your sidebar_content setting as follows:

{% capture sidebar_content %}
<h3>Something in a heading</h3>

Some text followed by my Twitter widget below..

<a class="twitter-timeline" href="https://twitter.com/twitter" data-widget-id="3619556225114">Tweets by @twitter</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Some more text after if I want to.
{% endcapture %}

Click the Save link at the top of the customise area when you are done editing your Blog page code.

OPTIONAL: Customising Blog Page Fonts

Install Font Styles

Copy all of the style code in the code box below and paste it into your CSS custom style code area. To locate your custom style code area, refer to support article Where do I add custom style coding in my Big Cartel theme controls?

/* =========================================================
============================================================

START - AARCADE IMPORT BLOG PAGE

REFER: http://ok.aarcadethemes.com/product-item/blog-page/

EDIT FONT SIZES STARTING HERE

============================================================
========================================================= */

#blog_content #loading_blog,
#blog_content #view_blog {
font-size: 13px !important;
}
/* Entry Title */
#blog_content .post_title > h2 {
font-size: 16px !important;
}
/* Entry Date */
#blog_content .post_title > p {
font-size: 11px !important;
}
/* Entry Content */
#blog_content .post_content {
font-size: 12px !important;
}
/* Entry Content Heading */
#blog_content .post_content > h1 {
font-size: 17px !important;
}
#blog_content .post_content > h2 {
font-size: 16px !important;
}
#blog_content .post_content > h3 {
font-size: 15px !important;
}
#blog_content .post_content > h4 {
font-size: 14px !important;
}
#blog_content .post_content > h5 {
font-size: 13px !important;
}
#blog_content .post_content > h6 {
font-size: 12px !important;
}
/* Sidebar */
#blog_content.with_side #side_jar,
#blog_content.with_side #side_jar p,
#blog_content #tweet_box .twtr-widget.twtr-widget-profile .twtr-hd > h4,
#blog_content #tweet_box .twtr-widget.twtr-widget-profile {
font-size: 11px !important;
}
/* Sidebar Heading */
#blog_content.with_side #side_jar h1,
#blog_content.with_side #side_jar h2,
#blog_content.with_side #side_jar h3,
#blog_content.with_side #side_jar h4,
#blog_content.with_side #side_jar h5,
#blog_content.with_side #side_jar h6 {
font-size: 12px !important;
}
/* Sidebar Lists */
#blog_content.with_side #side_jar ul {
font-size: 11px !important;
}

/* =======================================
END OF FONT SIZES
======================================= */
Edit Font Styles

Edit the styles as required (note that you can add font-family and other font styles to the style groups) and click the Save link at the top of the customise area when you are done.

OPTIONAL: Customising Blog Page Colours

Install Colour Styles

Copy all of the style code in the code box below and paste it into your CSS custom style code area. To locate your custom style code area, refer to support article Where do I add custom style coding in my Big Cartel theme controls?

/* =========================================================
============================================================

START - AARCADE IMPORT BLOG PAGE

REFER: http://ok.aarcadethemes.com/product-item/blog-page/

EDIT COLOURS STARTING HERE

============================================================
========================================================= */

/* Entry Title */
#blog_content .post_title > h2,
#blog_content .post_title > h2 > a {
color: #222222 !important;
}
/* Entry Date */
#blog_content .post_title > p {
color: #999999 !important;
}
/* Entry Text */
#blog_content .post_content {
color: #444444 !important;
}
/* Entry Headings */
#blog_content .post_content > h1,
#blog_content .post_content > h2,
#blog_content .post_content > h3,
#blog_content .post_content > h4,
#blog_content .post_content > h5,
#blog_content .post_content > h6 {
color: #666666 !important;
}
/* Entry Link */
#blog_content .post_content a,
#blog_content #view_blog a {
color: #2583ad !important;
}
/* Entry Link Hover */
#blog_content .post_content a:hover,
#blog_content #view_blog a:hover {
color: #2583ad !important;
}
/* Entry Bottom Border */
#blog_content .entry_share_container {
border-color: #cccccc !important;
}
/* Sidebar */
#blog_content.with_side #side_jar,
#blog_content.with_side #side_jar .twtr-tweet .twtr-tweet-text,
#blog_content.with_side #side_jar .twtr-tweet .twtr-tweet-text p {
color: #666666 !important;
}
/* Sidebar Headings */
#blog_content.with_side #side_jar h1,
#blog_content.with_side #side_jar h2,
#blog_content.with_side #side_jar h3,
#blog_content.with_side #side_jar h4,
#blog_content.with_side #side_jar h5,
#blog_content.with_side #side_jar h6 {
color: #666666 !important;
}
/* Sidebar Link */
#blog_content.with_side #side_jar a,
#blog_content.with_side #side_jar .twtr-tweet a {
color: #2583ad !important;
}
/* Sidebar Link Hover */
#blog_content.with_side #side_jar a:hover,
#blog_content.with_side #side_jar .twtr-tweet a:hover {
color: #2583ad !important;
}
/* Sidebar Twitter Action Link */
#blog_content.with_side #side_jar .twtr-tweet .twtr-tweet-text em a {
color: #aaaaaa !important;
}
/* Sidebar Twitter Action Link Hover */
#blog_content.with_side #side_jar .twtr-tweet .twtr-tweet-text em a:hover {
color: #777777 !important;
}

/* =======================================
END OF COLOURS
======================================= */
Edit Colour Styles

Edit the styles as required and click the Save link at the top of the customise area when you are done.