2 Template Ini Saya Bagikan Karena banyak yang Minta

Dua template yang saya maksud adalah Collector Template dan Maskolis Template yang dipakai adik saya di http://maskolis.blogspot.com. Daripada saya kasih satu per satu lewat email mendingan langsung saja saya bagi disini. Collector template awalnya saya bagi hanya untuk blog pilihan yang menggunakan template dari Creating Website. Dan untuk Maskolis Template, adik saya sudah memberikan ijin untuk dibagikan secara gratis disini. So, silahkan download bagi yang berminat, saya jamin tidak ada lagi gangguan jika Anda menggunakan kedua template ini, seperti file javascript yang rusak seperti kemarin. Karena tidak ada javascript yang saya simpan di Google Code.

Maskolis Template

Template ini mirip dengan Johny Kenthir Template cuma beda di header dan navigasi, cara memasang widget-widget yang ada di template ini pun juga sama. Untuk tutorial cara pasang widget pada template ini, silahkan Anda buka artikel Johny Kenthir, Template Ramai Seperti Pasar Tradisional.

Demo | Download

Pada bagian paling atas ada News Ticker atau headline news. Untuk mengganti dengan headline dari blog Anda masuk ke Edit HTML (gunakan control + F untuk mempersingkat), cari URL http://maskolis.blogspot.com. Setelah ketemu ganti dengan URL blog Anda. Demikian juga dengan kotak pencarian atau search box cari URL http://maskolis.blogspot.com ganti dengan URL blog Anda. Untuk mengganti kotak email berlangganan, letaknya persis diatas slider carousel, cari kode dibawah ini pada Edit HTML (jangan lupa untuk mencentang kotak expand widget templates) :

<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/htbgh&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input id='subbox' name='email' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter your email address...&apos;;}' onfocus='if (this.value == &apos;Enter your email address...&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter your email address...'/><input name='uri' type='hidden' value='blogspot/htbgh'/><input name='loc' type='hidden' value='en_US'/><input id='subbutton' type='submit' value='Enter'/></form>

Keterangan :
Warna biru : ganti dengan alamat feed anda.

Untuk mengganti navigasi menu warna biru pada template ini, cari kode berikut di Edit HTML :

<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='http://maskolis.blogspot.com/search/label/renungan'>Renungan</a></li>
<li><a href='http://maskolis.blogspot.com/search/label/misteri'>Misteri</a></li>
<li><a href='http://maskolis.blogspot.com/search/label/fakta'>Fakta</a></li>
<li><a href='http://maskolis.blogspot.com/search/label/astronomi'>Astronomi</a></li>
<li><a href='http://maskolis.blogspot.com/search/label/kehidupan'>Kehidupan</a></li>
<li><a class='trigger' href='http://maskolis.blogspot.com/search/label/kesehatan'>Kesehatan</a>
<ul>
<li><a href='http://maskolis.blogspot.com/search/label/mitos'>Mitos</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/olahraga'>Olahraga</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/seksiologi'>Seksiologi</a></li>
</ul>
</li>
<li><a href='http://maskolis.blogspot.com/search/label/teknologi'>Teknologi</a></li>
<li><a class='trigger' href='http://maskolis.blogspot.com/search/label/berita'>Berita</a>
<ul>
<li><a href='http://maskolis.blogspot.com/search/label/aneh'>Berita Aneh</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/dalam%20negeri'>Dalam Negeri</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/luar%20negeri'>Luar Negeri</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/sejarah'>Sejarah</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/serba%20serbi'>Serba Serbi</a></li>
<li class='hr'/>
<li><a href='http://maskolis.blogspot.com/search/label/Sosial%20Budaya'>Sosial Budaya</a></li>

Collector Template

Awalnya, template ini saya bagikan khusus untuk penggna template Creating Website saja, itu pun hanya 20 orang. Tapi karena banyaknya permintaan lewat email, saya memutuskan untuk membagikan untuk semua. Semoga yang sudah menerima template ini tidak keberatan. Template ini khusus saya design untuk blog kontent gallery, silahkan mau dipakai buat gallery apa saja terserah penggunanya.

Demo | Download

Untuk membuat postingan pastikan Anda dalam posisi HTML (bukan compose). Di bawah ini adalah contoh dalam membuat postingan pada template ini :

<div align="center">
</div>
<div class="badge sblogger">
</div>
<img class="latest_img" height="250" src="http://4.bp.blogspot.com/-vAQCTVY56RQ/T1C97oUO9DI/AAAAAAAAFrY/2qFu-uMpN4k/s1600/Johny+Darkmovie.jpg" width="310" />
<div class="fullpost">
<ul class="postbuttons">
<li><a class="livedemo" href="http://johny-darkmovie.blogspot.com/" rel="nofollow" target="_blank">Live Demo</a> </li>
<li><a class="download" href="http://www.box.com/s/qjhv758fzmne8lt3xpa8" rel="nofollow" target="_blank">Download Theme</a></li>
</ul>
</div>
<b>TEMPLATE FEATURES</b>
Silahkan diisi deskripsi template atau terserah anda.........

Perhatikan kode script yang saya beri warna diatas :

1. Warna hijau : adalah URL gambar yang harus anda ganti. Setelah gambar anda upload masukkan URL gambar pada kode yang berwana hijau.
2. Warna biru : adalah URL blog demo
3. Warna merah : URL untuk download

Di sebelah kiri gambar postingan terdapat space untuk iklan 300 x 250, dan di bawahnya terdapat juga untuk space iklan 468 x 60. Untuk mengganti dengan iklan Anda, cari kode berikut di Edit HTML (jangan lupa centang kotak expand widget templates) :

<div style='float:left; margin-right:35px; padding-top:10px'>
Script iklan 300 x 250 (di parse dulu)
<div style='position:absolute; ; padding-top:15px; padding-left:95px'>
Script iklan 468 x 60 (di parse dulu)
</div>
</div>

Sekarang widget kategori dan widget kategori warna di bawah menu navigasi. Untuk widget kategori di sidebar kiri, masukkan kode ini pada layout >> Javascript/HTML :

<div class="mas-tp-dhead-wrap"><img src="http://2.bp.blogspot.com/-wNh1gi5xt40/Tv3GnNjRMzI/AAAAAAAAAEk/y_3G6tuErUg/s1600/lb-one-px.gif" alt="" /><span>Template Categories</span></div>
<ul id="mas-op-box">
    <li><a href="#">Columns</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/1 Column?max-results=12" title="1 Column Blogger Templates">1 Column</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/2 Columns?max-results=12" title="2 Columns Blogger Templates">2 Columns</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/3 Columns?max-results=12" title="3 Columns Blogger Templates">3 Columns</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/4 Columns?max-results=12" title="4 Columns Blogger Templates">4 Columns</a></li>
        </ul>
    </li>
   
    <li><a href="#">Sidebars</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/1 Left Sidebar?max-results=12" title="1 Left Sidebar Blogger Templates">1 Left Sidebar</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/2 Left Sidebar?max-results=12" title="2 Left Sidebar Blogger Templates">2 Left Sidebar</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/1 Right Sidebar?max-results=12" title="1 Right Sidebar Blogger Templates">1 Right Sidebar</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/2 Right Sidebar?max-results=12" title="2 Right Sidebar Blogger Templates">2 Right Sidebar</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/Left and Right Sidebar?max-results=12" title="Left and Right Sidebar Blogger Templates">Left and Right Sidebar</a></li>
        </ul>
    </li>
   
    <li><a href="#">Width</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Fixed Width?max-results=12" title="Fixed Width Blogger Templates">Fixed</a></li>
              <li><a href="http://mas-template.blogspot.com/search/label/Fluid Width?max-results=12" title="Fluid Width Blogger Templates">Fluid</a></li>
        </ul>
    </li>
   
    <li><a href="#">Topics</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Fashion?max-results=12" title="Fashion Blogger Templates">Fashion</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Movie?max-results=12" title="Movie Blogger Templates">Movie</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/News?max-results=12" title="News Blogger Templates">News</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Natural?max-results=12" title="Natural Blogger Templates">Natural</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Sport?max-results=12" title="Sport Blogger Templates">Sport</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Video?max-results=12" title="Video Blogger Templates">Video</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Cartoon?max-results=12" title="Cartoon Blogger Templates">Cartoon</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Music?max-results=12" title="Music Blogger Templates">Music</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Books?max-results=12" title="Books Blogger Templates">Books</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Animals?max-results=12" title="Animals Blogger Templates">Animals</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Money?max-results=12" title="Money Blogger Templates">Money</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Health?max-results=12" title="Health Blogger Templates">Health</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Game?max-results=12" title="Game Blogger Templates">Game</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Girly?max-results=12" title="Girly Blogger Templates">Girly</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Culture?max-results=12" title="Culture Blogger Templates">Culture</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Fantasy?max-results=12" title="Fantasy Blogger Templates">Fantasy</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Gadgets?max-results=12" title="Gadgets Blogger Templates">Gadgets</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Software?max-results=12" title="Software Blogger Templates">Software</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Space?max-results=12" title="Space Blogger Templates">Space</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Personal?max-results=12" title="Personal Blogger Templates">Personal</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Online Store?max-results=12" title="Online Store Blogger Templates">Online Store</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Vector?max-results=12" title="Vector Blogger Templates">Vector</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Transparent?max-results=12" title="Transparent Blogger Templates">Transparent</a></li>
        </ul>
    </li>
   
    <li><a href="#">Features</a>
          <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Ads Ready?max-results=12" title="Ads Ready Blogger Templates">Ads Ready</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Custom Navbar?max-results=12" title="Custom Navbar Blogger Templates">Custom Navbar</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/CEO Ready?max-results=12" title="CEO Ready Blogger Templates">CEO Ready</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Page Number?max-results=12" title="Page Number Blogger Templates">Page Number</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Slideshow?max-results=12" title="Slideshow Blogger Templates">Slideshow</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Bookmark Ready?max-results=12" title="Bookmark Ready Blogger Templates">Bookmark Ready</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Slideshow?max-results=12" title="Slideshow Blogger Templates">Slideshow</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Footer Columns?max-results=12" title="Footer Columns Blogger Templates">Footer Columns</a></li>
        </ul>
    </li>
   
    <li><a href="#">Styles</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Magazine?max-results=12" title="Magazine Blogger Templates">Magazine</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Free Premium?max-results=12" title="Free Premium Blogger Templates">Free Premium</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Gallery?max-results=12" title="Gallery Blogger Templates">Gallery</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Simple?max-results=12" title="Simple Blogger Templates">Simple</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Wordpress Look?max-results=12" title="Wordpress Look Blogger Templates">Wordpress Look</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Unique?max-results=12" title="Unique Blogger Templates">Unique</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Elegant?max-results=12" title="Elegant Blogger Templates">Elegant</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Fancy?max-results=12" title="Fancy Blogger Templates">Fancy</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Floral?max-results=12" title="Floral Blogger Templates">Floral</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Light Weight?max-results=12" title="Light Weight Blogger Templates">Light Weight</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Web 2.0?max-results=12" title="Web 2.0 Blogger Templates">Web 2.0</a></li>
        </ul>
    </li>
   
    <li><a href="#">Colours</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Red?max-results=12" title="Red Blogger Templates">Red</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Green?max-results=12" title="Green Blogger Templates">Green</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Black?max-results=12" title="Black Blogger Templates">Black</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/White?max-results=12" title="White Blogger Templates">White</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Orange?max-results=12" title="Orange Blogger Templates">Orange</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Brown?max-results=12" title="Brown Blogger Templates">Brown</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Pink?max-results=12" title="Pink Blogger Templates">Pink</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Gray?max-results=12" title="Gray Blogger Templates">Gray</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Yellow?max-results=12" title="Yellow Blogger Templates">Yellow</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Violet?max-results=12" title="Violet Blogger Templates">Violet</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Blue?max-results=12" title="Blue Blogger Templates">Blue</a></li>
        </ul>
    </li>
   
    <li><a href="#">Activities</a>
             <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Education?max-results=12" title="Education Blogger Templates">Education</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Business?max-results=12" title="Business Blogger Templates">Business</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Entertainment?max-results=12" title="Entertainment Blogger Templates">Entertainment</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Photography?max-results=12" title="Photography Blogger Templates">Photography</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Sport?max-results=12" title="Sport Blogger Templates">Sport</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Travel?max-results=12" title="Travel Blogger Templates">Travel</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Gaming?max-results=12" title="Gaming Blogger Templates">Gaming</a></li>
        </ul>
    </li>
   
    <li><a href="#">Holidays</a>
        <ul>
            <li><a href="http://mas-template.blogspot.com/search/label/Christmas?max-results=12" title="Christmas Blogger Templates">Christmas</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/St. Valentine?max-results=12" title="St. Valentine Blogger Templates">St. Valentine</a></li>
            <li><a href="http://mas-template.blogspot.com/search/label/Halloween?max-results=12" title="Halloween Blogger Templates">Halloween</a></li>
        </ul>
    </li>
</ul>

Dan untuk widget kategori warna di bawah navigasi masukkan kode berikut pada kolom kosong di bawah navigasi :

<div id='mas-color-sec' style='background:#2c2626; position:relative; height:54px; border:1px solid #120f0f; border-bottom:1px solid #473d3d; border-right:1px solid #473d3d;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-image: -moz-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -ms-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -o-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#3b3232),color-stop(100%,#2c2626)); background-image: -webkit-linear-gradient(top,#3b3232 0,#2c2626 100%); background-image: linear-gradient(to bottom,#3b3232 0,#2c2626 100%);'>
<div id='mas-color-box-thumb' style='position:absolute;left:10px; top:10px;'>
<img alt='' src='http://2.bp.blogspot.com/-wNh1gi5xt40/Tv3GnNjRMzI/AAAAAAAAAEk/y_3G6tuErUg/s1600/lb-one-px.gif' style='width:34px;height:34px;background:no-repeat url(http://3.bp.blogspot.com/-vrz7XVO0wzg/T8dk31AfUnI/AAAAAAAAGXw/aMeLcxTcacs/s1600/bg-color.png)'/></div>
<h2 class='pmz' style='position:absolute;font-family:arial,sans-serif;font-size:15px;text-shadow:0px -1px 0px #000;line-height:20px;color:#b69786;left:56px;top:5px;border:none'>Choose your template colour</h2>
<style type='text/css'>
.pmz{ padding:0; margin:0;}
#mas-color-sb{list-style:none; position:absolute; left:56px; bottom:10px; float:left;}
#mas-color-sb li{ height:13px; width:30px; display:block; margin:0 9px 0 0; float:left;-moz-border-radius: 2px;-webkit-border-radius:2px;border-radius: 2px;  filter:alpha(opacity=100);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=1);opacity:1;}
#mas-color-sb li:hover{filter:alpha(opacity=70);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.7);opacity:0.7;}
</style>
<ul class='pmz' id='mas-color-sb'>
<a href='http://mas-template.blogspot.com/search/label/Red?max-results=12'><li style='background:#ff0000' title='Red'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Green?max-results=12'><li style='background:#008000' title='Green'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Black?max-results=12'><li style='background:#000000' title='Black'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Orange?max-results=12'><li style='background:#ffa500' title='Orange'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Brown?max-results=12'><li style='background:#a52a2a' title='Brown'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Pink?max-results=12'><li style='background:#ffc0cb' title='Pink'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Gray?max-results=12'><li style='background:#808080' title='Gray'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Yellow?max-results=12'><li style='background:#ffff00' title='Yellow'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Violet?max-results=12'><li style='background:#ee82ee' title='Violet'></li></a>
<a href='http://mas-template.blogspot.com/search/label/Blue?max-results=12'><li style='background:#0000ff' title='Blue'></li></a>
<a href='http://mas-template.blogspot.com/search/label/White?max-results=12'><li style='background:#FFFFFF' title='White'></li></a>
</ul>
</div>

Ganti URL pada kode diatas dengan URL blog Anda.

Itu tadi dua template yang saya bagikan pada artikel kali ini, kedua template ini sebenarnya sudah lama dibuat tapi baru sekarang saya bagikan secara gratis. Kode javascript pada kedua template diatas tidak saya ringkas, jadi aman dari gangguan banned dari Google Code. Jika Anda ingin meringkasnya silahkan, jika ada yang belum tahu caranya silahkan baca artikel saya tentang Mengatasi Loading Blog dengan Google Code. Sekian artikel saya kali ini selamat mencoba bagi yang berminat dan semoga bermanfaat.

Satu permintaan saja dari saya :
Mohon jangan dihilangkan kredit link pada template ini 

And I do not forget to say :

Picture by : http://123newyear.com/