Theme Info :
Invert Pro is a Blogger template with Responsive layout and suited for all blog. It's design with 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 Friendly
- Google Testing Tool Validator
- Dynamic Heading
- Mobile Friendly
- Personal Blog
- Custom Threaded Comment
- 2 Column
- Light Base Theme Color
- Responsive Ad Slot
- Breadcrumbs
- Related Posts with Thumb
- Search Box
- Social Share Button
- Fixed Top Navigation
- Responsive Dropdown Menu
- Smooth Scroll back To Top
- Custom Contact Form Design
- Author Box
- Custom Subscribe Box Widget
- Custom Sitemap Widget
- 4 Style + Bonus Template
Installation :
2. Silahkan backup template usang Anda jikalau Anda memutuskan untuk menggunakannya lagi. Untuk melaksanakan ini, klik pada "download template lengkap" link dan simpan template.
Customize Theme
Navigation :Silakan buka Blogger > Template > "Edit HTML"
Cari dan ganti semua aba-aba ini # dengan goresan pena Anda.
Ganti Invert Pro - Responsive dan SEO Friendly dengan goresan pena Anda.
<div id='header-topabis'> <nav id='navigasiatas'> <div class='inner'> <ul> <li><a href='#' title='Tentang Blog'>About</a></li> <li><a href='#' title='Formulir Kontak'>Contact</a></li> <li><a href='#' title='Advertise'>Advertise</a></li> <li><a href='#' title='Kode Warna Flat UI'>Flat UI</a></li> <li><a href='#' title='Disclaimer'>Disclaimer</a></li> <li><a href='#' title='Privacy Policy'>Privacy Policy</a></li> <li><a href='#' title='Daftar Isi Blog'>Sitemap</a></li> </ul> </div> </nav> <div id='header-wrapatas'> <header id='Headeratas'> <div class='inner'> <a href='/' title='Invert Pro'>Invert Pro <span>- Responsive dan SEO Friendly</span></a> <div class='open-nav'> <i/> </div> </div> </header> </div> </div>
Main Navigation :
<nav id='navigasi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> <label id='toogle2'>≡ Menu</label> <ul class=''> <li><a class='current' href='/'><span itemprop='name'>Home</span></a> <ul> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Google+</span></a></li> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Facebook</span></a></li> <li><a href='#' itemprop='url' rel='nofollow' target='_blank'><span itemprop='name'>Twitter</span></a></li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Advertise</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Blogger</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>CSS</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>JavaScript</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Internet</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Lainnya</span></a> <ul> <li><a href='#' itemprop='url'><span itemprop='name'>HTML5</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Mobile</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>SEO Friendly</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Search Console</span></a></li> </ul> </li> <li><a href='#' itemprop='url'><span itemprop='name'>Software</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Template</span></a></li> <li><a href='#' itemprop='url'><span itemprop='name'>Video</span></a></li> </ul> </nav>
Subscribe Box :
Ganti semua tulisan InvertPro dengan nama email subscribe Anda.
<div id='subscribe-box'> <h4>Berlangganan via email</h4> <p>Suka dengan postingan di atas? Silakan berlangganan postingan terbaru pribadi via email.</p> <div class='emailfield'> <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=InvertPro', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='email' onblur='if (this.value == "") {this.value = "Alamat Email";}' onfocus='if (this.value == "Alamat Email") {this.value = "";}' type='text' value='Alamat Email'/> <input name='uri' type='hidden' value='InvertPro'/> <input name='loc' type='hidden' value='en_US'/> <input class='submitbutton' type='submit' value='Lanjutkan'/> </form> </div> </div>
Contact Form :
Buat post di halaman statis, lalu terapkan aba-aba di bawah ini pada tab HTML. Catatan : Jika sudah menambahkan aba-aba ini, disarankan untuk tidak memakai mode Compose di halaman Pos ini.
<form name="contact-form"> <span> Name </span> <input id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> <span> 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> 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{ height:auto;margin:5px auto;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;transition:all 0.5s ease-out;} #ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:10px;background:#fafafa;color:#444;border:1px solid #ccc;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{float:left;background:#cf4d35;color:#fff;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:.5px;border-radius:4px;border:0;transition:all .8s ease} #ContactForm1_contact-form-submit:hover {background:#e45a40;color:#fff;} #ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width:100%;margin-top:35px;} .contact-form-error-message-with-border {background:#f6f6f6;border:none;box-shadow:none;color:#444;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;} .post-body input {width:initial;} @media only screen and (max-width:640px){ #ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-submit{width:100%;}} </style>
Sitemap :
Buat post di halaman statis, lalu terapkan aba-aba di bawah ini pada tab HTML.
<div style="max-height:1300px;margin:auto;overflow:auto;padding:3px;text-align:left;width:100%;"> <script src="https://cdn.rawgit.com/Arlina-Design/gridpro/master/invertsite.js"></script><script src="/feeds/posts/default?max-results=999&alt=json-in-script&callback=loadtoc"></script> </div> <style scoped="" type="text/css"> #comments {display:none;} .post-body td a {background:initial;color:#999;padding:initial;font-size:13px;float:initial;display:initial;border-radius:initial;font-weight:initial;} .post-body td a:hover {background:initial;color:#666;text-decoration:underline;} .post ol li {margin:.2em 0 .2em 1.8em;} .post-body p {font-weight:700;margin:20px 0 10px 0;} </style>
Author Box :
Cari dan ganti goresan pena di dalam aba-aba ini dengan keterangan Anda.
<div class='author-box' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'><img alt='Invert Pro' class='avatar' height='100' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFB2_Dof65buEPnpJCLXL34-Hu-3VSkpUXOmz_snSbZATBviAjU7pY28cpqviPlhBZDjyjBLgTdnlUaII2zsAOHfZaQTKcw2qP48Ho2k3s0VKpPTLV1ooLFg89F_9IrCJo5z_KmT11Bq0/s1600/Invert+Pro.png' width='100' title='Invert Pro'/><h4 class='author-box-title'>Tentang <span itemprop='name'>Arlina Fitriyani</span></h4><div class='author-box-content' itemprop='description'><p>Invert Pro ialah template premium yang responsive dan SEO Friendly.</p></div></div>
Memasang Table di postingan :
<table cellpadding="0" cellspacing="0" style="text-align: left;"> <tbody> <tr> <th>Table Header 1</th> <th>Table Header 2</th> <th>Table Header 3</th> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> <tr> <td>Division 1</td> <td>Division 2</td> <td>Division 3</td> </tr> </tbody> </table>
DOWNLOAD TEMPLATE INVERT PRO PREMIUM
0 Response to "Invert Pro Premium Templates"