ALEA wallpaper | Design | Music | Computer: modifikasi

Showing posts with label modifikasi. Show all posts

Friday, March 11, 2011

Membagi Kotak Komentar Blogspot Menjadi Dua Bagian

Mungkin terlihat unik jika kotak komentar default blogspot dibagi menjadi dua. Hmm, selain menjadi unik tentunya juga memanfaatkan ruang yang kosong. Kita tau kebanyakan kotak komentar blogspot berukuran besar. Nah, jika dibagi dua kan jadinya unik.

Lalu untuk apa dibagi dua. Kita bisa menambahkan tulisan atau apalah, adsense, gambar, animasi, widget, dan lain-lain. Tunjukkan kreatifitasmu kawan !!!

Contoh Membagi Kotak Komentar Blogspot Menjadi Dua Bagian

Seperti itu contohnya.
Sekarang bagaimana cara membuatnya?

Sebenarnya mudah, dalam hal bagi membagi yang kita gunakan hanyalah kode untuk membuat sebuah tabel

Step-by-step

Masuk ke akun blogger
Buka rancangan (Design)
Buka Edit HTML
Centang "Expand Widget Template"
Cari kode blogger-iframe-colorize (Gunakan CTRL+F)
Nanti akan bervariasi kodenya. Setiap template berbeda-beda. Contohnya,misal kita temukan susunan kodenya seperti ini:
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='600' id='comment-editor' scrolling='auto' src='' width='400'></iframe>
Setelah menemukan susunan kode yang ada tulisan "blogger-iframe-colorize" nya, sekarang tinggal menambahkan kode saya. Ubahlah kode di atas menjadi susunan kode seperti berikut. Catatan: kode warna hitam tebal adalah kode asli, yang lain yang harus ditambahkan
<table border='0' cellpadding='0' cellspacing='0' width='480px'>
<tbody>
<tr>
<td valign='top' width='425'>
<iframe allowtransparency='true' class='blogger-iframe-colorize' frameborder='0' height='600' id='comment-editor' scrolling='auto' src='' width='400'></iframe> </td>
<td style='padding-left: 5px; text-align: left; padding-top: 5px;' valign='top'> <table cellpadding='0' cellspacing='0'>
<tbody>
<tr>
<td align='left' valign='top' width='300'>

<div style='-moz-background-clip: border; -moz-background-inline-policy: continuous; -moz-background-origin: padding; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; background: white none repeat scroll 0% 0%; border: 1px solid #3B5998; padding: 2px 5px;'>

Bisa diisi dengan tulisan, adsense, widget, dan lain-lain. kreatif ! </div>

</td></tr> </tbody></table> </td> </tr> </tbody></table>
Selanjutnya simpan. Dan lihat hasilnya
Catatan: Kode tebal hitam adalah kode asli. Kode warna hijau ,merah, dan orang adalah kode yang harus ditambahkan. Kode warna orange = ganti dengan tulisan atau adsense, atau widget, dan sebagainya. Koe warna merah adalah border radius, yaitu bingkai di sebelah kotak komentar, silahkan sesuaikan ukuran (pokoknya otak-atik sendiri).
Selamat mencoba !

Jika gagal, silahkan share saja lewat kotak komentar :)

Sunday, October 31, 2010

Cara Membuat Halaman "Blog ini Sedang Direnovasi"

Cara Membuat Halaman "Blog ini Sedang Direnovasi". Kadang blog juga perlu yang namanya renovasi alias perbaikkan. Namun, pada saat renovasi tersebut kita tidak melakukan suatu hal agar visitor tau kalau blog kita sedang direnovasi. Kita buat saja pada halaman depan blog menjadi Halaman "Blog ini Sedang Direnovasi"

Bagaimana caranya (?)

Mudah. Dengan cara membuat halaman dengan gambar yang bertulisankan "Blog ini Sedang Direnovasi".

Bagaimana cara membuatnya (?)

Mari ikuti tutorial membuat halaman "Blog ini Sedang Direnovasi"

Masuk ke akun blogger
Buka design / rancangan
Pilih Edit HTML
Lalu backup template dengan cara klik "Download Template full"

Kemudian centang pada "Expand Widget Templte"

Lalu cari kode <body> dan </body> (Gunakan Ctrl + F )
Hapus semua kode dari kode <body> . . . . . . </body> (dari kod <body> sampai kode </body> ) dan ganti dengan kode berikut ini

<body> <img src="URL GAMBAR" class="alignleft" width="1345" height="538" /> </body>

Ganti tulisan URL GAMBAR dengan url / alamat gambar yang akan dijadikan gambar halaman "Maaf Blog ini Sedang Direnovasi". Contohnya

Lalu, simpan template.
Hasilnya bisa dilihat di http://photo-drawx.blogspot.com
Jadi jika ada seseorang hendak membuka blog Kamu, ataupun postingan Kamu, maka hasilnya ya "Maaf Blog ini Sedang Direnovasi" terimakasih silahkan bertanya

Sunday, October 24, 2010

Request Post http://prasutan.blogspot.com

Untuk sekedar silaturrahmi. Silahkan tanya. Request post. Masukkan data-datamu ya ^^

Silahkan Request sebanyak-banyaknya. Insyaallah jika ada waktu nanti saya post-kan

Saturday, September 18, 2010

Modifikasi Blockquote

Tampilan default blockquote yang biasa - biasa saja pada blog tentunya bikin kita Grrr !!! . . . [^^]. Nah, pada postingan ini, mari kita hack ! kita buat Modifikasi bloclquote sendiri.

Masuk ke blogger
Pilih design / rancangan
Pilih edit HTML
Cari kode blockquote ( Gunakan Ctrl + F ) maka hasilnya akan bervariasi, saya beri contoh kode yang nantinya ditemukan, misalnya kode .post-body blockquote{ . . .} dan .post blockquote { . .... } dan .post blockquote:hover { . . . } dan .post blockquote p { . . . } ket : titik-titik dimisalkan kode lain
Nah, jika menemukan kode-kode seperti yang saya sebutkan di atas. Hapus saja semuanya.
Setelah dihapus, ganti dengan kode di bawah ini

.post blockquote {
background:#f5f8fa url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0;
border-color: #D7E8F0;
border-style: solid;
border-width: 1px 1px 1px 20px;
color: #004276;
font-family: Consolas, "Courier New", Courier, mono, serif;
font-size: 13px;
line-height: 16px;
margin:10px 0 10px 10px;
overflow: visible;
padding: 28px 10px 10px;
width:80%; }

.post blockquote:hover {
background:gray url(http://lh6.ggpht.com/_wC8_9aR_6uE/S-7eHs71vkI/AAAAAAAAC4M/SPzkp3SsYg4/bintang%20kelip.gif) no-repeat scroll 0 0
}

.post blockquote p {
margin:.75em 5;
background:url(http://lh5.ggpht.com/_wC8_9aR_6uE/S_OXycnYicI/AAAAAAAAC60/lAY-RahuhKw/exit.jpeg) no-repeat;
padding:20px;
background-position:bottom right;
}

Keterangan : kode di atas adalah modifikasi dari saya. Jika Sobat ingin memodifikasi sendiri, silahkan ubah kode-kode berikut

background:url(URL GAMBAR)
Color
dan sebagainya

Baca : Kode Warna HTML
Hasilnya

Friday, September 17, 2010

Menghilangkan Tulisan Jumlah Follower pada Widget Google Friend Connect

Ada - ada saja kali ini. Sobat sudah tau kan Widget Google Friend Connect? Nah, sekarang kita mencoba untuk modifikasi widget yang satu ini. Dimodifikasi yang bagaimana? Kita akan mencoba menghilangkan tulisan jumlah follower pada widget google friend connect.

Masuk ke akun blogger dulu
Buka halaman Google Friend Connect ( GFC ) di http://www.google.com/friendconnect/?hl=in
Setelah masuk, pilih blog
Lalu pilih " tambahkan gadget anggota "

pilih 'tambahkan gadget anggota'

Lalu kustomisasi, atur ukuran widgetnya

pilih ukuran gadget

Nah, nanti akan ada pengaturan warna

pilihan warna

Pada saat kustomisasi (pewarnaan). Buat persisi seperti gambar di bawah (Note: kode ffffff sesuaikan dengan kode warna background blog Sobat agar nanti tulisan jumlah follower tidak kelihatan )

Copy kodenya untuk dipasang di blog
Hasilnya adalah sebagai berikut

Baca : Modifikasi Widget Google Friend Connect

Menampilkan Hanya Judul Posting di Homepage

Dengan alasan tertentu kita bisa Menampilkan Hanya Judul Posting di Homepage. Baca : Cara menampilkan Judul Postingan saja di Homepage dengan modifikasi Auto Readmore. Nah, pada postingan kali ini, kita bahas menampilkan hanya judul posting di homepage tanpa readmore, jadi jika blog Sobat sudah terpasang " Auto Readmore " silahkan bisa dicopot atau dibiarkan saja juga boleh ( Baca : Cara Membuat Auto Readmore )

Cara Menampilkan Hanya Judul Posting di Homepage

Masuk ke blogger
Pilih design / rancangan
Pilih edit HTML
Centang " expand widget template "
Cari kode <b:include data='post' name='post'/> ( gunakan Ctrl + F )
Setelah ketemu, ganti kode tersebut dengan kode di bawah ini

<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'> <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EAE9E9;color:#406A0E;'> <data:post.title/></div></a> <b:else/> <b:include data='post' name='post'/> </b:if> <b:else/> <b:include data='post' name='post'/> </b:if>

Simpan
Keterangan : Kode warna merah adalah kode style, silahkan ubah sendiri untuk memodifikasinya, misal untuk merubah warna background, gantilah pada kode background:#EAE9E9
Baca : Kode Warna HTML
Hasilnya

Menampilkan Hanya Judul Posting di Homepage

Wednesday, September 15, 2010

Modifikasi Komentar Author dengan Background Gambar

Modifikasi Komentar Author dengan Background Gambar. Kelihatannya menarik [^_^]. Baca dulu teknik dasar : Komentar Author berbeda Warna. Contoh Modifikasi Komentar Author dengan Background Gambar

Masuk ke blogger
Pilih design / rancangan
Pilih edit HTML
Centang pada " expand widget template "
Cari kode <data:comment.author/> atau <data:commentPostedByMsg/> ( tip : gunakan ctrl + F )
Setelah kode tersebut ketemu, lalu scroll ke bawah hingga menemukan kode </dt>
Dan letakkan kode berikut ini setelah kode </dt> tersebut.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Lalu, scroll lagi ke bawah hingga menemukan kode </dd>
Tambahkan kode </b:if> setelah kode </dd> tersebut
Nah, jika bingung, lihat saja kode berikut ini. Kira - kira seperti itulah peletakkannya

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
   <dd class='comment-body'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   </dd></b:if>
   <dd class='comment-footer'>
   <span class='comment-timestamp'>

Keterangan :
Kode warna merah adalah kode yang ditambahkan
Kode warna orange adalah kode yang harus ditemukan

Lalu, tambahkan kode CSS berikut di atas kode ]]></b:skin> jika tidak berhasil, letakkan di tag comment, letakkan setelah kode comment-author { . . . } ket: titik-titik dimisalkan kode yang lain (Gunakan Ctrl + F untuk mencari kode )

.comment-body-author {
margin:0px;
padding:5px;
color:#000000;
background: url(URL GAMBAR/ANIMASI) bottom right no-repeat;
border: 3px solid #CCC;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;font-size:1.8em;line-height:1.9em;font-style:italic;font-family:Century Gothic;
}

Keterangan : Ganti URL GAMBAR/ANIMASI dengan alamat gambar atau animasi yang akan dijadikan background. Untuk mengubah posisi gambar, ganti kode bottom right
Simpan

Tuesday, September 14, 2010

Modifikasi Ikon List pada Postingan

Modifikasi Ikon List pada Postingan. Maksudnya, mengubah ikon yang biasa-biasan saja dengan gambar atau ikon sendiri. Contoh

BAGAIMANA ??? TERTARIK ??? TKP --

Masuk ke blogger
Buka design / rancangan
Pilih edit HTML
Cari kode .post ul li { . . . . } keterangan : titik-titik adalah kode yang lain (Gunakan Ctrl + f )
Jika tidak ketemu cari kode .post{ . . . . } saja
Nah, ganti kode tersebut .post ul li { . . . . } dengan kode berikut ini (Note : jika menggunakan kode .post{ . . . . } maka letakkan kode di bawah ini setelah kode .post{ . . . . } )

.post ul li {
list-style: none url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimR_ZhDog58FWqjIcOclMY8eoAN9fXhIF2-kK3oj7B7sALtvAxlaWDsDOvo9KcqaDWgvwNvCi3Atk4-6q7YEmibWu4HImFgK_3qWJDnTkBEaqHqooi9YlTNmpJfcBbT0_3bvBbWXdf4MM/s1600/icon_star.PNG) inside;
vertical-align: middle;
padding: 0px;
margin-left: -10px;
margin-right: 10px;
}

Keterangan :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimR_ZhDog58FWqjIcOclMY8eoAN9fXhIF2-kK3oj7B7sALtvAxlaWDsDOvo9KcqaDWgvwNvCi3Atk4-6q7YEmibWu4HImFgK_3qWJDnTkBEaqHqooi9YlTNmpJfcBbT0_3bvBbWXdf4MM/s1600/icon_star.PNG adalah URL ikon bintang seperti gambar di atas. jika Sobat ingin menggunakan ikon atau gambar millik sendiri, gantilah kode tersebut
Saya punya stock ikon list ( klik di sini )

Simpan template

Monday, September 13, 2010

Kotak Komentar Author Berbeda Warna

Ada cara mudah untuk membuat Kotak Komentar Author Berbeda Warna. Otak-atik sedikit kode, jreeng . . langsung jadi Gan [^_^]. Baca dulu Cara Memberi Nomor pada Komentar, Cara Membuat Kotak Komentar Facebook di Blog, Membuat Komentar Pengunjung dengan Spoiler. Nah, sekarang meluncur ke Cara Membuat Kotak Komentar Author berbeda Warna

Masuk ke Blogger
Pilih design / rancangan
Pilih edit HTML
Centang 'Expand widget template'
Backup template agar jika hasilnya salah bisa kembali lagi ( caranya dengan klik 'download template full' )
Nah, sekarang cari kode <data:comment.author/> atau cari kode <data:commentPostedByMsg/> ( tip : gunakan ctrl + F )
Setelah kode tersebut ketemu, lalu scroll ke bawah hingga menemukan kode </dt>
Dan letakkan kode berikut ini setelah kode </dt> tersebut.

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Lalu, scroll lagi ke bawah hingga menemukan kode </dd>
Tambahkan kode </b:if> setelah kode </dd> tersebut
Nah, jika bingung, lihat saja kode berikut ini. Kira - kira seperti itulah peletakkannya

<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
   <b:else/>
   <data:comment.author/>
   </b:if>
   <data:commentPostedByMsg/>
   </dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
   <dd class='comment-body'>
   <b:if cond='data:comment.isDeleted'>
   <span class='deleted-comment'><data:comment.body/></span>
   <b:else/>
   <p><data:comment.body/></p>
   </b:if>
   </dd></b:if>
   <dd class='comment-footer'>
   <span class='comment-timestamp'>

Keterangan :

Kode warna merah adalah kode yang ditambahkan
Kode warna biru adalah kode yang harus ditemukan

Lalu, tambahkan kode CSS berikut di atas kode ]]></b:skin> jika tidak berhasil, letakkan di tag comment, letakkan setelah kode comment-author { . . . } ket: titik-titik dimisalkan kode yang lain (Gunakan Ctrl + F untuk mencari kode )

.comment-body-author {
margin:0px;
padding:5px;
color:#000000;
background : gray;
border: 3px solid #CCC;
border-radius:7px;
-moz-border-radius:7px;
-webkit-border-radius:7px;font-size:2.3em;
}

Modifikasi sendiri. Bisa ubah background warna (dengan kode warna HTML), font, dan lain-lain.
( Baca : kode warna HTML )
Hasilnya, contoh hasil Kotak Komentar Author Berbeda Warna

Gunakan akun google agar warna komentar berbeda warna

Hasilnya, modifikasi saya

ALEA wallpaper | Design | Music | Computer

Pages

Friday, March 11, 2011

Membagi Kotak Komentar Blogspot Menjadi Dua Bagian

Sunday, October 31, 2010

Cara Membuat Halaman "Blog ini Sedang Direnovasi"

Sunday, October 24, 2010

Request Post http://prasutan.blogspot.com

Saturday, September 18, 2010

Modifikasi Blockquote

Friday, September 17, 2010

Menghilangkan Tulisan Jumlah Follower pada Widget Google Friend Connect

Menampilkan Hanya Judul Posting di Homepage

Wednesday, September 15, 2010

Modifikasi Komentar Author dengan Background Gambar

Tuesday, September 14, 2010

Modifikasi Ikon List pada Postingan

Monday, September 13, 2010

Kotak Komentar Author Berbeda Warna

sitemeter