Dokumentasi INFINITE Responsive Blogger Template
Judulnya adalah dokumentasi untuk template blogger Infinite. Si "cakep" saat ini menggunakan Infinite karena template kemarin mengalami Crash.
Crash karena ngedit sana-sini, sinyal Internet mendadak putus (terjadi di saat gempa Jakarta kemarin siang), sering pindah laman (layout - template), terjadilah bentrokan antar JavaScript.
Belum lagi punya beban pikiran, bawaannya emosi terus. Wah, gawat banget hari kemarin.
Customize Theme
Posting dari Customize Theme ini sengaja saya buat agar tidak kembali lagi ke halaman Documentation Infinite.
Sekaligus mengamankan informasi-informasi penting apabila suatu waktu ada permasalahan dengan blog Infinite dikemudian hari, syukur-syukur punya dokumentasi ini ^^
#1. Widget Komentar Disqus
Ganti username dibawah ini:
#2. Contact Form:
Ganti kode 3263220808940184577 dan URL blog diatas dengan kepemilikan pribadi.
#3. Recent Post with Thumbnail
Nah ini penting banget, apalagi bisa dipasangkan berdasarkan label atau kategori.
#4. Responsive Video
Kodenya dibawah ini:
#5. Drop Caps
Huruf awal yang berukuran besar, dikenal "First Letter".
#6. Tombol: Demo & Download Button
Contohnya, gan?
#7. Bagi Konten dalam Postingan Blog
Contohnya:
Contoohnya:
Contohnya:
Contohnya seperti dibawah ini:
#9. Fungsi Load More...
Lihat angka 2 pada kode di akhir. Singkatnya seperti ini:
Itulah postingan tentang dokumentasi dari file INFINITE premium blogger template yang sengaja saya buat untuk keperluan pribadi.
Note: Mau nyoba2 pasang di template sendiri? Maap, tidak work. Beda isi soalnya :)
Judulnya adalah dokumentasi untuk template blogger Infinite. Si "cakep" saat ini menggunakan Infinite karena template kemarin mengalami Crash.
Crash karena ngedit sana-sini, sinyal Internet mendadak putus (terjadi di saat gempa Jakarta kemarin siang), sering pindah laman (layout - template), terjadilah bentrokan antar JavaScript.
Belum lagi punya beban pikiran, bawaannya emosi terus. Wah, gawat banget hari kemarin.
Customize Theme
Posting dari Customize Theme ini sengaja saya buat agar tidak kembali lagi ke halaman Documentation Infinite.
Sekaligus mengamankan informasi-informasi penting apabila suatu waktu ada permasalahan dengan blog Infinite dikemudian hari, syukur-syukur punya dokumentasi ini ^^
Dokumentasi INFINITE Responsive Blogger Template
#1. Widget Komentar Disqus
Ganti username dibawah ini:
<script type='text/javascript'>
var disqus_shortname = "infinite-1";
!function(){var e=document.createElement("script");e.async=!0,e.type="text/javascript",e.src="//"+disqus_shortname+".disqus.com/count.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>
var disqus_shortname = "infinite-1";
!function(){var e=document.createElement("script");e.async=!0,e.type="text/javascript",e.src="//"+disqus_shortname+".disqus.com/count.js",(document.getElementsByTagName("head")[0]||document.getElementsByTagName("body")[0]).appendChild(e)}();
</script>
#2. Contact Form:
<form id="kontak-arlina" name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 100%; 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}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
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>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3263220808940184577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3263220808940184577','//infiniteidn.blogspot.com/','3263220808940184577');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3263220808940184577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name *" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" size="30" placeholder="Email *" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message *" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Send Message" />
<div style="max-width: 100%; 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}
form{color:#666}
form.payforpal{margin:auto;text-align:center}
#kontak-arlina{margin:auto;max-width:640px}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{height:auto;margin:5px auto;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;width:100%;min-width:100%;transition:all 0.5s ease-out}
#ContactForm1_contact-form-email-message{width:100%;height:175px;margin:5px 0;padding:15px 12px;background:#fff;color:#444;border:1px solid rgba(0,0,0,.14);box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);border-radius:3px;resize:none;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:#66afe9;box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,0.6)}
#ContactForm1_contact-form-submit{float:left;background:#1abc9c;margin:auto;vertical-align:middle;cursor:pointer;padding:16px 20px;font-size:14px;text-align:center;letter-spacing:.5px;border:0;width:100%;border-radius:4px;color:#fff;font-weight:500;transition:all .2s ease}
#ContactForm1_contact-form-submit:hover{background:#16a085;color:#fff;}
#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:100%;margin-top:35px}
.contact-form-error-message-with-border{background:#f47669;border:0;box-shadow:none;color:#fff;padding:5px 0;border-radius:3px}
.contact-form-success-message{background:#4fc3f7;border:0;box-shadow:none;color:#fff;border-radius:3px}
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>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '3263220808940184577';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d3263220808940184577','//infiniteidn.blogspot.com/','3263220808940184577');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '3263220808940184577', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
Ganti kode 3263220808940184577 dan URL blog diatas dengan kepemilikan pribadi.
#3. Recent Post with Thumbnail
Nah ini penting banget, apalagi bisa dipasangkan berdasarkan label atau kategori.
<style scoped='' type='text/css'>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:8px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{margin:0 10px 0 0;overflow:hidden;z-index:2;display:block;position:relative;border-radius:0;width:100px;height:auto;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#202020;font-size:14px;font-weight:400;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#ec2028}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>
ul.recent_posts_arlina li{display:inline-block;position:relative;width:100%;margin:0;padding:8px 0;transition:all .3s linear;}
ul.recent_posts_arlina li:last-child {border:0;}
.recent_posts_arlina .wrapinfo{margin:0 10px 0 0;overflow:hidden;z-index:2;display:block;position:relative;border-radius:0;width:100px;height:auto;float:left}
ul.recent_posts_arlina li img.recent_thumb{width:100%;height:auto}
.recent_posts_arlina {float:left;width:100%;margin:10px 10px 5px 0px;padding:0;font-size:.9rem;}
ul.recent_posts_arlina li a{color:#202020;font-size:14px;font-weight:400;line-height:normal}
ul.recent_posts_arlina li a:hover{color:#ec2028}
.recent_posts_arlina i{font-style:normal;color:#999;font-size:13px}
</style>
<script style='text/javascript' src='https://cdn.rawgit.com/Arlina-Design/FlamingTree/master/recentpostarlina.js'></script>
<script style='text/javascript'>
var numposts=4,showpostthumbnails=!0,displaymore=!1,displayseparator=!1,showcommentnum=!1,showpostdate=!1,showpostsummary=!1,numchars=62;
</script>
<script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=recentpostinfoarlina'></script>
#4. Responsive Video
Kodenya dibawah ini:
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/xwKif_4iOFk">
</div>
</div>
</div>
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/xwKif_4iOFk">
</div>
</div>
</div>
#5. Drop Caps
Huruf awal yang berukuran besar, dikenal "First Letter".
<span class="first-letter">Your First Letter here</span>
#6. Tombol: Demo & Download Button
<div style="text-align: center;">
<ul class="ripplelink button">
<li><a class="demo" href="https://tipsseokiller.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://tipsseokiller.blogspot.com/" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
<ul class="ripplelink button">
<li><a class="demo" href="https://tipsseokiller.blogspot.com/" target="_blank">DEMO</a></li>
<li><a class="download" href="https://tipsseokiller.blogspot.com/" target="_blank">DOWNLOAD</a></li>
</ul>
</div>
<div class="clear"></div>
Contohnya, gan?
#7. Bagi Konten dalam Postingan Blog
<div class="bagidua">
--- TAMBAHKAN KONTEN DISINI ---
</div>
--- TAMBAHKAN KONTEN DISINI ---
</div>
Contohnya:
Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus.
Atau bisa juga:<div class="bagitiga">
--- TAMBAHKAN KONTEN DISINI ---
</div>
--- TAMBAHKAN KONTEN DISINI ---
</div>
Contoohnya:
Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit.
Atau bisa juga:<div class="bagiempat">
--- TAMBAHKAN KONTEN DISINI ---
</div>
--- TAMBAHKAN KONTEN DISINI ---
</div>
Contohnya:
Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit. Lorem ipsum dolor sit amet, consectetur adispiscing elit. Nullam ut enim, hendrerit nunc vel, fringgila augue. Sed sed erra tellus. Lorem ipsum dolor sit amet, consectetur adispiscing elit.
#8. Tabel 3 di Dalam Postingan Blog
#8. Tabel 3 di Dalam Postingan Blog
<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>
<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>
Contohnya seperti dibawah ini:
| Table Header 1 | Table Header 2 | Table Header 3 |
|---|---|---|
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
| Division 1 | Division 2 | Division 3 |
#9. Fungsi Load More...
var infinite_scroll=new InfiniteScroll({type:2,target: bla bla bla bla....
Lihat angka 2 pada kode di akhir. Singkatnya seperti ini:
Opsi 0 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya. Opsi 1 berarti pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya. Opsi 2 berarti pengguna perlu mengeklik tombol Muat Lagi untuk memuat posting-posting sebelumnya, setelah itu pengguna hanya perlu menggulung peramban sampai pada batas akhir halaman untuk memuat posting-posting sebelumnya.
Itulah postingan tentang dokumentasi dari file INFINITE premium blogger template yang sengaja saya buat untuk keperluan pribadi.
Note: Mau nyoba2 pasang di template sendiri? Maap, tidak work. Beda isi soalnya :)
Post A Comment:
0 comments so far,add yours
Posting Komentar