[Blog Tips & Tricks] Save page as PDF [Indonesian Version]

Apakah anda pernah melihat sebuah blog yang menyediakan widget simpan sebagai PDF di blog nya,menurut saya hal ini sangat menarik untuk dicoba,karena selain memperindah halaman blog juga memudahkan pengunjung untuk menyimpan halaman blog kita.tentu pengujung juga merasa dimudahkan dengan layanan ini,”tamu adalah raja” itulah kata pepatah,selain itu traffic blog anda juga akan naik.bagaimana apakah anda ingin membuatnya.

Jika anda tertarik untuk membuatnya silahkan ikuti tutorial berikut:

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode <data:post.body/>

5.Lalu Copy Kode berikut dan Pastekan dibawah kode <data:post.body/>

6.Lalu Simpan Template Sobat

7.Selesai

Silahkan lihat Blog Sobat masing-masing untuk melihat hasilnya

Note:Selain itu Sobat juga bisa mengeditnya atau memperindahnya seperti pada blog saya ini,jika ingin seperti blog saya ini berikut kodenya:

rgb(153, 153, 153);
overflow: auto;
width: 582px;
height: 110px;
text-align: center; ">

rgb(255, 255, 255);font-size:100%;">Gunakan tombol diatas untuk menyimpan halaman ini menjadi format PDF, agar hasil penyimpanan maksimal. Setelah tombol disamping di-klik, akan terbuka jendela baru, dan tunggu beberapa saat, akan ada konfirmasi letak penyimpanan file PDF di komputer yang anda gunakan

 

SUMBER:

http://blogkomputers.blogspot.com

[Blog Tips & Tricks] Membuat Buku Tamu Tersembunyi

Hallo semuanya
kita jumpa lagi,sebelumnya saya mau mengucapkan semoga sahabat semua dalam keadaan
baik-baik saja,baiklah tidak usah basa-basi
lagi,kita langsung saja pada pokok
masalah.sebenarnya saya bingung dengan judul kali ini yaitu “Membuat Buku Tamu Tersembunyi”,apa
maksudnya ya,Untuk lebih memudahkan pemahaman anda coba klik link berikut

 dan
terlihat di pojok kanan ada
widget Buku tamu jika anda klik
tab warna hijau tersebut,maka Buku Tamunya akan tertarik
keluar,lebih baik anda artikan sendiri
apa maksudnya deh ya sob.Untuk
Membuat hal seperti itu sebenarnya
caranya sangat mudah kok,untuk lebih ngerti lebih
baik ikuti aja trik berikut
ini sampai akhir,dan tolong berikan komentar anda.OK

Berikut langkah-langkahnya



1. Login
di blogger dengan ID anda



2. Klik menu Layout



3. Klik Page Elements



4. Klik Add a Page Element



5. Klik ADD TO BLOG pada menu HTML



6.Lalu Copy kode berikut dan Pastekan
Pada kotak HTML

<style type="text/css">

#gb{

position:fixed;

top:50px;

z-index:+1000;

}

* html #gb{position:relative;}



.gbtab{

height:100px;

width:30px;

float:left;

cursor:pointer;

background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOXCv-W2tEhnRDRGpK9j7Tn3-s3_-cjHNQFB5zaR2NAhUrv1smSW464sSrNuvKCqSi46gGZGsAN2PabrrcXHxNsAYrcYfnRdJ2gqcf67Ot7DhtgHbJDprUue14995MHmqK58wdtZN2R6FM/')
no-repeat;

}

.gbcontent{

float:left;

border:2px solid #A5BD51;

background:#F5F5F5;

padding:10px;

}

</style>



<script type="text/javascript">

function showHideGB(){

var gb = document.getElementById("gb");

var w = gb.offsetWidth;

gb.opened ? moveGB(0, 30-w)
: moveGB(20-w, 0);

gb.opened = !gb.opened;

}

function moveGB(x0, xf){

var gb = document.getElementById("gb");

var dx = Math.abs(x0-xf) > 10 ? 5 : 1;

var dir = xf>x0 ? 1 :
-1;

var x = x0 + dx * dir;

gb.style.right = x.toString()
+ "px";

if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")",
10);}

}

</script>



<div id="gb">



<div class="gbtab" onclick="showHideGB()"> </div>



<div class="gbcontent">



< Letakkan disini kode Shoutbox Anda>

<div style="text-align:right">

<a
href="http://blogkomputers.blogspot.com/2009/07/membuat-buku-tamu-tersembunyi.html">

[blogkomputers]

</a>|<a href="javascript:showHideGB()">

[tutup]

</a>

</div>



</div>







<script type="text/javascript">

var gb = document.getElementById("gb");

gb.style.right = (30-gb.offsetWidth).toString() + "px";

</script></div>

7.Save Widget tersebut.



Jika langkah tersebut
sudah anda lakukan,anda dapat
melihat hasilnya pada blog anda
masing-masing



Jika ada pertanyaan,Silahkan
tanyakan pada komentar Blog ini



Thank’s To Infotentangblog

 

SUMBER:

[Blog Tips & Tricks] Membuat Fixed Footer

Sebelum memulai Trik ini Untuk Lebih
memudahkan dalam memahami trik berikut ini,silahkan alihkan pandangan kalian
pada bagian bawah blog ini,itu yang namanya Fixed Footer,yang dapat
keatas dan kebawah mengikuti layar browser sobat,jika dilihat-lihat hal itu
cukup menarik dan patut untuk dicoba,Selain Itu Fixed Footer ini juga dapat
menyimpan Widget-Widget Peringkat,{menghemat tempat sekaligus terlihat
indahkan],gimana apa kalian ingin membuat Fixed Footer,kalau begitu kita
belajar sama-sama ajaya,untuk memudah Fixed Footer sangat mudahkok cukup
ikuti trik berikut sampai akhir dan beri komentarmu,Ohya kalau ingin lebih
jalasnya Lihat dulu Screenshoot nya berikut ini.

Membuatnya sangat mudah kok,ikuti aja terus trik berikut:



1.Login ke blogger dengan ID anda



2.Lalu Klik Menu Templates



3.Klik Sub Menu Edit HTML



4.Pada Kotak Edit HTML cari Kode ]]>





5.Lalu Copy Kode berikut dan Pastekan diatas kode ]]>

#footer img {
/* margin: 0px 0px -8px 0px; */
vertical-align: middle;
}
#footer p.info {
float: right;
padding-right:40px;
line-height: 1.2;
height: 100%;
vertical-align: bottom;
}
#footer p {
float: left;
margin: 0px;
padding-top:4px;
padding-left:40px;
vertical-align: bottom;
line-height: 1.2;
}
#footer a {
color: #333;
}
#footer {
align: center;
position: fixed;
border-top: 1px solid #ddd;
border-bottom: 5px solid #f5f5f5;
background-color: #f5f5f5;
width: 100%;
left: 0px;
text-align: left;
color: #888;
font-family: Verdana;
font-size: 11px;
z-index:10000;
opacity: 0.9;
filter: alpha(opacity: 90);
bottom:0;
}

6.Lalu cari Kode dan pastekan
Kode berikut diatas kode

  BlogKomputers's Blog © 2008-2009 

Powered by Blogger | Template by Template 4 U
Best viewed in Mozilla Firefox.

Silahkan
Edit Kode tersebut Supaya sesuai Dengan Blog Sobat masing-masing,ohya jangan
lupa koment ya Sob!!!

SUMBER:
http://blogkomputers.blogspot.com

[Tips & Tricks] Membuat Border Warna Beda Pada Script di Posting

Border berwarna dan jenis-jenis garis bordernya

» Solid Border

2px #006400 solid; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Ridge Border

2px #006400 ridge; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Groove Border

2px #006400 groove; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Inset Border

2px #006400 inset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Outset Border

2px #006400 outset; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Double Border

2px #006400 double; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Dotted Border

2px #006400 dotted; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

» Dashed Border

2px #006400 dashed; padding: 10px; background-color: #c3fdb8; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

Border dengan scroll, lebar dan tinggi

height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI

Silahkan anda pelajari kode-kode yang diberi warna berbeda.

Sumber:
http://www.bi2t.com/2009/03/membuat-border-warna-beda-pada-script.html

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

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

TULIS SCRIPT/KODENYA DISINI

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

Memasang Musik Player Pada Blog

A
pakah anda seorang penggemar musik,ingin selalu mendengar musik,dari Komputer,Handphone,atau dari MP3 Player,.a’ha itu sudah biasa,bagaimana kalau mencoba mendengarkan lagu dari blog,udah coba belum.

Dengan memasang Musik Player diblog anda,maka blog anda serasa akan hidup,anda bisa langsung mendengarkan lagu kesayangan anda,tidak cuman anda,pengunjung pun juga bisa menikmatinya.Widget ini sangat berguna bagi Blog yang berhubungan dengan Musik.

Kali ini kita akan menggunakan widget dari Musik-live.net [screenshoot-nya seperti ini]



1.Buka browser anda dan ketikan http://www.musik-live.net/

2.Lalu klik Skin Mp3 Player

3.Pilih Skin/tampilan yang anda inginkan,klik Preview skin untuk melihat tampilannya

4.Copy kodenya

5.Masuk ke Blogger dengan ID anda

6.Klik menu Layout -> Page Elements

7.Klik add widget template

8.Pilih HTML/Javascript

9.Pastekan pada kota HTML/Javascript

10.Save,selesai

Note:Ohya pada cara diatas lagu yang muncul adalah lagu yang sudah disediakan,jika anda ingin memilih sendiri lagu yang ingin ditampilkan berikut caranya:

1. Pada halaman depan Musik-Live, cari lagu favorit anda dengan kotak pencari.

2. Lalu klik Play & Embed code untuk menampilkan kodenya

3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda.

4. Selesai

Note: Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

Cara memasang musik player dari eSnips akan dibahas pada postingan selanjutnya

Jika anda orang baik tinggalkan komentar untuk kedewasaan blog ini,thank’s

A
pakah anda pernah melihat sebuah blog yang menyediakan widget simpan sebagai PDF di blog nya,menurut saya hal ini sangat menarik untuk dicoba,karena selain memperindah halaman blog juga memudahkan pengunjung untuk menyimpan halaman blog kita.tentu pengujung juga merasa dimudahkan dengan layanan ini,”tamu adalah raja” itulah kata pepatah,selain itu traffic blog anda juga akan naik.bagaimana apakah anda ingin membuatnya.


Jika anda tertarik untuk membuatnya silahkan ikuti tutorial berikut:

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode

5.Lalu Copy Kode berikut dan Pastekan dibawah kode

6.Lalu Simpan Template Sobat

7.Selesai

Silahkan lihat Blog Sobat masing-masing untuk melihat hasilnya

Note:Selain itu Sobat juga bisa mengeditnya atau memperindahnya seperti pada blog saya ini,jika ingin seperti blog saya ini berikut kodenya:

overflow: auto;

width: 582px;

height: 110px;

text-align: center; ">

Gunakan tombol diatas untuk menyimpan halaman ini menjadi format PDF, agar hasil penyimpanan maksimal. Setelah tombol disamping di-klik, akan terbuka jendela baru, dan tunggu beberapa saat, akan ada konfirmasi letak penyimpanan file PDF di komputer yang anda gunakan

 

[Tips & Tricks] Membuat Menu Vertikal (Vertical)

Sebelumnya kita pernah membahas tentang membuat menu horizontal, nha sekarang mari kita mencoba membuat menu vertikal. Menu vertikal ini cocok kalau dipasang di sidebar karena bentuknya berjajar sevara vertikal (ya iyalah). Contohnya seperti gambar disamping itu. Beginilah cara membuatnya :

1. Login ke blogger trus pilih "Layout-->Edit HTML"
2. Masukkan kode berikut sebelum kode ]]> atau sebelum kode . Pokoknya ditaruh di dalam Barisan kode CSS deh.

.glossymenu, .glossymenu li ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 185px; /*WIDTH OF MAIN MENU ITEMS*/
border: 1px solid black;
}
.glossymenu li{
position: relative;
}
.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/blue1.gif') repeat-x bottom left;
font: bold 12px Verdana, Helvetica, sans-serif;
color: white;
display: block;
width: auto;
padding: 5px 0;
padding-left: 10px;
text-decoration: none;
}
.glossymenu li ul{
position: absolute;
width: 190px;
left: 0;
top: 0;
display: none;
}
.glossymenu li ul li{
float: left;
}
.glossymenu li ul a{
width: 180px;
}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;
}
.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/blue2.gif');
}

* html .glossymenu li { float: left; height: 1%; }
* html .glossymenu li a { height: 1%; }

Untuk memilih warna menu, perhatikan kode2 yang berwarna merah (blue1.gif dan blue2.gif). Ganti kode tersebut dengan pilihan warna dibawah ini. Misal jika kamu ingin memilih menu warna merah maka kodenya menjadi seperti ini :

.glossymenu li a{
background: white url('http://kendhin.890m.com/blog/vertical/red1.gif') repeat-x bottom left;

dan

.glossymenu li a:hover{
background-image: url('http://kendhin.890m.com/blog/vertical/red1.gif'); 

Pilihan Warna menu vertikal :

	blue1.gif blue2.gif
	green1.gif green2.gif
	red1.gif red2.gif
	pink1.gif pink2.gif
	black1.gif black2.gif

3. Kemudian di save.
4. Lalu pergi ke menu "Page Elements"
5. Pilih "Add a Gadget -->HTML/JavaScript" kemudian masukkan kode berikut kedalamnya:

• Home
• http://trik-tips.blogspot.com
">Trik Blog
• http://x-template.blogspot.com
" >Free Template
• http://getebook.co.cc
">Free Ebook

 Kode yang berwarna merah adalah linknya dan yg warna biru adalah teks yang ditampilkan. Kalau mau menambahkan menu tingal buat lagi kode seperti yg berkedip2 dibawahnya.
Dah gitu aja. Gampang kan???? :D