Belajar dari kesuksesan orang lain merupakan hal yang biasa dilakukan, apalagi jika orang yang dijadikan sebagai sumber inspirasi

CARA MUDAH MODIFIKASI TEMPLAT BAWAAN BLOGGER

Hai sob apa kabar ? Kali ini saya akan bagikan Cara modifikasi Templat bawaan Blogger agar tampilanya lebih enak di pandang mata juga jadi lebih SEO frendly , Templat blog juga sangat mendukung agar cepat terindex di serch engin, jika templat blog tampil responsif dan dapat dengan mudah menyesuaikan perangkat mobile maka akan terlihat enak dipandang dan membuat betah para pembaca,  setelah otak atik templat bawaan blogger setelah berpusing ria selama seminggu akhirnya berhasil juga , dan tampilanya udah responsif dan Lebih SEO dari sebelumnya yang tadinya tampilanya kayak gini
Ini templat sederhana dari blogger sob.. itu yang jadi target percobaan gue..he..he..he.. setelah gue edit sana sini gue modifikasi sekarang tampilanya kayak gini sob;
Lebih ganteng kan sob kaya gue..he..he..he..becanda sob..
Mau tau cara gue nyulap tuh templat  ?
Silahkan di simak sob:
Cari kode antik kayak gini sob
<title><data:blog.pageTitle/></title>
Kalo udah ketemu ganti kode itu dengan kode titel tag seo frendly yang ini ya sob
<!-- SEO Title Tag -->
<b:if cond='data:blog.url == data:blog.homepageUrl'><title><data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><title><data:blog.pageName/> | <data:blog.title/></title></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><title>Archive for <data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><title><data:blog.pageName/></title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><title><data:blog.title/> - <data:blog.pageName/></title></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;error_page&quot;'><title>Page Not Found</title></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.url != data:blog.homepageUrl'><title><data:blog.pageTitle/> - All Post</title></b:if></b:if>
Trus tambahkan kode meta tag seperti ini sob
<!-- SEO Meta Tag -->
<b:if cond='data:blog.homepageUrl == data:blog.url'><meta expr:content='data:blog.title' name='keywords'/></b:if>  
<b:if cond='data:blog.pageType == &quot;item&quot;'><meta expr:content='data:blog.pageName' name='keywords'/></b:if>
<b:if cond='data:blog.pageType == &quot;index&quot;'><b:if cond='data:blog.searchLabel'><meta content='noindex,nofollow' name='robots'/></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'><meta content='noindex,nofollow' name='robots'/></b:if>
<b:if cond='data:blog.isMobile'><meta content='noindex,nofollow' name='robots'/></b:if>
Copy seluruh kode antik di atas trus pastekan di tepat di bawah kode  <head>
Lumayan panjang ya sob  ?
Setelah itu cari lagi kode unik yang kayak gini sob
<b:widget id='Header1' locked='true' title='Blog Darmudi Susanto (Header)' type='Header'>
         <b:includable id='main'>
 <b:if cond='data:useImage'>
   <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
     <!--
     Show image as background to text. You can't really calculate the width
     reliably in JS because margins are not taken into account by any of
     clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
     width if the user is using shrink to fit.
     This results in a margin-width's worth of pixels being cropped. If the
     user is not using shrink to fit then we expand the header.
     -->
     <b:if cond='data:mobile'>
         <div id='header-inner'>
           <div class='titlewrapper' style='background: transparent'>
             <h1 class='title' style='background: transparent; border-width: 0px'>
               <b:include name='title'/>
             </h1>
           </div>
           <b:include name='description'/>
         </div>
       <b:else/>
         <div expr:style='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
           <div class='titlewrapper' style='background: transparent'>
             <h1 class='title' style='background: transparent; border-width: 0px'>
               <b:include name='title'/>
             </h1>
           </div>
           <b:include name='description'/>
         </div>
       </b:if>
   <b:else/>
     <!--Show the image only-->
     <div id='header-inner'>
       <a expr:href='data:blog.homepageUrl' style='display: block'>
         <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
       </a>
       <!--Show the description-->
       <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
         <b:include name='description'/>
       </b:if>
     </div>
   </b:if>
 <b:else/>
   <!--No header image -->
   <div id='header-inner'>
     <div class='titlewrapper'>
       <h1 class='title'>
         <b:include name='title'/>
       </h1>
     </div>
     <b:include name='description'/>
   </div>
 </b:if>
</b:includable>
         <b:includable id='description'>
 <div class='descriptionwrapper'>
   <p class='description'><span><data:description/></span></p>
 </div>
</b:includable>
         <b:includable id='title'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <data:title/>
 <b:else/>
   <a expr:href='data:blog.homepageUrl'><data:title/></a>
 </b:if>
</b:includable>
       </b:widget>
ganti kode di atas dengan kode di bawah ini sob
<b:widget id='Header1' locked='true' title='Blog Darmudi Susanto (Header)' type='Header'>
       <b:includable id='main'>
 <b:if cond='data:useImage'>
   <b:if cond='data:imagePlacement == &quot;BEHIND&quot;'>
     <!--
     Show image as background to text. You can't really calculate the width
     reliably in JS because margins are not taken into account by any of
     clientWidth, offsetWidth or scrollWidth, so we don't force a minimum
     width if the user is using shrink to fit.
     This results in a margin-width's worth of pixels being cropped. If the
     user is not using shrink to fit then we expand the header.
     -->
     <b:if cond='data:mobile'>
         <div id='header-inner'>
           <div class='titlewrapper' style='background: transparent'>
             <h1 class='title' style='background: transparent; border-width: 0px'>
               <b:include name='title'/>
             </h1>
           </div>
           <b:include name='description'/>
         </div>
       <b:else/>
         <div expr:style='&quot;background-image: url(&quot;&quot; + data:sourceUrl + &quot;&quot;); &quot;                        + &quot;background-position: &quot;                        + data:backgroundPositionStyleStr + &quot;; &quot;                        + data:widthStyleStr                        + &quot;min-height: &quot; + data:height                        + &quot;_height: &quot; + data:height                        + &quot;background-repeat: no-repeat; &quot;' id='header-inner'>
           <div class='titlewrapper' style='background: transparent'>
             <h1 class='title' style='background: transparent; border-width: 0px'>
               <b:include name='title'/>
             </h1>
           </div>
           <b:include name='description'/>
         </div>
       </b:if>
   <b:else/>
     <!--Show the image only-->
     <div id='header-inner'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
           <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
         </b:if>
 </b:if>
       <a expr:href='data:blog.homepageUrl' style='display: block'>
         <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
       </a>
       <!--Show the description-->
       <b:if cond='data:imagePlacement == &quot;BEFORE_DESCRIPTION&quot;'>
         <b:include name='description'/>
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
     <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
             <h1 style='text-indent:-9999px;margin:0 0 0 0;padding:0 0 0 0;height:0px;'><b:include name='title'/></h1>
     </b:if>
   </b:if>
       </b:if>
     </div>
   </b:if>
 <b:else/>
   <!--No header image -->
   <div id='header-inner'>
     <div class='titlewrapper'>
       <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
            <p class='title'><b:include name='title'/></p>
    <b:else/>
      <h1 class='title'><b:include name='title'/></h1>
    </b:if>
 <b:else/>
         <p class='title'><b:include name='title'/></p>
 </b:if>
    <b:include name='description'/>
     </div>
</div>
 </b:if>
</b:includable>
<b:includable id='description'>
 <div class='descriptionwrapper'>
   <p class='description'><span><data:description/></span></p>
 </div>
</b:includable>
<b:includable id='title'>
 <b:if cond='data:blog.url == data:blog.homepageUrl'>
   <data:title/>
 <b:else/>
   <a expr:href='data:blog.homepageUrl'><data:title/></a>
 </b:if>
</b:includable>
     </b:widget>
Lumayan pusing ya sob?...
Sama tau gue juga pusing ,yah namanya juga lagi belajar sob sekaran mari kita lanjutkan berpusing ria, sekarang cari kode berikut
<b:if cond='data:post.title'>
     <h3 class='post-title entry-title' itemprop='name'>
     <b:if cond='data:post.link'>
       <a expr:href='data:post.link'><data:post.title/></a>
     <b:else/>
       <b:if cond='data:post.url'>
         <b:if cond='data:blog.url != data:post.url'>
           <a expr:href='data:post.url'><data:post.title/></a>
         <b:else/>
           <data:post.title/>
         </b:if>
       <b:else/>
         <data:post.title/>
       </b:if>
     </b:if>
     </h3>
   </b:if>
Hapus kode di atas lalu ganti dengan kode antik di bawah ini
<b:if cond='data:post.title'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         <h1 class='post-title entry-title' itemprop='name'>
           <b:if cond='data:post.link'>
             <a expr:href='data:post.link'><data:post.title/></a>
           <b:else/>
             <b:if cond='data:post.url'>
               <b:if cond='data:blog.url != data:post.url'>
                 <a expr:href='data:post.url'><data:post.title/></a>
               <b:else/>
                 <data:post.title/>
               </b:if>
               <b:else/>
                 <data:post.title/>
             </b:if>
           </b:if>
         </h1>
    <b:else/>
         <h2 class='post-title entry-title' itemprop='name'>
           <b:if cond='data:post.link'>
             <a expr:href='data:post.link'><data:post.title/></a>
           <b:else/>
             <b:if cond='data:post.url'>
               <b:if cond='data:blog.url != data:post.url'>
                 <a expr:href='data:post.url'><data:post.title/></a>
               <b:else/>
                 <data:post.title/>
               </b:if>
               <b:else/>
                 <data:post.title/>
             </b:if>
           </b:if>
         </h2>
 </b:if>
  <b:else/>
       <h1 class='post-title entry-title' itemprop='name'>
         <b:if cond='data:post.link'>
           <a expr:href='data:post.link'><data:post.title/></a>
         <b:else/>
           <b:if cond='data:post.url'>
             <b:if cond='data:blog.url != data:post.url'>
               <a expr:href='data:post.url'><data:post.title/></a>
             <b:else/>
               <data:post.title/>
             </b:if>
             <b:else/>
               <data:post.title/>
           </b:if>
         </b:if>
       </h1>
  </b:if>
   </b:if>
Sekarang cari kode di bawah ini pada templat sobat
.Header h1 {
 font: $(header.font);
 color: $(header.text.color);
 text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1 a {
 color: $(header.text.color);
}
Kemudian ganti dengan kode seperti ini
.Header h1.title,.Header p.title {
 font: $(header.font);
 color: $(header.text.color);
 text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}
.Header h1.title a,.Header p.title a {
 color: $(header.text.color);
}
Sekara kita pasang breadcrumb
cari kode seperti ini
<b:includable id='main' var='top'>
Kemudian kalo udah ketemu hapus trus ganti kode tersebut dengan kode di bawah ini ya sob
<b:includable id='breadcrumb' var='posts'>
     <b:if cond='data:blog.homepageUrl != data:blog.url'>
     <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
       <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
    </div>
     <b:else/>
       <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <b:loop values='data:posts' var='post'>
       <b:if cond='data:post.labels'>
       <div class='breadcrumbs'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span> &#187; <b:loop values='data:post.labels' var='label'><span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url + &quot;?&amp;max-results=8&quot;' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span><b:if cond='data:label.isLast != &quot;true&quot;'> &#187; </b:if> </b:loop> &#187; <span><data:post.title/></span>
       </div>
       <b:else/>
       <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Uncategories</span> &#187; <span><data:post.title/></span></div>
    </b:if>
       </b:loop>
     <b:else/>
       <b:if cond='data:blog.pageType == &quot;archive&quot;'>
       <div class='breadcrumbs'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>Archive for <data:blog.pageName/></span>
    </div>
     <b:else/>
       <b:if cond='data:blog.searchQuery'>
       <div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
    </div>
     <b:else/>
       <b:if cond='data:blog.pageType == &quot;index&quot;'>
       <div class='breadcrumbs'>
    <b:if cond='data:blog.pageName == &quot;&quot;'> <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span>All post</span>
       <b:else/>
       <span><a expr:href='data:blog.homepageUrl' rel='nofollow'>Home</a></span> &#187; <span><data:blog.pageName/></span>
       </b:if>
       </div>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
     </b:if>
</b:includable>
     <b:includable id='main' var='top'>
  <b:include data='posts' name='breadcrumb'/>
Sekarang kita pasang CSS nya copy kode di bawah ini semua
.breadcrumbs {
font-size: 11px;
color: #666;
padding: 10px 0px;
margin: 10px 0px 20px;
border-bottom: 1px solid #ddd;
}
Lalu pastekan tepat di atas kode ini
]]></b:skin>
Terakhir save templat
Nah selesai udah proses modifikasi templat bawaan blogger, buat sobat yang g punya computer ato laptop seperti gue he..he..he..sobat yang ngeblog pake android sobat bisa edit templat blog menggunakan aplikasi Quoda ,kalo belum punya aplikasinya sobat ambil dulu di gudang aplikasi milik mbah google  DISINI  gambar aplikasinya yang kayak gini ya jangan salah o iya sob gue bisa modif templat ini dari master templat siapa lagi kalo bukan Mas Sugeng, sekian dulu sediakan kopi dan rokok biar gak pusing ,selamat mencoba semoga bethasil selamat berjuang maju terus pantang mundur ha..ha..ha...

2 komentar:

  1. Wah menarik banget ni, jadi penasaran dan pingin praktek sendiri, thanks gan sharingnya, dan izin praktekin tutorialnya.

    BalasHapus
    Balasan
    1. Silahkan tolong di share ke temen temen ya...

      Hapus

Berkomentarlah dengan sopan dan relefan agar komentar anda tidak masuk ke kotak Spam

Copyright © Solenk Blog: CARA MUDAH MODIFIKASI TEMPLAT BAWAAN BLOGGER. All rights reserved. Template by Darmudi Blog.