RIPPLE FREE VERSION

Getting Started

Theme Info

Created: 02/05/2015

Ripple clean and responsive is a simple Blogger template with Responsive layout and suited for all blog. It's design with minimalist and simple color combination, clean and modern look, SEO Optimized, and has been built by using some of the most popular current design trends.

Features

  • Responsive
  • SEO
  • Dynamic Heading
  • 2 Column Style
  • Clean Typography
  • Minimalist
  • Homepage Share Button
  • Responsive Dropdown Navigation
  • Light Base Theme Color
  • Breadcrumbs
  • Related Posts with Thumb
  • Search Box
  • Social Share Button
  • Numbered Page Navigation
  • Custom 404 Page
  • Smooth Scroll back To Top
  • Custom Subscribe Box Widget
  • Multi Author Box
  • And more..

Beberapa artikel yang mungkin dapat membantu Anda.

Installation

  • 1. Log in ke Blogger dashboard dan buka Template > Edit HTML.
  • 2. Silahkan backup template lama Anda jika Anda memutuskan untuk menggunakannya lagi. Untuk melakukan ini, klik pada "download template lengkap" link dan simpan template.
  • 3. Kemudian, cari lokasi XML template yang baru saja Anda download dan tekan "Upload".

    • Customize Theme

    Silakan buka Blogger > Template > "Edit HTML"

    Cari dan ganti semua kode ini # dengan tulisan Anda.

    Main Navigation : 
    <div id='cssmenu' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
<ul>
   <li><a class='actv' href='#' itemprop='url'><span itemprop='name'>Home</span></a></li>
   <li class='active'><a href='#'>Menu 1</a>
      <ul>
         <li><a href='#'>Menu 1</a></li>
         <li><a href='#'>Menu 2</a></li>
         <li><a href='#'>Menu 3</a>
            <ul>
               <li><a href='#'>Sub Menu</a></li>
               <li><a href='#'>Sub Menu</a></li>
            </ul>
         </li>
         <li><a href='#'>Menu 4</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>
      </ul>
   </li>
   <li class='active'><a href='#'>Menu 2</a>
      <ul>
         <li><a href='#'>Menu 1</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='#'>Menu 2</a>
            <ul>
               <li><a href='#'>Sub Menu</a></li>
               <li><a href='#'>Sub Menu</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li class='active'><a href='#'>Menu 3</a>
      <ul>
         <li><a href='#'>Menu 1</a>
            <ul>
               <li><a href='#'>Sub Menu</a></li>
               <li><a href='#'>Sub Menu</a></li>
            </ul>
         </li>
         <li><a href='#'>Menu 2</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>
      </ul>
   </li>
   <li><a href='#'>Shortcode</a></li>
   <li><a href='#'>Disclaimer</a></li>
   <li><a href='#'>Contact</a></li>
   <li><a href='#'>404 Page</a></li>
</ul>
</div>
    Page Navigation :

    Cari dan ubah nilai dari postperpage=5; dan numshowpage=2;

    var postperpage=5;
    var numshowpage=2;
    var upPageWord ='<i class="fa fa-angle-double-left"></i>';
    var downPageWord ='<i class="fa fa-angle-double-right"></i>';
    var urlactivepage=location.href;
    var home_page="/";

    SEO Meta Tag

    Buka Blogger > Template > "Edit HTML"

    Cari dan ganti semua tulisan xxxxx dengan tulisan Anda. 

    <meta content='xxxxx' name='keywords'/>
<link href='https://plus.google.com/xxxxx/posts' rel='publisher'/>
<link href='https://plus.google.com/xxxxx/about' rel='author'/>
<link href='https://plus.google.com/xxxxx' rel='me'/>
<meta content='xxxxx' name='google-site-verification'/>
<meta content='xxxxx' name='msvalidate.01'/>
<meta content='xxxxx' name='alexaVerifyID'/>
<meta content='xxxxx' name='Author'/>
<meta content='xxxxx' property='fb:app_id'/>
<meta content='xxxxx' property='fb:admins'/>
<meta content='xxxxx' name='twitter:site'/>
<meta content='xxxxx' name='twitter:creator'/>

    Post Page

    Iklan Postingan [Ads Inside Post]

    Cari dan ganti tulisan ini dengan skrip kode iklan Anda :

    Anda bisa memparse kode iklan disini Ad Converter.

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</b:if>

    Widget

    Contact Form

    Buat post di halaman statis > kemudian terapkan kode di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan kode ini, disarankan untuk tidak menggunakan mode Compose pada halaman ini.

    <form name="contact-form">
<span style="color: #666666; font-family: Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-user"></i> Name </span>
<input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-envelope"></i> Email Address <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span> 
<input id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />  

<span style="color: #666666; font-family: Arial,Helvetica,sans-serif; font-weight: 700;"><i class="fa fa-pencil-square-o"></i> Content <span style="color: #f56954; font-size: x-small; font-weight: bold;">important</span></span>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea> 
<input id="ContactForm1_contact-form-submit" type="button" value="Send" />  
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>

<style scoped="" type="text/css">
#comments,.post_meta,#blog-pager {display:none;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{
width:100%;height:auto;margin:5px auto;padding:10px;background:#fff;color:#444;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fff;color:#444;font-family:'Open Sans',sans-serif;border:1px solid #ddd;border-radius:3px;transition:all 0.5s ease-out;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{outline:none;background:#fff;color:#444;border-color:rgba(81,203,238,1);box-shadow:0 0 5px rgba(81,203,238,0.7);}
#ContactForm1_contact-form-submit {width:100%;font-family:'Open Sans';float:left;background:#fff;color:#aaa;margin:10px auto;vertical-align:middle;cursor:pointer;padding:10px 18px!important;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;border-radius:3px;background-image: linear-gradient(110deg, #7986cb 0%, #7986cb 50%, transparent 50%, transparent 100%);background-size:200%;background-position:120% 0;background-repeat:no-repeat;border:1px solid #ddd;transition:all .8s ease, background-position .8s ease, color .8s ease;}
#ContactForm1_contact-form-submit:hover {color:#fff;background-position:0 0;border-color:#7986cb;}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width:100%;margin-top:35px;}
.contact-form-error-message-with-border {background:#f36c60;border:none;box-shadow:none;color:#fff;padding:5px 0;}
.contact-form-success-message {background:#4fc3f7;border:none;box-shadow:none;color:#fff;}
img.contact-form-cross {line-height:40px;margin-left:5px;}
</style>
    About Me

    Cari dan ubah dengan keterangan Anda

    <div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='aboutme-img'>
<img alt='Author' class='img-responsive' height='auto' src='http://3.bp.blogspot.com/-lvVwsFNiq3A/VUTQLvTOHsI/AAAAAAAAJ7Y/NEqRWmXcEVo/s1600/Ripple%2BTheme.jpg' title='Author' width='320'/>
</div>
</div>
<div class='aboutme-info'>
<h4>Ripple Clean</h4>
<p>Clean and Responsive Blogger Template.</p>
</div>
<div class='aboutme-wrapicon'>
<ul class='extender'>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook'/></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter'/></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='GitHub'><i class='fa fa-github'/></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus'/></a></li>
<li class='aboutme-icon'><a href='#' rel='nofollow' target='_blank' title='Pinterest'><i class='fa fa-pinterest-p'/></a></li>
</ul>
</div>
</div>
</div>

    ShortCodes

    Drop Caps 
    <span class="first-letter">Your First Letter here</span>
    Alert Box 
    /*----success message----*/
  <div class="alert-message success">
  success message : You successfully read this important message. <i class="fa fa-check-circle"></i>
  </div>
  
  /*----Alert message-----*/
  <div class="alert-message alert">
  Alert message : This alert needs your attention. <i class="fa fa-info-circle"></i>
  </div>
  
  /*----Warning message-----*/
  <div class="alert-message warning">
  Warning message : Warning! Best check yo self. <i class="fa fa-exclamation-triangle"></i>
  </div>
  
  /*----Error message-----*/
  <div class="alert-message error">
  Error message : Oh snap! Change a few things up. <i class="fa fa-exclamation-circle"></i>
  </div>
    Blockquote

    Untuk membuat Blockquote cukup pilih semua teks yang Anda ingin menjadi Kutipan dan klik pada icon Kutipan dari posting blog panel editor teks.

    Buttons

    Menambahkan demo dan download button.

    <div style="text-align: center;">
<ul class="button">
<li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li>
<li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
    Spoiler 
    <div id="flippy"><button>Spoiler</button></div>
<div id="flippanel">
--- TAMBAHKAN KONTEN DISINI ---
</div>
    Membagi konten post menjadi tiga 
    <div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>

    Perbaikan

    Mobile Responsive

    Silakan klik Template > Tombol Gear > Pilih Tidak.

    Oke cukup sekian, jika ada kesulitan lain jangan segan untuk bertanya lewat formulir kontak blog Arlina Design. Terima kasih.


    ripple free version - arlinadesign.blogspot.com

    Top