gubhugreyot: Demo & Tutorial: 01/02/2012

gubhugreyot.blogdetik.com gubhugreyot.blogspot.com bgsgr.blogspot.com tantytm.blogspot.com

Tuesday 21 February 2012

Tambah, Pasang dan Tampilkan Icon di depan Teks Link

Link adalah sebuah kode html yang di dalamnya berisi alamat/URL sebuah blog/web atau bagian dari sebuah web/blog. Dengan memanfaatkan fungsi klik atau hover efek alamat yang terdapat dalam link ini dapat dibuka melalui browser. Teks link dibuat dalam sebuah tag "a", dimana teks link diletakkan aantara tag pembuka dan tag penutupnya. Dalam web/blog umumnya digunakan dua macam link.

Teks Link : Penanda link menggunakan teks.
Image Link : penanda link berupa image (gambar).

Karena link dipandang sangat penting untuk mudah dilihat, oleh karena itu penampilan sebuah link selalu dibuat berbeda dan diupayakan selalu terlihat lebih mencolok dibandingkan dengan teks lainnya. Ada yang menggunakan warna berbeda dengan teks posting (link color), ada yang menggunakan font lebih tebal (font-weight), ada yang menambah garis di bawah teks link (text-decoration), ada yang menggunakan background color atau image.

Contoh: teks link:

Contoh sebuah teks link

Kode dasar teks link

xHTML Teks Link

<a href="URL">Teks Link</a>

Menambah, memasang atau menampilkan icon di depan atau di belakang teks link tak lain sebagai sebuah upaya agar teks link menjadi lebih mudah dikenali. Disisi yang lain menambah icon juga dimaksudkan untuk membuat link terlihat lebih cantik. Penambahan icon ini sebenarnya tak berbeda dengan memberi background, hanya background link di tata sedemikian rupa hingga posisinya berada tepat di depan atau di belakang teks link. Anda bisa membuatnya secara langsung ditempat link dipasang dengan hanya menggunakan kode html atau dengan memanfaatkan kode css. Tentu saja menggunakan kode CSS akan lebih sempurna karena selain kode html menjadi lebih simpel, melalui kode css berbagai efek menarik dapat diciptakan.

Karena penambahan icon teks link bertujuan untuk memperindah teks link, oleh karena itu sangat penting memperhatikan keseimbangan ukuran icon dan ukuran teks link.

Contoh penambahan icon pada teks link:

Contoh menampilkan atau menambah icon di depan link

Kode CSS

a.GRiconlink{
       padding-left:20px;
       padding-right:4px;
       display:inline-block;
       background:url(http://gubhugreyot-icon.googlecode.com/files/gubhugreyot-mrengut-icon.gif) no-repeat;
       background-position:2px 6px;    
       text-decoration:none;
       color:#C60; /* code by: gubhugreyot */
       font-weight:bold;
}
a.GRiconlink:hover{
       background:url(http://gubhugreyot-icon.googlecode.com/files/gubhugreyot-bungah-icon.gif) no-repeat;
       background-position:0 4px; 
       color:#F00;
}

xHTML

<a class="GRiconlink" href="htp://gubhugreyot.blogspot.com">Letakkan Teks Link di sini !</a>

Catatan/Keterangan:

Pada kode css di atas menggunakan icon dengan ukuran berbeda, dimana icon pada hover berukuran 4px lebih besar, sehingga agar icon pada hover tepat diatas icon teks link maka posisi background diatur dengan perbedaan sebesar 2px background position).
Pemberian padding-left sebesar 20px berfungsi sebagai ruang meletakkan icon.
Jika anda menggunakan icon dengan ukuran sama, buatlah background position dengan nilai yang sama pula.
Icon bisa berupa gambar statis atau gambar animasi gif.
Anda bisa mendapatkan berbagai icon dengan mengunjungi situs-situs free icon.
Penggunaan class="GRiconlink" agar tak semua link mempunyai tambahan icon. Jika menginginkan semua link mempunyai tambahan icon, hilangkan class tersebut. Pada kode CSS hapus kode .GRiconlink sedang pada xHTML hapus kode class="GRiconlink"
Atur posisi icon dengan merubah nilai pada:
- Teks Link » background-position:2px 6px;
- Hover Teks Link » background-position:0px 4px;
- 2px dan 0px » posisi horizontal (ke arah kanan dan kiri).
- 6px dan 4px » posisi vertical (ke atas dan ke bawah).

Cara menggunakan kode

Simpan kode CSS di atas kode ]]></b:skin>
Bagi yang membutuhkan panduan cara menyimpan kode CSS di template silahkan buka link di bawah ini:
Tutorial: Tips & Trick menambah atau menyimpan kode CSS.
Gunakan xHTML di halaman posting atau bagian blog yang lain seperti Add a Gadget | HTML/Javascript.
Anda dapat juga membuat yang dilengkapi dengan efek css3. anduan & tutorialnya dapat diikuti di sini:

Add icon in front of a link with CSS3 effect

Sunday 19 February 2012

Simple jQuery Show Hide DIV with Effect

Cara Membuat Show Hide DIV dengan Efek menggunakan jQuery

Flag Counter
show/hide

Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan id=GRshObject anya akan terlihat ketika button Show/Hide di "klik". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!

$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});

Efek animasi saat box konten membuka dan menutup yang disertai fade effect terjadi karena penggunaan jQuery animated toggle.

jQuery-Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GRshObject').hide();
$('a#GRshButton').click(function () {
$('#GRshObject').toggle(600);
});
});
</script>

Kode CSS:

<style type="text/css">
.GRshbox{
       border:1px outset #888;
       width:400px;
       background:#474747;
       background:-moz-linear-gradient(top, #474747 0%, #595959 8%, #8e8e8e 36%, #8c8c8c 43%, #777777 59%, #595959 93%, #b2b2b2 97%, #7a7a7a 100%);
       background:-webkit-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);background:-o-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background:-ms-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background:linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#7a7a7a',GradientType=0 );        padding:2px;margin:5px 2px;text-align:center;
}
.GRshbox p.GRshHeader{
       box-shadow:0 0 4px #999;
       border-radius:3px;
       font-size:16px;
       font-family:Serif;
       color:#fff;
       text-shadow:1px 1px 1px #000;
       padding:4px;
       border:1px solid #555;
       border-right-color:#333;
       border-top-color:#333;
       margin:4px 5px; 
}
a#GRshButton{
       display:block;
       width:115px;
       height:36px;
       margin:0 auto;
       text-align:center;
       background:url('http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg') center no-repeat;
       text-indent:-9999px;
       color:transparent;
       cursor:pointer; 
}
#GRshObject{
       padding:10px;
       margin:10px 0;
       color:#eee;
       text-shadow:1px 1px 1px #000;
       text-align:left;
       max-height:200px;
       overflow:auto; 
}
</style>

xHTML:

<div class="GRshbox">
  <p class="GRshHeader">Flag Counter<br /><a id="GRshButton">show/hide</a></p>
    <div id="GRshObject">
Anda bisa menuliskan teks, kode html, widget, image atau yang lain di sini. Semua yang berada dalam DIV dengan <b>id=GRshObject</b> hanya akan terlihat ketika button Show/Hide di "<i>klik</i>". Jika anda ingin membuat Show Hide DIV tanpa jQuery silahkan cari tepat sebelum posting ini!<p>
<a href="http://gubhugreyot.blogdetik.com/" target="_blank"><img border="0" height="92" width="242" src="http://4.bp.blogspot.com/-NK9kbuigZ38/Tv14OrfGMcI/AAAAAAAAA9E/_dCJuMqFvx4/s400/flag-counter.jpg" style="margin:0 auto;display:block;text-align:center;;padding:0;" /></a></p>
    </div>
</div>

Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.

Simple Show Hide DIV using Script & CSS3

Membuat Show Hide DIV Menggunakan Javacript dan CSS3

Flag Counter

$(document).ready(function () {
$('#GRsh_object').hide();
$('a#GRsh-button').click(function () {
$('#GRsh_object').toggle(0);
});
});

Silahkan anda coba dulu demo di atas!

Berbeda dengan show hide content yang dibuat menggunakan javascript di posting sebelumnya, show hide div di atas dibangun tanpa menggunakan jQuery. Dengan kegunaan, show hide DIV ini terhitung relatif sangat simple karena hanya menggunakan beberapa deret script saja. Agar mempunyai tampilan yang manis kita libatkan background CSS3 setra border-radius dan box-shadow. Anda bisa menggunakan show hide ini sebagai wadah image (gambar), teks atau konten lainnya.

Javascript Show Hide DIV

<script type='text/javascript'>
if(typeof(GRsh) == 'undefined') var GRsh = '';
GRsh = Math.floor(Math.random()*1000);
GRsh = 'id-' + GRsh;
document.write('<a href="#" onclick="tmp = document.getElementById(&quot;' + GRsh + '&quot;); tmp.style.display = (tmp.style.display == &quot;none&quot;) ? &quot;block&quot; : &quot;none&quot;; return false;">');
</script>

Kode CSS Show Hide DIV

<style type="text/css">
.GRshowhideDIV{
       border:1px solid #888;
       width:400px;
       background:#474747;
       background:-moz-linear-gradient(top, #474747 0%, #595959 8%, #8e8e8e 36%, #8c8c8c 43%, #777777 59%, #595959 93%, #b2b2b2 97%, #7a7a7a 100%);
       background: -webkit-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: -o-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: -ms-linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       background: linear-gradient(top, #474747 0%,#595959 8%,#8e8e8e 36%,#8c8c8c 43%,#777777 59%,#595959 93%,#b2b2b2 97%,#7a7a7a 100%);
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#7a7a7a',GradientType=0 );
       padding:2px;
       margin:5px 2px;
}
.GRshowhideDIV:active{
       outline:none;
}
.GRshowhideDIV span{
       display:block;
       box-shadow:0 0 4px #999;
       border-radius:3px;
       font-size:16px;
       font-family:Serif;
       color:#fff;
       text-shadow:1px 1px 1px #000;
       padding:4px;
       border:1px solid #555;
       border-right-color:#333;
       border-top-color:#333;
       margin:4px 5px;
}
</style>

xHTML Show Hide DIV

<center>
<div class="GRshowhideDIV">
<span>Flag Counter<br />
<img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/Mart10/template-GR/Show-HideH115V34.jpg" width="115" height="36" style="margin:0 auto;display:block;text-align:center;" /></span>
<script type='text/javascript'>
document.write('<div id="' + GRsh + '" style="display:none;">');
</script>
<p>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
<a href="http://widgets.tcimg.com/" target="_blank"><img border="0" height="92" width="242" src="http://4.bp.blogspot.com/-NK9kbuigZ38/Tv14OrfGMcI/AAAAAAAAA9E/_dCJuMqFvx4/s400/flag-counter.jpg" style="margin:0;padding:0;" /></a>
<!-- Letakkan konten (image, teks atau kode html) di sini !! -->
</p>
</div>
</center>

Untuk menyesuaikan lebar Show Hide DIV hapus kode width:400px; atau bisa juga dengan merubah nilainya (400px). Semakin besar maka semakin lebar.
Anda bisa menyimpan seluruh kode dalam box gadget HTML/Javascript.
Jika ingin penyimpanan terpisah:
- Simpan Javascript di atas kode </head>
- Simpan kode CSS di atas kode ]]></b:skin>
- Gunakan xHTML di antara tag body atau dalam box gadget HTML/Javascript.
Ganti URL image yang ada dalam show hide DIV dengan cara upload melalui halaman posting blogger. Menggunakan image yang diupload di blog anda akan lebih aman dan sangat berpengaruh besar terhadap kecepatan loading blog.
Untuk menyimpan kode Show Hide DIV anda bisa membaca panduan berikut sebagai referensi:
Tutorial : Cara simpan kode CSS

jQuery Show Hide Content (jQuery Spoiler)

Silahkan klik pada Show/Hide di bawah ini untuk melihat bagaimana show hide content yang dibuat menggunakan jQuery bekerja.

Ini adalah sebuah contoh bagaimana show hide content bekerja. Anda bisa melihat betapa sekalipun javascript yang digunakan hanya beberapa gelintir saja, namun efek yang dihasilkan sungguh terasa sangat luar biasa. Hal-hal kecil seperti ini pastilah akan sangat menarik untuk digunakan dalam blog. Gunakanlah javascript ini bersama jQuery.1.3.2.min.js atau yang lebih baru seperti jQuery.1.7.1.js, jQuery.1.4.2.js atau jQuery.1.6.1.js. Jika blog anda selama ini sudah menggunakan salah satu dari jQuery tersebut, maka anda hanya perlu menambah javascript di bawah ini untuk membuat show hide content.

$(document).ready(function(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle(500);
   });
});

Menggunakan jQuery sebagai salah satu komponen javascript pendukung kinerja blog memang terasa sangat luar biasa. jQuery tak hanya bisa digunakan untuk satu fungsi saja. Berbagai fungsi lain dengan mudah dapat ditambahkan dan tak selalu harus dengan menambahkan lagi javascript yang kompleks atau berderet-deret memanjang. Beberapa bahkan bisa dibuat dengan tambahan satu deret script saja. Kondisi seperti ini tentu saja memberi keuntungan luar biasa bagi blogger karena setelah jQuery dilibatkan dalam template maka penggunaan javascript untuk berbagai fungsi dan kegunaan lain bisa diminimalisir hingga beban blog juga tak terlalu tertambahi. Menggunakan jQuery juga memberi keleluasaan untuk membuat desain-desain baru dengan gerak animatif tanpa perlu kode bertumpuk. Salah satu diantaranya adalah show hide content yang berfungsi menyembunyikan "sesuatu elemen posting atau elemen blog lain" dalam sebuah tag div. Dengan sebuah control yang sangat sederhana elemen tersembunyi dapat diperlihatkan (ditampilkan) dan kemudian disembunyikan lagi disertai efek show hide yang terlihat dinamis.

Untuk membuat show hide conten gunakan javascript, kode CSS dan xHTMl seperti berikut:

jQuery - Javascript:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
     $(".GRshowhidebox").hide();
     $(".GR_showhide").show(); 
     $('.GR_showhide').click(function(){
     $(".GRshowhidebox").slideToggle();
   });
});
</script>

Kode CSS:

.GRshowhidebox{
       width:400px;
       max-height:500px;
       background:#bbb;
       padding:15px 10px;
       margin:10px 0;
       border-bottom:5px double #333;
}
.GR_showhide{
       display:none;
}

xHTML:

<a href="#" class="GR_showhide">Show/hide</a><br /><div class="GRshowhidebox">
Letakkan di sini konten yang akan disembunyikan!
</div>

Letakkan dan simpan jQuery dan Javascript di bawah tag <head>
Letakkan dan simpan Kode CSS di atas kode ]]></b:skin>
Gunakan xHTML di dalam boks posting atau dibagian yang lain blog.

Wednesday 15 February 2012

Buat Background Header Lebih Heboh dg Kode CSS

Ada cara lain yang memungkinkan anda membuat background header selain menggunakan fitur yang disediakan blogger. Jika umumnya kita membuat background header melalui klik "EDIT" di Elemen Header (buka gambar di samping!), mungkin anda akan lebih tertarik untuk membuatnya melalui kode CSS. Mengapa demikian? Yah..., karena dengan kode CSS anda lebih punya kebebasan untuk berimprovisasi. Bahkan, jika menggunakan elemen header hanya dapat membuat (upload) satu background image), melalui kode CSS anda bisa menambahkan beberapa image lain sebagai background header. Jadi pada intinya melalui kode CSS anda punya kesempatan membuat background header blogger dari penggabungan beberapa background image. Sulitkah membuat background header menggunakan kode CSS? He.... he .... jangan kuwatir! Gampang... gampang ..., ko!

Ada beberapa kode html yang digunakan blogger pada bagian header, tetapi secara khusus ketika anda membyat background header melalui "Elemen Header" yang digunakan adalah #header-inner (id='header-inner'). Anda akan menjumpai syntax ini ketika menggunakan Template Tata Letak (Template Blogger lama), sedang di Blogger Template Designer tak akan anda temukan.

Syntax #header-inner di Template Tata Letak

#header-inner {
       background-position: center;
       margin-$startSide: auto;
       margin-$endSide: auto;
}

Karena kini hampir semua blogger menggunakan Blogger Template Designer (Perancang Template Blogger) maka kita akan mencoba melakukan penambahan kode CSS di Blogger Template Designer.

D E M O

Penting untuk melihat demo blog yang membangun background headernya menggunakan kode CSS agar anda bisa membandingkan sejauh mana nilai lebih menggunakan kode CSS dalam membuat background header Blogger Template Designer bila dibandingkan dengan hanya mengandalkan fitur yang disediakan blogger. Silahkan klik link demo di bawah ini:

D E M O Background Header Blogger Template Designer

Kode CSS untuk membuat background header Blogger Template Designer

Kode dasar Background Header

#header-inner{
       position:relative;
       background:transparent url('background-header.jpg');
       background-position:center;
       background-repeat:no-repeat;
}

Penambahan position:relative; akan memungkinkan anda membuat kode baru guna memasang teks atau image (background) tambahan melalui #header-inner:before dan #header-inner:after (CSS pseudo Classes). Selain itu anda juga dapat menggunakan kode html setelah id=header-inner dalam posisi absolute.

Yang penting diperhatikan sebelum membuat background header dg kode CSS

Tentukan berapa lebar dan tinggi #header-inner. Anda bisa mengetahui tinggi dan lebar #header-inner secara cepat dan akurat dengan membuka link di bawah ini:
Trik ampuh untuk ketahui ukuran background header blogger.
Sebelum melakukan penambahan kode CSS, agar nantinya kode CSS berfungsi dengan sempurna silahkan hapus terlebih dahulu background header yang sudah terpasang melalui "EDIT" di "Elemen Header" (bagi yang sebelumnya sudah menggunakan background header).

Langkah membuat background header dg kode CSS

Untuk login klik di sini !Login di Blogger. Jika anda mennggunakan google mail (gmail), login cukup dilakukan dengan menuliskan user name dan password, namun jika bukan dari gmail tuliskan alamat email secara lengkap.
Setelah login dilakuka anda akan memasuki halaman dasbor (dasboard) yang di dalamnya berisi beberapa fitur , seperti posting, Stats, Rancangan (Design), Comments (Komentar, Settings (Pengaturan) dll.
Fitur Design (Rancangan) akan menghubungkan pengguna dengan fungsi edit template. Fungsi editing berada di Rancangan | Elemen Laman (Design | Page Elements) dan di Rancangan | Edit HTML (Design | Edit HTML). Klik "Edit HTML".
Kode CSS di simpan di antara tag pembuka head (<head>) dan tag penutup head (</head>) atau tepatnya di atas kode ]]></b:skin>.
Cari kode kode ]]></b:skin>.
Kode CSS yang disimpan ditemplate di atas kode ]]></b:skin> tidak memerlukan tag pembuka dan penutup style (<style type="text/css"> dan </style>)
Klik Simpan Template (Save Template).

Contoh Kode CSS buat Background Header

Kode CSS yg lebih komplek

#header-inner{
       position:relative;
       background:#666 url('http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_bridge-900-200.jpg') center no-repeat;
}
#header-inner:before{
       position:absolute;
       display:block;
       width:58px;
       height:50px;
       left:60px;  /* code by: http://gubhugreyot.blogspot.com */
       top:0px;
       content:url('https://lh5.googleusercontent.com/-WVnUd2BO_UQ/TzvcQeXo4XI/AAAAAAAAAL8/av3xRaGcXjw/h120/gubhugreyot-animasi-pesawat-terbang-02.gif');
}
#header-inner:after{
       position:absolute;
       display:block;
       font-size:27px;
       color:red; /* code by: http://gubhugreyot.blogdetik.com */
       text-shadow:1px 1px 1px #000;
       right:20px;
       bottom:10px;
       content:"http://gubhugreyot.blogspot.com";
}

Catatan/Keterangan:

Panduan berbagai cara menyimpan kode CSS di template bisa anda baca dengan klik link berikut:
Berbagai cara simpan kode css
Jika menggunakan gambar animasi gif akan lebih baik seandainya anda meng-upload di http://picasaweb.google.com.
Anda bisa mengembangkan contoh kode CSS di atas untuk disesuaikan dengan blog anda.
Selalu akan lebih baik mengetahui terlebih dahulu ukuran background yang diperlukan ketika membuat sebuah background image
Usahakan untuk menggunakan background dengan beban image tidak terlalu besar agar tidak mengganggu loading blog. Hal ini berlaku untuk keseluruhan background yang digunakan pada blog.
Jangan terlalu banyak menggunakan image/gambar animasi secara berlebihan karena beban gambar animasi gif yang besar dan komplek sangat besar.
Selain kode CSS di atas, masih banyak kemungkinan pengembangan kode background header dengan melibatkan syntax yang lain. Tunggu saja tutorial berikutnya!
Gambar memang jadi alat yang hebat untuk membuat tampilan blog semakin cantik dan indah, tetapi menggunakan gambar tak ubahnya orang makan. Makan terlalu banyak bikin perut sakit dan akhirnya jalanpun tak bisa! He ... paling bisanya lari ke WC!!!!

Sunday 12 February 2012

Tips & Trick Cara membuat Background Image di Header Blogger Template Designer

Menggunakan Blogger Template Designer (Perancang Template Blogger) sungguh membuat penggunanya merasa nyaman. Berbagai fitur yang ditujukan untuk mempermudah pengguna melakukan berbagai editing telah disediakan. Salah satu diantaranya adalah untuk membuat atau memasang background header blog. Background header berfungsi sebagai latar title blog dan deskripsi blog yang letaknya di ujung paling atas. Anda bisa menggunakan background color atau background image. Jika anda menyukai background image sebagai latar header, persiapkan saja sebuah background image berukuran sedikit lebih kecil dari lebar blog (lebar body) dan tingginya sesuai dengan box header-inner. Tinggi Header inner berkaitan dengan ukuran font, jenis font, ketebalan font title blog dan deskripsi blog serta berapa panjang deskripsi title blog yang digunakan. Nah... ketika sampai pada masalah perhitungan lebar dan tinggi header-inner inilah akan terasa betapa pentingnya untuk mengetahui cara mencari ukuran sebenarnya dari header inner berikut background yang akan digunakan.

Beberapa hal yang perlu diperhatikan untuk membuat background header blog adalah:

Pastikan berapa lebar body (blog) yang digunakan (body width).
Pastikan ukuran font, tebal font dan font-family yang digunakan sebagai title blog dan deskripsi blog. Jika anda membutuhkan panduan membuat blog description (deskripsi blog) silahkan buka link berikut:
Cara Buat Blog Description
Usahakan untuk tidak merubah deskripsi blog selama blog aktif (digunakan) karena perubahan mengharuskan kita untuk kembali merubah tinggi background image.
Pastikan apakah akan menggunakan header description atau tidak. Deskripsi blog yang max berjumlah 500 huruf akan berpengaruh kepada tinggi header inner dan ini berkaitan erat dengan tinggi background image yang akan digunakan.

Cara mengetahui lebar body melalui fitur Template Designer

Untuk login klik di sini !Login di Blogger. Jika anda mennggunakan google mail (gmail), login cukup dilakukan dengan menuliskan user name dan password, namun jika bukan dari gmail tuliskan alamat email secara lengkap.
Setelah login dilakuka anda akan memasuki halaman dasbor (dasboard) yang di dalamnya berisi beberapa fitur , seperti posting, Stats, Rancangan (Design), Comments (Komentar, Settings (Pengaturan) dll.
Fitur Design (Rancangan) akan menghubungkan pengguna dengan fungsi edit template. Fungsi editing berada di Rancangan | Elemen Laman (Design | Page Elements) dan di Rancangan | Edit HTML (Design | Edit HTML). Klik "Design (Rancangan)".
"Ada tiga cara untuk mengetahi lebar body. Cara termudah adalah melalui fitur "Template Designer (Perancang Template". Silahkan klik "Template Designer (Perancang Template"
Setelah window baru terbuka (Blogger Template Designer (Perancang Template Blogger)). KlikAjust Widths (Sesuaikan Lebar).
Silahkan anda lihat berapa lebar body blog anda. Karena di luar ini masih ada margin atau padding, kurangilah lebarnya sebesar 40px. Jadi jika width yang terlihat sebesar 940px, maka lebar background image-nya menjadi selebar 900px.
Keterangan: Jika belum tepat bisa anda tambah atau kurangi sedikit demi sedikit.
Untuk tingginya bisa anda perkirakan berdasar blog title dan description blog.

Cara lain untuk mengetahui width & height background image

Melalui Box Edit HTML yang dapat di buka melalui:
Dasboard | Design | Edit HTML.
Melihat lebar body dengan melihat Source Code setelah blog dibuka di browser.
Menggunakan Software (Adobe Photoshop). Caranya dengan membuka blog kemudian salin gambar yang terlihat di layar PC menggunakan Adobe Photoshop. Ini adalah cara terbaik dan sangat akurat, hanya anda perlu memberi warna background color terlebih dahulu pada header blog agar detail lebar dan tinggi header-inner terlihat!
Menggunakan Javascript. Anda bisa langsung mengetahui secara tepat berapa tinggi dan lebar yang diperlukan bagi background image header blog. Cara ini mempunyai tingkat akurasi sangat tinggi (99,9999%). Dapatkan link tutorialnya di ujung terbawah posting ini pada Catatan/Keterangan.

Cara pasang background Image di Header Blog (Background Hreader Blog)

Setelah mengetahui berapa ukuran width background image yang diperlukan melalui langkah di atas, klik "Back to Blogger (Kembali ke Blogger)".
Anda akan kembali di Elemen Laman (Page Elements). Klik EDIT pada elemen Header.
Configure Header (Mengkonfigurasi Header)
- Klik Browse jika image dari folder PC.
- Tuliskan Alamat background image jika image tersimpan di file hosting atau mungkin anda sudah upload di box posting.
- Klik pada Dibalik judul dan keterangan (Behind title and description).
- Setelah langkah di atas, background image akan terlihat dalam box "Configure Header (Mengkonfigurasi Header)".
Klik SAVE (SIMPAN).
Buka blog dan lihat hasilnya!

Contoh Background Header Blog

Anda bisa menggunakan image di bawah ini untuk melakukan percobaan terlebih dahulu.

http://gubhugreyot-images.googlecode.com/files/gubhugreyot_bridge-920-200.jpg
image berukuran: 920px (width) dan 230px (height).
http://gubhugreyot-images.googlecode.com/files/gubhugreyot-sunsetmountainpano-final.jpg
image berukuran: 920px (width) dan 200px (height).

Catatan/Keterangan Penting
Ada sebuah cara untuk mengetahui seberapa besar ukuran lebar (width) dan tinggi (height) background image yang diperlukan bagi header blog. Trick ini mempunyai tingkat akurasi sangat tinggi sehingga anda bisa membuat sebuah background dengan ukuran sangat tepat. Anda tak perlu menggunakan software khusus tetapi hanya perlu memasang sedikit script dan jQuery kemudian buka blog untuk klik pada button "Header Blog Width" dan "Header Blog Height". Lebar dan tinggi akan terpampang di halaman. Gunakan ini sebagai ukuran background image header blog. Silahkan klik link di bawah ini untuk mencoba trik-nya:
Trik ampuh untuk menentukan ukuran background header

Saturday 11 February 2012

Cara Buat Deskripsi Blog - Blog Description di Header Blog

Deskripsi Blog atau Blog Description adalah deskripsi (penjelasan singkat) tentang blog. Deskripsi blog di blogger dibatasi sejumlah 500 karakter (huruf). Anda bebas menuliskan apapun di sini, bahkan sekalipun jauh dari konten blog. Tentu saja akan jauh lebih baik jika anda mengisinya dengan deskripsi blog anda. Blog description terletak tepat di bawah judul blog (blog title). Jika anda sedang membuka blog maka dia akan terlihat sangat mencolok karena letaknya yang di ujung teratas halaman dan mempunyai ukuran font lebih besar jika dibandingkan dengan beberapa bagian blog yang lain. Untuk membuat deskripsi blog ini anda dapat memanfaatkan fitur yang telah disediakan blogger dan untuk menggunakannya masuklah ke Elemen Laman (Page Elements).

Cara membuat deskripsi Blog (Blog Description)

Login di Blogger. Jika anda menggunakan google mail (gmail), login cukup dilakukan dengan menuliskan user name dan password, namun jika bukan dari gmail tuliskan alamat email secara lengkap.
Untuk login klik di sini !
Setelah login dilakukan anda akan memasuki halaman dasbor (dasboard) yang di dalamnya berisi beberapa fitur , seperti posting, Stats, Rancangan (Design), Comments (Komentar, Settings (Pengaturan) dll.
Fitur Design (Rancangan) akan menghubungkan pengguna dengan fungsi edit template. Fungsi editing berada di Rancangan | Elemen Laman (Design | Page Elements) dan di Rancangan | Edit HTML (Design | Edit HTML). Klik "Design (Rancangan)".
Di halaman ini berisi banyak elemen dengan berbagai fungsi dan kegunaan. Cari Header Element (di bagian atas halaman) kemudian klik "EDIT"
Mengonfigurasi Header (Configure Header)
Blog Description maksimal berisi 500 karakter. Tuliskan hal yang berkaitan dengan orientasi posting anda.
Setelah deskripsi blog selesai dituliskan, klik SIMPAN (SAVE).
Selesai (Finish).

Buka blog anda untuk melihat sekaligus memeriksa deskripsi blog yang telah dibuat apakah masih diperlukan perubahan atau penyesuaian!

Friday 10 February 2012

Tips & Trick Menambah dan Menyimpan Kode CSS Baru di Blogger

Menyimpan kode CSS dalam template blogger (Blogger Template Designer -Perancang Template Blogger) dapat dilakukan di beberapa bagian template dan dengan beberapa cara. Anda tak harus selalu meletakkan kode css di atas kode ]]></b:skin> atau melalui box penyimpan kode CSS yang tersedia di fitur "Perancang Template (Template Designer)" atau melalui Add a Gadget yang terdapat di Page Elements (Elemen Laman) saja. Satu hal yang penting saat menyimpan kode css adalah selalu di antara tag pembuka head (<head>) dan tag penutupnya (</head>) serta di antara tag pembuka body (<body>) dan tag penutup body (</body>). Beberapa yang perlu diperhatikan adalah penggunaan tag style (<style type="text/css"> dan </style>). Agar lebih jelas kita akan membahasnya satu persatu.

Menyimpan Kode CSS di atas kode ]]></b:skin>

Kode ]]></b:skin> adalah kode yang paling penting berkaitan dengan penambahan dan penyimpanan kode CSS baru di template blogger. Letaknya sedikit di atas kode (tag) </head>. Pada umumnya kode CSS baru diletakkan dan disimpan di atas kode ini. Untuk menyimpan kode css di atas kode ]]></b:skin> ada dua cara yang bisa dilakukan.

Melalui Box Edit Template.
Melalui Box Tambahkan CSS ubahsuaian (Add custom CSS).

Menambah dan Menyimpan Kode CSS Melalui Box Edit Template

Box Edit Template merupakan box yang didalamnya berisi kode html (Kode CSS, xHTML dan Javascript). Di dalam box inilah desain dasar blog dibangun. Untuk menyimpan kode css di atas kode ]]></b:skin> (dalam box Edit HTML), silahkan ikut panduan berikut:

Login ke Blogger. Untuk login klik di sini !
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Klik Edit HTMl.
Cari kode kode ]]></b:skin>.
Letakkan kode css di atas kode ]]></b:skin>
Klik Simpan Template (Save Template).
Selesai! Kode CSS yang baru telah tersimpan di template. Untuk melihat hasil yang diperoleh setelah menambah kode css baru, silahkan buka blog!

Menambah dan Menyimpan Kode CSS Melalui Box Tambahkan CSS ubahsuaian (Add custom CSS).

Menambah dan menyimpan kode CSS melalui cara ini akan membuat kode CSS juga tersimpan di atas kode ]]></b:skin> Jadi pada intinya "dua cara berbeda dengan hasil yang sama." Tentu saja akan lebih bermanfaat dengan cara yang pertama karena secara tidak langsung anda akan mengenal secara lebih dekat susunan kode pembentuk blog (template).

Langkah penyimpanan kode CSS sama seperti di atas, hanya saja langkah berbeda terjadi saat masuk (klik) "Design (Rancangan). Silahkan ikuti panduannya di bawah ini:

Setelah login dan masuk halaman dasboard (dasboard) kemudian klik "Rancangan (Design)", cari fitur "Perancang template (Template Designer)".
Anda akan masuk ke halaman "Perancang Template Blogger, klik Tingkat Lanjut (Advanced)
Klik Add CSS (Tambahkan CSS)
Letakkan kode CSS dalam box "Add Custom CSS"
Klik "Apply to blog (Terapkan ke Blog".
Klik Back to Blogger (Kembali ke Blogger).

Catatan/Keterangan:

Dalam Blogger Template Designer (Perancang Template Blogger), tag pembuka body (<body>) bentuk kodenya seperti berikut:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass + &quot; &quot; + data:blog.pageType'>

atau juga bisa seperti ini:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Saat anda menyimpan kode CSS di atas kode ]]></b:skin> atau dalam box Add Custom CSS jangan gunakan tag pembuka dan penutup style (<style type="text/css"> dan </style>) box penyimpan kode css tersebut telah menggunakan tag pembuka dan penutup style.

Setiap teks link yang berwarna kuning berisikan tutorial dalam bentuk gambar (image). Klik untuk memperjelas tutorial!

Menyimpan link kode CSS di bawah tag <head>, di atas tag </head>, di bawah tag <body> atau di atas tag </body>

Selain menyimpan CSS dalam bentuk kode css, anda dapat menyimpan kode css yang sudah dalam bentuk link. Kode CSS berbentuk link sebenarnya adalah kode css yang telah diupload ke file hosting. Kode CSS ini kemudian disimpan ditemplate dalam bentuk link seperti ini: <link href="URL.css" rel="stylesheet" type="text/css" />. URL.css adalah alamat kode css disimpan. Contoh: http://sites.google.com/gubhugreyot/jquery-slide-show.css Bentuk kode:

<link href="http://sites.google.com/gubhugreyot/jquery-slide-show.css" rel="stylesheet" type="text/css" />

Link kode CSS dapat disimpan di bawah tag <head>, di atas tag </head>, di bawah tag <body> atau di atas tag </body> . Jika kode css yang tersimpan difile hosting dipandang sangat penting anda dapat menyimpan di tag body, baik di atas tag </body> ataupun di bawah tag <body>. Perlu anda ketahui bahwa kode css yang akan dibaca dan kemudian diutamakan/digunakan untuk menjalankan fungsi desain html adalah kode css yang letaknya semakin di bagian bawah template. Anda dapat melihat contoh kode di bawah ini:

.box{
       width:200px;
       width:400px;
       height:100px;
}

box di atas akan mempunyai lebar (width) sebesar 400px karena 400px berada di bawah width:200px;

.box{
       width:200px;
       height:100px;
}

.box{
       width:400px;
       height:500px;
}

Dengan kode di atas maka yang digunakan oleh browser adalah kode yang di bawah sehingga box akan mempunyai tinggi 500px (height) serta lebar 400px (width).

Langkah untuk menyimpan link kode CSS di Box Edit HTML.

Login ke Blogger. Untuk login klik di sini !
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Klik Edit HTMl.
Cari kode kode <body>, </body>, <head> atau </head>.
Letakkan link kode css pada posisi yang anda inginkan. Di bawah tag <head>, di atas tag </head>, di bawah tag <body> atau di atas tag </body> .
Lihat contoh penempatan link kode css di sini!
Klik Simpan Template (Save Template).
Selesai! Link kode CSS yang baru telah tersimpan di template. Untuk melihat hasil yang diperoleh setelah menambah kode css baru, silahkan buka blog!

Langkah untuk menyimpan link kode CSS di Box Widget HTML/Javascript.

Menggunakan box Widget HTML/Javascript utnuk menyimpan kode CSS sama arinya dengan menyimpan kode CSS di tag body. Kode CSS ini akan terletak di antara tag pembuka body (<body>) dan tag penutup body (</body>).

Login ke Blogger
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Klik Add a Gadget (Tambah Gadget). Anda bebas memilih yang manapun!
Cari dan klik Widget HTML/Javascript.
Letakkan kode CSS dalam box Mengonfigurasi HTML/JavaScript.
Klik SIMPAN (SAVE).

Catatan/Keterangan:

Selain untuk menyimpan kode CSS dalam bentuk link, Widget HTML/Javascript bisa juga digunakan untuk menyimpan kode CSS dalam tag style. Contoh kode seperti berikut:

.box{
       width;500px;
       height:300px;
       padding:20px 10px 10px;
       margin:20px 0;
       overflow:auto;
       border:1px solid #000;
       background:#000;
}

Anda dapat juga menyimpan Javascript atau xHTML.
Title pada Widget bisa dituliskan atau tanpa title.
Agar CSS lebih ringan bebannya, anda bisa melakukan compress css. Ini adalah contoh hasil compress CSS pada contoh di atas:
```
.box{width;500px;height:300px;padding:20px 10px 10px;margin:20px 0;overflow:auto;border:1px solid #000;background:#000;}
```

Thursday 9 February 2012

Tips, Trick dan Cara Pasang Favicon di Blogger

Sekalipun hanya berupa gambar yang teramat kecil, namun sebagian besar blogger menaruh perhatian besar terhadapnya. Banyak hal dilakukan blogger untuk "mengaktualisasikan dirinya melalui favicon". Ya..., favicon tak ubahnya sebuah profil blogger atau identitas diri yang perlu dibuat secara khusus dalam berbagai karakter yang kadang kala mencerminkan watak atau kepribadian pemilik blog, semangat, obsesi, bisa juga agar bisa menjadi symbol orientasi posting atau bahkan bisa juga berisikan gambar yang bersifat iseng semata .

Favicon akan selalu terlihat saat web/blog dibuka. Dia akan terlihat pada ujung disebelah kiri address bar dalam box kecil yang selalu disediakan oleh semua browser serta akan ditampilkan juga pada tab. Ada beberapa jenis file image yang dapat digunakan sebagai favicon (.ico, .gif, .jpg, .png). Bahkan di Mozilla anda dapat menggunakan favicon animasi gif. Sayangnya tak satupun browser lain yang kompatibel terhadap animasi gif kecuali SeaMonkey. Ketika sebuah blog di blogger kita buat, favicon default blogger akan dapat langsung terlihat. Favicon berbentuk logo blogger dengan ukuran 16x16 (pixel) »

. Favicon blogger seperti ini dapat kita rubah/ganti dengan favicon baru. Buatlah sebuah image kecil berukuran 16x16 (px). Jika anda malas untuk membuat, lakukan saja browsing dan temukan situs-situs penyedia favicon gratis.

Cara Membuat (pasang) Favicon di Blogger

Ada beberapa cara untuk memasang favicon di blogger. Anda dapat melakukannya melalui Page Elements atau Edit HTML.

Cara I: Pasang Favicon Melalui Elemen Laman (Page Elements)

Edit Favicon
Klik: Perbesar Gambar

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Halaman Rancangan | Elemen Laman (Design | Page Elements).
Arahkan cursor ke ujung kiri-atas halaman, kemudian klik Edit pada Elemen yang bertuliskan Favicon. Tunggu beberapa saat hingga terlihat sebuah window baru "Konfigurasikan Ikon Favorit (Upload custom favicon)".
Halaman Konfigurasikan Ikon Favorit (Upload custom favicon):
- Klik "Choose File (Browse)"
- Pilih file image yang akan digunakan sebagai favicon. File gambar harus berbentuk bujur sangkar (segi empat sama sisi). Sebaiknya gunakan yang berukuran di bawah 20x20 (pixel).
- Klik Simpan (Save).
Favicon baru (custom favicon) hasil upload akan terlihat di ujung kiri-atas Halaman Rancangan | Elemen Laman (Design | Page Elements).
Favicon ini biasanya tidak akan dapat langsung terlihat saat dibuka di browser yang sama dengan ketika edit favicon dilakukan. Favicon hanya akan terlihat setelah anda restart browser atau PC. Agar anda bisa langsung melihat hasilnya, bukalah blog di browse berbeda yang sebelumnya belum digunakan untuk membuka blog anda.

Sampel Favicon:

: http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-favicon-indonesian-flag.jpg

Cara II: Pasang Favicon Melalui Edit HTML

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Klik Edit HTMl.
Cari kode kode <head>.

Letakkan kode berikut di atas kode <head>.

<link href='http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-favicon-indonesian-flag.jpg' rel='icon' type='image/jpg'/>

Klik Simpan Template (Save Template).
Buka blog duntuk melihata hasilnya.
Catatan:
Untuk melihat hasil pemasangan favicon, buka blog di browser lain yang belum digunakan untuk membuka blog anda! Jika editing di Opera, buka blog di Mozilla atau Chrome!

Cara III: Trick Membuat Favicon Langsung Terlihat

Dengan cara ini anda tak perlu restart bowser, PC atau membuka blog dibrowser berbeda. Favicon akan langsung terlihat begitu blog anda buka!

Edit HTML Kembali ke halaman edit html dan cari kode <body> atau <body expr:class='"loading" + data:blog.mobileClass'>
Simpan kode html Favicon di atas(kode html dalam box warna biru).
Klik Simpan Template (Save Template).
Langsung buka blog dan lihat hasilnya!

Catatan/Keterangan:

Dimanapun pasangnya, gunakan image berukuran 16x16 (px).
Saat pasang favicon lewat Page Elemen (Elemen Laman) harus menggunakan image berbentuk bujur sangkar (segi empat sama sisi), sedangkan jika menggunakan cara ke II dan ke III (Edit HTML) tak harus dalam bentuk bujur sangkar.
Gunakan file image favicon .ico, .gif, .jpg, .png.
Jika ingin menampilkan favicon beranimasi pada Mozilla atau SeaMonkey anda dapat menggunakan gambar animasi (gif) sebagai favicon.
Favicon animasi gif:
http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-okong-mbleding-favicon.gif
```
<link href='http://gubhugreyot-personal.googlecode.com/files/gubhugreyot-okong-mbleding-favicon.gif' rel='icon' type='image/gif'/>
```

Beberapa tips penggunaan kode html favicon

Favicon berekstensi .ico:

<link href='favicon.ico' rel='icon' type='image/x-icon'/>

Favicon berekstensi .jpg:

<link href='favicon.jpg' rel='icon' type='image/jpg'/>

Favicon berekstensi .gif:

<link href='favicon.gif' rel='icon' type='image/gif'/>

Favicon berekstensi .png:

<link href='favicon.png' rel='icon' type='image/png'/>

Wednesday 8 February 2012

Add an Audio or Video Clip to a Blogger Profile

Banyak tutorial tentang cara menambahkan audio clip di Profil Blogger, tetapi sayang kebanyakan hanya bo'ong2an. Tutorial yang diberikan terlalu amat sangat pendek (singkat) dan sama sekali tak menyentuh tema yang mereka angkat. Kebiasaan buruk yang sebenarnya tak lebih dari "tipuan busuk yang membuat muak pengunjung blog". Yang lebih menyedihkan lagi adalah para plagiator yang tak ubahnya "kera pengekor" yang dengan "menyengir penuh liur menetes" dengan santainya copy paste sekalipun tutorial blogger yang dicopy hanyalah "bualan pemalas haus popularitas". Memang sebenarnyalah penambahan audio clip ini adalah bagian yang "agak gelap" bagi pengguna karena blogger sendiri tak memberikan keterangan detail tentang ini.

Menambahkan musik pada profil blogger sebenarnya tak hanya dibatasi dalam bentuk audio clip saja. Anda dapat uload juga clip musik berupa video. URL yang kita gunakan juga bukan url yang hanya berisi file audio/video biasa seperti http://audio.mp3 atau http://video.mov. File ini berupa file audio/video lengkap berikut playernya. Ada cara termudah untuk membuat atau mendapatkannya. Ambil saja sebuah link audio/video dari Youtube, Vimeo atau lainnya. Jika anda ingin file pribadi yang digunakan, silahkan upload terlebih dahulu di Youtube, misalnya.

Cara menambahkan clip Video atau Audio di Profil

Klik: Perbesar gambar

Sebelum melakukan proses upload di profil blogger lakukan:

Buat sebuah file audio atau video.
Buat file audio atau video kebentuk klip dengan menambahkan pada player. Anda bisa juga lakukan dengan cara upload file audio atau video tersebut dan dapatkan URL-nya melalui kode embed.
Contoh URL dari Youtube:
http://www.youtube.com/embed/CdXesX6mYUE

Cara menambahkan URL audio/video clip di halaman Profil Blogger

Klik: Perbesar gambar

Setelah anda punya URL audio/video klip yang siap untuk dipergunakan, lanjutkan dengan langkah berikut:

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Edit Profile.
Halaman Edit Profil User » Klip Audio .
- Copy URL klip audio atau video yang sudah dipersiapkan sebelumnya.
- URL Klip Audio » Paste URL klip audio video dalam box yang tersedia.
Klik Simpan Profil (Save Profile).
Klik Lihat Profil yang Telah Diperbarui (View Updated Profile).

Make post in a scrollbox » Membuat Posting dalam Scroll Box

ScreenshootKlik untuk perbesar gambar.

Memasang atau menggunakan scroll box di posting blog adalah sebuah cara untuk mensiasati agar ketinggian halaman posting bisa dibuat lebih pendek ketika posting yang dibuat sangat panjang. Ini akan sangat menguntungkan karena dengan bentuk posting pendek membuat anda lebih mudah menata seluruh bagian blog agar dengan mudah terlihat oleh pengunjung. Ada dua macam scroll box yang bisa digunakan.

Scroll box posting yang bersifat permanen.
Difungsikan pada keseluruhan entri sehingga seluruh posting yang anda buat secara otomatis akan termuat dalam scroll box.
Scroll box posting yang bersifat temporer.
Anda cukup menambahkan sebuah fungsi scroll box dalam bentuk kode html saat posting dilakukan. Dengan cara ini anda bisa menggunakan scroll box posting saat tertentu ketika posting yang dibuat dirasa perlu untuk dibatasi ketinggiannya karena materi posting yang sangat panjang.

Scroll box posting Permanen:

Untuk membuat scroll box posting yang bersifat permanen anda harus menggunakan kode css dan disimpan di template.

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Pilih dan klik Edit HTML.
Amankan template terlebih dahulu (backup template) dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC.
Cari kode ]]></b:skin>. Agar lebih mudah dan lebih cepat mencari kode di template gunakan Ctrl+F.
Copy-paste kode CSS dan letakkan di atas kode ]]></b:skin>.
Selesai! Silahkan klik Simpan Template (Save Template).
Lakukan posting dan buka blog untuk melihat hasilynya.

Kode CSS Scroll Box Permanen:

.entry-content{
        max-height:700px;
        overflow:auto;
        padding-right:10px;
        border-top:5px double #777;
        border-bottom:5px double #777;        
}

Scroll box posting Temporer:

Scroll box yang bersifat temporer hanya digunakan atau dibuat pada saat-saat tertentu saja. Anda bisa membuatnya dengan bantuan kode css atau seluruh kode htmlnya dibuat di box posting. Menggunakan bantuan kode css bertujuan agar kode yang digunakan di box posting menjadi lebih simpel.

Dengan bantuan kode CSS

Kode css disimpan di atas kode ]]></b:skin> dan cara yang digunakan sama dengan panduan di atas.

Kode CSS Scroll Box Temporer dg Kode CSS:

.GRscrollboxpost{
        max-height:700px;
        overflow:auto;
        padding-right:10px;
        border-top:5px double #777;
        border-bottom:5px double #777;        
}

xHTML yang diperlukan untuk posting

Anda harus menambahkan sedikit kode html saat posting dan kode tersebut diletakkan di awal dan akhir posting. Posting dapat dilakukan di mode Compose atau mode Edit HTML, namun di awal atau akhir posting harus masuk ke mode Edit HTML untuk menambahkan kode html scroll box posting.

Kode html posting:

<div class="GRscrollboxpost">
Letakkan posting anda di sini di antara kode <div class="GRscrollboxpost"> dan kode penutupnya </div>
</div>

Scroll box Temporer tanpa kode CSS

Buat posting dalam bentuk seperti di bawah ini. Letakkan kode HTML tambahan melalui mode Edit HTML.

Kode html posting:

<div style="max-height:700px;overflow:auto;padding-right:10px;border-top:5px double #777;border-bottom:5px double #777;">
Letakkan posting anda di sini!
</div>

Catatan/Keterangan:

Seluruh panduan dilakukan setelah melalui percobaan di Blogger Template Designer (Perancang Template Blogger).
Untuk merubah tinggi scroll box posting lakukan perubahan nilai pada kode :
max-height:700px;. Semakin besar maka scroll box semakin tinggi.
warna border atas dan bawah dapat dirubah dengan merubah kode :
border-top:5px double #777; dan border-bottom:5px double #777;

Pasang Google Translate 16 Bahasa di Blog

Simpan Kode Google TranslateKlik di sini! Panduan pasang kode dalam gambar.

Mungkin saja beberapa pengunjung dari luar Indonesia menemukan blog anda dan tertarik untuk menikmati postingnya. Ya..., kenapa tidak?! Bukankah tak ada satupun batasan yang melingkupi dunia maya ini. Segala hal yang tak terbayangkan akan dengan mudah terjadi begitu saja tanpa kita sadari. Yah.., oleh karena itu mengapa tak berjaga-jaga sejak dini?! Berikan saja sebuah "widget Google Translate" agar pengunjung yang sudah sempat membuka blog anda mengurungkan niatnya untuk menutup blog yang sudah terlanjur terpampang di depan matanya. Yah..., barangkali saja sebuah "translator" akan menarik minatnya untuk mencoba mengerti apa maksud posting anda "yang berbahasa Indonesia itu"?! Uih... gampang, kok, pasangnya! Nih coba lihat klo nggak percaya!

Cara Pasang Widget Google Translate di Blog

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Pilih dan klik salah satu Add a Gadget di Elemen Laman (Page Elements). Tunggu beberapa saat.
Pilih dan klik widget HTML/Javascript.
- Copy dan pastekan javascript dalam box Add a Gadget.
- Klik SIMPAN (SAVE).
Selesai! Silahkan buka blog dan coba untuk terjemahkan blog ke bahasa yang tersedia!

Javascript Google Translate- display Vertical

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi'
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Javascript Google Translate- display Horizontal

javascript:

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    includedLanguages: 'ar,zh-CN,cs,en,tl,fr,de,it,ja,ko,no,pt,ru,es,th,vi',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Catatan/Keterangan:

Klik gambar di bagian teratas untuk melihat panduan dalam gambar.
Anda dapat juga merubah bahasa yang digunakan di google translate dan memilih sendiri berapa dan bahasa apa yang akan digunakan dengan membuat sendiri widgetnya. Silahkan klik disini » (Google Translate).

Scroll Box with Transparency Effect (CSS3 Scroll Box)

Scroll Box CSS3Scroll Box dengan Efek Transparansi menggunakan CSS3. Klik untuk perbesar gambar!

Meskipun yang kita buat ini sebuah scroll box dengan efek transparansi, namun anda bisa menggunakannya sebagai sebuah box biasa. Hilangkan kode overflow:auto; maka jadilah dia menjadi box biasa. Membuat scroll box dengan efek transparansi diperlukan sebuah background image dengan ukuran sebanding ukuran box agar seluruh background terlihat memenuhi seluruh bagian box. Yang terutama diperlukan adalah perbandingan height x width box harus sama dengan height x width background image. Background image pada scroll box ini juga telah disetting untuk selalu sama dengan ukuran box melalui properti css background-size, sehingga sekalipun menggunakan background image sedikit lebih kecil atau lebih besar dari box, maka tak akan mempengaruhi penampilan scroll box.

Jika anda ingin melihat seperti apa bentuk scroll box css3 yang dilengkapi dengan efek transparansi ini, silahkan buka salah satu posting dan lihat di ujung terbawah halaman blog sebelum comment box. Efek transparansi yang disertai opacity effect dan css3 transition membuat box mampu memperlihatkan dua efek sekaligus yang bekerja berdasar hover efek. Jadi saat cursor berada di atas box efek akan bekerja dan secara perlahan transparansi terkurangi sedang opacity image bertambah hingga image sekaligus teks terlihat secara sempurna.

Kode CSS Scroll Box dg Efek Transparansi

Anda dapat menyimpan kode css ini melalui halaman edit HTML atau box css yang terdapat dalam fitur "Perancang Template (Template Designer).

Kode CSS:

.GRboksinfo{
        width:400px;
        margin:20px 0; 
        padding:0; /*original code by: gubhugreyot*/
        font-family:Arial,Tahoma;
        color:#003;
}
.GRboksinfo h3{      
        color:#CC9;
        font-size:16px;
        font-weight:normal;
}
.inGRboksinfo{
        padding:6px;
        border:1px solid #555;
        border-right-color:#999;
        border-bottom-color:#999;
background:#eee url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-scrollbox-transparency-effect.jpg) center no-repeat;
        background-size:cover; 
        border-radius:5px;
        box-shadow:0 0 3px #666;
        position: relative;
        margin:10px 0;
}
.content-inGRboksinfo{
        background:rgba(255,255,255,0.1);
        max-height:200px;
        overflow:auto;
        padding:10px;
        border:1px dotted #999;
        box-shadow:0 0 8px #fff;
        border-radius:3px;
        text-shadow:1px 1px 1px #fff;
        color:#033; 
        font-size:12px;
        text-align:justify; 
}
.content-inGRboksinfo,.content-inGRboksinfo img{
        transition:1s ease-in;
        -o-transition:1s ease-in;
        -moz-transition:1s ease-in;
        -webkit-transition:1s ease-in;
        -ms-transition:1s ease-in;
}
.content-inGRboksinfo img{
        max-width:150px;
        height:auto;
        background:#fff;
        padding:6px;
        border:1px solid #aaa;
        border-radius:4px;
        box-shadow:0 0 6px #666;
        float:left;
        margin:5px 8px 5px 0;
        opacity:0.4;
        filter:alpha(opacity=50);
}
.content-inGRboksinfo:hover img{
        opacity:1.0; /*original code by: gubhugreyot*/
        filter:alpha(opacity=100);
} 
.inGRboksinfo:hover .content-inGRboksinfo{
        background:rgba(255,255,255,0.7);
        text-shadow:1px 1px 2px #fff;
}

Cara Membuat scroll box dengan efek transparansi

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Pilih dan klik Edit HTMl.
Backup Template dengan cara :
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC. Berikan nama yang berisikan waktu modifikasi untuk lebih memudahkan mengingat dan menggunakan disaat diperlukan kembali.
Cari kode ]]></b:skin>. Gunakan Ctrl + F agar lebih mudah dan cepat.
Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).

xHTML Scoll Box dg Efek Transparansi

Gunakan kode ini untuk posting atau bisa juga digunakan dalam box widget (lewat Add a Gadget » HTML/Javascript). Jika digunakan di box posting maka seluruh xHTML harus dibuat dalam bentuk rapat tak terputus antara tag satu dengan yang lain.

xHTML:

<div class="GRboksinfo">
<h3>Box with Transparency Effect</h3>
  <div class="inGRboksinfo">
    <div class="content-inGRboksinfo">
<img src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s200/img_gubhugreyot-sample-posting.jpg" />Box dengan effect transparansi ini dibuat dengan memanfaatkan kode css3 background rgba dan css3 transition. Untuk membuat seluruh background tetap terlihat walaupun dalam box diletakkan sebuah image maka efek opacity kita manfaatkan bersama css3 transition hingga perubahan efek terlihat lebih menarik. Untuk membatasi ukuran image dalam scroll box kita gunakan properti <b>max-width</b> sebesar <b>150px</b>. Dengan setting ini secara otomatis semua image yang dimuat dalam scroll box akan mempunyai lebar maksimal 150px dan tingginya (height) akan menyesuaikan diri setara dengan perbandingan berdasarkan image sesungguhnya. Jika anda menghendaki image dengan ukuran berbeda silahkan rubah <b>150px</b> dengan nilai yang berbeda.
    </div>
  </div>
</div>

Contoh kode dalam bentuk rapat

Kode bentuk rapat untuk posting

<div class="GRboksinfo"><h3>Box with Transparency Effect</h3><div class="inGRboksinfo"><div class="content-inGRboksinfo"><img src="http://4.bp.blogspot.com/-TxvyypSNLMQ/TyvhgnTMYBI/AAAAAAAAAFQ/aDp4OD3cSPk/s200/img_gubhugreyot-sample-posting.jpg" />Box dengan effect transparansi ini dibuat dengan memanfaatkan kode css3 background rgba dan css3 transition. Untuk membuat seluruh background tetap terlihat walaupun dalam box diletakkan sebuah image maka efek opacity kita manfaatkan bersama css3 transition hingga perubahan efek terlihat lebih menarik. Untuk membatasi ukuran image dalam scroll box kita gunakan properti <b>max-width</b> sebesar <b>150px</b>. Dengan setting ini secara otomatis semua image yang dimuat dalam scroll box akan mempunyai lebar maksimal 150px dan tingginya (height) akan menyesuaikan diri setara dengan perbandingan berdasarkan image sesungguhnya. Jika anda menghendaki image dengan ukuran berbeda silahkan rubah <b>150px</b> dengan nilai yang berbeda.</div></div></div>

Catatan/Keterangan:

Anda bisa mengganti background imagenya (http://gubhugreyot-images.googlecode.com/files/gubhugreyot-scrollbox-transparency-effect.jpg) dengan background image lain.
untuk merubah tinggi dan lebar scroll box lakukan perubahan pada max-height:300px; dan width:400px;. Jika tak diperlukan, kode width:400px; dapat dihilangkan!
Scroll box dapat dipergunakan untuk kepentingan yang berbeda seperti misalnya sebagai box daftar posting.

Tuesday 7 February 2012

Upload Image Anda & Jadikan Background Blogger Template Designer

Setelah diposting sebelumnya kita coba ganti background image Blogger Template Designer melalui "Variable Definitions", untuk kali ini kita akan merubah atau mengganti background image tersebut menggunakan cara yang lebih praktis dan mudah. Salah satu fitur yang ada di Blogger Template Designer (Perancang Template Blogger) akan menolong kita untuk tidak hanya mengganti backgroundnya saja, bahkan upload background image bisa langsung dilakukan di tempat. Yah..., inilah salah satu layanan hebat blogger terhadap penggunanya.

Untuk menggunakan background hasil karya sendiri, beberapa hal di bawah ini perlu diperhatikan:

Buatlah image dengan ukuran yang tak jauh berbeda/sesuai dengan lebar blog. Pada umumnya blog menggunakan lebar sebesar 1024 pixel (px). Tinggi image tak lebih dari 700px s/d 800px. Ukuran yang tepat (tak terlalu besar) membuat beban image menjadi lebih ringan dan ini menguntungkan saat proses loading. Semakin kecil beban image tentu loading semakin cepat.
Pilih file image yang tepat dan sesuai dengan background yang akan dipergunakan. Jika anda menggunakan image dengan banyak warna sebaiknya menggunakan file .jpg, sedang bila hanya 1 atau dua warna (terutama hitam dan putih) file berekstensi .gif atau .png akan lebih tepat.
Jika yang akan digunakan background image berukuran besar dan direncanakan sebagai background tak berulang (no-repeat), image dengan kwalitas sedang sudah cukup baik untuk digunakan (setting dilakukan saat proses penyimpanan image).

Langkah upload dan mengganti background Blogger Template Designer

Login ke Blogger. Gunakan Alamat Email atau User Name dan Password Anda.
Beberapa saat setelah login anda akan masuk di Halaman Dasboard. Klik Rancangan (Design).
Cari dan klik Edit HTML.
Klik "Download Template lengkap (Download Full Template)" untuk melakukan proses backup template. File yang tersimpan ini bisa digunakan untuk berjaga-jaga jika perubahan memperoleh hasil yang tak sesuai harapan. Untuk mengembalikan template seperti keadaan sebelum perubahan, klik Browse kemudian dilanjutkan Upload.
Klik "Perancang Template (Template Designer)". Tunggu beberapa saat hingga halaman Perancang Template Blogger (Blogger Template Designer) terbuka.
- Klik Latar Belakan (Background).
- Klik icon (tanda panah) yang terletak dalam box preview Gambar Latar (Background Image).
- Klik "Unggah Gambar (Upload Image)" dan lanjutkan memilih dan menentukan image yang akan digunakan sebagai background dengan klik Browse. Tunggu hingga proses upload selesai.
- Klik Selesai (Done).
Lanjutkan untuk menentukan posisi background melalui fitur "Perataan (Alignment)". Anda bebas memilih posisi background. Jika background image berukuran lebar (width) 1024px dan lebar (width) template (blog) juga disetting tak terlalu beda dengan lebar background maka posisi yang manapun tak menjadi masalah. Pengaturan perataan ini hanya penting digunakan jika background image ukuranya jauh berbeda dengan lebar template (blog). Cobalah terlebih dahulu dengan perataan atas-tengah (top-center).
Deretkan (Tile) hanya digunakan jika image berukuran lebih kecil dari halaman blog hingga perlu pengulangan background (background » repeat). Klik Jangan deretkan (Dont tile).<
Gulir dengan laman (Scroll width page). Jika memilih "ya" nantinya background akan bergulir (gulung) saat halaman blog ditarik ke bawah. Lebih baik silahkan pilih "no". Posisi seperti ini akan membuat background fixed position hingga background akan tetap ditempat dan sekalipun halaman blog digulung akan tetap pada posisinya (selalu terlihat).
Lanjutkan dengan kli Sesuaikan Lebar (Adjust Widths). Sesuaikan lebar halaman blog dengan image yang digunakan dengan mengatur lebar blog melalui pengatur lebar Seluruh blog (Entire blog). Jika image berukuran 1024px pengaturan lebar ideal dengan memperhatikan horizontal scroller di ujung bawah halaman. Geser hingga scroller tak kelihatan. Dengan pengaturan seperi ini nantinya blog terlihat lebih enak dilihat karena lebarnya tepat dengan lebar layar.
Klik Terapkan ke blog (Apply to blog) di ujung kanan-atas.
Klik Kembali ke Blogger (Back to Blogger) kemudian buka halaman blog untuk melihat hasilnya.

Gunakan background dibawah ini untuk melakukan percobaan upload dan mengganti background blog anda!

Download Background Image-1
Download Background Image-2
Download Background Image-3

Tutorial Dalam Gambar:

Gambar-1
Klik untuk perbesar gambar

Gambar-2
Klik untuk perbesar gambar

Monday 6 February 2012

Cara Rubah & Ganti Background Image ke Background Color Blogger Template Designer

Silahkan lihat demonya dengan membandingkan template (blog) dengan background image (sebelah kiri) dan template (blog) dengan background color (sebelah kanan)

Background Image
Klik untuk perbesar gambar.

Background Color
Klik untuk perbesar gambar.

Cara Pilih Warna
Klik untuk perbesar gambar.

Untuk merubah atau mengganti background image pada template blogger kebentuk background color cukup dilakukan dengan memanfaatkan fitur yang telah tersedia di template. Lihat gambar disamping (klik) dan ikuti panduan tertulisnya.

Langkah Mengganti background image

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Design (Rancangan).
Klik Perancang Template (Template Designer).
Halaman Perancang Template Blogger :
- Klik Latar Belakang (Background) » 1.
- Lanjutkan dengan Hapus Gambar » 2.
- Klik Tingkat Lanjut » 3.
- Klik Latar » 4
- Langsung pilih warna yang tersedia » 6 atau lanjutkan untuk pilih warna melalui Color Picker dengan klik tanda panah » 5
- Pilih warna melalui Color Picker » 6
- Klik Terapkan ke Blog (Apply to blog).
- Klik Kembali ke Blogger (Back to Blogger).
Halaman Rancangan (Design) | Elemen Laman (Page Elements.
Buka blog dan lihat hasilnya!