Getting Started

Theme Info

Created: 22/06/2015

Phantom 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
• Google Testing Tool Validator
• Dynamic Heading
• 3 Column Style
• 4 Column Footer
• Google Friendly
• Custom Threaded Comment
• Responsive Ad Slot
• Clean Typography
• Minimalist
• Fixed Top Navigation
• Responsive Dropdown Navigation
• Off Canvas Mobile Navigation
• Light Base Theme Color
• Breadcrumbs
• Related Posts
• Search Box
• Social Share Button
• Smooth Scroll back To Top
• Custom Subscribe Box Widget
• Custom Contact Form Widget
• Sitemap Widget
• Recent Post Widget
• Recent Comment Widget
• Multi Author Box
• And more..

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

Navigation

Silakan buka Blogger > Template > "Edit HTML"

Cari dan ganti semua kode ini # dengan tulisan Anda.

Top Navigation :

<div class='top-navigation' id='primary-navigation' role='navigation'>
        <div class='navigation-item'>
            <a class='skip-link screen-reader-text' href='#content'>Skip to content</a>
            <ul class='top-menu-items top-menu' id='top-menu-items'>
                <li><a expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>
                <li><a href='#'><i class='fa fa-envelope'/> Contact</a></li>
                <li><a href='#'><i class='fa fa-list'/> Sitemap</a></li>
                <li><a href='#'>Menu</a>
                    <ul class='sub-menu'>
                        <li><a href='#'>Santap Sahur</a></li>
                        <li><a href='#'>Pasar Kaget</a></li>
                        <li><a href='#'>Berbuka</a></li>
                    </ul>
                </li>
                <li><a href='#'>Menu</a>
                    <ul class='sub-menu'>
                        <li><a href='#'>Menu 1</a>
                            <ul class='sub-menu'>
                                <li><a href='#'>Sub Menu 1</a></li>
                                <li><a href='#'>Sub Menu 2</a></li>
                                <li><a href='#'>Sub Menu 3</a></li>
                            </ul>
                        </li>
                        <li><a href='#'>Menu 2</a></li>
                        <li><a href='#'>Menu 3</a></li>
                        <li><a href='#'>Menu 4</a></li>
                    </ul>
                </li>
            </ul>
            <form action='/search' class='searchform' id='searchform' method='get' role='search'>
                <div>
                    <div class='hamburger hamburger-search'/>
                    <input class='field' id='s' name='q' placeholder='Search' type='text'/>
                </div>
            </form>
        </div>
    </div>

Main Navigation :

<div class='main-navigation' id='main-navigation' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement' role='navigation'>
    <div class='navigation-item'>
        <ul class='main-navigation-items top-menu' id='main-navigation-items'>
            <li><a class='homer' expr:href='data:blog.homepageUrl'><i class='fa fa-home'/> Home</a></li>
            <li><a href='#' itemprop='url'><span itemprop='name'>Menu</span></a>
                <ul class='sub-menu'>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Menu 1</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Menu 2</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Menu 3</span></a></li>
                </ul>
            </li>
            <li><a href='#' itemprop='url'><span itemprop='name'>Internet</span></a>
                <ul class='sub-menu'>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Download 1</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Download 2</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Download 3</span></a>
                        <ul class='sub-menu'>
                            <li><a href='#' itemprop='url'><span itemprop='name'>Super Fast</span></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href='#' itemprop='url'><span itemprop='name'>Portfolio</span></a>
                <ul class='sub-menu'>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Album 1</span></a>
                        <ul class='sub-menu'>
                            <li><a href='#' itemprop='url'><span itemprop='name'>Sub Album 1</span></a></li>
                            <li><a href='#' itemprop='url'><span itemprop='name'>Sub Album 2</span></a></li>
                            <li><a href='#' itemprop='url'><span itemprop='name'>Sub Album 3</span></a></li>
                        </ul>
                    </li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Album 2</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Album 3</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Album 4</span></a></li>
                </ul>
            </li>
            <li><a href='#' itemprop='url'><span itemprop='name'>History</span></a>
                <ul class='sub-menu'>
                    <li><a href='#' itemprop='url'><span itemprop='name'>War</span></a></li>
                    <li><a href='#' itemprop='url'><span itemprop='name'>Culture</span></a></li>
                </ul>
            </li>
            <li><a href='#'>404 Error</a></li>
            <ok class='main-social'>
                <li><a class='mainfb' href='#' itemprop='url' rel='nofollow' target='_blank' title='Facebook'><i class='fa fa-facebook-square'/></a></li>
                <li><a class='maingp' href='#' itemprop='url' rel='nofollow' target='_blank' title='Google+'><i class='fa fa-google-plus-square'/></a></li>
                <li><a class='maintw' href='#' itemprop='url' rel='nofollow' target='_blank' title='Twitter'><i class='fa fa-twitter-square'/></a></li>
                <li><a class='mainfl' href='#' itemprop='url' rel='nofollow' target='_blank' title='Follow Us'><i class='fa fa-plus-square'/> Follow Us</a></li>
             </ok>
        </ul>
    </div>
</div>

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='og:description'/>

Post Page

Iklan di Postingan

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;'>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;        
        <data:post.body/>
&lt;div style=&quot;display:block;text-align:center;margin:15px auto;&quot;&gt;
<!-- Kode Banner/Iklan Anda Di sini -->
&lt;/div&gt;
</div>
</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 di halaman ini.

<form name="contact-form">
<span style="color: #666666; font-family: Open Sans,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: Open Sans,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: Open Sans,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;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:#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>

Sitemap

Buat post di halaman statis > kemudian terapkan kode di bawah ini pada tab HTML.

<div id="bp_toc">
Loading TOC. Please wait....</div>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/daftar-isi-simple.js" type="text/javascript"></script> <script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>

Ad Banner HTML

Di Tata Letak tambah widget baru > Kemudian terapkan kode di bawah ini.

Banner 468x60.

<div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='60' src='IMAGE-URL' title='ADS-DESCRIPTION' width='468'/></a>
</div>

Banner 728x90.

<div class='kotak_iklan3'>
<a href='#' target='_blank' title='ADS-DESCRIPTION'><img alt='iklan banner' height='90' src='IMAGE-URL' title='ADS-DESCRIPTION' width='728'/></a>
</div>

Banner 125x125.

<div class="kotak_iklan">
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a>
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
<a href="#" title="judul iklan"><img style="border: none;" src="IMAGE-URL" alt="text gambar" width="125" height="125" /></a> 
</div>

Recent Posts

Klik tata letak > Buat widget baru, kemudian salin semua kode di bawah ini dan ganti var urlblog = "http://allyssapermatalestari.blogspot.com"; dengan url blog Anda.

<style scoped='' type='text/css'>
/* Recent Post Navigasi */
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
.recentpostel{display:block;margin:8px 0;height:auto;min-height:79px;border-bottom:1px dashed #eee;}
.recentpostel:last-child{border-bottom:0;}
.recentpostel img{background:#fff;float:left;height:67px;margin-right:10px;width:67px}
.recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:13px!important;font-weight:700!important;margin:0;color:#333}
.recentpostel h6 a:hover{color:#fc4f3f}
.recentpostel:hover{background-color:#fefefe}
.recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:url(http://2.bp.blogspot.com/-60aISBQLRY0/VFBMqzLfzGI/AAAAAAAABgM/GInmVTvEzkc/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;}
#recentpostnavfeed{color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0}
#recentpostnavfeed:hover{background-color:#fefefe}
#recentpostnavfeed a{color:#333!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:5px}
#recentpostnavfeed .next{float:right}
#recentpostnavfeed .previous{float:left}
#recentpostnavfeed .home{text-align:center}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "http://allyssapermatalestari.blogspot.com";
    var charac = 40;
    var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"http://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>
<div id="recentpostsae"></div>
<div id="recentpostnavfeed"></div>

Recent Comments

Klik tata letak > Buat widget baru, kemudian salin semua kode di bawah ini.

<style scoped='' type="text/css">
ul.arlinacomments{list-style:none;margin:0;padding:0}.arlinacomments li{display:block;clear:both;overflow:hidden;list-style:none;border-bottom:0!important;word-break:break-all}.arlinacomments li .avatarImage{float:left;margin-right:10px;position:relative;overflow:hidden}.arlinacomments li img{position:relative;overflow:hidden;display:block;width:42px;height:42px}.arlinacomments li a{font-weight:700}.arlinacomments li span{margin-top:2px;color:#666;display:block;font-size:12px;line-height:1.4}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments
function arlinacomments(a){var e;e='<ul class="arlinacomments">';for(var t=0;numComments>t;t++){var r,o,n,i;if(t==a.feed.entry.length)break;e+="<li>";for(var d=a.feed.entry[t],s=0;s<d.link.length;s++)"alternate"==d.link[s].rel&&(r=d.link[s].href);for(var l=0;l<d.author.length;l++)o=d.author[l].name.$t,n=d.author[l].gd$image.src;n=-1!=n.indexOf("/s1600/")?n.replace("/s1600/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s220/")?n.replace("/s220/","/s"+avatarSize+"-c/"):-1!=n.indexOf("/s512-c/")&&0!=n.indexOf("http:")?"http:"+n.replace("/s512-c/","/s"+avatarSize+"-c/"):-1!=n.indexOf("blogblog.com/img/b16-rounded.gif")?"http://1.bp.blogspot.com/-7bkcAKdpGXI/UrbyQRqvSKI/AAAAAAAAFmI/oBv_yMeYnMQ/s"+avatarSize+"/blogger.png":-1!=n.indexOf("blogblog.com/img/openid16-rounded.gif")?"http://2.bp.blogspot.com/-VgnInuIUKBU/UrbzyXTYWRI/AAAAAAAAFmU/3f_Vfj3TI6A/s"+avatarSize+"/openid.png":-1!=n.indexOf("blogblog.com/img/blank.gif")?-1!=defaultAvatar.indexOf("gravatar.com")?defaultAvatar+"&s="+avatarSize:defaultAvatar:n,1==showAvatar&&(i=1==roundAvatar?"avatarRound":"",e+='<div class="avatarImage '+i+'"><img class="'+i+'" src="'+n+'" alt="'+o+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'),e+='<a href="'+r+'">'+o+"</a>";var A=d.content.$t,v=A.replace(/(<([^>]+)>)/gi,"");""!=v&&v.length>characters?(v=v.substring(0,characters),v+="&hellip;",1==showMorelink&&(v+='<a href="'+r+'">'+moreLinktext+"</a>")):v=v,e+="<span>"+v+"</span>",e+="</li>"}e+="</ul>";var c="";0==hideCredits&&(c="display:block;"),e+="",document.write(e)}var numComments=7,showAvatar=!0,avatarSize=42,roundAvatar=!0,characters=40,showMorelink=!1,defaultAvatar="http://2.bp.blogspot.com/-XjxrXKBPQqs/VYcGtLWPGUI/AAAAAAAAKaQ/5jr871JIwds/s1600/default-avatar.jpg",hideCredits=!0,numComments=numComments||5,avatarSize=avatarSize||60,characters=characters||40,defaultAvatar=defaultAvatar||"http://4.bp.blogspot.com/-SRSVCXNxbAc/UrbxxXd06YI/AAAAAAAAFl4/332qncR9pD4/s1600/default-avatar.jpg",moreLinktext=moreLinktext||" More &raquo;",showAvatar="undefined"==typeof showAvatar?!0:showAvatar,showMorelink="undefined"==typeof showMorelink?!1:showMorelink,roundAvatar="undefined"==typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"==typeof hideCredits?!1:roundAvatar;
//]]>
</script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=arlinacomments&amp;max-results=7"></script>

ShortCodes

Drop Caps

<span class="first-letter">Your First Letter here</span>
		

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>
		

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>
		

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 Code. Terima kasih.