Agak berbeda dari versi-versi sebelumnya, versi 2.4.2 ini tidak menyertakan documentation terbaru melainkan documentation versi 1.7. Mulanya, saya agak kesulitan menerapkan beberapa pengaturan. Namun setelah mempelajarinya dari halamn demo perlahan-perlahan saya bisa. Jadi artikel ini sedikit tutorial bagaimana menggunakan/mengatur Sevida v2.4.2 (Sevida v2.4.2 - Responsive Magazine Blogger Template Documentation).
Sevida Blogger Documentation untuk v2.4.2. Jika Anda mendownload template blogger Sevida v.2.4.2 dan isi documentation-nya ternyata versi 1.7 maka saya berharap artikel ini akan sangat membantu.
Layout Explain
- Theme Options Area (this area to change default option)
- Top Menu Area
- Top Social Link area
- Header Area
- Top Ads Area (Recommended 720 x 90)
- Main Menu Area
- Mega Menu Links Content area (this widget will show if you add -links to main menu)
- News Ticker Area
- Top Featured Post Area
- Magazine Widget Area (this just show on Homepage and section for Recent post by Label widget)
- Right Sidebar Area
- Sidebar Tab Widget Area
- Place to add ads. Code from Ads Inside Post widget will show if you are add [ads-post] in your article
- Post Label area (this label will show on Latest Post title)
- This to control your blog comment system ([blogger][facebook][disqus])
- Put yours disqus shortname here if you want to add disqus comments
- Yours flickr ID here if you want to add flickr badge
- Footer Area
- Author Profile Area
- Manual Image Area (all Image widget from this area will show if you add manualslide in yours HTML widget)
- This will enable google adsense Javascript, Just "y" to enable it and "n" to disable
Theme Options
- Translator Widget:
On "New Site Name" fild1 field add the default language
And on "New Site URL" fild2 field add your language.
/*------ English To Arabic ------*/ fild1 : Popular Posts fild2 : المقالات الشائعة /*------ English To French ------*/ fild1 : Popular Posts fild2 : Articles populaires /*------ English To Allemand ------*/ fild1 : Popular Posts fild2 : Beliebte Beiträge /*------ English To Espagnol ------*/ fild1 : Popular Posts fild2 : Puestos Popular - Default is Boxed Style. If you want to change it to Full Width style just add this "y" and if you to make if Boxed Style again just change it to "n"
- This to change other Default Setting in this theme sumlength,fixMenu recentpost, recentcomment, related, featuredpost, random and etc.
On "New Site Name" field Property. ex: recentpost
And on "New Site URL" field max number. ex: 6
Property Description Default sumlength this to change max summary length on Main Recent Post 200 fixMenu if you want to enable or disable fixmenu effect on main menu. Support value "y" or "n" y monthName If you want to change month name on post Jan,Feb,Mar ,Apr,May,Jun, Jul,Aug,Sep, Oct,Nov,Dec FullmonthName if you want to change month name on date and time (Top Menu) January,February, March,April,May,June,July, August,September,October, November,December stickyMenu if you want do enable or disable sticky Sidebar. Support value "y" or "n" y sliderspeed if you want to change slider speed. (in milisecond) 5000 navipostpage if you want to change Page Navigation number 20 rcadminBlog hide Admin Comment on recentcomment. Support value "y" or "n" n shideauthor to show or hide author name on Widget by Labels. Support value "y" or "n" n hideLatest this to hide Main Latest Post in home n cseID If you want to add Google Custom Search Engine (Google CSE) effect to top menu search. Just add yours Google CSE code like this:
Note: you can go to Google CSE013487895970210376374:11mzjaatn8shideEmo this to show or hide Emoticon Effect in Blogger comment and Recent comment widget. Support value "y" or "n" n homelist this to change Main Latest Post style to List style. Support value "y" or "n" n disabletime this to disable date and time on Top menu. Support value "y" or "n" n homePageNavi this to change Main Latest Post Ajax Load More to Page Navigation.Support value "y" or "n" n fbappsid this to change Facebook Apps ID 487910834570906 fblang this to change Facebook Language en_US dajaxPageNavi this to disable ajax effect on Page Navigation. Support value "y" or "n" n srctext this to change text inside the Menu Search box Type and hit enter to search... ntext this to change "Next" text in blog post Navigation Next ptext this to change "Previous" text in blog post Navigation Previous mtext this to change "More" text More lmtext this to change "Load More Post" text Load More Post vmtext this to change "View More About" text View More About reltext this to change "Related Post" text in Related Post Widget Related Post rectext this to change "Recent Post" text in Related Post Widget Recent Post tweettext If you want to change text "Tweet" text in Social button Tweet liketext If you want to change text "Like" text in Social button Like sharetext If you want to change text "Share" text in Social button Share readmoretext this to change "Read more »" text Read more » twitterauthor If you want to change twitter author when click Tweet button satankMKR relstyle If you want to Related Post style. Support value: "carousel", "simple" and "fbig" carousel hreview If you want to hide review value in Recent Post and Recent Post widget by Label. Support value: "n" and "y" n jsonload If you want to change JSON feed load from widget by Label. Support value: "default" and "summary" default hexcerpt If you want to hide excerpt text below the title. Support value: "n" and "y" n firstthumb this to change First thumbnail Size on fbig, column2 widget s450 thumb this to change thumbnail size w90-h65-c sliderthumb this to change slider thumbnail size s800 dajaxsrc this to disable ajax search effect. Support value "y" or "n" n featpost if you want to make first image in blog post become Featured Image. Support value y or n n topbreakline If you to show breakline below post title. Support value y or n n bottombreakline If you to show breakline in end post. Support value y or n n autoplay If you want to make Related Post (carousel style autoplay). Support value y or n n topbreaklineload This to change top breakline load data. Support value "related", "recent" and "random" recent bottombreaklineload This to change bottom breakline load data. Support value "related", "recent" and "random" recent recentpost this to change max item show in recentpost widget 4 randompost this to change max item show in randompost widget. 4 featuredpost this to change max item show in featuredpost widget. 4 recentcomment this to change max item show in recentcomment widget. 5 fbig1 this to change max item show in fbig1 widget. 5 fbig2 this to change max item show in fbig2 widget. 5 gallery1 this to change max item show in gallery1 widget. 10 gallery2 this to change max item show in gallery2 widget. 5 gallery3 this to change max item show in gallery3 widget. 6 column1 this to change max item show in column1 widget. 5 column2 this to change max item show in column2 widget. 5 newsticker this to change max item show in newsticker widget. 9 slider this to change max item show in slider widget. this for all slider. (slider1 and slider2) 5 carousel1 this to change max item show in carousel1 widget 9 carousel2 this to change max item show in carousel2 widget. 9 related this to change max item show in related widget. 9 video this to change max item show in video widget. 6 featured1 this to change max item show in featured1 widget. 8 featured2 this to change max item show in featured2 widget. 10 featured3 this to change max item show in featured3 widget. 10 featured4 this to change max item show in featured4 widget. 5 featured5 this to change max item show in featured5 widget. 7 animatedpost this to change max item load if widget have animated effect. 9 list this to change max item show in list widget. 6 hot this to change max item show in hot widget. 3 timeline this to change max item show in timeline widget. 5 blogpost this to change max item show in blogpost widget. 4 halfpost this to change max item show in halfpost widget. 4 bigpost this to change max item show in bigpost widget. 4 simplepost this to change max item show in simplepost widget. 4 disquscomment this to change max item show in disquscomment widget. 4 flickrbadge this to change max item show in flickrbadge widget. 8
Default Setting
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.
- 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 choose Full
- Blogger feed must be not redirect to other feed site like Feedburner
- Your's blog or website not Private
Configuration Blog Posts
This default setting to make yours website like the demo- On Blogger Dashboard Click Layout.
- On Blog Posts Widget Click Edit
- Configurate like image bellow
- Then Click Save.
Setting up the menu
Top Menu
To Edit Top Menu in this theme you can follow this step:- First Go to Dashboard > Layout > Edit Top Menu > Configure Link List
- On "New Site Name" field add your menu title like as this :
Menu Title - And on "New Site URL" field add your url address.
- To add Sub Menu just add _ before yours Menu Title
_Sub Menu - To add Sub Menu just add __ before yours Menu Title
__Sub Sub Menu - To add icon in top menu you can add code like this: <i class="fa fa-ICON_NAME"></i> before or after menu name
Note: You can get icon name Here : http://fontawesome.io/icons<i class="fa fa-facebook"></i>Menu Title _<i class="fa fa-twitter"></i>Sub Menu __<i class="fa fa-pinterest"></i>Sub Sub Menu
Main Menu
To Edit Top Menu in this theme you can follow this step:- First Go to Dashboard > Layout > Edit Main Menu > Configure Link List
- On "New Site Name" field add your menu title and Sub title like as this :
Menu Title [Sub Title] - And on "New Site URL" field add your url address.
- To add Sub Menu just add _ before yours Menu Title
_Sub Menu - To add Sub Menu just add __ before yours Menu Title
__Sub Sub Menu - To add icon in top menu you can add code like this: <i class="fa fa-ICON_NAME"></i> before or after menu name
Note: You can get icon name Here : http://fontawesome.io/icons<i class="fa fa-facebook"></i>Menu Title _<i class="fa fa-twitter"></i>Sub Menu __<i class="fa fa-pinterest"></i>Sub Sub Menu
Add Mega Menu
a. Mega Menu (block style "-links")
Now for add a block style "-links" simply on "New Site Name" field add this
-links
b. Mega Menu (Tabs style)
Now for add a Mega Menu tabs style simply on "New Site Name" field add this
-mtab/Label_1,Label_2,Label_3,Label_4c. Mega Menu (Grip style)
Now for add a Mega Menu grip style simply on "New Site Name" field add this
-grip/LabelName or recent or randomd. Mega Menu (First Big Style)
Now for add a Mega Menu First Big Style simply on "New Site Name" field add this
-mbig/LabelName or recent or random
Note Subtitle just work in Main Menu Widget
Setting Social Icon
To Edit Social Icon in this theme you can follow this step:- First Go to Dashboard > Layout > Edit Social Link > Configure Link List
- On "New Site Name" field add your social name : facebook, twitter, rss, dribbble, google, pinterest, linkedin, youtube, vimeo, skype, deviantart, flickr, stumbleupon, tumblr, delicious, digg, lastfm, wordpress, instagram, apple, dropbox, behance, reddit.
- And on "New Site URL" field add your social url adress.
- Then click Save.
Setting Meta Tag (Facebook,Twitter,Google+)
- On Blogger Dashbord Click Template
- Click Edit HTML
- Scroll down and Find this Code :
<meta content='YOUR KEYWORDS HERE' name='keywords'/> <!-- 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='100002549773049' property='fb:admins'/> <!-- Metadata Twitter --> <meta name='twitter:card' value='summary'/> <meta expr:content='data:blog.pageTitle' name='twitter:title'/> <meta content='@publisher_handle' name='twitter:site'/> <meta content='@author_handle' name='twitter:creator'/> - Change YOUR KEYWORDS HERE with yours website keywords. Note: meta tag keywords no more use to improve the SEO. because now meta tag keywords just support for bing search engine.
- 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
Settings Summary Length,Comments,Author Profile and etc
Summary Length
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name sumlength and New Site URL add yours number value. Ex: if you want to make 200 length just add that.
- Then Click Add Link then ClickSave
Settings Summary Length,Comments,Author Profile and etc
Summary Length
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name sumlength and New Site URL add yours number value. Ex: if you want to make 200 length just add that.
- Then Click Add Link then ClickSave
Page Navigation Number
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name navipostpage and New Site URL add yours number value. Ex: if you want to make 10 post show. Just add it
- Then Click Add Link then ClickSave
Main Latest List Style
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name homelist and New Site URL add y.
- Then Click Add Link then ClickSave
Main Latest Page Navigation
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name homePageNavi and New Site URL add y.
- Then Click Add Link then ClickSave
Recent Comments (Hide Admin )
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name rcadminBlog and New Site URL add y.
- Then Click Add Link then ClickSave
JSON Search result
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name dajaxsrc and New Site URL add y.
- Then Click Add Link then ClickSave
Google CSE
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name cseID and New Site URL add yours google CSE ID code.
- Then Click Add Link then ClickSave
Emoticon
- On Blogger Dashbord Click Layout
- on Theme Option Area click Edit on Change Default Setting
- In New Site Name hideEmo and New Site URL add y.
- Then Click Add Link then ClickSave
Comment Setting
- On Blogger Dashbord Click Layout
- Click Edit on Comments system widget and inside it add your comments systems you need in this way
[blogger] for blogger comments
[facebook] for facebook comments
[disqus] for disqus comments
you can add one system, two or three as you like and with arrangement you need for example
[facebook]
[facebook][blogger]
[blogger][facebook]
[disqus][facebook][blogger] - Then Click Save
Setting to make Disqus Comment
- On Blogger Dashbord Click Layout
- Click Edit on Disqus Shortname widget and inside it add your disqus Shortname
- Then Click Save
Get Disqus Shortname
- here you can get Disqus shortname? Access your Disqus Admin and choose Settings
- Then scroll down to Site Identify, you will see the shortname there.
Author Profile
- On Blogger Dashbord Click Layout
- Click Edit on Author Profile Area and inside it add code like this
{picture#YOUR_PROFILE_PICTURE_URL} YOUR_PROFILE_DESCRIPTION {facebook#YOUR_SOCIAL_PROFILE_URL} {twitter#YOUR_SOCIAL_PROFILE_URL} {google#YOUR_SOCIAL_PROFILE_URL} {pinterest#YOUR_SOCIAL_PROFILE_URL} {youtube#YOUR_SOCIAL_PROFILE_URL} {instagram#YOUR_SOCIAL_PROFILE_URL} - Then Click Save
- If you have want add more Author Profile Just add New HTML widget on Author Profile Area and fill like above
Flickr ID
- On Blogger Dashbord Click Layout
- Click Edit on Flickr User ID widget and inside it add your flickr ID
- Then Click Save
Widgets Top Featured, Slider, Column, Social Counter and etc.
News Ticker
- On Blogger Dashbord Click Layout
- Click Edit on Breaking News widget and inside it add code like this:
[recent][newsticker]
if you want newsticker load random. code like this.
if you want newsticker load from specific Label/Category. Ex. Load from Technology code like this.[random][newsticker]
[Technology][newsticker] - Then Click Save
Top Featured Post
- On Blogger Dashbord Click Layout
- Click Edit on Top Featured widget and inside it add code like this:
Available Featured Type : featured1, featured2, featured3, featured4, featured5
Add code like this
Exemple (Show Featured Post from Multiple Labels "Music,Technology,Fashion,Trends"[Your_Labels_Here][featured1]
Exemple (Show Featured Post from Recent Post)[Music,Technology,Fashion,Trends][featured1]
Exemple (Show Featured Post from Random Post)[recent][featured2]
Note Maximun Labels Support for Multiple Labels is 4[random][featured2]
Note Random and Multiple Labels need more time to load
- Then Click Save
Social Counter
- On Blogger Dashbord Click Layout then click Edit in Social Counter Widget
- On "New Site Name" fild1 field add Social Name (Social Counter)
- And on "New Site URL" fild2 field add your Social Url.
Exemple : Note Only this Socials Supported !
facebook [1.1k] twitter [2k] google [250] rss [590] youtube [3.5k] dribbble [8.2m] instagram [732] pinterest [210] linkedin [2.56k] vimeo [300] skype [568] deviantart [6.4k] flickr [900] stumbleupon [561] tumblr [5.4m] delicious [86] digg [789] lastfm [652] wordpress [1.5k] apple [60] dropbox [980] behance [366] reddit [10] - Then Click Save
Widget by Labels
First Big 1
- On Blogger Dashbord Click Layout
- Click Add a Gadget on Magazine Widget Area
- Choose HTML/Javascript
- Copy this Code:
ex: load from Music label.[Yours_Label_Name][fbig1]
[Music][fbig1]
Note: "Yours_Label_Name" is yours Labels you want to load.
Note: you can change "Yours_Label_Name" with "recent" if you want load latest post or "random" if you want load Random post
If you want load from other Blog. code look like this:
Ex: Load Tecnology from otherblog.com[Yours_Label_Name][fbig1][Other_URL]
[Tecnology][fbig1][http://otherblog.com]
if you want change Widget title color. code like this
ex: width this color: #BD1A1A[Yours_Label_Name][fbig1][Hexcolorcode]
[Yours_Label_Name][fbig1][#BD1A1A]
if you want add Animated Effect. Code like this:
[Yours_Label_Name][fbig1 animated] - Then Click Save
First Big 2
- On Blogger Dashbord Click Layout
- Click Add a Gadget on Magazine Widget Area
- Choose HTML/Javascript
- Copy this Code:
ex: load from Music label.[Yours_Label_Name][fbig2]
[Music][fbig2]
Note: "Yours_Label_Name" is yours Labels you want to load.
Note: you can change "Yours_Label_Name" with "recent" if you want load latest post or "random" if you want load Random post
If you want load from other Blog. code look like this:
Ex: Load Tecnology from otherblog.com[Yours_Label_Name][fbig2][Other_URL]
[Tecnology][fbig2][http://otherblog.com]
if you want change Widget title color. code like this
ex: width this color: #BD1A1A[Yours_Label_Name][fbig2][Hexcolorcode]
[Yours_Label_Name][fbig2][#BD1A1A] - Then Click Save
Column 1
- On Blogger Dashbord Click Layout
- Click Add a Gadget on Magazine Widget Area
- Choose HTML/Javascript
- Copy this Code:
ex: load from Music label.[Yours_Label_Name][column1]
[Music][column1]
Note: "Yours_Label_Name" is yours Labels you want to load.
Note: you can change "Yours_Label_Name" with "recent" if you want load latest post or "random" if you want load Random post
If you want load from other Blog. code look like this:
Ex: Load Tecnology from otherblog.com[Yours_Label_Name][column1][Other_URL]
[Tecnology][column1][http://otherblog.com]
if you want change Widget title color. code like this
ex: width this color: #BD1A1A[Yours_Label_Name][column1][Hexcolorcode]
[Yours_Label_Name][column1][#BD1A1A]
if you want add Animated Effect. Code like this:
[Yours_Label_Name][column1 animated] - Then Click Save
Column 2
- On Blogger Dashbord Click Layout
- Click Add a Gadget on Magazine Widget Area
- Choose HTML/Javascript
- Copy this Code:
ex: load from Music label.[Yours_Label_Name][column2]
[Music][column2]
Note: "Yours_Label_Name" is yours Labels you want to load.
Note: you can change "Yours_Label_Name" with "recent" if you want load latest post or "random" if you want load Random post
If you want load from other Blog. code look like this:
Ex: Load Tecnology from otherblog.com[Yours_Label_Name][column2][Other_URL]
[Tecnology][column2][http://otherblog.com]
if you want change Widget title color. code like this
ex: width this color: #BD1A1A[Yours_Label_Name][column2][Hexcolorcode]
[Yours_Label_Name][column2][#BD1A1A]
if you want add Animated Effect. Code like this:
[Yours_Label_Name][column2 animated] - Then Click Save
Hot Post
- On Blogger Dashbord Click Layout
- Click Add a Gadget on Magazine Widget Area
- Choose HTML/Javascript
- Copy this Code:
ex: load from Music label.[Yours_Label_Name][hot]
[Music][hot]
Note: "Yours_Label_Name" is yours Labels you want to load.
Note: you can change "Yours_Label_Name" with "recent" if you want load latest post or "random" if you want load Random post
If you want load from other Blog. code look like this:
Ex: Load Tecnology from otherblog.com[Yours_Label_Name][hot][Other_URL]
[Tecnology][hot][http://otherblog.com]
if you want change Widget title color. code like this
ex: width this color: #BD1A1A[Yours_Label_Name][hot][Hexcolorcode]
[Yours_Label_Name][hot][#BD1A1A] - Then Click Save
