Gazette – Blogger Template

HI, WELCOME TO GAZETTE TEMPLATE PAGE.

If you follow the instructions, you’ll end up with a design that resembles the demo. I recommend having the demo site opened in a different tab and use it as a reference.

CHANGELOG
Version: 2.0
Release date: April 2016
Changes:
– New slider with a “Read more” button.
– Customizable drop-down menu, no need to edit HTML.
– Search box integrated into the menu.
– New Instagram gadget, it shows likes and comments on hover.
– Longer posts excerpts/snippets.
– Small codes fixes.
Version:1.0
Release date: June 2015

LET’S START!

1. INSTALLATION

Go to THEME > Click on the three dots at the right > Restore > Upload the .xml file.

2. MENU SETUP

Go to LAYOUT > MAIN MENU > EDIT.
In the NEW SITE NAME field, add the title you want to appear on the menu (e.g. HOME). In the NEW SITE URL field, add the page URL, don’t forget to add the HTTP:// prefix. Click on ADD LINK.
To create a drop-down menu, add the parent item name, in the URL field add a hashtag (#). To create the child item, add an underscore (_) before the title name and add the page URL, make sure the child items are placed under the parent item, see example below:

I recommend to start backward, so you don’t have to move all items once you’re done, otherwise, you’ll have to use the arrows to rearrange them.
When you’re happy with the end result, SAVE changes.

3. SLIDER SETUP

Copy the code below:

<div class="cycle-slideshow" data-cycle-manual-speed="700" data-cycle-random="true" data-cycle-slides="li" data-cycle-speed="1400"><script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showgalleryposts&amp;max-results=80"></script>
<div class="cycle-prev"></div>
<div class="cycle-next"></div>
</div>

Open the SLIDER gadget and paste the code, SAVE.

4. WELCOME TEXT GADGET

Open the WELCOME TEXT gadget, click on EDIT HTML, write your welcome text and SAVE. If you want to include a profile image, add this line before or after the text:

<img src="IMAGE-DIRECT-URL" />

You need to upload your image to an image hosting like this, and grab the DIRECT LINK.

5. SOCIAL ICONS SETUP

Open the SOCIAL ICONS gadget, add your social network name and link, click the ADD LINK button and repeat with each social icon you need. Use the arrows to rearrange the icons order, remove the gadget title and SAVE.

6.MAILCHIMP FORM SETUP

Copy the code below:

<div id="mc_embed_signup">
<form action="ADD-YOUR-FORM-ACTION" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
<div id="mc_embed_signup_scroll">
      <div class="mc-field-group">
      <input type="email" value="" placeholder="Email Address*" name="EMAIL" class="required email" id="mce-EMAIL" />
      </div>
      <div class="mc-field-group">
      <input type="text" value="" placeholder="Name*" name="FNAME" class="" id="mce-FNAME" />
      </div>
      <div class="mc-field-group">
      <input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" />
      <div id="mce-responses" class="clear">
      <div class="response" id="mce-error-response" style="display:none">
      </div>
      <div class="response" id="mce-success-response" style="display:none">
      </div>
      </div>    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
      <div style="position: absolute; left: -5000px;"><input type="text" name="b_0a398fdb62eeb3b2aa8486818_2c2c97b1d9" tabindex="-1" value="" />
      </div>
      </div>
</div>
</form>
</div>

Open the NEWSLETTER gadget, paste the code and add your MailChimp form action, edit the gadget title and SAVE.

7. INSTAGRAM WIDGET SETUP

Copy the code below:

<script>
// <![CDATA[
 var feed = new Instafeed({
        get:"user",
	userId: USER-ID,
	accessToken:"ACCESS-TOKEN",
        limit: 9,
        resolution:"standard_resolution",
        template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="insta-likes"><div style="display: table; vertical-align: middle; height: 100%; width: 100%;"><span style="display: table-cell; vertical-align: middle; height: 100%; width: 100%;">{{likes}} <i class="fa fa-heart"></i>{{comments}} <i class="fa fa-comment"></i></span></div></div></a></li>'
      });
      feed.run();
// ]]>
</script>
<div id="instafeed"></div>

Open the INSTAGRAM gadget and paste the code.
To get your USER ID and ACCESS TOKEN, go to this page while you are logged into your Instagram account (desktop version). Click on “Get Access Token”, carefully replace the ACCESS-TOKEN in the previous code with your own value and the USER-ID, which is the first set of numbers of the token, until the first dot(.) and SAVE.

8.OTHER GADGETS

FEEDBURNER EMAIL SUBSCRIPTION
Open the EMAIL SUBSCRIPTIONS gadget, edit the title and SAVE. If you use MailChimp form, remove this gadget.

POPULAR POSTS
Open the MOST READ gadget > Select the time frame (7 days = more frequent updates), tick the image thumbnail checkbox and up to 3 posts.

ARCHIVES
Open the ARCHIVES gadget, select the option “Flat list” and SAVE.

MOBILE SEARCH
Copy the code below:

<div class='searchbox-mobile'>
<form _lpchecked='1' action='/search' class='search-form' id='searchform' method='get'>
<fieldset>
<input id='search' name='q' onfocus='if(this.value==&apos;Search&apos;)this.value=&apos;&apos;;' onwebkitspeechchange='transcribe(this.value)' placeholder='KEYWORD + HIT ENTER' style='outline:none;' type='text' value='' x-webkit-speech=''/>
</fieldset>
</form>
</div>

Open the SEARCH BOX gadget, paste the code and SAVE.

9. RECOMMENDED BLOG SETTINGS

10. CUSTOM COLORS + FONTS

Go to TEMPLATE > CUSTOMIZE.

Select ADVANCED and change the colors and fonts in each option. Please, note that font changes can’t be reversed, make sure you’re happy with the end result before saving changes.

11. ENABLE RESPONSIVE DESIGN

Go to TEMPLATE> Click on the Mobile options.

Select “No. Show desktop template on mobile devices.” and SAVE.