Top Magazine Blogger Template Free Download Plus Tutorial From Zero - REMOVED FOOTER CREDIT

Top Magazine is a robust blogger template with top notch clean design, It has many powerful features and widget to match the criteria of any niche blog related to magazine, news, personal and business. Top magazine is equipped with various of widgets which will help you to publish your blog more professionally.

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:

---

Bagian 1

Pada bagian 1 terdapat: 1. Favicon, 2. Full Width CSS, 3. Related Posts Display, 4. Post Navigation Display, 5. Top Menu, 6. Top Social Icons, 7. Top Magazine (Header), 8. Header Ads, 9. Main Menu, 10. Featured.
1.1. Favicon
Konfigurasikan Ikon Favorit.
1.2. Full Width CSS
Isi '100%' untuk "full width", isi '1133px' or "</a>" untuk "boxed version".
1.3. Related Posts Display
Menyembunyikan isi 'none', menampilkan isi 'block'.
1.4. Post Navigation Display
Menyembunyikan isi 'none', menampilkan isi 'block'.
1.5. Top Menu
Mengonfigurasi Daftar Link.
1.6. Top Social Icons
Mengonfigurasi Daftar Link.
Ikon media sosial yang disediakan: facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen.
1.7. Top Magazine (Header)
Mengonfigurasi Header.
1.8. Header Ads
Mengonfigurasi HTML/JavaScript.
1.9. Main Menu
Mengonfigurasi Daftar Link.
1.10. Featured
Isi 'Konten' dengan salah satu dari 3 macam pengkondisian:
Random Posts: <div id="random"></div>
Recent Posts: <div id="recent"></div>
Label Posts: <div id="label" data-label="Sports"></div>

---

Tampilan jenis 'Magazine' atau 'Box':
Types: 'mag' dan 'sbox'
Tampilan jenis 'Magazine':

Sintak Magazine (mag): <div id="mag" data-label="Fashion"></div>
Tampilan jenis 'Box':

Sintak Box (box): <div id="box" data-label="Business"></div>

---

Bagian 2

Pada bagian 2 terdapat: 1. Music, 2. Posting Blog, 3. Comments System, 4. Disqus Shortname, 5. Nature, 6. STAY WITH US, 7. Facebook, 8. Popular Posts, 9. Categories, 10. Recent Comments.
2.1. Music
Isi 'Konten' dengan: <div id="mag" data-label="Music"></div>
2.2. Posting Blog
Mengonfigurasi Postingan Blog
3.3. Comments System
Mengonfigurasi HTML/JavaScript untuk 3 macam sistem komentar.
blogger untuk blogger comments.
facebook untuk facebook comments.
disqus untuk disqus comments.
2.4. Disqus Shortname
Mengonfigurasi HTML/JavaScript untuk nama disqus. Pada 'Konten' isi nama disqus saudara.
2.5. Nature
Isi 'Konten' dengan: <div id="box" data-label="Nature"></div>
2.6. STAY WITH US
Isi 'Konten' dengan:

<div class="kt-social-buttons-widget">
<ul class="sidebar-social clearfix">
<li>
<a href="#" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter">
</i>
</a>
</li>
<li>
<a href="#" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook">
</i>
</a>
</li>
<li>
<a href="#" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube">
</i>
</a>
</li>
<li>
<a href="#" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram">
</i>
</a>
</li>
</ul>
</div>

Ganti '#' dengan URL saudara.
2.7. Facebook
Isi 'Konten' dengan:

<center>
<div class='fb-page' data-href='https://www.facebook.com/soratemplates/' data-width='360' data-small-header='false' data-adapt-container-width='true' data-hide-cover='false' data-show-facepile='true'>
</div>
</center>

Ganti 'https://www.facebook.com/soratemplates/' dengan URL saudara.
2.8. Popular Posts
Konfigurasikan Postingan Populer.
2.9. Categories
Konfigurasikan label.
2.10. Recent Comments
Isi 'Konten' dengan: <div id="recentcomments"></div>

---

Bagian 3

Pada bagian 3 terdapat: 1. Random Posts, 2. Recent Posts, 3. Recent in Sports, 'Copyright Footer Credit'.
3.1. Random Posts
isi 'Konten' dengan: <div id="randomposts"></div>
3.2. Recent Posts
isi 'Konten' dengan: <div id="recentposts"></div>
3.3. Recent in Sports
isi 'Konten' dengan: <div id="labelpost" data-label="Sports"></div>
3.4. 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'>".
• Tekan 'Enter'.
• Letakkan 'Copyright Footer Credit Code' diantara '<div class='copyright'>' dan </div>.

<div class='copyright'>
<!-- Your Copyright Footer Code -->
</div>

'Copyright Footer Credit Code' dengan Tahun Otomatis:

<a href="https://top-magazine-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://top-magazine-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: <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

4.3. Tabel

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:4.5. Numbering List dan Bullet List

Gunakan Numbering List dan Bullet List, sehingga hasilnya:4.6. Buttons
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:

<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:

<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('&lt;textarea&gt;' + a + '&lt;/textarea&gt;');
}</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://top-magazine-ksb.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

Silahkan ganti 'https://top-magazine-ksb.blogspot.com' dengan nama blog saudara.

---

Video (menyusul):

Download:

Top Magazine Premium
Sekian. Teima kasih.