Version: 1.0 | Dated: 5 Jan 2016
Thank you for Downloading my template. Please Read the documentation carefully, If you still have any problem contact me at http://www.bthemez.com. Thanks so much
Follow the steps below to get started with your Site Template:
Follow the steps below to get started with your Site Template:
1. Backup & Uploading
- Unzip the Template.zip file.
- On Blogger Dashboard Click Template.
- Click on Download Full Template to keep your old template.
- Click Browse... button. Find where the “Memento-premium.xml” file location.
- Then Click Upload.
- Edit mobile Preveiw. (follow images).
![](images/1.png)
![](images/2.png)
Blogger Setting
After installing the theme, there are minimun settings to make all widgets work fine in this template.
2. Blog Feed
- On Blogger Dashboard Click Settings.
- Click Other.
- In Site Feed > Allow Blog Feed Choose Full.
- Then Click Save settings.
![](images/4.png)
Undefined undefined Problem
2. Date undefined problem
- On Blogger Dashboard Click Settings.
- Click Language and formatting.
- change Time Stamp > only Choose mm/dd/yyyy.
- Then Click Save settings.
![](images/date.jpg)
Setting Main Blog Part
- On Blogger Dashboard Click Layout.
- Click Edit on Blog Posts Widget.
- Change it to look like that image.
- Click Save.
![](images/blog.jpg)
Top Navigation Pages
- On Blogger Dashboard Click Layout .
- Click Edit on pages.
- and just click on external link and add the links
- Click Save.
![](images/pages.png)
Setting Up Meta Tags
For SEO Purpose, Meta Tags are very important for your site. Search robots use this tags to index better and display better on search result.If you don't know what these tags are and how you can use it in theme. Just follow this simple guide, we recommend you to use free online tool like Jetseotools.com to generate your Meta tags.
![](images/meta.jpg)
- It's very simple, all you have to do is visit the link above and fill all the necessary details that describes your site and what keyword you want.
- Click Generate Meta tags.
- Copy all generated code & paste in your template head section. we have leave the space for that.
- Then Click Save Template.
Social Footer Links
- On Blogger Dashboard Click Template .
- Click Edit Edit HTML.
- and just click on Jump Widget and Click on PageList1
- Click Save.
- Once you find just replace the our link with your social link
![](images/social-top.jpg)
Adding Featured Slider
![](images/slider.jpg)
- On Blogger Dashboard Click Layout.
- Click Add a Gadget.
- Choose HTML/Javascript. All you have to do is just add the "featured" (Without quotes ) in featured slider widget and you must have label of named featured for the post you want to show in slider.Please follow the screenshots below:
![](images/feat-post.jpg)
![](images/feat-wid.jpg)
![](images/feat.jpg)
Custom Widget On HomePage - Featured/Recent From Label
![](images/custom-featured.jpg)
- On Blogger Dashboard Click Layout.
- Click Box7 widget Section and edit the widget to add any label name there First You have to choose which label you want to show in the widget section
![](images/custom-widget.jpg)
![](images/custom-feat-wi.jpg)
![](images/post-feat.jpg)
Custom Random Widget On HomePage/Recent From Label
![](images/rand-post.jpg)
![](images/side-slider.jpg)
If you add the same code in sidebar then it will show the post in slider.
- On Blogger Dashboard Click Layout.
- Click Box8 widget Section and edit the widget and add the following code Like I said earlier you can show two types of post in this section.
<script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>OR
In the same widget you can show recent post from label as well like BOX7 widget.
Step 1: Click on Edit on box 8 Widget Step 1: Click on Edit on box 8 Widget Step 2: Add The Following code in widget
<script src="/feeds/posts/default/-/featured?max-results=5&orderby=published&alt=json-in-script&callback=mythumb3"></script>Step 3: Choose any label you want. It is case sensative so make sure both label name in widget and in post must be same.
![](images/post-feat.jpg)
Adding Instagram widget
- On Blogger Dashboard Click Layout.
- Click Add a Gadget.
- Choose HTML/Javascript.
- Copy the following Code:
![](images/insta.jpg)
<div class='dark-wrapper'> <h3 class='section-title'>Follow @ Bthemez</h3> <div class='cf'/> <ul id='instafeed' class='insta-slick'> </ul> </div> <script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ var feed = new Instafeed({ get: 'user', userId: 201616071, limit:14, sortBy:'random', accessToken: '201616071.1677ed0.6137f81dad984a2a8dfb91c1821fd845', after: function () { var owl = $('.insta-slick'); owl.slick({ dots: false, infinite: false, speed: 300, prevArrow: '<button type="button" class="slick-nav slick-prev"><i class="fa fa-angle-left"></i></button>', nextArrow: '<button type="button" class="slick-nav slick-next"><i class="fa fa-angle-right"></i></button>', arrows:true, slidesToShow: 7, slidesToScroll: 2, autoplay: true, draggable:true, infinite:true, autoplaySpeed: 3500, responsive: [ { breakpoint: 1024, settings: { slidesToShow: 3, slidesToScroll: 3, infinite: true, dots: true } }, { breakpoint: 600, settings: { slidesToShow: 2, slidesToScroll: 2 } }, { breakpoint: 480, settings: { slidesToShow: 1, slidesToScroll: 1 } } // You can unslick at a given breakpoint now by adding: // settings: "unslick" // instead of a settings object ] }); }, template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>', resolution: 'standard_resolution' }); feed.run(); }); //]]> </script></div>
Note | just change the # with your instagram url |
Generate Access Token | you need access token for instagram widget to work Go to this url-> http://instagram.pixelunion.net/ Generate access token |
Sign In and Follow the steps | Then You'll be given an access token like this 1531863919.1677ed0.23d238bc564249e799095d060c750218 |
Follow The next step | Add Instagram User ID: |
Instagram For Sidebar
For Sidebar Instagram Use the Code below. Above won't work in sidebar<ul id='instaside'> </ul> <script type='text/javascript'>//<![CDATA[ $(document).ready(function(){ var instaside = new Instafeed({ get: 'user', userId: 201616071, target:'instaside', limit:9, sortBy:'random', accessToken: '201616071.1677ed0.6137f81dad984a2a8dfb91c1821fd845', template: '<li><a href="{{link}}" target="_blank"><img src="{{image}}" /></a></li>', resolution: 'standard_resolution' }); instaside.run(); }); //]]> </script>
If you don't wish to use this widget then do not add the following code.
- On Blogger Dashboard Click Layout.
- Click Mailchimp widget Section and edit the widget and add the following code
Step 1: Click on Edit on mailchimp Widget
Step 2: Add the following code for Subscription form
<div class='post_author'> <!-- Begin MailChimp Signup Form --> <h3 class='heading-border'><span>Join Our Madness- MailChimp Newsletter!</span></h3> <p>Join with Thousands Of Subscribers ! Get Our Latest Articles Delivered to Your email Inbox!</p> <div id='mc_embed_signup'> <form action="//bthemez.us8.list-manage.com/subscribe/post?u=1afddba24ae932c8dcadfeb1d&id=37420218d4" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank"> <div id='mc_embed_signup_scroll'> <input class='email' id='mce-EMAIL' name='EMAIL' placeholder='email address' type='email' value=''/> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups--> <div aria-hidden='true' style='position: absolute; left: -5000px;'><input name='b_e7fd30673f6532475252841f7_7d8c36f9d2' tabindex='-1' type='text' value=''/></div> <input class='button' id='mc-embedded-subscribe' name='subscribe' type='submit' value='Subscribe'/></div> </form> </div> <div class='clear'/> </div></div>You can setting and read more about mailchimp form here: Mailchimp Signup Form
![](images/form.png)
Step 1: Sign In mailchimp account & Create List First
Step 2: Copy All the code and paste it any notepad first and then copy the highlighted part and replace with ours.
![](images/mail-2.jpg)
Jet SEO Tools
The collection of free SEO tools for website, you can generate meta description and meta keywords from these free tools and integrate in your template. - Click Here To Use These Tools![](images/banner-3.png)
No hay comentarios:
Publicar un comentario
En breve les contestaremos