Enside blogger template is a semi magazine template with great features like featured post, social media widgets ready and a lot of space for adsense ads. Enside is equipped with various of widgets which will help you to publish your blog more professionally. To make it easy for you we have published this detailed documentation, so that you can setup your blog correctly. You have made a good decision by choosing our template.
Specifications:
No | Features | Availability | |
---|---|---|---|
1 | Responsive | True | Check |
2 | Google Testing Tool Validator | True | Check |
3 | SEO Friendly | True | 100% |
4 | Mobile Friendly | True | Check |
5 | 404 page | True | Check |
6 | Loading Speed | True | Check |
7 | Featured Post | True | |
8 | Full Width Post Layout | True | |
9 | Auto Read More With Thumbnail | True | |
10 | Ads Ready | True | |
11 | Two types of menu | True | |
12 | Multi Dropdown Menu | True | |
13 | Search Widget | True | |
14 | Colourful Social Widgets | True | |
15 | Related Posts with Thumbnail | True | |
16 | Social Share Button | True | |
17 | Email Newsletter Widget | True | |
18 | 3 Types of Comments | True | |
19 | Recent Post Widget | True | |
20 | Label Post Widget | True | |
21 | Detailed Documentation | True | |
22 | Video Documentation | True | |
23 | Widget Codes (Premium) | True |
Preview Proof
Saksikan: 10 Kunci Dasar Menguasai Blogger | Step by Step Video Tutorial:
MAGAZINE WIDGETS:
A. Post Layouts:
Left Sidebar: Didalam postingan tambahkan teks '
left-sidebar
' dan diberi gaya Strikethrough.Full Width: Didalam postingan tambahkan teks '
full-width
' dan diberi gaya Strikethrough.Right Sidebar: Didalam postingan tambahkan teks '
right-sidebar
' dan diberi gaya Strikethrough.B. Hot Posts (Fashion)
Parameter Hot Posts ada 3 macam:
Hot Posts menggunakan Label: 'Label/hot-posts', misalnya:
Technology/hot-posts
Hot Posts menggunakan Recent Posts:
recent/hot-posts
Hot Posts menggunakan Random Posts:
random/hot-posts
C. Post List Widget:
Contoh: 'Random Posts' dan 'Recent Posts', juga bisa diletakkan di side bar.
Shortcode-nya: "Angka"+"/"+"Label Post" atau "recent" atau "random"+"/post-list"
Sintak-nya:
Label Posts:
3/Technology/post-list
Recent Posts:
3/recent/post-list
Random Posts:
3/random/post-list
Bagian 1
Pada bagian 1 terdapat: [1] Favicon, [2] Css Options, [3] Default Variables, [4] Top Menu / Footer Menu, [5] Top Social Media, [6] Header, [7] Header Ads, [8] Mobile Logo, [9] Main Menu, [10] Hot Posts (People).
1.1. Favicon
Menghapus / mengedit ikon favorit (Favicon). Klik untuk menghapus Favicon, lalu pilih untuk memilih file gambar Favicon, kemudian klik .
1.2. Css Options
Terdapat dua hal, yaitu: 'fullWidth' dan 'recentPostsHeadline'
Isi Name dengan '
fullWidth
' - isi URL dengan 'true
' atau 'false
'.Isi Name dengan '
recentPostsHeadline
' - isi URL dengan 'true
' atau 'false
'.1.3. Default Variables
Terdapat 4 hal, yaitu:
Isi Name
disqusShortname
- isi URL dengan nama disqus saudara.Isi Name
commentsSystem
- isi URL dengan 'blogger
', / 'facebook
' / 'disqus
' / 'hide
'.Isi Name
fixedSidebar
- isi URL dengan 'true
' atau 'false
'Isi Name
postPerPage
- isi URL dengan jumlah postingan yang ditampilkan per halaman.1.4. Top Menu / Footer Menu
Seperti biasa isi 'Nama Situs Baru' lalu isi juga 'URL Situs Baru', klik . Setelah terletak dibawah, saudara bisa gunakan klik untuk mengedit Name dan URL, atau klik untuk menghapus. Gunakan juga klik dan klik untuk mengatur susunan Link List - Main Menu. Setelah OK klik .
1.5. Top Social Media
Seperti biasa isi 'Nama Situs Baru' lalu isi juga 'URL Situs Baru', klik . Setelah terletak dibawah, saudara bisa gunakan klik untuk mengedit Name dan URL, atau klik untuk menghapus. Gunakan juga klik dan klik untuk mengatur susunan Link List - Main Menu. Setelah OK klik .
Ikon media sosial yang disediakan: blogger, facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vk, stack-overflow, github, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, twitch, delicious, codepen, flipboard, reddit, whatsapp, messenger, snapchat, email.
1.6. Header
Mengganti / menghapus Logo Blog. Saudara bisa klik untuk menghapus Logo Blog, lalu pilih , lalu pilih penempatan: dan klik .
1.7. Header Ads
Menempatkan Iklan atau Advertising pada Header. Isi dengan script saudara atau silahkan isi dengan script berikut ini:
<a href='#'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX4FA7U0jh9iDpCsDnrw_p0nq3q7pgPMrbwL25yHHblOs2ZoV2vNVzNjZOt90ZO8RcvkzRjyg7K6l85OABr2rNidf0XDHV6FNyqyWsPAeh8-ia0AtS6S2Fx4uA-w84PWZyyZCx2JinMOBz/s728/ad728.png' alt='header ads'/></a>
Silahkan ganti 'URL yang berwarna merah'.1.8. Mobile Logo
Mengganti / menghapus Logo Blog yang terlihat di Mobile. Saudara bisa klik untuk menghapus Logo Blog, lalu pilih , kemudian pilih Penempatan: dan klik .
1.9. Main Menu
Seperti biasa isi 'Nama Situs Baru' lalu isi juga 'URL Situs Baru', klik . Setelah terletak dibawah, saudara bisa gunakan klik untuk mengedit Name dan URL, atau klik untuk menghapus. Gunakan juga klik dan klik untuk mengatur susunan Link List - Main Menu. Setelah OK klik .
Contoh:
Saudara bisa mengganti contoh URL diatas.
Ada 3 Macam Mega Menu Shortcode:
Mega Menu Shortcode menggunakan Label:
Mega Menu Shortcode menggunakan Recent Post:
Mega Menu Shortcode menggunakan Random Post:
1.10. Hot Posts (People)No | Pilihan / Menu | Contoh URL |
---|---|---|
1 | Home | https://kuncisuksesblogger.blogspot.com/ |
2 | Features | https://kuncisuksesblogger.blogspot.com/ |
3 | _Multi DropDown | https://kuncisuksesblogger.blogspot.com/ |
4 | __DropDown 1 | https://kuncisuksesblogger.blogspot.com/ |
5 | __DropDown 2 | https://kuncisuksesblogger.blogspot.com/ |
6 | __DropDown 3 | https://kuncisuksesblogger.blogspot.com/ |
7 | _ShortCodes | https://kuncisuksesblogger.blogspot.com/ |
8 | _SiteMap | https://kuncisuksesblogger.blogspot.com/ |
9 | _Error Page | https://kuncisuksesblogger.blogspot.com/ |
10 | Mega Menu | recent/mega-menu |
11 | Video Documentation | https://kuncisuksesblogger.blogspot.com/ |
12 | Documentation | https://kuncisuksesblogger.blogspot.com/ |
13 | Download This Template | https://kuncisuksesblogger.blogspot.com/ |
Ada 3 Macam Mega Menu Shortcode:
Mega Menu Shortcode menggunakan Label:
Technology/mega-menu
Mega Menu Shortcode menggunakan Recent Post:
recent/mega-menu
Mega Menu Shortcode menggunakan Random Post:
random/mega-menu
Klik 'Edit', lalu isi konten dengan 'Technology/hot-posts'.
Parameter Hot Posts ada 3 macam:
Hot Posts menggunakan Label: 'Label/hot-posts', misalnya:
Fashion/hot-posts
Hot Posts menggunakan Recent Posts:
recent/hot-posts
Hot Posts menggunakan Random Posts:
random/hot-posts
Bagian 2:
Pada bagian 2 ini terdapat: [1]. Postingan Blog, [2]. Social Media Side Bar, [3]. Featured Post, [4]. Popular Posts, [5]. Facebook, [6]. Advertisement, [7]. Follow by Email, [8]. Categories, [9]. Tags.
1. Postingan Blog
Pada bagian 'Jumlah postingan di halaman utama:' isikan jumlah postingan per halaman.
2. Social Media Side Bar
Mengonfigurasi Daftar Link 'Social Media Side Bar'
Seperti biasa isi 'Nama Situs Baru' lalu isi juga 'URL Situs Baru', klik . Setelah terletak dibawah, saudara bisa gunakan klik untuk mengedit Name dan URL, atau klik untuk menghapus. Gunakan juga klik dan klik untuk mengatur susunan Link List - Main Menu. Setelah OK klik .
3. Featured Post
Konfigurasikan Entri yang Diunggulkan
4. Popular Posts
Konfigurasikan Postingan Populer
5. Facebook
Isi bagian 'Konten' dengan:
<center>
<div class="fb-page" data-href="https://www.facebook.com/arnold" data-width="360" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true">
</div>
</center>
Silahkan ganti 'URL warna merah'.6. Advertisement / Banner
Menampilkan kotak banner pada sisi kanan.
Isi 'Konten' dengan:
<div style="width:100%;height:250px;margin:0 auto;text-align: center;line-height: 250px;color: #000;text-transform: uppercase;font-size: 30px;font-weight: bold;cursor: pointer;border: 5px solid #ccc;box-sizing: border-box;">AD BANNER</div>Silahkan ganti dengan kode lain.
7. Follow by Email
Mengonfigurasi Ikuti Lewat Email.
8. Categories
Konfigurasikan label.
9. Tags
Konfigurasikan label.
Bagian 3:
Pada bagian 3 terdapat: [1]. Gambar, [2]. Teks, [3]. Search This Blog, [4]. Random Posts, [5]. Recent Posts, [6]. Menu Footer Widget, [7]. Copyright Footer Credit.
1. Gambar
Mengonfigurasi Gambar.
2. Teks
Mengonfigurasi Teks.
3. Search This Blog
Konfigurasikan Kotak Penelusuran.
4. Random Posts
Pada 'Konten' isikan:
3/random/post-list
5. Recent Posts
Pada 'Konten' isikan:
3/recent/post-list
6. Menu Footer Widget
Mengonfigurasi Daftar Link - Menu Footer Widget.
7. Copyright Footer Credit
Menambahkan 'Copyright Footer Credit'.
Ada banyak cara untuk menambahkan 'Copyright Footer Credit'. Langkah-langkahnya:
- Buka dashboard, klik 'Theme', lalu klik 'Edit HTML'.
- Tempatkan kursor di dalam 'script editor box'.
- Gunakan 'CTRL+F'.
- Isi dengan "<div class='copyright-area'>".
- Tekan 'Enter'.
- Letakkan 'Copyright Footer Credit Code' diantara '<div class='copyright-area'>' dan </div>.
<div class='copyright'>
<!-- Your Copyright Footer Code -->
</div>
'Copyright Footer Credit Code' dengan Tahun Otomatis:<a href="https://enside-ksb.blogspot.com/">Nama Blog Kamu</a> © 2019-<script>document.write(new Date().getFullYear())</script>. All Rights Reserved.
'Copyright Footer Credit Code' tanpa Tahun Otomatis:<a href="https://enside-ksb.blogspot.com/">Nama Blog Kamu</a> © 2019-2020. All Rights Reserved.
Ganti 'URL warna merah' with URL saudara, lalu ganti 'Nama Blog Kamu' juga.Bagian 4: Features - Shortcodes
Pada bagian 4 terdapat:
[1] Drop Caps, [2] Typography (Font size, Format - Text Heading Style, Bold, Italic, Underline, Strikethrough, Text color, Text Background Color, Link), [3] Tables, [4] Blockquote, [5] Numbering List and Bullet List, [6] Buttons (Simple Buttons, Buttons With Icons), [7] Alert Boxes, [8] Code Box, [9] Contact Form.
4.1. Drop Caps
Gunakan script berikut:
4.2. Typography
Lihat tabel:
4.3. Tabel
Gunakan script dibawah ini:
Arahkan mouse ke dalam suatu teks atau paragraf, kemudian klik 'Quote'. Kemudian hasilnya sebagai berikut:
4.5. Numbering List dan Bullet List
Gunakan Numbering List dan Bullet List, sehingga hasilnya:
4.6. Buttons
Simple Buttons:
Gunakan Script dibawah ini:
Gunakan script berikut:
<span class="firstcharacter">L</span>
, dimana L adalah huruf pertama didalam suatu paragraf. Hasilnya sebagai berikut:4.2. Typography
Lihat tabel:
No | Pilihan Typography | Fungsi |
---|---|---|
1 | Text Size | Mengatur ukuran Font |
2 | Format | Mengatur Teks - Heading, Subheading, Minor Heading, dan Normal |
3 | Bold | Mempertebal Teks |
4 | Italic | Mencetak miring Teks |
5 | Underline | Menggaris-bawahi Teks |
6 | Strikethrough | Mencoret Teks |
7 | Text Color | Memberi warna pada Teks |
8 | Text Background Color | Memberi warna latar belakang Teks |
9 | Link | Membuat URL |
Gunakan script dibawah ini:
<div class="post-table"> <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Hero Title</th> </tr> </thead> <tbody> <tr> <td data-label="First Name">Bruce</td> <td data-label="Last Name">Wayne</td> <td data-label="Hero Title">Batman</td> </tr> <tr> <td data-label="First Name">Peter</td> <td data-label="Last Name">Parker</td> <td data-label="Hero Title">Spiderman</td> </tr> <tr> <td data-label="First Name">Bruce</td> <td data-label="Last Name">Banner</td> <td data-label="Hero Title">The Hulk</td> </tr> <tr> <td data-label="First Name">Clark</td> <td data-label="Last Name">Kent</td> <td data-label="Hero Title">Superman</td> </tr> </tbody> </table> </div>4.4. Blockquote
Arahkan mouse ke dalam suatu teks atau paragraf, kemudian klik 'Quote'. Kemudian hasilnya sebagai berikut:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5RacNFnRkHx4E3vzaDAKSlYxZgdtJrTdaUgbNft4aBXetA20cDb9MhRTgLTolYTJofghCcMXGUJhRThqJR2Fwq5iJdv-0arrMJsDgM_1cRc2YzCsa5VzvAwsqLoIMBlUwgJDmkK1IBdo/s640/Bagian_4-4b_JPG.jpg)
Gunakan Numbering List dan Bullet List, sehingga hasilnya:
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYpjOecvMgiflhmrZaf6GTEK8Ouzxm97It9_jZ2_l3GK69YKDutRBM-DgDXyDwAbWXe8ZACzakYJIg3VubgoA_pVFXBeCHL8ukU7_svQAbZnZKB4_GQ0p1xHOGNQsGOoIvMD4G9jnujkI/s640/Bagian_4-5b_JPG.jpg)
Simple Buttons:
Gunakan Script dibawah ini:
<div class="small-button"> <a class="button small" href="https://www.blogger.com">Button Small</a> <a class="button medium" href="https://www.blogger.com">Button Medium</a> <a class="button large" href="https://www.blogger.com">Button Large</a> </div>Silahkan ganti '
https://www.blogger.com
' dengan 'URL saudara'.
Buttons With Icons:
Gunakan Script dibawah ini:
Gunakan Script dibawah ini:
<div class="small-button"> <a class="button small demo" href="https://www.blogger.com">Demo Button</a> <a class="button medium demo" href="https://www.blogger.com">Demo Button</a> <a class="button large demo" href="https://www.blogger.com">Demo Button</a> <br> <div class="clear"> </div> <a class="button small download" href="https://www.blogger.com">Download Button</a> <a class="button medium download" href="https://www.blogger.com">Download Button</a> <a class="button large download" href="https://www.blogger.com">Download Button</a> <br> <div class="clear"> </div> <a class="button small buy" href="https://www.blogger.com">Buy Now Button</a> <a class="button medium buy" href="https://www.blogger.com">Buy Now Button</a> <a class="button large buy" href="https://www.blogger.com">Buy Now Button</a> <br> <div class="clear"> </div> <a class="button small visit" href="https://www.blogger.com">Visit a Link Button</a> <a class="button medium visit" href="https://www.blogger.com">Visit a Link Button</a> <a class="button large visit" href="https://www.blogger.com">Visit a Link Button</a> </div>Silahkan ganti '
https://www.blogger.com
' dengan 'URL saudara'.
4.7. Alert Boxes
Gunakan Script dibawah ini:
Gunakan Script dibawah ini:
Gunakan Script dibawah ini:
Bagian 5: Sitemap
Gunakan Script berikut ini:
Video (menyusul):
Sekian. Teima kasih.
Gunakan Script dibawah ini:
<div class="alert-message success"> <i class="fa fa-check-circle"></i> success message You successfully read this important message.</div> <div class="alert-message alert"> <i class="fa fa-info-circle"></i> Alert message This alert needs your attention.</div> <div class="alert-message warning"> <i class="fa fa-exclamation-triangle"></i> Warning message Warning! Best check yo self.</div> <div class="alert-message error"> <i class="fa fa-exclamation-circle"></i> Error message Oh snap! Change a few things up</div> </div>4.8. Code Box
Gunakan Script dibawah ini:
<pre> <!-- Your Code --> </pre>
<pre>function generate() { var a = $('#container').html(); var b = window.open('', '', 'width=600,height=400'); b.document.write('<textarea>' + a + '</textarea>'); }</pre>4.9. Contact Form
Gunakan Script dibawah ini:
<div class="contact-form"> <div class="contact section" id="contact" style="display: block;"> <div class="widget ContactForm" id="ContactForm1"> <div class="contact-form-widget"> <div class="form"> <form name="contact-form"> <input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /> <input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /> <textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea> <input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send" /> <br /> <div style="text-align: center; width: 100%;"> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div> </div> </div> </div>
Bagian 5: Sitemap
Gunakan Script berikut ini:
<style type="text/css">
#toc{
width:99%;
margin:5px auto;
border:1px solid #2D96DF;
-webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
-moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);
}
.labl{
color:#FF5F00;
font-weight:bold;
margin:0 -5px;
padding:1px 0 2px 11px;
background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%);
background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE));
border:1px solid #2D96DF;
border-radius:4px;-moz-border-radius:4px;
-webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb;
-moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;
}
.labl a{
color:#fff;
}
.labl:first-letter{text-transform:uppercase;
}
.new{
color:#FF5F00;
font-weight:bold;
font-style:italic;
}
.postname{
font-weight:normal;
background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%);
background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));
}
.postname li{
border-bottom: #ddd 1px dotted;
margin-right:5px
}
</style>
<div id="toc">
<script src="http://makingdifferent.github.io/blogger-widgets/sitemappage.js" type="text/javascript"></script>
<script src="https://enside-ksb.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
</div>
Silahkan ganti 'https://enside-ksb.blogspot.com' dengan nama blog saudara.Video (menyusul):
Download:
Enside PremiumSekian. Teima kasih.
Post A Comment:
0 comments: