InBlue Blogger Template

InBlue Blogger Template adalah template blogger dengan style rounded corners atau garis melengkung, memakai 2 kolom dan sidebar pada di sisi kanan. Tampilan background dengan pola gradient biru dan hitam membuat template ini tampak lebih bervariasi dengan warna yang kontras dengan background kolom post dan sidebar.

 

Sedikit tambahan menu di atas header, adalah page list menu atau menu halaman statis yang akan muncul dengan sendirinya ketika sobat membuat halaman statis. Kemudian menu horizontal juga saya sisipkan di bawah header, dan bisa di edit dengan mudah pada elemen halaman tanpa harus masuk ke menu Edit HTML template. Banner dengan ukuran 468x60 juga bisa di tambahkan melalui elemen halaman.

 

• Live Demo
• Download Theme

Escarlata Blogger Template

Escarlata Blogger Template adalah sebuah template blogger menggunakan 2 kolom dan sidebar yang terletak disebelah kanan. Template ini juga sangat simple, penggunaan menu horizontal juga sangat mudah. Menu horizontal sengaja saya buat 2 baris untuk melengkapi jumlah url yang mungkin berlebihan atau jumlah halaman statis yang banyak.

 

Tidak banyak fitur di template ini, selain yang sudah saya sebutkan diatas, social bookmark share dan artikel terkait dengan thumbnail juga saya selipkan di halaman post. Google font API yang saya gunakan disini adalah font Droid Sans, membuat template Escarlata menjadi lebih rapi dari segi tulisan pada umunya.

 

• Live Demo
• Download Theme

Simple Box Shadow Blogger Template

Belakangan memang blog ini sedikit terbengkalai, selain kesibukkan saya dikantor yang padat aktifitas, saya juga mengelola beberapa blog sehingga waktu untuk posting juga sangat sedikit. Kali ini saya coba angkat template yang sebenarnya sudah lama saya buat tapi tidak pernah saya posting disini. Simple Box Shadow adalah sebuah template blogger dengan tipe minimalis dan memanfaatkan kode css.

 

Tetap menggunakan kolom terpisah antara postingan dan sidebar, saya masih mengandalkan 3 kolom dibagian footer dan auto readmore juga saya pilih sebagai bagian dari postingan.

 

• Live Demo
• Download Theme

Penggunaan Google Font API di Blogger

Hal ini sebenarnya sudah pernah saya jelaskan sebelumnya pada artikel Tutorial Penggunaan Google Fonts, namun kebetulan ada yang bertanya mengenai font yang saya gunakan di blog ini jadi tidak ada salahnya saya tulis kembali tutorial ini. Font yang saya gunakan di blog ini adalah Droid Sans, bagi yang belum mengerti silahkan baca kembali postingan saya yang lalu mengenai google fonts. Jika sobat ingin menggunakan font yang lain, silahkan kunjungi langsung Google Web Fonts.

 

Pada halaman depan, silahkan sobat sorting saja berdasarkan Popularity.

 

Setelah itu sobat bisa melihat font yang paling banyak digunakan termasuk 'Droid Sans' yang juga saya gunakan di blog ini, pilih font yang sobat suka dan klik Add to Collection.

 

Jika ingin melihat bentuk tulisan dalam format Paragraph atau Headline, sobat bs klik Review pada tab button yang ada dibagian kanan bawah.

 

Kemudian untuk tahap terakhir, silahkan klik tab button Use pada bagian kanan bawah. Sobat akan mendapatkan kode untuk font yang sebelumnya sudah sobat pilih.

 

Jangan lupa untuk menambahkan tanda [ / ] di akhir kode sehingga menjadi seperti berikut :

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>

 

Tahap selanjutnya memasukkan kode tersebut ke dalam template blogger, silahkan login ke blogger.

1. Klik Rancangan
2. Kemudian klik Edit HTML
3. Tambahkan kode tersebut sebelum kode </head>, sehingga menjadi seperti :

   <link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'/>
   </head>

4. Cari kode css untuk body, contohnya seperti berikut :

   body {
   width: 980px;
   background: #FFF;
   font-size: 13px;
   font-family: 'Droid Sans', verdana, arial;
   text-align: left;
   color: #000;
   margin: 0 auto;
   padding: 0;
   }

5. Perhatikan huruf yang saya tebalkan, itulah kode css yang harus sobat tambahkan.

Kode css tersebut sengaja saya letakkan dibagian body, sehingga font seluruh isi blog akan berubah menjadi Droid Sans. Jika sobat menemukan kode font : verdana, arial, trebuchet ms dan sebagainya dibagian css yang lain silahkan hapus saja, misal seperti ini :

 

.post {
text-align: left;
background: #FFF;
font-family: arial, verdana;
border: 1px solid #CCC;
margin-bottom: 10px;
padding: 10px 10px 0;
}

 

Baiklah selamat mencoba, semoga bermanfaat !

Google Plus Situs Jejaring Sosial Terbaru

Saat ini dunia komunikasi semakin canggih dan komunikatif, hampir semua informasi dan gadget bisa kita dapat dengan mudah di internet. Dan orang-orang hebat pengembang situs jejaring sosial pun mulai mengembangkan fitur-fitur pada situs mereka, bahkan sampai saling sikut katanya sudah biasa demi kemajuan dan keperkasaan situs yang mereka kelola. Apalagi kalau bukan karena nama agar dunia lebih menghormatinya.

 

Konon kehadiran Google plus menjadi ancaman serius bagi situs-situs jejaring sosial lainnya, khusunya Facebook yang sampai saat ini masih merajai dunia jejaring sosial walaupun beberapa waktu yang lalu Twitter masuk ke dunia maya, tetapi Facebook masih menjadi situs jejaring dengan pengguna terbanyak.

 

Kembali ke Google Plus atau yang biasa disebut “G plus”, oleh Larry Page (CEO of Google) diklaim akan menjadi situs jejaring sosial terbesar dan terlengkap fitur-fiturnya. Untuk itu, silahkan sobat sendiri yang menilai ketika masuk dan bermain di G Plus. Karena menurut saya, nilai plus minus pasti ada tergantung penggunanya. Mirip dengan Facebook, tampilan juga tidak terlalu jauh berbeda, mungkin beberapa fitur unggulan G Plus yang sedikit menambah nilai plus.

 

Beberapa fitur tersebut antara lain :

1. Circle : Ketika sobat masuk, sobat bisa mengelompokkan teman berdasarkan kategori sobat, misal teman nongkrong di lingkaran satu, keluarga di lingkaran dua dan teman kerja di lingkaran tiga, dst.
2. Hangout : memungkinkan sobat untuk bertatap muka langsung melalui chat online atau webcam chat, sobat juga dapat mengatur untuk berbicara dengan beberapa orang sekaligus.
3. Sparks : disini sobat dapat mengambil video atau artikel berdasarkan minat sobat, dan bisa menyimpannya sebagai favorit di profil sobat. 

Saat ini, Google Plus masih terbatas pada pengguna akun Gmail saja, karena Google Plus masih dalam tahap pengembangan. Jadi untuk pengguna email lainnya, harap bersabar.

Google Update Pagerank

Hari ini google update pagerank, kira-kira seperti itu yang saya lihat ketika beberapa blog saya mengalami perubahan angka pada pagerank. Seperti biasa google update pada saat yang tidak di duga-duga, dan memang belakangan google sudah tidak teratur dalam melakukan update pagerank. Ada suka ada duka, buat yang PR nya turun jangan kecewa, semoga di update berikut bisa naik lagi dan buat yang naik jangan terlalu besar hati, karena pagerank memang bukan satu-satunya tolak ukur kesuksesan sebuah blog/web, masih banyak tolak ukur untuk menilai kesuksesan sebuah blog.

 

Beberapa blog saya juga ada yang turun termasuk blog ini, namun ada juga yang bisa membuat saya senang karena www.mybloggerthemes.com akhirnya bisa naik kelas. Semoga sukses buat semua yang naik peringkat, dan buat yang turun jangan kecewa. Tetaplah menulis dengan gayamu dan jangan pernah melakukan copy paste, karena itu akan sangat buruk di mata google.

Membuat Label Dengan Thumbnail Hover

Label yang selama ini sering kita jumpai bentuknya hanya berupa tulisan saja, itupun sudah ada dalam fasilitas menu di blogger. Bagaimana jika mengganti label dengan thumbnail atau gambar dari postingan? caranya sangat mudah, hanya manambahkan sedikit kode css dan javascript maka label dengan thumbnail akan menghiasi blog sobat. Kali ini saya coba berikan tutorial blog tentang label dengan thumbnail hover.

 

Untuk demo sobat bisa lihat di mybloggerthemes.com yang terletak di bagian tengah bawah, dimana thumbnail yang muncul akan sesuai dengan label yang kita pasang. Penulisan label juga harus sesuai dengan yang ada di blog sobat, seperti besar kecilnya huruf juga sangat memperangaruhi. Untuk memulainya, ada baiknya sobat backup terlebih dahulu templatenya dengan masuk ke Rancangan –> Edit HTML –> Download Template Lengkap.

 

1. Tambahkan kode css berikut diatas / sebelum kode ]]></b:skin> : 

   img.label_thumb {

   float:left;

   padding:3px;

   background:#CCC;

   border:1px solid #A4A4A4;

   width:100px;

   height:75px;

   margin-right:10px;

   margin-top:10px }

    
   img.label_thumb:hover {

   opacity:0.8;

   filter:alpha(opacity=80);

   -moz-opacity:0.80;

   -khtml-opacity:0.8 }

2. Kemudian tambahkan kode script berikut dibawah / setelah kode ]]></b:skin> : 

   <script type='text/javascript'>
   //<![CDATA[
   function labelthumbs(json){document.write('<div>');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
   if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
   var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
   {s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
   else thumburl='';}
   document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
   if(i!=(numposts-1))
   document.write('');}
   document.write('</div>');}
   //]]>
   </script>

3. Simpan Template.
4. Masuk ke Elemen Laman –> Tata Letak
5. Pilih salah satu gadget yang ingin sobat masukkan label, kemudian klik Tambah Gadget dan pilih yang HTML/Javascript.
6. Kemudian masukkan kode berikut kedalamnya :

   <script type='text/javascript'>var numposts = 6;</script>
   <script type="text/javascript" src="/feeds/posts/default/-/Magazine?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

 

Keterangan :

• Tulisan yang berwarna hijau adalah lebar dan tinggi thumbnail, sobat bisa sesuaikan dengan lebar widget template sobat.
• Tulisan yang berwarna biru untuk jumlah label yang akan di tampilkan.
• Dan tulisan yang berwarna merah untuk label yang akan sobat tampilkan, jangan sampai salah menulis labelnya, besar kecilnya huruf juga sangat mempengaruhi.

Sekian saja tips dari saya, semoga bermanfaat.