gubhugreyot: Demo & Tutorial: Modifikasi Template

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

Showing posts with label Modifikasi Template. Show all posts

Monday, 9 April 2012

Button CSS3 u Reply Comment Blogger New Reply Comments

Membuat button reply comment di Blogger New Threaded Comments dengan css3 diharapkan membuat button reply comment menjadi levih mudah dikenali, terutama oleh pengunjung yang belum begitu akrab dengan fungsi reply comment di Blogger New Threaded Comments. Membuat button reply comment dengan kode css3 juga memberi banyak kemungkinan bagi blogger untuk menciptakan effek menarik layaknya sebuah effek animasi. Mengingat kemampuan lebih yang dimiliki css3, tentu saja menggunakan button comment seperti ini membuat blog menjadi lebih menarik. Beberapa kode css3 yang bisa digunakan antara lain css3 transition, css3 box-shadow dan text shadow dan css3 border radius (rounded corners).

Kode CSS Button Reply Comment Blogger New Threaded Comments :

.continue a,.comment-actions a{
      position:relative;
      top:0;
      display:inline-block !important;
      font-family:Arial;
      font-size:12px;
      padding:2px 8px !important;
      text-decoration:none;
      color:#ccc !important;
      border-radius:3px;
      border:1px solid #333;
      margin-right: 10px;
      text-shadow:1px 1px 1px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD8tbOkHZccsyIUjBJFRLkXg7PI8iys-8aV-WuOFJj8nHQGjAvLstIQaO6T_qlfVJhQgR_wwwWlT-vxb0iYqDhCS9nxg_bG9QW7LIcLXuxNQyD8UevMGMMxX4tx7qr78pxMVuLz4eNzf_/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 0 repeat-x;
      transition:0.6s;
      -o-transition:0.6s;
      -moz-transition:0.6s;
      -webkit-transition:0.6s;
      -ms-transition:0.6s;
}
.continue a:hover,.comment-actions a:hover{
      text-decoration: none;
      color:#fff !important;
      border:1px solid #eee;
      box-shadow:-1px -1px 1px #222, 1px 2px 2px #000;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGD8tbOkHZccsyIUjBJFRLkXg7PI8iys-8aV-WuOFJj8nHQGjAvLstIQaO6T_qlfVJhQgR_wwwWlT-vxb0iYqDhCS9nxg_bG9QW7LIcLXuxNQyD8UevMGMMxX4tx7qr78pxMVuLz4eNzf_/s128/bgHovJQAccordionBlueV30H1.gif.png) 0 100% repeat-x;
}
.continue a:active,.comment-actions a:link:active{
      background:#555;
      border-radius:4px;
      top:2px;
}

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

Sunday, 8 April 2012

Ganti & rubah ukuran icon author comment di Blogger New Threaded Comments

Dengan merubah ukuran icon author comment pada sistem komentar baru blogger "Threaded Comment", maka anda mempunyai banyak pilihan untuk mengganti "icon aneh berbentuk bulatan hitam dengan tongkat pak tua berada di tengah-tengahnya" ini. Perubahan icon author comment di Blogger New Threaded Comments tentunya mempunyai batasan tertentu karena ukuran yang terlalu tinggi akan membuat box komentar menjadi penuh sesak serta bisa merusak tatanan xomment box. Sebaiknya anda merubah tinggi maksimal 30px. Inipun sebenarnya sudah terlalu besar. Keleluasaan yang cukup memungkinkan adalah perubahan lebar (width) karena tersedia ruang yang cukup lebar. Anda bisa manfaatkan ini untuk mengganti icon author comment ini dengan berbagai icon/image lain yang membuat blog terlihat lebih menarik.

Kode CSS-1 :

.comment-block .icon.blog-author{
      width:30px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background-size:30px auto !important;
      margin-bottom:-15px !important;
}

Keterangan :

Kode css di atas adalah kode dasar untuk perubahan ukuran icon author comment tanpa mengganti icon default.
Icon baru berukuran height=30px dan width=30px (ukuran default=18px).
Margin-bottom = 15px berfungsi untuk menarik icon yang sudah diperbesar agar lebih ke bawah dengan tujuan untuk keseimbangan header comment.
Untuk merubah ukuran icon default beserta ukurannya anda bisa gunakan kode css di bawah ini.

Kode CSS-2 :

.comment-block .icon.blog-author{
      width:35px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:30px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw7CDBKXC565P7D_mS3vjeqjT0i1OxOzFJXVMdsccvp8YJ3sEyOlbfNmEtFypVI9E0B7N8GKLyGEsCdJYT1Oezv9DIHK1WS_x6yCo08xmxPjcstgNY9iz1zTTV0hdPKROoso3pbGmJBw0F/s128/butt-dance.gif) center no-repeat !important;
      background-size:35px 30px !important;
      margin-bottom:-15px !important;

}

Kode CSS-3 :

.comment-block .icon.blog-author{
      width:128px !important; /* by: gubhugreyot , April, 09, 2012 */
      height:26px !important;
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS9bXhy0udAY0JqkmnAppAnTx639zROQ1CGJDbTw5qntfoKAzoslafAFm9iExYJLRzuDYIg09KwWQ70vxcBdqelNxdT6khD_y8I6SBkNrLAZFl5d2Y3Z1dirENbZU6wnY-1GJDgghDcHs/s128/VBlogoGRfirst.gif) center no-repeat !important;
      background-size:128px 26 !important;
      margin-bottom:-10px !important;
}

Keterangan :

Kode CSS-2 dan CSS-3 menggunakan background imaga berbeda yang berfungsi sebagai pengganti icon author comment default blogger.
Kode berwarna merah adalah URL icon/image pengganti icon author comment.
Perhatikan pada width dan height. Nilai ini sama dengan nilai pada background-size dan nilai ini diambil dari ukuran background yang digunakan sebagai pengganti icon.
Margin-bottom bisa dirubah nilainya untuk penyesuaian pada header comment - autor comment.
Upload image pengganti icon author comment di boks posting atau di picasaweb.

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

Catatan/Keterangan :

1 syntax css u ganti icon author di Blogger New Treaded Comments

Silahkan klik untuk perbesar gambar!
Memang benar kata orang. Melihat icon author pada comment box Blogger New Threaded Comments yang berupa lingkaran hitam dengan sebuah tongkat/pena kecil ditengah sungguh membuat siapapun bingung mengartikannya. Icon/symbol yang sebenarnya menjadi penanda komentar author/penulis (author comment) ini terasa sangat janggal di mata. Bukan hanya karena warnanya yang bulat hitam dengan tongkat anehnya yang terasa tak proporsional saja, namun penanda author ini menjadi terasa kurang pas di blog karena terlihat seperti rambu-rambu lalu lintas yang biasa di pasang di tengah jalan raya. Yang membedakan keduannya hanyalah pada ukuran dan warnanya saja. Eit ... barangkali kalau ditambah bambu sebagai penyangga akan pas dan sama persis dengan rambu lalu lintas di samping rumah anda!

Jika anda salah satu diantara sekian banyak blogger yang merasa risih atau terganngu adanya icon author comment seperti tersebut di atas, ada sebuah cara untuk mengganti icon tersebut dengan icon yang lain. Anda dapat menggunakan emoticon, yahoo smiley atau berbagai image yang lain, baik berupa gambar statis aatupun animasi gif. Yang perlu diperhatikan hanyalah ukurannya. Gunakan ukuran image dengan tinggi (height) dan lebar (width) sebesar 18px (bujursangkar). Upload gambarnya di blogger atau picasaweb dan kemudian pastekan di kode css yang akan disertakan di bawah.

Kode CSS :

.comment-block .icon.blog-author{
      background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdlfKOJZymKT_omzvRLzhxDOBXOTY1-71QFTzEaXW0a4wDd8bTQ9nTtWFWdgr7NzTgZNQf9eSyHyjEgrtzgkRFUWyCtegJPIw5HGkVUUQylzjeyF_DB4FRoCU7JG-Cog2CxuWciAxkkuze/s18/animasi-bendera-indonesia.gif) center no-repeat !important;
}

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

Catatan/Keterangan :

Gunakan image dengan ukuran width dan height sebesar 18px.
Upload image yang akan digunakan melalui halaman posting.
Jika ingin mengganti image, gantilah kode yang berwarna merah dengan image hasil upload.
Selain upload melalui halaman posting blogger, anda bisa upload di:
http://picasaweb.google.com
Untuk ke picasaweb sebaiknya login ke blogger terlebih dahulu!

Trick Merubah Ukuran Avatar di Blogger New Threaded Comments

Klik untuk perbesar gambar!

Merubah ukuran avatar di box/kotak komentar Blogger New Threaded Comments memang membutuhkan trik khusus karena ukuran avatar ini memang sebelumnya telah di setting dengan ukuran tertentu. Merubahnya tak seperti ketika kita memposting image/gambar yang hanya perlu merubah width dan height. Trick merubah avatar kotak komentar melibatkan kode css !important (deklarasi css !important) agar kode yang diutamanakan oleh browser adalah kode css baru yang ditambahkan di template.

Kode CSS-1 :

.comment .avatar-image-container{
      width:60px; /* A */
      max-height:70px; /* D */
}
.comment .avatar-image-container img{
      width:50px; /* B */
      border:1px solid #666 !important;
      border-radius:5px;
      max-width:50px; /* C */
      max-height:70px; /* E */
      float:left;  /* by : gubhugreyot, April,2012 */
}
.comments .comment-block{
     margin-left:65px !important; /* F */
}

Keterangan :

A adalah lebar ruang/kolom penempatan avatar.
B adalah lebar avatar (width).
C adalah tinggi tinggi maksimal avatar (max-height).
D adalah tinggi ruang/kolom penampatan avatar.
E adalah lebar maksimal avatar (max-width).
F adalah jarak box teks komentar dari ujung sebelah kiri box komentar (margin-left).
A dibuat lebih besar dari B untuk memberi ruang bagi penggunaan padding, margin dan border.
D sama dengan E dengan ukuran lebih besar dari A, B dan C untuk memberi ruang jika tinggi image lebih besar dari lebar image (height>width).
F mempunyai selisih minimal sekitar 5px dibandingkan A agar ada ruang cukup untuk penempatan avatar.
Kode css di atas adalah kode paling sederhana untuk merubah ukuran avatar di comment box Blogger New Threaded Comments.
Dalam kode css di atas ukuran avatar telah diperbesar hingga mempunyai lebar 50px (width). Ukuran standar yang biasa digunakan berkisar 32px.

Kode CSS-2 :

.comment .avatar-image-container{
      width:90px;
      height:90px;
      max-height:150px;
}
.comment .avatar-image-container img{
      width:60px;
      border:1px solid #eee;
      padding:5px !important;
      background:#666 !important;
      border-radius:6px;
      max-width:100px;
      max-height:150px;
      float:left;
      margin:10px; 
      box-shadow:0 0 12px #000;
}
.comments .comment-block{
      margin-left:100px !important;
}

Keterangan :

Kode CSS-2 menggunakan ukuran avatar lebih besar.
Melibatkan background, padding, border-radius dan box-shadow sehingga ada beberapa perubahan toleransi ukuran yang berbeda dengan kode CSS-1 agar box-shadow bisa terlihat secara sempurna.

Cara menggunakan kode CSS :

Login ke Blogger.
Dasbor/Dasboard.
Rancangan/Design.
Edit HTML.
Cari kode ]]></b:skin> .
Letakkan kode CSS di atas ]]></b:skin>
Pilih salah satu kode css di atas, atau silahkan edit terlebih dahulu.
Simpan Template/Save Template.
Selesai.

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!!!!

Monday, 6 February 2012

Trick Ganti Background Blogger dg Background Buatan Sendiri Melalui Variable Definitions

Posting tentang mengganti background "Perancang Template Blogger (Blogger Template Designer) ini benar-benar menjadi posting tersulit yang pernah aku buat. Bukan saja keraguan-raguan yang terasa membelenggu akibat melihat beragamnya kode template yang disertai penggunaan Variable Definitions "si biang kerumitan", namun bahkan untuk membuat judul postingnyapun benar-benar membuat kepala pusing seribu keliling. Banyak kata coba dipakai namun tak satupun yang dirasa tepat dan tak mengaburkan makna. Rasanya untuk posting ini tak satupun kalimat yang dirasa pas untuk dijadikan judul. Dua kalimat di bawah ini misalnya, "Cara Membuat dan Mengganti Background Image Perancang Template Blogger (Blogger Template Designer) dengan Background Buatan Sendiri Lewat Variable Definitions" atau "Membuat Sendiri Background Perancang Template Blogger (Blogger Template Designer) Via Variable Definitions". Sepanjang inipun rasa-rasanya nggak pas juga. Yah... biar sjalah. Daripada posting nggak kelar-kelar sebaiknya segera mulai saja.

Sebelum memulai mencoba untuk mengganti background image blogger ada beberapa hal yang perlu diperjelas dan dipertegas agar apa yang dimaksud dalam judul posting lebih jelas.

Penggantian background image default blogger dengan background image buatan sendiri ini dapat dilakukan setelah sebelumnya anda membuat atau menyiapkan sebuah background image berukuran lebar (width) minimal 1024px dan tinggi (height) berkisar 700px.
Penggantian background image akan coba kita lakukan di template Mudah/Simple (by Josh Peterson) milik Blogger (Blogger Template Designer - Perancang Template Blogger) yang sebelumnya memang sudah menggunakan background image (background Besar). Anda bisa melihat blog yang menggunakan "template mudah/simple" di bawah ini.
Agar lebih mudah dan lebih mempercepat memahami tutorial ini sebaiknya anda melakukan percobaan terlebih dahulu menggunakan template yang dimaksud di atas (Template Mudah - Simple Template). Agar lebih aman, buatlah terlebih dahulu sebuah blog yang dikhususkan untuk melakukan berbagai percobaan memodifikasi blog (template).
Bagi yang membutuhkan panduan untuk membuat blog dengan template mudah/simple dari blogger template designer, anda bisa membukanya melalui link berikut:
Cara Ganti Template Blogger dan Ganti Background Image

Template Mudah (Simple)
by: Josh Peterson
Klik untuk perbesar image.

Contoh blog yang menggunakan template Mudah (Simple) dilengkapi background image berukuran besar. Untuk melakukan pergantian background image seperti yang dimaksud dalam tutorial ini anda harus membuat terlebih dahulu sebuah blog yang sama dengan yang terlihat pada gabar dengan tujuan untuk mempermudah memahami tutorial. Diharapkan jika ini berhasil anda dapat melakukannya di template yang berbeda.

Langkah Mengganti background image

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
<Variable name="body.background" description="Body Background" type="background".
Kode ini berada di "Variable Definitions". Gunakan Ctrl+F untuk mempermudah pencarian kode.

Di bawah kode di atas masih ada lanjutannya. Bentuk kode selengkapnya akan terlihat seperti ini:

Kode Lengkap

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://themes.googleusercontent.com/image?id=13EdF7Yo08fRho8Il6uHSFP_n8OiRKc7P-Ejoe1WqTLtl3zNJvlMncTGNO8o2SHUns4-8) no-repeat fixed top center /* Credit: konradlew (http://www.istockphoto.com/googleimages.php?id=5404187&platform=blogger) */"/>

Kode yang berwarna merah adalah URL image yang dipergunakan sebagai background. Image inilah yang akan kita ganti dengan background image yang sudah kita buat dan persiapkan. Upload background image anda di blogger melalui halaman posting. Jangan lupa ukurannya minimal 1024x700 (pixel atau px).

Ganti URL yang berwarna merah dengan URL background image yang telah anda upload sebelumnya. Lihat kode berikut yang telah menggunakan background image baru:

Kode dg background baru-1:

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_sky-and-bird.jpg) no-repeat fixed top center /* Credit: konradlew (http://www.istockphoto.com/googleimages.php?id=5404187&platform=blogger) */"/>

Anda bisa membuang kode berwarna hijau hingga menjadi seperti ini:

Kode dg background baru-2

<Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="#93c9e3 url(http://gubhugreyot-image-post.googlecode.com/files/gubhugreyot_sky-and-bird.jpg) no-repeat fixed top center"/>

Klik Simpan Template (Save Template)
Buka blog dan lihat hasilnya!

Thursday, 2 February 2012

Trick Memperpendek Post Title atau Judul Posting

Klik untuk memperbesar gambar!

Membuat post title atau judul posting memang gampang-gampang susah sekaligus susah-susah gampang. Beberapa kali materi posting bahkan sudah jadi dan siap terbit, akan tetapi begitu ngeliat kembali title posting yang sebelumnya sudah dituliskan tiba-tiba penerbitan posting terpaksa ditunda karena terlihat title posting yang terlalu panjang yang nantinya berakibat terjadi deret bertumpuk hingga 3 lapis di halaman blog. Bagaimana cara termudah memperpendek title posting tanpa harus mengurangi kalimat yang sudah dipersiapkan?

Trick Memperpendek Judul Posting

.
Untuk membuat title posting lebih pendek anda cukup lakukan menggunakan kode CSS. Kode css ini akan bekerja dengan cara mengurangi spasi pada judul posting. Pengaturan spasi dapat dilakukan hingga teks judul posting menjadi sangat rapat hingga teks terlihat lebih pendek.

Kode CSS untuk perpendek Post title

Simpan kode CSS ini dalam template di antara tag pembuka <head> dan tag penutup </head>

Kode CSS:

h3.post-title{
       letter-spacing:-2px;
}

Langkah Penyimpanan kode CSS

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML
Backup Template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke konsisi sebelum modifikasi lakukan klik Browse kemudian Upload.
Cari kode ]]></b:skin>
Copy dan pastekan kode CSS tepat di atas kode ]]></b:skin>.
Klik Simpan Template *(Save Template).

Catatan/Keterangan:

Tutorial Blogger ini berdasarkan Blogger Template Designer.
Nilai -2px berfungsi untuk mengatur spasi. Semakin besar nilai minus-nya maka semakin rapat.
Berdasarkan syntax h3.post-title {....} anda dapat melakukan berbagai pengembangan hingga post title terlihat semakin menarik.

Contoh pengembangan syntax h3.post-title :

Contoh Pengembangan Syntax post-title:

h3.post-title{
       font-weight:500;
       color:#d1ecfe;
       text-shadow:1px 1px 1px #000;
       display:block;
       padding-bottom:25px;
       background: url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-blood-anima.gif) bottom center repeat-x;
       margin-bottom:15px;
}

Trick Membuat Scroll Box Widget Recent Comment Blogger Plugins

Scroll Box Widget Recent Comment

Menggunakan widget recent comment blogger plugins memberi maanfaat tersendiri bagi blogger karena bisa memonitor secara cepat komentar yang diterima tanpa harus login terlebih dahulu. Hanya satu yang agak merepotkan bagi widget ini. Teks ataupun linknya tak dapat di atur (ukuran font, warna, tebal dll) agar lebih padu (seragam) dengan bentuk font yang dipergunakan di keseluruhan blog hingga tampilannya terlihat berbeda dan terus terang saja terasa sedikit mengganggu. Ada sebuah solusi untuk membuat widget recent comment ini sedikit tersamarkan dan sekaligus membuatnya lebih rapi dan mudah ditata. Tempatkan saja dalam scroll box.

Untuk membuat scroll box bagi widget recent comment kita tak mungkin melakukannya tanpa melakukan penambahan kode html pada bagian body. Perubahan atau penambahan inipun harus melalui Expand Widget Template. Agar lebih cepat dan lebih aman membuatnya, silahkan ikuti panduan berikut.

Panduan membuat scroll box recent comment

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML
Backup Template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke kondisi sebelum modifikasi lakukan klik Browse kemudian Upload.
Klik Expand Widget Template.
Cari kode <b:widget id='Gadget1' locked='false' title='Recent Comments' atau title='Recent Comments'. Gunakan Ctrl + F untuk lebih mempercepat pencarian kode.

Di sekitar kode <b:widget id='Gadget1' locked='false' title='Recent Comments' .... akan dijumpai kode lain yang seperti di bawah ini:

Kode HTMl Recent Comment default Blogger:

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'><data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Ganti kode dengan kode berikut:

Kode HTMl Recent Comment Baru:

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'>
<div style='max-height:200px;overflow:auto;'><data:gadgetSnippet/></div>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Klik Simpan Template (Save Template).
Buka blog untuk melihat tampilan baru widget recent comment anda!

Catatan/Keterangan:

Untuk mengatur tinggi scroll box rubah nilai max-height:200px;.
Semakin besar akan semakin tinggi dan sebaliknya semakin kecil akan semakin pendek.
Dengan penambahan elemen DIV baru tersebut anda punya kesempatan untuk membuat beberapa modifikasi baru melalui kode CSS hanya dengan "menempelkan sebuah class atau id.

Wednesday, 1 February 2012

Membuat Box Informasi Tepat di bawah Posting, di atas Kolom Komentar

Membuat box tepat di bawah posting pastinya akan sangat bermanfaat bagi siapapun. Box akan berada tepat di antara teks posting terakhir dan kolom komentar. Sebuah posisi yang sangat strategis sehingga anda harus menggunakannya untuk sesuatu yang benar-benar bermanfaat dan menarik bagi pengunjung. Beberapa link dan informasi penting dapat dengan cepat terakses (dibaca) karena posisinya yang tak dibatasi oleh apapun dengan teks terakhir yang anda postingkan. Image di atas adalah sebuah contoh box bawah posting berikut isi dalamnya yang berupa informasi terkait beberapa blog penting yang bisa diakses agar mendapatkan lebih banyak lagi panduan dan tutorial blogger ataupun tutorial blogdetik. Jika anda sering mengikutksertakan informasi tertentu yang selalu sama setiap kali posting, maka dengan cara membuat box bawah posting ini informasi penting tersebut cukup dituliskan satu kali saja dan selalu akan terlihat sitempat yang sama setiap posting dilakukan (tak lagi harus menuliskannya lagi di setiap kali posting). Anda akan banyak menghemat energi sekaligus hemat kose html. Bagaimana? Enak, kham?!

Cara membuat box bawah posting

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan backup template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
Cari kode <b:if cond='data:post.hasJumpLink'> atau kode yang ini <div class='post-header-line-1'/>.
Di atas kode <b:if cond='data:post.hasJumpLink'> atau di bawah kode <div class='post-header-line-1'/> akan ditemukan kode seperti berikut:
Kode html yang juga harus ditemukan:
```
<data:post.body/>
      <div style='clear: both;'/> 
```
Copy dan pastekan kode html box bawah posting di bawah kode di atas..
Klik Simpan Template (Save Template).

Kode HTML Box Bawah Posting

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left;margin:30px 0;padding:0;width:100%;'>
<!-- Awal Content Box Bawah Posting --> 
<h3>Tutorial Lain Yang Wajib di ikuti:</h3>
<div style='min-height:100px;overflow:auto;padding:20px 10px;border:3px double #666;background:#ddd;position:relative;margin:10px 0;'>
<ul>
<li><a href='http://gubhugreyot.blogspot.com' target='_blank' title='Ratusan tutorial blogger dan blogdetik tersedia di sini!'>gubhugreyot-blogger</a></li>
<li><a href='http://gubhugreyot.blogdetik.com' target='_blank' title='Panduan ngeblog di blogdetik sekaligus cara modifikasi blogdetik dan blogger'>gubhugreyot-blogdetik</a></li>
<li><a href='http://bgsgr.blogspot.com' target='_blank' title='Mau belajar design css3? Klik saja karena disinilah tempat yang anda cari!'>bgsgr-blogspot</a></li>
<li><a href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Berbagai Lightbox dan Media Viewer lain tersedia di sini!'>Lightbox : Demo &amp; Tutorial</a></li>
<li><a href='http://lightbox-demo-tutorial.blogspot.com' target='_blank' title='Lengkapi tutorial yang sudah anda jelajahi dengan tutorial spesial yang pasti belum anda baca di sini.'>TantyTM-blogger</a></li>
</ul>
</div>
<!-- Akhir Content Box Bawah Posting --> 
</div>
<div style='clear: both;'/>  <!-- penting harus digunakan --> 
</b:if>

Keterangan/Catatan:

Kode box bawah posting di atas telah ditambahkan beberapa link sebagai sample.
Ganti isi box jika diperlukan untuk menampilkan sesuatu yang berbeda seperti image misalnya.
Anda bisa mengganti beberapa teks yang bercetak tebal dan miring jika kode yang ingin ditampilkan tak jauh beda dengan sample di atas.

Tuesday, 31 January 2012

Memanfaatkan Widget Stats Blogger u Meningkatkan Jumlah Pengunjung

Silahkan lihat demo widget blog's stats di di sidebar kanan. Widget blog's stats blogger tersebut tampilannya berbeda dengan yang selama ini banyak digunakan blogger karena telah mengalami beberapa modifikasi agar terlihat "lebih luwes" dan membuat blog terlihat lebih manis.

Melanjutkan apa yang sudah anda ikuti di gubhugreyot, silahkan lakukan beberapa perubahan pada template agar jumlah pengunjung yang terdata di blog's stats blogger segera meningkat secara drastis dan fenomenal (kaya' thukul: fenomenal!).

Langkah meningkatkan jumlah pengunjung blog:

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan backup templateterlebih dahulu
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC.
- Berikan nama khusus agar mudah diingat.
Klik Expand Widget Template.
Cari kode <b:widget id='Stats1'. Gunakan Ctrl + F untuk mempermudah dan mempercepat pencarian kode.

Di bawah kode tersebut terdapat sebuah kode seperti berikut:

Kode blog's stats yg hrs diganti:

<span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>

Ganti dengan kode berikut.

Kode pengganti :

<span class='counter-wrapper text-counter-wrapper' style='margin-right:-2px;'>,198,527,</span>
       <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>

KlikSimpan Template (Save Template).

Catatan/Keterangan:

Semoga anda sudah tahu dan menyadari tipuan yang sudah menimpa anda!
Segera buat tipuan ini untuk gantian menipu pengunjung.
Tambahkan angka di depan koma yang pertama dan yang terakhir untuk membuat angka stats terlihat "orisinil".

ttd

gubhugreyot

Merubah Tampilan Widget Blog's Stats Blogger

Satu yang terpikirkan ketika ada keinginan untuk menggunakan widget Blog's Stats Blogger adalah "tampilannya yang sangat tidak menarik". Kalau boleh dikatakan secara jujur, bentuk dan tampilannya sangat ndeso tak ubahnya si gubhugreyot" yang "ndeso kluthuk". Berangkat dari dari inilah maka terpikir untuk sedikit mengubah si "widget blog's stats" ini agar terlihat lebih "pantas dipajang di halaman blog". Yah..., biar blog juga nggak terlihat semakin amburadul, gitu, lhoh!

Merubah gaya dan penampilan widget blog's stats blogger dapat dilakukan melalui penggunaan kode css atau xHTML atau sekaligus keduanya. Beberapa perubahan yang dapat dilakukan diantaranya pada jenis font (font-family), ukuran font (font-size), warna font (color), background serta dimungkinkan juga menambah beberapa properti css baru agar tercipta perubahan yang lebih drastis dari aslinya. Dalam posting ini akan kita buat sebuah bentuk kode css baru (mengacu pada kode yang digunakan widget blog' stats blogger) yang bisa anda kembangkan lagi hingga mendapatkan bentuk perubahan tampilan widget lebih maksimal dan mungkin saja lebih fantastis.

Cara merubah tampilan widget blog's stats blogger

Sebelum memulai perubahan pada widget anda wajib mengaktifkan widget blog's stats blogger terlebih dahulu melalui add a gadget di elemen laman (page elements). Panduan cara mengaktifkan widget bisa anda buka dengan klik di sini ! Setelah widget berhasil di tampilkan di halaman blog, silahkan ikuti panduan berikut.

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML.
Lakukan backup template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC. File yang sudah tersimpan ini berfungsi untuk mengembalikan template ke kondisi sebelum perubahan dilakukan jika terjadi kesalahan yang mengakibatkan kerusakan desain blog. Untuk memulihkan template seperti sebelum perubahan anda bisa klik Browse dan dilanjutkan Upload.
Cari kode ]]></b:skin>.
Copy dan pastekan kode CSS di atas kode ]]></b:skin>.
Klik Simpan Template (Save Template).

Kode CSS Widget Blog's Stats (modif):

#Stats1 .widget-content{
       background:#aaa url(http://gubhugreyot-images.googlecode.com/files/gubhugreyot-bg-grad-transp-2-50.png) left center repeat-x;
       width:150px;
       padding:4px;
       border:1px solid #eee;
       box-shadow:0 0 8px #000;
       text-align:center;
       border-radius:6px;  /* by : gubhugreyot, 01 Febuari 2011 */ 
}
#Stats1 .widget-content .counter-wrapper{
       height:30px;
       width:140px;
       padding:0;
       border:1px solid #aaa;
       box-shadow:0 0 6px #000;
       background: url(http://gubhugreyot-images.googlecode.com/files/gubbhugreyot_bg-anima-grad-111-35.gif) center center repeat-x;
       border-radius:4px;
       color:#555;
       font-weight:600 !important;
       font-family:Tahoma;
       letter-spacing:2px;
       font-size:18px;
}

Catatan/Keterangan:

Pilihlah bentuk tampilan widget blog's stats yang hanya berupa teks tanpa background seperti terlihat pada gambar di atas!

Monday, 9 April 2012

Kode CSS Button Reply Comment Blogger New Threaded Comments :

Sunday, 8 April 2012

Kode CSS-1 :

Kode CSS-2 :

Kode CSS-3 :

Kode CSS :

Kode CSS-1 :

Kode CSS-2 :

Wednesday, 15 February 2012

Syntax #header-inner di Template Tata Letak

D E M O

Kode dasar Background Header

Kode CSS yg lebih komplek

Monday, 6 February 2012

Kode Lengkap

Kode dg background baru-1:

Kode dg background baru-2

Thursday, 2 February 2012

Kode CSS:

Contoh Pengembangan Syntax post-title:

Kode HTMl Recent Comment default Blogger:

Kode HTMl Recent Comment Baru:

Wednesday, 1 February 2012

Kode html yang juga harus ditemukan:

Kode HTML Box Bawah Posting

Tuesday, 31 January 2012

Kode blog's stats yg hrs diganti:

Kode pengganti :

Kode CSS Widget Blog's Stats (modif):