Download Template Blog Keren dan Gratisss

Download template blog gratis keren - Saat ini semakin banyak teman-teman blogger yang menjadikan blog sebagai sarana berekspresi akan kepribadian mereka. Oleh karena itulah situs-situs yang menyediakan template blog keren yang gratis menjadi semakin  populer. 

Bagi teman-teman blogger pemula yang lebih menyukai template blog keren yang gratis, maka ada beberapa situs yang bisa saya referensikan untuk teman-teman semua. Situs-situs ini tentunya menyediakan template yang dititikberatkan pada penampilan dan bukan merupakan template blog SEO friendly, jadi jangan terlalu menuntut kriteria template SEO friendly pada template blog yang ditawarkan.

Jadi silahkan cari template idaman anda pada situs-situs berikut ini dan download template blog keren yang tersedia:

Daftar Situs Download Template Blog Keren Yang Gratis

BTEMPLATES.COM

Situs btemplates menyediakan ribuan koleksi template blogspot yang sangat beragam untuk saudara download. Mulai dari yang keren sampai yang biasa-biasa saja. Semuanya bisa anda download secara gratis. Anda akan sangat dipermudah dengan begitu banyaknya filter template blog yang disediakan oleh situs ini. Anda bisa menggolongkan template menurut jumlah kolom, warna, gaya, dan posisi sidebar.

MASKOLIS.COM

This is one of the best Indonesian blog. Desain template blog yang dibuat maskolis bukan hanya diakui di Indonesia, tapi sudah dikenal dan dipakai banyak blogger di seluruh dunia. Dengan desain yang keren dan gratis, tentunya blog ini laris manis. Rasanya sudah banyak blogger Indonesia yang mengenal nama maskolis. Jadi silahkan browsing sendiri template incaran anda dengan mengklik link di atas dan download desain template blog yang anda rasa keren.

COPARTIDISIMO.COM

Ini adalah situs latin milik Karla. Di sini ada beberapa template yang didesain sendiri oleh Karla dan bisa menjadi pilihan anda. Hanya saja jumlah template yang ditawarkan memang tidak sebanyak yang ditawarkan di btemplates karena ini bukan situs terminal yang menerima sumbangan desain dari banyak orang. Jadi coba saja mengunjungi situs di atas....

LOEFA CEBOOK

Yang ini adalah blog yang dimiliki oleh blogger Indonesia bernama Abdil Latif. Blog ini menyediakan beberapa desain blog yang cukup beragam. Ada yang desainnya sederhana, ada yang keren, dan ada juga yang terlihat profesional. Hanya saja memang koleksinya belum terlalu banyak, tapi siapa tahu ada yang kena di hati anda. Jadi silahkan dicoba saja download dan pasang....

URANG KURAI

Yang satu ini juga adalah blogger Indonesia, yang desain templatenya bisa dikatakan sangat keren dengan "selera" yang mungkin patut anda pertimbangkan. Urang Kurai tidak menyediakan template yang biasa-biasa saja. Setiap template mempunyai ciri khas dan keunikan sendiri. Begitu anda mendarat ke blog urang kurai anda akan bisa menilai sendiri kemampuan script dari blogger Indonesia yang satu ini. Bagi yang suka template yang terkesan mekanis, silahkan download....

DZIGNINE.COM

Situs ini mempunyai koleksi yang belum terlalu banyak, tapi bolehlah untuk teman-teman blogger sekalian pertimbangkan. Selain template blog keren yang gratis Dzignine juga menyediakan yang premium, tapi saya yakin itu bukan ide yang populer buat blogger Indonesia. Kita suka yang gratisan.... benarkan?

54BLOGGER

Ini juga milik personal dari Fowzie, kelemahan dari blog ini adalah tidak menyediakan tampilan screen shot, jadi anda harus membuka setiap template dan mengunjungi halaman demo. Memang menyusahkan, jadi mungkin anda bisa menaruh situs ini di daftar akhir saja,....jika yang lain gagal.

Jadi anda bisa menggunakan ketujuh situs di atas untuk mencari template blog keren yang gratis, sebagai sarana mengeskpresikan diri anda. Tetapi perlu juga teman-teman blogger perhatikan penggunaan script pada template yang nanti di pilih. Jika script ternyata terlalu lama dimuat, maka ada baiknya untuk tidak menggunakan template tersebut, dan mencari style/desain yang lain.

Ok, sukses buat blog saudara.... ^_^

Read More

Modifikasi Popular Post untuk Template Gallery

aya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Setelah ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

Read More

Floating Social Bookmark dengan Efek Easing

Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu).

DEMO

Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :

1. Login ke Blogger
2. Masuk ke Template >> Edit HTML (centang expand widget templates)
3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
   
   .social-buttons {
       position: fixed;
       top: 130px;
       width: 45px;
       z-index: 9999;
   }
   .button-left {
       left: 0;
   }
   .button-right {
       right: 0;
   }
   .social-buttons #twitter-btn .social-icon,
   .social-buttons #facebook-btn .social-icon,
   .social-buttons #google-btn .social-icon,
   .social-buttons #rss-btn .social-icon,
   .social-buttons #pinterest-btn .social-icon,
   .social-buttons #youtube-btn .social-icon {
       background-color: #33353B;
       background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
   }
   .button-left #facebook-btn span {
       background-position: right 10px;
   }
   .button-left #twitter-btn span {
       background-position: right -35px;
   }
   .button-left #google-btn span {
       background-position: right -127px;
   }
   .button-left #rss-btn span {
       background-position: right -80px;
   }
   .button-left #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-left #youtube-btn span {
       background-position: 11px -223px;
   }
   .button-right #facebook-btn span {
       background-position: 12px 10px;
   }
   .button-right #twitter-btn span {
       background-position: 11px -35px;
   }
   .button-right #google-btn span {
       background-position: 10px -127px;
   }
   .button-right #rss-btn span {
       background-position: 11px -80px;
   }
   .button-right #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-right #youtube-btn span {
       background-position: 11px -223px;
   }
   .social-buttons #facebook-btn:hover .social-icon {
       background-color: #3B5998;
   }
   .social-buttons #twitter-btn:hover .social-icon {
       background-color: #62BDB2;
   }
   .social-buttons #google-btn:hover .social-icon {
       background-color: #DB4A39;
   }
   .social-buttons #rss-btn:hover .social-icon {
       background-color: #FF8B0F;
   }
   .social-buttons #pinterest-btn:hover .social-icon {
       background-color: #D43638;
   }
   .social-buttons #youtube-btn:hover .social-icon {
       background-color: #C4302B;
   }
   .social-buttons a:hover .social-text {
       display: block;
   }
   .button-left .social-icon {
       -moz-transition: background-color 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       background-repeat: no-repeat;
       display: block;
       float: left;
       height: 43px;
       margin-bottom: 2px;
       width: 43px;
   }
   .button-left .social-text {
       display: none;
       float: right;
       font-size: 1em;
       font-weight: bold;
       margin: 11px 40px 11px 0px;
       white-space: nowrap;
   }
   .button-right .social-icon {
       -moz-transition: background-color 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       background-repeat: no-repeat;
       display: block;
       float: right;
       height: 43px;
       margin-bottom: 2px;
       width: 43px;
   }
   .button-right .social-text {
       display: none;
       float: left;
       font-size: 80%;
       font-weight: bold;
       margin: 11px 0 11px 40px;
       white-space: nowrap;
   }
   .social-buttons .social-text {
       color: #FFFFFF;
   }
4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

   <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
   <script>
       $(window).load(function(){
           $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
               $(this).stop();
               $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
           });
           $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
               $(this).stop();
               $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
           });
       });
   </script>

   Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
   
   <div class='social-buttons button-right hidden-phone hidden-tablet'>
   <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
   <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
   <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
   <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
   <span class='social-text'>Follow via Pinterest</span></span></a>
   <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
   <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
   </div>
   Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
6. Terakhir, Save Templates

Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.

Sekian dan semoga ada manfaatnya

Read More