10 Best Template 2012 Free Download

 

Kali ini saya akan coba bagikan beberapa template terbaik yang bagus untuk diterapkan pada blog. Berikut 10 Best template 2012 free yang bisa anda pilih dan anda download.

1. FLEXOR MEGAZINE

Flexor Magazine adalah Template Blogger Dua kolom dengan Sidebar di kanan. Dengan warna utama abu-abu, biru dan putih. Desain template profesional blogger untuk semua gaya blogging.

              

2. UNITE

Unite memiliki design magazine profesional. Terdapat menu navigasi dropdown di header dengan lebar penuh fitur slider.

              

3. GADGET WEB

Sebuah desain Blog bagus untuk Gadget atau Teknologi. Dengan gaya desain magazine dengan tampilan read more dan thumbnail di halaman home.

              

4. MATAPAMI MAGAZINE

Sebuah template magazine murni dengan kolom berwarna gelap scheme. Dengan tata letak dua sidebar di kanan dan termasuk fitur slideshow lebar penuh.

              

5. SIMPLE RED

Ini adalah template 3 kolom berwarna terang dengan desain 2 sidebars. Gaya template profesional dengan slider yang indah dan banyak lagi.

              

6. LUMMOXIE.

Lummoxie memiliki desain retro yang lebar. Tampilan font dan tanggal posting yang menarik dan kolom komentar adalah salah satu fitur utamanya.

              

7. MUSIC PLUS

Template ini memiliki desain untuk blog bertema Musik. berwarna tema gelap modern dengan slider gambar and more.

              

8. JOHNY EMBER

Template ini dikemas dengan sebuah features kolom galeri khusus dengan daftar opsi tampilan di halaman utama dan daftar label posting adalah dua fitur yang unik dan menarik untuk blog.

              

9. CASINO NIGHTS

Template ini memiliki gaya klasik untuk blog dengan tema judi poker, taruhan dan perjudian lain di blog.

              

10. KIOSK

Seperti namanya template ini sudah diatur sebagai blog toko online anda. Memiliki desain yang cerah dengan keranjang belanja dan PayPal diaktifkan.

              

Silahkan anda pilih Template yang paling sesuai dengan desain tema blog yang anda inginkan.

Menambahkan Widget Random Post Terbaru di Blog

Kebanyakan blog memiliki gadget Recent Post dan Post Populer disidebar atau footer. Ini sangat membantu para pembaca blog anda untuk lebih mengetahui isi dari blog, serta mempertahankan pembaca pada blog Anda untuk tidak lekas cabut setelah membaca satu buah postingan. Dengan begitu gadget Random Post benar-benar menggali lebih jauh ke dalam arsip Anda dan membantu menjaga pembaca posting lebih lama bertahan pada blog. Bagaimana cara menambahkan Gadget Random Post Terbaru tersebut, mari kita ikuti langkah-langkahnya.

1. Masuk dashboard blog anda

2. Kemudian klik tambah gandget, pilih HTML / Java Script

3. Dan paste code berikut ini

<a href='http://belajarsaraf.blogspot.com/'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwPvRCfHWbsOLPiS6ejUHMf2vYdGK5or6WD4ZfxJuzHH6fhPkiZLNiqecoeloO0yF5F6amHGjxjOPnz-SE9XQG393rddd_dIrupitGdVZ8I4Dcwwg-IX9HwKqOEZKoLwQPxuMqbeq5_uxM/s1600/best+blogger+tips.png'/></a><script type="text/javascript"> var randarray = new Array();var l=0;var flag; var numofpost=6;function randomposts(json){ var total = parseInt(json.feed.openSearch$totalResults.$t,10); for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}} if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>'); for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1]; for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>"; document.write(item);}} }document.write('</ul>');} </script> <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

4. Kemudian klik save.

Anda dapat merubah berapa jumlah postingan yang ditampilkan dengan mengganti jumlah numofpost=6 dengan 5 atau 4 postingan.

Selamat mencoba.

Basa - Basi Lebaran Idul Fitri

Sudah hampir sebulan Belajar Saraf lama tidak update, sejak bulan ramadhan sampai lebaran Idul Fitri ini. Tapi syukurlah sekarang saya bisa hadir lagi. Maklumlah, walaupun saya bukan penganut agama yang taat, ternyata bulan ramadhan dan Idul Fitri turut membuat semua orang termasuk saya ikut dibuat sibuk untuk merayakanya.

Masih dalam rangka Lebaran Idul Fitri, yang menurut saya hanyalah hari raya untuk berbasa-basi saling memaafkan antar sesama kerabat dan handai taulan. Kenapa berbasa-basi ? Karena pada dasarnya bermaafan itu adalah mengihlaskan kesalahan yang telah kita perbuat pada orang lain atau sebaliknya.

Saya tidak pernah mengerti apa maksudnya ketika pada hari raya ini semua orang beramai-ramai saling mengucapkan "Minal Aidin Walfaidzin, Mohon Maaf Lahir Dan Batin" sebagai penghias bibir, penghias kartu lebaran, penghias spanduk/baliho/banner, dll. Kalau bermaafan adalah mengihklaskan kesalahan yang telah diperbuat, semestinya ucapan "Mohon Maaf" harus disertai dengan kesadaran diri dan pengungkapan semua kesalahan-kesalahan yang telah diperbuat.

Jadi kalau diterapkan ucapan lebaran itu contohnya akan menjadi seperti ini : "Sob, mohon maaf ya, kemarin saya sudah mencuri uang kamu, saya juga pernah mengolok-olok kamu seperti anjing, yang membuat kamu jadi sakit hati", dan ungkapan kesalahan-kesalahan yang lain. Dengan begitu, orang yang dimintai maaf juga tahu dan mengerti kesalahan apa yang mesti dia maafkan.

Lalu bagaimana yang terjadi dengan Idul Fitri kali ini ? Sepertinya tradisi berlabaran hanyalah sekedar tradisi untuk berpesta-pora, memamerkan barang kemewahan. Dengan menghiasi bibir semanis mungkin dengan ucapan-ucapan maaf yang tidak mempunyai efek pada kesadaran hati sama sekali.

Tapi ya sudahlah. Mungkin tradisi lebaran Idul Fitri memang dibuat untuk menjadi tradisi saling berbasa-basi. Dan melalui momen Hari Raya Idul Fitri ini, izinkan saya mengucapkan basa-basi pada anda : "Jika semua kalimat-kalimat dan postingan yang anda baca dalam blog Belajar Saraf ini telah membuat anda tersinggung dan kesal terhadap saya, sayapun dengan segala kerendahan hati memohon maaf kepada anda semua"

16 Agustus Tahun 45 Adalah Hari Kemerdekaan Kita

Mat Udin ikut lomba menyanyikan lagu wajib nasional yang diadakan salah satu kementerian. Tanpa ragu dia memilih menyanyikan lagu Hari Merdeka atau Tujuh Belas Agustus dari dua lagu lainnya yang diminta panitia; Indonesia Raya dan Maju Tak Gentar.

Mat Udin: "Enam belas Agustus tahun empat lima."

Juri: "Salah, ulangi!"

Mat Udin: "Enam belas Agustus tahun empat lima."

Juri kesal: "Salah, ulangi lagi. Ini kesempatan terakhir!"

Mat Udin menggurut, "Haduuhh, makanya tolong dengarkan dulu sampai selesai."

Tanpa rasa bersalah Mat Udin pun kembali bernyanyi.

"Enam belas Agustus tahun empat lima. Besoknya hari kemerdekaan kita. Hari merdeka nusa dan bangsa..."

Memasang Widget SubMenu Thumbnail di Blog

Bagaimana widget SubMenu Thumbnail tersebut, lihat dulu Demonya Disini. Bila anda juga tertarik membuatnya ikuti langkahnya-langkahnya sebagai berikut :

1. Masuk dashboard blog anda.

2. Pilih Edit HTML kemudian klik Expand Widget (jangan lupa backup terlebih dahulu template anda)

3. Cari kode </head>.

4. Pastekan kode berikut sebelum </head> :

<script> <!-- http://belajarsaraf.blogspot.com/ --> var last_expanded = ''; function showHide(id) { var obj = document.getElementById(id); var status = obj.className; if (status == 'hide') { if (last_expanded != '') { var last_obj = document.getElementById(last_expanded); last_obj.className = 'hide'; } obj.className = 'show'; last_expanded = id; } else { obj.className = 'hide'; } } </script>

5. Setelah itu cari kode ]]></b:skin>
6. Pastekan kode berikut sebelum ]]></b:skin> :

.raden{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava6.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom: 5px; display:block; text-decoration: none; color: #F6E151; } .ogah{ background-image:url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: ##FAF705; height: 18px; } .ogahniye{ background-image: url('http://i162.photobucket.com/albums/t253/rohman24/bannerjava4.gif'); text-align:center; width:175px; font-family: georgia, Helvetica, sans-serif; padding-left:5px; padding-right:5px; padding-top:8px; padding-bottom: 5px; display:block; text-decoration: none; color: #0572FA; height: 18px; } .hide{ display: none; } .show{ display: block; } a{cursor: hand}

7. Bila sudah simpan/save template anda.

Pada tahap ini windget SubMenu Thumbnail masih belum tampil di blog anda. Untuk menampilkanya ikuti langkah selanjutnya :

8. Masuk ke Tata Letak dan pilih Elemen Halaman
9. Klik tambah widget dan pilih Java Script HTML
10. Kemudian copy paste saja kode dibawah ini :

<a class="raden"><font size="5"><b>Navigasi</b></font></a> <a class="ogah" onclick="showHide('ogahku1')">Blog Tutorial</a> <div id="ogahku1" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat blog</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat link</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat marquee</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Membuat Icon</a> </div> <a class="ogah" onclick="showHide('ogahku2')">Aksesori blog</a> <div id="ogahku2" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Yahoo Emotions</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blogger Emotions</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang jam</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Pasang Video</a> </div> <a class="ogah" onclick="showHide('ogahku3')">My Other Blog</a> <div id="ogahku3" class="hide"> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Rubrik Elektronik</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Free Blog Template</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Blog Menu Free</a> <a href="http://belajarsaraf.blogspot.com/" class="ogahniye">Authorize service</a> </div> <a class="ogah" onclick="showHide('ogahku4')">Links Temanku</a> <div id="ogahku4" class="hide"> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Freezta</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">JalanMaz</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">Liezmaya</a> <a href="http://belajarsaraf.blogspot.com/" target="_blank" class="ogahniye">AnaBlog</a> </div>

11. Setelah itu pilih save.

Keterangan :
>> Ganti kode yang berwarna kuning dengan nama menu dan sub menu blog anda
>> Ganti juga kode yang berwarna merah dengan link yang anda inginkan

Dan lihat hasilnya.

Membuat Auto Read More di Blog

Mungkin sebagian anda merasa tidak nyaman dengan tampilan postingan yang terlihat full di halaman depan blog. Sehingga halaman depan blog anda menjadi tampak panjang kebawah, apalagi bila ada beberapa postingan yang ditampilkan, tentu ini akan memakan waktu bagi anda maupun pengunjung blog anda yang hendak melihat-lihat isi blog anda tersebut.

Solusinya adalah, anda dapat memenggal sebagian entri anda, pada saat anda akan mempublikasikanya. caranya, anda hanya tinggal mengatur seberapa tulisan yang akan di penggal, lalu tekan Insert Jump Break. Fasilatas Insert Jump Break / pemenggalan postingan ini seperti yang telah ada di blogspot, terdapat di atas, saat anda menulis entri.

Tapi kelemahan dari pemenggalan secara manual ini, tampilan beberapa postingan anda tidak bisa sama rata, dan gambar yang tampil dihalaman blog tidak bisa sama besar. Tergantung besar gambar yang anda posting. Lalu bagaimana agar tampilan postingan dan gambar dihalaman blog anda bisa sama besar dan lebarnya ?

Untuk mengatasi hal tersebut anda bisa membuat Auto Read More, sehingga anda tidak perlu repot-repot secara manual untuk mengatur postingan dan gambar saat hendak mempublikasikan entri. Langsung saja ikuti caranya dibawah ini :

1. Masuk ke halaman dashboard blog anda.

2. Pilih Edit HTML dan klik Expand Widget (jangan lupa untuk memback up template anda).

3. Setelah itu cari kode </head>.

4. Kemudian letakkan kode ini sebelum kode </head> :

<script type='text/javascript'> var thumbnail_mode = "float" ; summary_noimg = 250; summary_img = 250; img_thumb_height = 120; img_thumb_width = 120; </script> <script type='text/javascript'> //<![CDATA[ /** Auto-readmore link script, version 2.0 (for blogspot) (C)http://belajarsaraf.blogspot.com **/ function removeHtmlTag(strx,chop){ if(strx.indexOf("<")!=-1) { var s = strx.split("<"); for(var i=0;i<s.length;i++){ if(s[i].indexOf(">")!=-1){ s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); } } strx = s.join(""); } chop = (chop < strx.length-1) ? chop : strx.length-2; while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; strx = strx.substring(0,chop-1); return strx+'...'; } function createSummaryAndThumb(pID){ var div = document.getElementById(pID); var imgtag = ""; var img = div.getElementsByTagName("img"); var summ = summary_noimg; if(img.length>=1) { imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; summ = summary_img; } var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; div.innerHTML = summary; } //]]> </script>

5. Kemudian cari lagi kode <data:post.body/>.

6. Setelah ketemu ganti kode <data:post.body/> tersebut dengan kode ini :

<b:if cond='data:blog.pageType != "item"'> <div expr:id='"summary" + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script> <span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Kalau sudah save template anda dan lihat hasilnya.

Keterangan tambahan :

var thumbnail_mode = "float";  (kita dapat memutuskan apakah letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti dengan (no-float)

summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting tanpa gambar / thumbnail)

summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di posting dengan gambar / thumbnail)

img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)

img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)

Selamat moncoba.