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

Revo Blogger Template is a most user friendly clean and minimal Responsive Blogspot theme to satisfy all your blogging needs for bloggers. Revo 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.

Features:

No	Feature	Test
1	Responsive	Check
2	Google Testing Tool Validator	Check
3	Mobile Friendly	Check
4	404 page	Check
5	Loading Speed	Check
6	Featured Widget	Check
7	Email Subscription
8	Auto Read More With Thumbnail
9	Ads Ready
10	Social Counter
11	3 Column Footer
12	Social & Search engine meta tags
13	2 Social Sharing Widgets
14	Multi Dropdown Menu
15	Search Widget
16	Colourful Social Widgets
17	Recent Post With Thumbnail
18	Label Based Recent Post
19	Related Posts with Thumbnail
20	Whatsapp Sharing Button
21	Mega menu
22	Custom Follow by Email Widget
23	Customized Comments
24	Detailed Documentation	Check
25	Widget Codes (Premium)

Preview Proof
Saksikan: 10 Kunci Dasar Menguasai Blogger | Step by Step Video Tutorial:

Step by Step Blogger Template Installation:

a. Mengganti Gambar Latar Belakang:

Silahkan cari kode berikut:

#header-wrapper {
position: relative;
width: 100%;
background:#3b4e5f url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9968Tyux59NyfGPR1_EUAr9RVYPUSGMug0I7Hn3TeDilKoR19K-jNUG7oocoOumHWjRf0KMVzwtfKDCGbA-4JreXW4XEYeHqct5xj51Hox1pOp6AWMLFbFQyzBtU7ELpOCcZeAiwnQAKh/s1600/bg-page-heading.jpg) repeat fixed top center;
z-index: 100;
font-size: 13px;
margin: 0
}

Kemudian ganti 'link warna merah' dengan 'link gambar saudara'.

b. Mengganti 'GLOBAL SETTINGS, USER CAN CHANGE'

Silahkan masuk ke 'Tema' lalu klik 'Edit HTML', lalu cari 'GLOBAL SETTINGS, USER CAN CHANGE', seperti berikut:

/*GLOBAL SETTINGS, USER CAN CHANGE*/
var tyOptions = {
    monthFormat: [, "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
    noThumbnail: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA1W7QWWXWM5zN2tMbqaAsI-fwNw-TorS8-AY31wMSP7N-whvbJ5c-Gp5XqxOlkM6H5HnNaSOpUHCzqTEM2U05ZXCB0T1xxt1o2RYXXCX83Pc2GPagUgGVTV0EjuFWk6EA084WCiRxfmc/s1600-r/nth.png",
    postperPage: 6,
    labelResults: 6,
    rTitleText: "Recent Posts",
    followByEmailText: "Subscribe for free and get the latest news and offers.",
    shareText: "Share:",
    relatedTitleText: "You Might Also Like",
    cmmTitleText: "Post a Comment"
};

Saudara bisa ganti isinya.

Bagian 1:

Pada bagian 1 terdapat:

[1] Favicon, [2] Boxed-Width Version (true/false), [3] Fixed Sidebar (true/false), [4] Mengonfigurasi Header, [5] Main Menu, [6] Subscribe Box.

1.1. Favicon

Menghapus / mengedit ikon favorit (Favicon). Klik untuk menghapus Favicon, lalu pilih untuk memilih file gambar Favicon, kemudian klik .

1.2. Boxed-Width Version (true/false)

Isi konten dengan: 'true' atau 'false'.

1.3. Fixed Sidebar (true/false)

Isi konten dengan: 'true' atau 'false'.

1.4. Revo - KSB (Header)

Mengganti / menghapus Logo Blog. Saudara bisa klik untuk menghapus Logo Blog, lalu pilih , kemudian pilih penempatan: dan klik .

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

No	Pilihan	Contoh Link
1	Features	#
2	_ShortCodes	revo-ksb.blogspot.com/p/post-format-and-page-markup.html
3	_SiteMap	revo-ksb.blogspot.com/sitemap.html
4	_Error Page	https://revo-ksb.blogspot.com/templateyard
5	Seo Service	https://revo-ksb.blogspot.com/
6	Mega Menu	[Graphics,mega]
7	Documentation	https://kuncisuksesblogger.blogspot.com/
8	Download This Template	https://kuncisuksesblogger.blogspot.com/

1.6. Subscribe Box / Subscription Widget [Kotak Langganan]

Tuliskan kode berikut di bagian konten 'Subscribe Box' lalu hapus isi Judul:

<div id='subscribe-css'>
<p class='subscribe-note'><span>Subscription</span> <span class='itatu'>&</span> Newsletter</p>
<p class='sub-desc'>Subscribe for New Post Notifications</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=templatesyard' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=templatesyard&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='templatesyard'/>
<input name='loc' type='hidden' value='en_US'/>
<input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/>
<input class='subscribe-css-email-button' title='' type='Submit' value='Subscribe'/>
</form>
</div>
</div>
</div>

Ganti 'templatesyard' dengan 'id feedburner' saudara.

Bagian 2:

Pada bagian 2 terdapat:

[1] FEATURED POSTS, [2] Ad Home, [3] Mengonfigurasi Postingan Blog [Posting Blog], [4] Social Counter, [5] Newsletter, [6] Popular Posts, [7] Facebook, [8] Recent in Design, [9] Labels.

2.1. FEATURED POSTS

Isi konten dengan: 'Graphics'

2.2. Ad Home

Isi konten dengan:

<div style="max-width:100%;height:90px;margin:0 auto;text-align: center;line-height: 90px;color: #000;text-transform: uppercase;font-size: 30px;font-weight: bold;cursor: pointer;border: 5px solid #ccc;box-sizing: border-box;">BANNER 728X90</div>

2.3. Posting Blog

Mengatur tampilan postingan dalam blog, caranya:

Klik 'Tema', pilih 'Edit HTML' cari 'postperPage: 6',
Ganti 'Jumlah postingan di halaman utama' dengan nilai variabel yang sama dengan variabel 'postperPage: 6', dimana nilai variabel 6 bisa saudara ganti sesuai keinginan saudara.

2.4. Social Counter

Isi konten dengan:

<style>
/* Social Counter
--------------------------------------*/

li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}

#sidebar .widget {
margin-bottom: 35px;
}

a.social_item {
position: relative;
display: block;
height: 60px;
line-height: 60px;
overflow: hidden;
}

.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}

.social_icon {
float: left;
line-height: 60px;
width: 41px;
font-size: 1.3rem;
}

a.social_item.social_facebook {
background: #3F5B9B;
}

.fa-facebook.social_icon {
background: #2E4372;
}

li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}

li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}

a.social_item.social_twitter {
background: #1C97DE;
}

.fa-twitter.social_icon {
background: #1571A5;
}

li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}

li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}

a.social_item.social_youtube {
background: #E22020;
}

.fa-youtube.social_icon {
background: #B31919;
}

li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}

li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}

a.social_item.social_dribbble {
background: #E82159;
}

.fa-dribbble.social_icon {
background: #B51A45;
}

li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}

li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}

a.social_item.social_rss {
background: #E86321;
}

.fa-rss.social_icon {
background: #C2521B;
}

li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}

li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}

a.social_item.social_google-plus {
background: #E82C2C;
}

.fa-google-plus.social_icon {
background: #BF2424;
}

li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}

li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}

a.social_item.social_linkedin {
background: #0275B6;
}

.fa-linkedin.social_icon {
background: #02669E;
}

li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}

li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}

a.social_item.social_instagram {
background: #8E714D;
}

.fa-instagram.social_icon {
background: #6F583C;
}

li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}

li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}

a.social_item.social_pinterest {
background: #CA2027;
}

.fa-pinterest.social_icon {
background: #AB1B21;
}

li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}

li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}

ul.social-counter a {
color: #fff;
}

</style>
<div class="socialcounter">
<ul class="social-counter">
<li class="social_item-wrapper">
<a href="#" class="social_item social_facebook">
<i class="fa fa-facebook social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_twitter">
<i class="fa fa-twitter social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_youtube">
<i class="fa fa-youtube social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_dribbble">
<i class="fa fa-dribbble social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_rss">
<i class="fa fa-rss social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_google-plus">
<i class="fa fa-google-plus social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_linkedin">
<i class="fa fa-linkedin social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
<li class="social_item-wrapper">
<a href="#" class="social_item social_instagram">
<i class="fa fa-instagram social_icon"></i>
<span class="social_num">230,000</span>
</a>
</li>
</ul>
</div>

Ganti '#', tanda pagar merah dengan 'URL saudara'.

2.5. Newsletter

Mengonfigurasi Ikuti Lewat Email.

2.6. Popular Posts

Konfigurasikan Postingan Populer.

2.7. Facebook

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

Ganti 'https://www.facebook.com/arnold/' dengan URL saudara.

2.8. Recent in Design

Isi konten dengan: [3,Design,post-tag]

2.9. Labels

Konfigurasikan labels [Categories].

Bagian 3:

Pada bagian 3 terdapat:

[1] Recent Posts, [2] Archive, [3] Graphics, [4] Categories [Labels], [5] Social Media Icons, [6] Copyright Footer Credit Code.

3.1. Recent Posts

Isi konten dengan: [3,recent-posts]

3.2. Archive

Konfigurasikan Arsip

3.3. Graphics

Isi konten dengan: [3,Graphics,post-tag]

3.4. Categories [Labels]

Konfigurasikan Labels

3.5. Social Media Icons

No	Media Sosial	Contoh URL
1	facebook	https://www.facebook.com/
2	twitter	https://twitter.com/
3	gplus	https://google.com/
4	pinterest	https://www.pinterest.com/
5	rss	https://rss.com/

Ganti 'Contoh URL' dengan 'URL saudara'.

Media Sosial yang tersedia: facebook, twitter, gplus, rss, youtube, skype, stumbleupon, tumblr, vine, stack-overflow, linkedin, dribbble, soundcloud, behance, digg, instagram, pinterest, delicious, codepen.

3.6. Menambahkan Copyright Footer Credit

Ada banyak cara menambahkan 'Copyright Footer Credit Code'. Antara lain:

Klik 'Tema', lalu klik 'Edit HTML'.
Letakkan kursor mouse didalam 'kotak editor'.
Tekan 'CTRL+F' (kotak pencarian)
Isi dengan "<div class='copyright'>".
Tekan Enter.
Ganti 'Your Copyright Footer Code'.

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

'Copyright Footer' Dengan Tahun Otomatis 'Automatic Year':

<a href="https://kuncisuksesblogger.blogspot.com/">Nama Blog Anda</a> © 2019-<script>document.write(new Date().getFullYear())</script>. All Rights Reserved.

'Copyright Footer' Tanpa Tahun Otomatis 'No Automatic Year':

<a href="https://kuncisuksesblogger.blogspot.com/">Nama Blog Anda</a> © 2019-2020. All Rights Reserved.

Ganti 'URL Merah' dengan URL saudara.

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">A</span>, dimana A 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>  </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://revo-ksb.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
</div>

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

Video (menyusul):

Download:

Revo Premium
Sekian. Teima kasih.

Kunci Sukses Blogger

Popular All Time

Labels

Blog Archive

Showing result(s) for

Popular Posts

Pages

Ads 728 x 90

Main Menu