Kampo Rato

Menampilkan Blog/Website Lain Kedalam Blog

noreply@blogger.com (La Ari) — Tue, 15 May 2012 22:29:00 +0700

Sample

Trik ini berguna untuk menampilkan secara keseluruhan sebuah blog/website kedalam blog kita. Meskipun harus geser scroll ke kiri dan ke kanan atau ke atas dan ke bawah untuk melihat keseluruhan isi blog yang ditampilkan tapi trik ini cukup menarik (bagi saya pribadi).

Langsung aja ke cara prakteknya

1. Login ke blog anda
2. Masuk ke Tata Letak
3. Tambahkan sebuah widget HTML/Javascript baru
4. Masukkan kode berikut ini :

<iframe name="Menampilkan situs dalam suatu situs" src="http://ari-fahriansyah.blogspot.com" marginwidth="0" marginheight="0" readonly ="true" vspace="0" hspace="0" allowtransparency="true" scrolling="yes" width="300" frameborder="0" height="250"></iframe>

5.Simpan Widget tersebut dan lihat hasilnya seperti dibawah ini :

Catatan :

Tulisan yang diberi warna biru bisa dirubah sesuai dengan website/situs/blog yang ingin ditampilkan
Angka yang diberi warna merah bisa dirubah sesuai dengan keinginan anda

===========================================

===========================================

Cara Mudah Membuat Readmore

noreply@blogger.com (La Ari) — Tue, 24 Apr 2012 06:44:00 +0700

Iseng mengisi waktu luang dari pada ngayap nggak karuan mendingan posting tulisan pada blog dan mungkin akan sedikit bermanfaat buat teman-teman semua.

Kali ini saya mencoba share tentang bagaimana membuat read more (baca selengkapnya) pada blogspot dengan mudah tanpa harus menggunakan script karena selama ini teman blogger semua tau kalo banyak menggunakan script tentu akan memperlambat loading blog.

Ok, dari pada ngomong ngalor ngidul sebaiknya langsung aja. Berikut langkah-langkah yang bisa dilakukan untuk membuat read more tanpa menggunakan script :

Buat tulisan apa aja untuk blog sobat.
Kalo udah selesai nulis, tempatkan kursor pada bagian tulisan yang ingin dipisah dengan read more.
Klik icon Insert Jump Break (lihat gambar).
Kemudian klik Terbitkan Entri untuk menerbitkan tulisan sobat.
Selesai dan sobat bisa lihat perubahannya

Gampangkan? Semoga bermanfaat.

============================================

Widget Popular Post With Grid Layout

noreply@blogger.com (La Ari) — Sun, 22 Apr 2012 22:56:00 +0700

Tampilan widget popular post yang digunakan pada blog ini sedikit berbeda dengan widget lainnya. Selain tampilan yang menarik blog menjadi lebih hidup dengan modifikasi dengan gaya Grid Layout seperti yang digunakan oleh blog ini. Biar lebih jelas saya sediakan screenshotnya seperti yang terlihat dibawah ini :

untuk membuat tampilan popular post seperti diatas dapat dilakukan dengan cara :
pertama Login blogger anda. kedua masuk ke munu Design > Page Element > Add a Gadget. ketiga Pilih Widget "Popular Post". keempat aturlah persis seperti gambar dibawah ini (untuk jumlah post, bisa anda sesuaikan sendiri). kemudian SAVE

Langkah selanjutnya dengan mengedit HTML blog (Ingat... jangan lupa Backup Template anda dan beri centang pada Expand Widget Templates). carilah kode ]]></b:skin> dan tambahkan kode css berikut diatasnya :

.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:5px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:3px;-moz-border-radius: 1px;-webkit-border-radius: 1px;border-radius: 1px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.6s ease;border: 1px solid #CCC;} .popular-posts ul li img:hover {border:1px solid #ccc;-moz-transform: scale(1.3) rotate(-320deg) ;-webkit-transform: scale(1.3) rotate(-320deg) ;-o-transform: scale(1.3) rotate(-130deg) ;-ms-transform: scale(1.3) rotate(-320deg) ;transform: scale(1.3) rotate(-320deg);}

Langkah berikutnya cari teks PopularPosts1, biar lebih cepat pake (CTRL + F), script lengkapnya bisa dilihat dibawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>

<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>

<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Ganti kode script diatas dengan kode dibawah ini :

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == "false"'> <b:if cond='data:showSnippets == "false"'>  <a expr:href='data:post.href'><data:post.title/></a> <b:else/>  <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == "false"'>  <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/> </b:if> </a> </div> </div> <b:else/>  <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget>

Langkah terakhir sebagai pamungkas, simpan hasil pekerjaan anda dan lihat hasilnya...
sumber : kode-blogger.blogspot.com

Link Exchange

noreply@blogger.com (La Ari) — Thu, 8 Mar 2012 00:03:00 +0700

Anda ingin bertukar link? Silakan salin kode dibawah dan paste di website/blog anda. Silahkan tinggalkan komentar pada bagian bawah posting dibawah ini Jika anda telah memasangnya di website/blog anda, Insya Allah saya akan segera link balik ke website/blog anda

Berikut sample link blog Kampo Rato :

Daftar link blog sahabat dari Kampo Rato

Menyisipkan CD-Key pada Office 2007 Enterprise untuk Mempermudah Instalasi

noreply@blogger.com (La Ari) — Tue, 16 Aug 2011 11:17:00 +0700

Untuk mempermudah instalasi Office 2007 Enterprise, kita dapat menyisipkan CD-Key pada file instalasinya sehingga saat proses install berlangsung, rutin instalasi tidak lagi menanyakan CD-key tersebut. Caranya adalah sebagai berikut.

Salin semua folder dan file instalasi dari DVD ke hardisk. Lalu pada hardisk perhatikan ada sebuah folder dengan nama Enterpriser.WW.

Masuk kedalam folder tersebut lalu cari file Config.XML.

Tahan tombol shift pada keyboard, klik-kanan pada file tersebut lalu pilih Open with Notepad. Isi filenya tampak seperti berikut ini:

Kalo kita perhatikan, file config tersebut tampaknya berisikan beberapa seting yang digunakan oleh rutin instalasi. Secara default semua setingnya diapit tanda <!– dan –> yang menandakan bahwa seting tersebut berada dalam kondisi disable / tidak aktif.

Seting yang berhubungan dengan CD-key berada pada bagian:

<!– <PIDKEY Value=”BCDFGHJKMPQRTVWXY2346789B” /> –>

Agar rutin instalasi tidak menanyakan CD-key, maka kita hilangkan tanda (<!– dan –>) lalu ganti value (yang diapit tanda kutip) dengan CD-key kita (tanpa tanda minus). Sebagai contoh, misalnya CD-key yang kita miliki adalah 1234-ABCD-5678-EFGH, maka setingnya sebagai berikut:

Seting berikut ini juga menarik karena kita bisa memasukan nama serta perusahaan kedalam rutin instalasi.

Seting berikut ini mengatur lokasi penyimpanan program setelah instalasi berlangsung

Setelah semua pengaturan selesai tinggal save file Config.XML tersebut. Lalu semua folder dan file instalasinya tinggal kita backup lagi kedalam DVD.

Dan sekarang proses instalasi Office 2007 setidaknya akan berlangsung lebih mudah, lebih cepat dan tentunya semi otomatis karena beberapa pertanyaan yang biasa diajukan saat proses instalasi telah kita sisipkan langsung kedalam rutin instalasinya.

Demikian dan mudah-mudahan ada gunanya.

Membuat Link Jika di Klik Selalu Muncul Di Jendela Baru

noreply@blogger.com (La Ari) — Fri, 5 Aug 2011 08:35:00 +0700

Cara yang satu ini mungkin terlihat sepele tapi juga bisa berpengaruh pada lamanya pengunjung blog berada di blog kita.

Kita tentu masih bisa bersyukur jika link yang diklik oleh pengunjung adalah link posting pada blog, tapi bagaimana jika link yang diklik adalah link yang keluar dari blog kita? kesel juga sih.

Untuk menyeselesaikan masalah ini penulis hanya bisa memberikan solusi mudah dan contohnya dapat dilihat pada blog ini yang hampir semua linknya jika diklik akan muncul di jendela baru/new tab, langkah yang bisa ditempuh adalah sebagai berikut :

1. Login ke blog anda

2. Klik ‘Layout/Rancangan’, ‘Edit HTML’, centang ‘Expand Template Widget’

3. Cari kode <head>

4. Tambahkan kode <base target='_blank' /> di bawahnya

5. Simpan, selesai. Maka, semua link yang ada di blog anda kalau diklik akan muncul di jendela baru

6. Selamat mencoba.

Membuat menu blog menggunakan CSS

noreply@blogger.com (La Ari) — Fri, 5 Aug 2011 00:03:00 +0700

Membuat menu blog menggunakan CSS

Sebelum dimulai, perlu diketahui bahwa untuk menempatkan kode CSS di blog yaitu harus diantara tag <head> dan </head>. Atau untuk lebih gampangnya, simpan aja di atas kode

]]></b:skin>

Untuk lebih jelasnya dan cara menyimpan kode tersebut di template blog anda ikuti langkah2 berikut :

1. Login ke Blogger lalu pilih layout kemudian edit HTML

2. Sebagai kemanan silahkan download dulu template anda

3. Ingat....Jangan kasih tanda checklist pada kotak Expand Template Widget.

4. Cari kode berikut : ]]></b:skin>

5. Kalo sudah ketemu. silahkan copy paste kode berikut di atas kode ]]></b:skin>

.menu_hor {

float:left;

padding:0;

margin:100px 70px

color:#FFFFFF;

background:#000000;

width:100%;

border:solid 1px #000000;

clear:both;

}

/*warna menu horizontal normal*/

.menu_hor a,

.menu_hor a:visited {

font-family:Arial, Helvetica, sans-serif;

font-style:normal;

font-weight:normal;

font-size:12px;

color:#FFFFFF;

background-color:#000000;

text-decoration:none;

}

.menu_hor ul {

list-style-type:none;

padding:0; margin:0;

}

.menu_hor ul li {

float:left;

position:relative;

z-index:auto !important;

z-index:1000;

border-right:solid 1px #000000;

border-left:solid 1px #000000;

}

.menu_hor ul li a {

color: #FFFFFF;

background: #000000;

float:none !important;

float:left;

display:block;

height:30px;

line-height:30px;

padding:0 10px 0 10px;

text-decoration:none;

}

.menu_hor ul li ul {

display:none;

border:none;

color: #FFFFFF;

background: #000000;

width:1px

}

.menu_hor ul li:hover a {

background-color:#FFFF00;

text-decoration:none;

color:#000000; /*warna hovering main cells*/

}

.menu_hor ul li:hover ul {

display:block;

position:absolute;

z-index:999;

top:29px;

margin-top:1px;

left:0;

}

.menu_hor ul li:hover ul li a {

display:block;

width:12em;

height:auto;

line-height:1.3em;

margin-left:-1px;

padding:5px 10px 5px 10px;

border-left:solid 1px #000000;

border-bottom: solid 1px #000000;

background-color:#0000FF;

color:#FFFFFF; /*pemberian warna subcells*/

}

.menu_hor ul li:hover ul li a:hover {

background-color:#CA0000;

text-decoration:none;

color:#FFFF00; /*warna hover pada subcells*/

}

.menu_hor ul li a:hover {

background-color:#FFFF00;

text-decoration:none;

color:#000000; /*warna hovering main cells*/

}

.menu_hor ul li a:hover ul {

display:block;

width:12em;

position:absolute;

z-index:999;

top:29px;

left:0;

}

.menu_hor ul li ul li a:visited {

background-color:#0000FF;

color:#FFFFFF; /*warna subcells keadaan normal*/

}

.menu_hor ul li a:hover ul li a {

display:block;

width:12em;

height:1px;

line-height:1.3em;

padding:4px 16px 4px 16px;

border-left:solid 1px #000000;

border-bottom: solid 1px #000000;

background-color:#0000FF;

color:#FFFFFF;

}

.menu_hor ul li a:hover ul li a:hover {

background-color:#CA0000;

text-decoration:none;

color:#FFFF00; /*warna subcells hovering mode*/

}

</style>

6. Setelah selesai copy paste nya, cari kode berikut : <div id='content-wrapper''>

7. Kalo sudah ketemu copy kode berikut di atas kode <div id='content-wrapper''>

<ul>

<li><a href='http://www.facebook.com/uma.la.ari'>Facebook</a></li>

</ul>

</div>

NB : Ganti URL ANDA dengan link yang anda maksud dan Text Anda dengan nama dari masing - masing link. Lihat Cara Membuat Link.

8. Kalo sudah selesai, save template anda, SELAMAT MENCOBA

Software Pembuat Template Blog

noreply@blogger.com (La Ari) — Fri, 20 May 2011 22:53:00 +0700

Software Pembuat Template Blog

Ada beberapa cara untuk merubah desain tampilan blog. Pertama dengan mengganti template, baik template yang disediakan blogger sendiri maupun dari pihak ketiga (yang bisa didownload dari situs-situs penyedia template gratis maupun berbayar). Kita tinggal menyimpan atau mempublish perubahan template yang telah dipilih. Tetapi jika masih kurang puas dan ingin perubahan pada bagian-bagian tertentu maka bisa dilakukan cara kedua, yaitu mengutak atik template. Caranya dengan merubah script html, css atau php-nya (bahasa pemrograman). Jika cara ini terasa sulit atau tidak ingin dipusingkan oleh bahasa pemrograman, maka ada cara ketiga yang lebih prakits, yaitu dengan menggunakan layanan pembuatan template gratis secara online. Beberapa situs yang bisa digunakan misalnya adalah Psycho,Page Column Layout, Pimp My Profile, Trix Template Generator. Di sini kita bisa lebih leluasa merancang template blog dari awal sampai akhir. Mulai dari ukuran, posisi, warna dan berbagai pernak-pernik template bisa diatur layaknya sedang melayout bebas di atas kertas kosong. Fasilitas untuk hal ini sudah tersedia dan juga mudah digunakan. Dan uniknya, begitu rancangan template kita selesai, kode html atau css-nya juga langsung tersedia secara otomatis. Kode tersebut bisa di copy langsung atau disimpan dulu ke file html (notepad).

Meskipun cara ini merupakan pilihan yang menarik, namun beberapa masalah masih bisa muncul, karena kita bekerja secara online. Koneksi internet jelas sangat berpengaruh. Yang paling menjengkelkan adalah ketika koneksi internet terganggu saat kita akan mengcopy atau menyimpan hasil akhirnya, padahal kita sudah susah merancangnya dari awal. Lantas?

Masih ada cara lain yang lebih praktis sekaligus juga aman, yaitu menggunakan software pembuat template. Misalnya dengan menggunakan Template Shaker 3.0. Software ini jauh lebih ringan (8,3 MB) dibanding Artisteer (70,3 MB). Gratis tanpa perlu keygen. Aturan pakainya hampir sama dengan Psyco dan Trix Template Generator, bedanya kita bisa bekerja secara offline. Jadi bebas dari gangguan koneksi. Kita hanya butuh online saat desain templatenya sudah selaesai dan siap untuk digunakan pada blog. Jika anda tertarik dan ingin mencoba, anda bisa download softwarenya disini.

Cara mengganti logo blogspot

noreply@blogger.com (La Ari) — Thu, 19 May 2011 13:53:00 +0700

blogspot.com memberikan kebebasan kepada para bloggernya untuk mengubah faviconnya masing-masing. Lihat perbandingan dua gambar berikut.

Yang sebelah kiri adalah favicon default di blogspot dan yang sebelah kanan adalah favicon modifikasiku. Bikinnya gampang kok. Saya akan tunjukkan kepada anda sekalian bagaimana mengganti favicon blogspot:

Persiapkan gambar untuk favicon. Anda bisa menggunakan editor gambar kesukaan untuk berkreasi. Saya menggunakan Adobe Photoshop.
Ukuran icon yang saya buat adalah 27 x 20 pixel. Menurut saya ukuran maksimal untuk tinggi icon agar terlihat proporsional adalah 30 pixel.
Simpan dengan ekstensi gif (File, Save As, File Type : gif). Ekstensi untuk favicon sebenarnya bisa dibuat dalam ekstensi gif, ico dan png. Saya pilih gif karena lebih mudah pembuatannya dan ukurannya relatif kecil, juga bisa dibuat beranimasi (tidak saya bahas sekarang)
Upload gambar ke ImageShack, Flickr atau dari Picasa dan dapatkan link direct downloadnya. Contoh yang saya pakai ada di https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6uL39xtXiRYczAnsnE1LW0o-o0WfeIs7SiLxoiOSDj3t26RC-5jpzJwEGaymvLHMroxjj6eXTAHffbAfcKo64KdZeozOwXWOOMnRuI75dFev3ABZlgcPNWiRbJgfMEiVajy_ST7AlHGy/s512/icon3c.gif
Login ke Dashboard blogspot anda, masuk ke menu Layout, Edit HTML
Tekan CTRL+F, masukkan kata: </head>, letakkan kursor anda sebelum tanda </head> tersebut
Selipkan syntax berikut :
<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6uL39xtXiRYczAnsnE1LW0o-o0WfeIs7SiLxoiOSDj3t26RC-5jpzJwEGaymvLHMroxjj6eXTAHffbAfcKo64KdZeozOwXWOOMnRuI75dFev3ABZlgcPNWiRbJgfMEiVajy_ST7AlHGy/s512/icon3c.gif' rel='shortcut icon'/> (NB: Ganti alamat https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv6uL39xtXiRYczAnsnE1LW0o-o0WfeIs7SiLxoiOSDj3t26RC-5jpzJwEGaymvLHMroxjj6eXTAHffbAfcKo64KdZeozOwXWOOMnRuI75dFev3ABZlgcPNWiRbJgfMEiVajy_ST7AlHGy/s512/icon3c.gif sesuai alamat icon anda di ImageShack)
Save Template dan lihat perubahan yang terjadi (View Blog) - Selesai

Untuk memaksa browser menampilkan favicon diatas, anda dapat menambahkan kode:

Tepat dibawah kode point no. 7.

Favicon dengan tipe file gif bisa muncul dengan baik di browser firefox, namun tidak tampak di IE. Untuk memastikan setiap icon muncul dengan konsisten, tipe file harus .ico. Silahkan kunjungi http://www.html-kit.com/favicon/ untuk membuat file .ico gratis!

Semoga bermanfaat.