GithubHelp home page GithubHelp logo

mezo777721 / zune-blogger-template Goto Github PK

View Code? Open in Web Editor NEW

This project forked from abhibagul/zune-blogger-template

0.0 0.0 0.0 136 KB

Zune is a modern, user-friendly and professional blogger template. It is clean and modern design for blogger users. It comes with several handy features that are both good to run a successful magazine blog, news blog or etc. It has several popular built-in widgets that means you don't have to install any external widget by yourself.

zune-blogger-template's Introduction

Zune-Blogger-Template

Zune is a modern, user-friendly and professional blogger template. It is clean and modern design for blogger users. It comes with several handy features that are both good to run a successful magazine blog, news blog or etc. It has several popular built-in widgets that means you don't have to install any external widget by yourself.

Customized blogger Template @ $25 : https://www.fiverr.com/s2/ceb7759ae8

Documentation

			<div dir="ltr" style="text-align: left;" trbidi="on">
<style>h3.demo{font-weight:600;font-size: 26px;margin-top:50px;}</style>

Summery


  1. Installing Template
  2. Setting up Logo
  3. Setting Bottom Social Icons
  4. Setting Navigation Menu
  5. Setting Post Slider Widget
  6. Setting Custom Sidebar Widget
  7. Setting Comment System
  8. Setting Author Description
  9. Setting Author Social Links
  10. Setting number of posts on each page

1. Installing Template


  1. Extract the obtained zip file and look for Zune Blogger Template.xml
  2. Go to your blogger dashboard and inside the template tab click on Backup/Restore option located at top right corner.
  3. Now click on the browse button and select the extracted template file,Zune Blogger Template.xml.
  4. Now click on the upload button.
  5. After installing click on the “gear icon” in the theme section and select “No. Show desktop theme on mobile devices. ” and click on save.

2. Setting up Logo


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the Blog Logo and click on “Edit“.
  3. Click on the “Browse” button and select your respective logo.
  4. Select the option ” Instead of title and description
  5. Now click on the save button and also click on “save arrangement” button at top right corner.

3. Bottom Social Icons


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layot tab, look for the “Top Social widget” and click on the “Edit“.
  3. In the input for “New site name” type the name of social media.
    [facebook, twitter, gplus, youtube, pinterest, instagram, codepen, linkedin, skype, dropbox, wordpress, vimeo, slideshare, vk, tumblr, yahoo, stumbleupon, reddit, quora, yelp, weibo, phunt, hackernews, soundcloud, whatsapp, wechat, vine, slack, dribbble, flickr, foursquare, behance, rss, stack-overflow, digg, delicious]
  4. In the input for “New site url” type the location of your social media profile.
  5. Now click on the “Add link button” as shown in the image and click on save widget.

4. Setting Navigation Menu


  1. Login to your blogger account and go to the “Layout” tab.
  2. In the layout tab, look for the widget “Main Menu” and click on “Edit“.
  3. In the text input of new site name enter your Link name.
  4. In the text input for new site url, provide your link url.
  5. Now click on the add link button.
  6. For the SubMenu add “_” (One underscore) before the name of the link. For the Sub Sub menu add “__” (Double underscore) before the name of link.
  7. For setting up the Mega Menu in the input for new site name insert the label name for which you want to show the mega menu and in the input for url add “[Mega Menu]” as shown in image below.
  8. Save the widget and the layout arrangements.

5. Setting Ticker News Widget


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the widget “Ticker News” and click on “Edit“.
  3. In the content area place
    <span data-type="zune-latest" data-no="Number of News"></span>

    .

  4. Now click on save and save the arrangements.

7. Setting Custom Sidebar Widget


  1. News Paper Themes come with the different sidebar widget options. To setup them go to the “Layout” tab.
  2. In the layout tab look for the sidebar/tabs section and add the “HTML/JavaScript” widget.
  3. As per your requirement add the respective code shown in the table below.
    Widget Type Code
    <span class="zune-lposts" data-no="5"></span>
    <span class="zune-label" data-no="5" data-label='LABEL NAME'></span>
    <span class="zune-recenetcomment" data-no="5"></span>
  4. Now click on save. [Note: If you are setting up the label post widget make sure you change the label name as per yours.]

8. Setting Comment System


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the widget “Comment System” and click on “Edit“.
  3. In the content area place the respective code for the combination of comment system from the following list.

    [facebook]
    [disqus]
    [facebook][disqus]
    [blogger][facebook]
    [facebook][blogger]
    [disqus][facebook][blogger]
    [blogger][disqus][facebook]

  4. Now click on save and save the arrangements.

9. Setting Author Description


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the widget in the admin bar, “Author details” and click on “Edit“.
  3. In the content area place the description about author which will be shown at bottom of post.
  4. Now click on save and save the arrangements.

10. Setting Author Social Links


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the widget in the admin bar, “Post Author Social Profile” and click on “Edit“.
  3. Now in another window open the link http://fontawesome.io/icons/ and search for your social media icon and click on them.
  4. In the new window copy the code shown in the image below.
  5. Now go back to the window open earlier by clicking on edit button. In the input for “New site name” place the code we just copied.
  6. In the input for the “New site url” place the location/profile url for the respected icon.
  7. Now click on add link button. Once all icons are added click on save.

11. Setting number of posts on each page


  1. Login to your blogger account and go to “Layout” tab.
  2. In the layout tab, look for the widget in the admin bar, “Posts per page” and click on “Edit“.
  3. In the content area place the number of posts you want to show on each page.
  4. Now click on save and save the arrangements.
		</div>

zune-blogger-template's People

Contributors

abhibagul avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.