sevida-responsive-magazine-blogger-template

Sevida is the Cool premium responsive blog and magazine template for Blogger fans, It is also SEO friendly This template shows you how cool and flexible Blogspot magazine template can be. This is one of the best Blogger Themes for news or magazine types of website.

href="http://rockhackerzz.blogspot.com/" style="background-color: #ea9999;" target="_blank">DEMO DOWNLOAD

__________________________________________________________________________________________________________________________________________________________________ Sevida Blogger Documentation

Enable Mobile Template

YOU MUST DO THIS STEP FIRST, BEFORE INSTALL THE TEMPLATE TO HELP TEMPLATE EDITOR CAN WORK PROPERLY

As default, Blogger will use its own template for you blog on mobile. So if you want to use Sevida template on mobile devices, please enable it first.
Access your Template menu and click on Gear button of Mobile template.

In Choose mobile template window, check "Yes. Show mobile template on mobile devices.", then click drop down at Choose mobile template option, choose Custom, then click Save button.

Installation

You can do it by follow this step:

Unzip the “sevida-theme.zip” file.
On Blogger Dashboard Click Template.
Click Backup/Restore button (Top Right).
Click Choose File button. Find where the “sevida-theme.xml” file location.
Then Click Upload.

After installing the theme, this it the minimun setting to make all widget works fine in this themes.

Embedded Comment

This to make comment area like the Demo and make Emoticon show

On Blogger Dashboard Click Setting.
Click Posts and Comments
in Comment Location Choose Embedded
Then Click Save settings.

Blog Feed

This to make recent comment, Search Result, Featured Post, and Post by Label work fine

On Blogger Dashboard Click Setting.
Click Other
in Site Feed Allow Blog Feed Choose Full Or Short
Then Click Save settings.

NB:
1. If yours post have image uploaded on blogspot you can choose SHORT. but if yours post just have image from third party image hosting you must chooseFull
2. Blogger feed must be not redirect to other feed site like Feedburner
3. Your's blog or website not Private

Right Header Widget Area(Ads 728x90)
Auto Featured Post Area
Top Sidebar Area
Middle Sidebar Area
a. Popular Post
b. Recent Comment
c. Archive Widget
Bottom Sidebar Area
Label Post Widget Area
Footer Widget Area
Manual Featured Post Area (work with Image Widget)

Top Menu

Middle Menu

To Edit Menu in this theme you can follow this step:

On Blogger Dashbord Click Template
Click Edit HTML

Top Menu Scroll down and Find this Code :

<ul class='sf-menu' id='topmenunav'>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>More</a>
    <ul>
      <li><a href='#'>Menu 1</a></li>
      <li><a href='#'>Menu 2</a></li>
      <li><a href='#'>Menu 3</a></li>
      <li><a href='#'>Menu 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Menu</a></li>
</ul>

Change # with yours URL link

Middle Menu Scroll down and Find this Code :

<ul class='sf-menu' id='menunav'>
  <li><a class='home' expr:href='data:blog.homepageUrl'>Home</a></li>
  <li><a href='#'>About</a></li>
  <li><a href='#'>Archive</a></li>
  <li><a href='#'>Comments</a></li>
  <li><a href='#'>With Sub Menu</a>
    <ul>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Sub Menu</a>
        <ul>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
          <li><a href='#'>Sub Menu</a></li>
        </ul>
      </li>
      <li><a href='#'>Sub Menu</a></li>
      <li><a href='#'>Sub Menu</a></li>
    </ul>
  </li>
  <li><a href='#'>Error 404</a></li>
</ul>

Change # with yours URL link

To Edit Social Icon in this theme you can follow this step:

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<ul class='sociico' id='icon-socialmn'>
  <li class='sotw'><a href='#' target='_blank'>twitter</a></li>
  <li class='sofb'><a href='#' target='_blank'>facebook</a></li>
  <li class='sogo'><a href='#' target='_blank'>google</a></li>
  <li class='sorss'><a href='#' target='_blank'>rss</a></li>
  <li class='solinkn'><a href='#' target='_blank'>linkedin</a></li>
  <li class='sodrib'><a href='#' target='_blank'>dribbble</a></li>
  <li class='sopint'><a href='#' target='_blank'>pinterest</a></li>
</ul>

Change # with yours Social URL link

To Edit Date Date (Month Name) in this theme you can follow this step:

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

datetime();

Change with this script (Default Javacript):

datetime({
months:["January","February","March","April","May","June","July","August","September","October","November","December"],
timeFormat:"12"
});

change Month name with yours language.

Or you can Scroll down and change this code :

timemonthName: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'], // Define Time Month Name 
timeFormat:"12", // Define Time Format for Date Time Widget

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<!-- Metadata Facebook -->
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='218168578325095' property='fb:app_id'/>
<meta content='100002549773049' property='fb:admins'/>
<!-- Metadata Twitter -->
<meta name='twitter:card' value='summary'/>
<meta name='twitter:title' expr:content='data:blog.pageTitle'/>
<meta name='twitter:site' content='@publisher_handle'/>
<meta name='twitter:creator' content='@author_handle'/>
<!-- Google Authorship and Publisher Markup -->
<link rel='author' href='https://plus.google.com/[Google+_Profile]/posts'/>
<link rel='publisher' href='https://plus.google.com/[Google+_Page_Profile]'/>

Change 218168578325095 with yours facebook Apps ID and change 100002549773049 with yours Facebook Admin ID
Change @publisher_handle with yours twitter ID/Website twitter ID and change @author_handle with yours twitter ID too.
Note: Before your cards show on Twitter, you must first have your domain approved. Fortunately, it's a super-easy process. After you implement your cards, simply enter your sample URL into the validation tool. After checking your markup, select the "Submit for Approval" button. Go Here : https://dev.twitter.com/docs/cards/validation/validator for testing and approval
Change [Google+_Profile] with yours google plus ID number. then change [Google+_Page_Profile] with yours google plus page ID

Post Width Image

To make post with image look good you sould make the HTML like this example.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
<img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a></div>

For Image Float to Left

<a class="left" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>

For Image Float to Right

<a class="right" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>

For Center Image

<a class="center" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>

<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJv9mRADrc-B4yAlvv0SsaPEkvfDqgbOxJU_P9FH9rzOLGWNC9ERtZ-Nr0WC_rdk4PcSpDLEjkgBaSl6KzfX1YsZ5jc4SfPhQ0aGONuJeVHJ8I8CcmfwPohOZuJCTl74GJnZWcaZYeec/s1600/install-1.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAJv9mRADrc-B4yAlvv0SsaPEkvfDqgbOxJU_P9FH9rzOLGWNC9ERtZ-Nr0WC_rdk4PcSpDLEjkgBaSl6KzfX1YsZ5jc4SfPhQ0aGONuJeVHJ8I8CcmfwPohOZuJCTl74GJnZWcaZYeec/s320/install-1.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">mjkahsdaskkdhkashkdkshk</td></tr>
</tbody></table>

For Image Float to Left

<div class="left">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>

For Image Float to Right

<div class="right">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>

For Center Image

<div class="center">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s1600/install-1.png">
<img height="199" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioct-npepuhvRVDC_-3LNfyOtPXTYr7ERBpbhM2ndi2Vsj7kFnDY0XX0GTNqMS19J1Z2nN9W-NYvmGb_Jfh0NloV5257PkxHlMCP6PKDRdsshudRd_j5J3W1A3-VxfhSTD0XjTeLDUbcU/s320/install-1.png" width="320" />
</a>
<span>Caption Text Here</span>
</div>

To add Auto Featured Post widget follow this step

New Method (Using SHORTCODE)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels widget
Copy this Code:
```
[Title][featuredpost][random][5]
```
Click Save

Old Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript widget

Copy this Code:

<div id="featpost"></div>
<script type='text/javascript'>
jQuery("#featpost").AutofeaturedPost({
MaxPost:5
});
</script>

Click Save

(Default) Complete Javascript to call Auto Featured Post like this code:

jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
blogURL: "",
MaxPost: 5,  
ImageSize: 600,
ShowDate: true,
ShowComment: true,
pagination: true,
thumbnails: true,
loader:"pie",
height:"50%",
Random: true,
tagName: false
});

Default javascript mean if you just insert code like this:

jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost();

Featured post result will same with default script.

if you want to change it. ex: Show featured with maximal 8 from label Movies, don't show date and comment, and post not Random (Recent). Yours script will look like this:

jQuery("#ID_Place_To_Load_Plugin").AutofeaturedPost({
MaxPost: 8,
ShowDate: false,
ShowComment: false,
Random: false,
tagName: "Movies"
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load.
MaxPost	Maximum number artikel will show on Featured Post
ImageSize	Post Image size (in pixel)
ShowDate	If you want to show post date (true or false)
ShowComment	If you want to show Comment number (true or false)
pagination	If you want to show slideshow pagination
thumbnails	If you want to show slideshow Thumbnails
loader	kind of loader style : "pie", "bar", "none"
height	Slideshow height : "50%" mean if will resize 50% from slideshow with if you want make it fix to 300px just change with "300px"
Random	default true. It's will show article ramdomly. If want to show Recent Post just change to false
tagName	If you want to show Featured Post by the Label. Example: to show featured post from Sports Label just write like thistagName:"Sports"

If pagination set false Auto Featured or Shortcode widget Style "featuredpost2" will look like this:

Manual Slide Show

To Create Manual Slide Show follow this step

on Dashbord Blogger Click Layout
On Manual Slideshow Widget Area Click Add a Gadget
Choose Image Widget
1. Fill With Image Title
2. Image Description
3. Link When Image or Title Click
4. Search Yours Image
5. Uncheck shrink to fit
NB : Recommended Image Size 670px x 280px
Click Save
If You Whan Show 5 image, do this step 5 Time

If You Whan change Slideshow speed or animation type go to Template

Click Edit HTML and Scroll down and find this code:

manualfeaturedPost();

and change with (Default Javascript):

manualfeaturedPost({
height:"50%",
loader:"pie",
pagination:true,
thumbnails:true
});

Property	Description
pagination	If you want to show slideshow pagination
thumbnails	If you want to show slideshow Thumbnails
loader	kind of loader style : "pie", "bar", "none"
height	Slideshow height : "50%" mean if will resize 50% from slideshow with if you want make it fix to 300px just change with "300px"

Then Click Save Template

If pagination set false Manual Featured Post will look like this:

SLIDER POST

Carousel Slider

To add Post by Label (Carousel Slider Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_Title][slider1][recent][9]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="carouselpost1"></div>
<script type='text/javascript'>
jQuery("#carouselpost1").RecentPostbyTag({
MaxPost:9,
ImageSize:"s180-p",
postType:"s",
tagName:"Your_TagName"
});
</script>

Click Save
Note: If you want add new/next Carousel Slider Post you must change div id and jQuery id must be same with new div id

Slideshow

To add Post by Label (Slideshow Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_Title][slider2][recent][5]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="postslideshow1"></div>
<script type='text/javascript'>
jQuery("#postslideshow1").RecentPostbyTag({
MaxPost:5,
ImageSize:"s600",
postType:"s",
sliderType:"f",
tagName:"Your_TagName"
});
</script>

Click Save
Note: If you want add new/next Slideshow Slider Post you must change div id and jQuery id must be same with new div id

VERTICAL POST

To add Post by Label (Vertical Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][vertical][recent][5]
```
if you want animated Vertical Post shortcode look like this:
```
[Widget_title][vertical][animated][7]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="verticalpost1"></div>
<script type='text/javascript'>
jQuery("#verticalpost1").RecentPostbyTag({
MaxPost:6,
tagName:"Your_TagName",
postType: "v"
});
</script>

if you want animated Vertical Post javascript code like this:

<div id="verticalpost2"></div>
<script type='text/javascript'>
jQuery("#verticalpost2").RecentPostbyTag({
MaxPost:6,
tagName:"Your_TagName",
postType: "v",
animated:true
});
</script>

Click Save
Note: If you want add new/next Vertical Post you must change div id and jQuery id must be same with new div id

Horizontal Post

To add Post by Label (Horizontal Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][horizontal][recent][5]
```
if you want animated Horizontal Post shortcode look like this:
```
[Widget_title][horizontal][animated][7]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="horizontalpost1"></div>
<script type='text/javascript'>
jQuery("#horizontalpost1").RecentPostbyTag({
MaxPost:6,
tagName:"Web Design",
postType: "h"
});
</script>

if you want animated Horizontal Post javascript code like this:

<div id="horizontalpost2"></div>
<script type='text/javascript'>
jQuery("#horizontalpost2").RecentPostbyTag({
MaxPost:7,
tagName:"Your_TagName",
postType: "h",
animated:true
});
</script>

Click Save
Note: If you want add new/next Horizontal Post you must change div id and jQuery id must be same with new div id

Combine Post

To add Post by Label (Combine Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][combine][recent][5]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="combinepost1"></div>
<script type='text/javascript'>
jQuery("#combinepost1").RecentPostbyTag({
MaxPost:5,
tagName:"Your_TagName",
postType: "c"
});
</script>

Click Save
Note: If you want add new/next Combine Post you must change div id and jQuery id must be same with new div id

Gallery Post 1

To add Post by Label (Gallery Post 1) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][gallery1][recent][10]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="gallery1post1"></div>
<script type='text/javascript'>
jQuery("#gallery1post1").RecentPostbyTag({
MaxPost:13,
tagName:"Your_TagName",
postType: "g1"
});
</script>

Click Save
Note: If you want add new/next Gallery Post 2 you must change div id and jQuery id must be same with new div id

Gallery Post 2

To add Post by Label (Gallery Post 2) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][gallery2][recent][10]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="gallery2post1"></div>
<script type='text/javascript'>
jQuery("#gallery2post1").RecentPostbyTag({
MaxPost:12,
tagName:"Your_TagName",
postType: "g2"
});
</script>

Click Save
Note: If you want add new/next Gallery Post 2 you must change div id and jQuery id must be same with new div id

Simple Recent Post (No image)

To add Post by Label (Simple Recent Post (No image)) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][noimage][recent][5]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="simplenoimagepost1"></div>
<script type='text/javascript'>
jQuery("#simplenoimagepost1").RecentPostbyTag({
MaxPost:5,
tagName:"Your_TagName",
ShowImage:false
});
</script>

Click Save
Note: If you want add new/next Simple Recent Post (No image) you must change div id and jQuery id must be same with new div id

Hot Post

To add Post by Label (Hot Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][hot][recent][3]
```
Click Save

OLD Method (Using Javascript)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="hotpost1"></div>
<script type='text/javascript'>
jQuery("#hotpost1").RecentPostbyTag({
MaxPost:3,
postType:"ht",
tagName:"Your_TagName"
});
</script>

Click Save
Note: If you want add new/next Simple Recent Post (No image) you must change div id and jQuery id must be same with new div id

Simple Post

To add Post by Label (Simple Post) widget follow this step

New Method (Using Short Code)

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose Labels
Copy this Code:
```
[Widget_title][simple][recent][5]
```
Click Save

(Default) Complete Javascript to call Post by Label (Slider (Carousel & Slideshow), Horizontal, Combine, Gallery and Vertical Post) like this code:

jQuery("#ID_Place_To_Load_Plugin").RecentPostbyTag({
blogURL: "",
ShowDesc: false,
ShowDate: true,
ShowComment: true,
Random: false,
AjaxLoad: true,
animation:"slide",
postType: "v", 
animated: false,
sliderType: "c",  
tagName: false
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load.
ShowDesc	If you want to show or hide post description (work in vertical and horizontal) (true or false)
ShowDate	If you want to show or hide date true to show or false to hide
ShowComment	If you want to show or hide comment number true to show or false to hide
Random	If you want to generate random post true to random or false to recent. if you set true AjaxLoad will not work (same like AjaxLoad set false).
AjaxLoad	If you'r want More Button will load more from next page and add after last post. If you set false page will redirect if More Button clicked
postType	There are Three kind of PostType: "v" (vertical Post), "h" (horizontal Post) , "c" (Combine Post), "g1" (Gallery Post 1), "g2" (Gallery Post 2) and "s" (Slider Post)
animated	make it have animation effect (for Vertical and Horizontal Post)
sliderType	make it show carousel slide show or Slide show : "c" (Carousel Slider) or "f" (full Slideshow Slider)
animation	Full Slideshow effect : "slide" or "fade"
tagName	If you want to show Post by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

Error Page

To change text on Error Page follow this step

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<div class='error-custom'>

<h2>404 Not Found</h2>
<p class='error-body'>We&#39;re sorry but we could not find the page you are looking for.<br/>
This may happen if you have entered site url incorrectly or this page doesn&#39;t exist anymore.</p>

<p>You can try searching page again or go back to home</p>

<form action='/search' id='searchform' method='get'>
<input id='s' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;;}' type='text' value='Search...'/>
<input id='searchsubmit' type='submit' value='Go'/>
</form>

</div>

Change which your's Language

To make archive page just copy this HTML code to New Page.

<div id="table-outer"><table border="0"><tr><td><label>Sort List by:</label></td><td><select id="orderFeedBy"><option value="published" selected>Latest Published</option><option value="updated">Latest Update</option></select></td></tr><tr><td><label>Sort List by Category:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Search with Keyword:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js" type="text/javascript"></script>

If don't know how to make New Page Follow this step.

On blogger Dashbord Click Page
Click New Page and Choose Blank Page
Add Title

Click HTML and Copy this Code

<div id="table-outer"><table border="0"><tr><td><label>Sort List by:</label></td><td><select id="orderFeedBy"><option value="published" selected>Latest Published</option><option value="updated">Latest Update</option></select></td></tr><tr><td><label>Sort List by Category:</label></td><td><span id="labelSorter"><select disabled><option selected>Loading...</option></select></span></td></tr><tr><td><label>Search with Keyword:</label></td><td><form id="postSearcher"><input type="text"/></form></td></tr></table></div><header id="resultDesc"></header><ul id="feedContainer"></ul><div id="feedNav">Loading...</div>
<script src="http://guinys-mkr.googlecode.com/svn/trunk/JS/archive.min.js" type="text/javascript"></script>

Click Publish

NB: summary and Load more image use Official Blogspot Thumbnail. It mean the image must upload to blogspot for make it show on home page.

Summary and Load More

To change image size and Summary length and other summary configuration follow this step.

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

var configSummary = {
    thumbnailSize: "s180-c", // Define the post thumbnail size
    summaryLength: 200, // Define the summary length 
    slideffect: true, // Define to make image slide
    maxImage:5, // Define Maximal Image to image slide
    slideSpeed: 3000, // Define Slideshow Speed in milisecond
    defaultNavigation:"LoadMore",
    defaultView:"grid", // Default view Mode
    postPerPage:6, // Number post every Page (work with PageNavi)
    numshowpage:3 // Number page Number (work with PageNavi)
};

Property	Description
thumbnailSize	Image Format use Picasa/Blogspot image format: To make square image (180x180) Image Format use like this "s180-c" or "s180-p". image will be crop to make it square. Blogspot Image format also look like this : "s180" (if image landscape width will 180px. If image Portrait height will 180px), "w180" (image width will 180px) or "h180" (image height will 180px)
summaryLength	Define the summary length
slideffect	If your post have image more than you set this true image will become slideshow. note: this setting must be same with Load More Post or Page Navigation
maxImage	Maximum image add to the sildeshow
slideSpeed	Set the speed of the slideshow cycling, in milliseconds
defaultNavigation	default home page navigation: "LoadMore" or "PageNavi"
defaultView	This will setup view mode: you can choose "grid" to show your's post on grid mode or "list" to show your's post on list mode
postPerPage	Number Post Will show if next Page Number Click. Note must be same with "Show at most" on Blogger Setting
numshowpage	Number Page Number will Show

To add recent comments widget follow this step

on Dashbord Blogger Click Layout
Click Add a Gadget
Choose HTML/Javascript

Copy this Code:

<div id="rcentcomnets"></div>
<script type='text/javascript'>
RecentComments();
</script>

Click Save

(Default) Complete Javascript to call Recent Comments like this code:

RecentComments({
blogURL:"",
numComments:4,
characters:100,
id_containrc:"#rcentcomnets",
avatarSize:50,
Showimage:true,
defaultAvatar:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSIeeqFIS1ePGX3QMzOrhUQApP82irLcAwwFNG2ttV-bt4ez38VlctvXVonjHiaU26uzgiXhGXHemjpabdvJabmYcAIaoPzzeL-NwiYK1BMctJ-4NRwTRHu_PDKky8R-4h7fm7Pa9ca1RO/s70/user-anonymous-icon.png",
maxfeeds:50,
adminBlog:""
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load.
numComments	maximum number of recent comment
characters	Number of summary characters to show. if set 0, will not show summary
id_containrc	ID of div where the recent comment will be display must add this #, Example: if want to show in <div id="rcentcomnets"></div> write like this "#rcentcomnets"
avatarSize	Image thumbnail size/avatar size
Showimage	Show or hide the avatar. Value : true or false
defaultAvatar	Backup image if comment author don't have avatar image
maxfeeds	Maximum feed to load
adminBlog	Control to show or hide author/admin comment. ex: if you don't want to show your comment, simply just write yours blogger name like this adminBlog:"satank MKR"

To edit JSON Search Result Text you can follow this step

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

searchxx({summaryLength:100, scrthumbSize:50});

If you want to change it. You can see complete default Script below:

(Default) Complete Javascript to call JSON Search Result like this code:

searchxx({
blogURL:"",
srcBlank:"http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif",
findText:"Search results for keyword",
NotfindText:"No result!",
Showthumb:true,
LoadingText:"Searching...",
scrthumbSize:50
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load.
srcBlank	Backup image if post don't have image
findText	Sentence if founded post by the keyword
NotfindText	Text if no post founded
Showthumb	Show or hide the post thumbnail. Value : true or false
LoadingText	Text to show when searching
summaryLength	Length of summary characters
scrthumbSize	Size of thumbnail image, size in pixel

To edit Emoticon Text you can follow this step

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

emoticonx({
emoRange:".comments p, div.emoWrap",
putEmoAbove:"iframe#comment-editor",
topText:"Click to see the code!",
emoMessage:"To insert emoticon you must added at least one space before the code."
});

If you want to change it. You can see complete default Script below:

Property	Description
emoRange	Where the emoticon will show/work
putEmoAbove	Where the emoticon sample will place
topText	Sentence below the emoticon sample
emoMessage	Sentence below the emoticon sample and alert box

To edit News Ticker Text you can follow this step

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

NewsTicker();

(Default) Complete Javascript to call JSON Search Result like this code:

NewsTicker({
blogURL: "",
MaxPost: 10,
Speed: 0.10,
titleText: "Latest",
tagName: false
});

If you want to change it. You can see complete default Script below:

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load
MaxPost	Maximum number artikel will show on News Ticker
Speed	Speed each artikel effect
titleText	News Ticker Title Text
tagName	If you want to show News Ticker by the Label. Example: to show post from Sports Label just write like this tagName:"Sports"

To edit Emoticon Text you can follow this step

On Blogger Dashbord Click Template
Click Edit HTML
Scroll down and Find this Code :
```
relatedPostsWidget();
```
If you want to change it. You can see complete default Script below:

(Default) Complete Javascript to call Related Post like this code:

relatedPostsWidget({
blogURL:"",
maxPosts:5,
maxTags:5,
maxPostsPerTag:5,
ShowComment:true,
ShowDate:true,
DateFloat:false,
ShowDesc:true,
readMoretext:"Read more »",
rlt_thumb:70   
});

Property	Description
blogURL	Yours blog URL or you can leave it blank to load where this script load.
maxPosts	Maximum number of article will be show (if Related Post)
maxTags	Maximum Tag/Label will load
maxPostsPerTag	Maximum post each tag/label will be show (maximum recent post if article don't have tag/label)
ShowComment	Show or Hide Comment Number. option true or false
ShowDate	Show or hide Date. option true or false
DateFloat	If you want make the date like Recent Post by Tag Date model.
ShowDesc	Show or hide post description. option true or false
rlt_thumb	Size of thumbnail image, size in pixel
readMoretext	Read More Text

Sevida supported 3 comment systems: default threaded comment of Blogger, Facebook comment and Disqus comment. You can choose to use one comment system or combine two of them together by changing settings in Blog widget.
To pick comment systems, access Layout. Click Edit link on Blog Posts gadget.

In the Configure Blog Posts window, you will pick comment systems by input their names in comment text field. Template supported 3 names:blogger, facebook, disqus. You can combine two of them by separate their names by "-". Example, combine blogger with facebook comment system like the demo blog, you can input blogger-facebook. After input, click Save to enjoy.

Facebook Comment need Apps ID and Admin Id. To know how to get App ID and Admin Id you can search on Google or How To Get App ID. And you can follow this step to change my Facebook App ID and Admin ID.

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<meta content='218168578325095' property='fb:app_id'/>
<meta content='100002549773049' property='fb:admins'/>

and this code:

<div id='facebook-comment-appid' style='display:none'>218168578325095</div>

Change 218168578325095 with yours Facebook App ID. and 100002549773049 with yours Admin ID.
Facebook Admin ID use to moderate facebook comments.

If you pick disqus comment system, you must input Disqus short name for it. To do that, follow this step.

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<div id='disqus-shortname' style='display:none'>sevidamkrdezign</div>

Change sevidamkrdezign with yours Disqus shortname.

Admin

Settings

Site Identify

Enable Your Blog to Anyone

Sevida use json feed to display your posts on home page. So you blog must be publised to everyone. Private blogs can not use this template.
To enable your blog to anyone, access Settings menu and choose Basic settings. Then click Edit of Blog Readers option.

In Blog Readers radio options, choose Anybody and click Save changes.

Enable Full Feed

Access Settings menu and choose Other settings. Click drop-down list at Allow Blog Feed option, then choose Full. After that, click Save settings button at the top right corner.

Enable Search Preference

To improve your blog SEO, please enable Blogger Search Preferences. Access your Settings menu, choose Search preferences tab and clickEdit link on Meta tags section

Next, check Yes option, then type your Blog Description into the text field and click Save changes.

To make Tabs Content Like that image. short code look like this:

<div class="sevidatabs">
  <div data-tab="Tab-1">Your Content Here</div>
  <div data-tab="Tab-2">Your Content Here</div>
  <div data-tab="Tab-3">Your Content Here</div>
  <div data-tab="Tab-4">Your Content Here</div>
</div>

If you want some label name not show in Label view follow this step:

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<script class='jshilang' type='text/javascript'>
labelnyacx();
</script>

and this code:

Change like this:

<script class='jshilang' type='text/javascript'>
labelnyacx({
labelNotShow:"Your Label1, Your Label2, Your Label3"
});
</script>

Your Label1, Your Label2, Your Label3 will not show on label view.

var Alldefaultconfig = {
    MaxPost:5,
    MoreText: "Load more posts",
    monthName: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
    timemonthName: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], 
    timeFormat:"12",
    viewMoreText: "View More About",
    BackupImage: "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s72-c/grey.gif",
    summaryLength:100,    
    FirstImageSize:"s220-p",
    ImageSize:"s70-p",
    slideshowSpeed:5000,
    RandomTitle:"Random Posts",
    RecentTitle:"Recent Posts",
    RelatedTitle:"Related Posts",
    RelatedStyle:"carousel",
    CommentMode:"blogger",
    redirectMobile:false,
    transitionStyle:"backSlide"
};

Property	Description
MaxPost	Default Maximum Post (Recent Post by Tag,RelatedPost,AutoFeaturePost)
MoreText	Define Load More Text if Recent Post
monthName	Month Name format (Recent Post by Tag, Recent Comment, AutoFeatured Post, Related Post, News Ticker)
timemonthName	Month Name Format for Top navigation Date Time Widget
timeFormat	Time Format for Top navigation Date Time Widget
viewMoreText	Define More Text (Recent Post by Tag and JSON Search)
BackupImage	Backup image if post don't have image
summaryLength	Default Summary Length (Recent Post by Tag, Related Post, JSON Search,AutoFeaturePost)
FirstImageSize	Default First Image Size in Recent Post by Tag (blogger/blogspot format).Image Format use Picasa/Blogspot image format: To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square. Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
ImageSize	Default Image Size in Recent Post by Tag (blogger/blogspot format). Image Format use Picasa/Blogspot image format: To make square image (200x200) Image Format use like this "s200-c" or "s200-p". image will be crop to make it square. Blogspot Image format also look like this : "s200" (if image landscape width will 200px. If image Portrait height will 200px), "w200" (image width will 200px) or "h200" (image height will 200px)
slideshowSpeed	Default Slideshow Speed in milisecond (Featured Post, Slider Post on RecentPost by Tag )
RandomTitle	Define Random Post Title (if Random Post widget don't have title)
RecentTitle	Define Recent Post Title
RelatedStyle	Related post style: there are two related post style "carousel" or "normal" style
RelatedTitle	Define Related Post Title
CommentMode	Default Comment mode: "blogger" or "facebook" or "disqus"
redirectMobile	enable or disable redirect Blogger Mobile version. true to enable, false to disable
transitionStyle	slider effect: "fade","backSlide","goDown",or "fadeUp". this option just for lightweight version.

Change Background Image

NB : Blogger Customize will work if Blogger Mobile Template Enabled before upload this Theme

It's Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Background

Click Background Image and choose image what you want or upload from yours computer

Advanced Editor

It's Easy to customize this themes. Just Go to Blogger Dashbord and Click Template then Click Customize and Click Advanced After customize yours template you can disable Blogger Mobile Template but it will make Blogger Customize not work

Property	Description
Main Color	Top Navigation background color, Middle Navigation background color, Content Area background color and Footer Area background color
Main Area	Main font type, Heading Font type, Main body color, Main text color
Backgrounds	This will change Primary Color
Links	This will change link hover color and visited link color
Header Title	This will change Blog Title Font type and color, Blog description font type and color
Top Navigation	This will change Top navigation text color, Top navigation Sub Menu color, and top navigation sub sub menu
Middle Navigation	This will change middle navigation text color, font type, Sub Menu color and Sub sub menu color
Widget Area	This will change widget heading title color, widget heading font type, widget background color, and widget border color
Content Area	This will change Article Font type, Post font type, Title Color, Sidebar text color
Content Setting	This will change image border color, button/date/tab color, button/date/tab hover color and Post footer color
Footer Area	This will change footer heading font type, footer text color, footer widget heading color, footer border color
Footer Area 2	This will change footer image background color

Because this theme support upload Background Image and this option make auto RTL Language change not work and to make it support RTL language must be change little CSS code. Follow this Step

On Blogger Dashbord Click Template
Click Edit HTML

Scroll down and Find this Code :

<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left" value="left"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right" value="right"/>

and change with:

<Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="right" value="right"/>
<Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="left" value="left"/>

Thats Code just change default and value for startSide from left change to right and for endSide from right change to left

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Top Ad

sevida-responsive-magazine-blogger-template