Tips n' Trick Blog

Tampilkan postingan dengan label BLOG. Tampilkan semua postingan

Membuat Teks Animasi

Banyak trick yang bisa anda gunakan untuk menghiasi blog anda pada teksnya, diantaranya:
1. Marquee tools, tutorialnya ada disini.
2. Animasi text, tutorialnya ada disini.

Menambahkan Icon Pada Label Atau Category

Supaya blog anda lebih proposional dilihat oleh anda atau pengunjung, maka saya akan mencoba untuk memberi tutorial menambahkan icon pada label atau category.
Sebenarnya dalam label/category icon standarnya yaitu list style yang berbentuk bulat, tapi kali ini Saya mencoba untuk menggantinya jika ada list stylenya dan menambah jika belum ada list stylenya, caranya seperti berikut:
1. Masuk ke akun blogger anda
2. Rancangan >> Edit HTML
3. Cari kode

]]></b:skin>

4. Pastekan kode berikut sebelum kode diatas

/*Label
----------------------*/
#Label1 ul, #Label2 ul{
list-style:none;
margin:0 0 0;
padding:0 0 8px;
}
#Label1 li, #Label2 li{
background:url(http://i296.photobucket.com/albums/mm169/anasku/folder-explorer-16x16.png) no-repeat;
padding-top:0;
padding-right:0;
padding-bottom:3px;
padding-left:20px;
margin-bottom:3px;
border-bottom:1px dotted #063E3F;
line-height: 1.2em;
}

NB:Tulisan yang berwarna merah merupakan URL gambar icon. Dapat diganti sesuai keinginan anda.

Memasang Tautan

Pada kesempatan kali ini saya akan mencoba berbagi tentang cara memasang tautan atau link. Sebelumnya kita harus kenal tautan/link itu apa? Yaitu sebuah address web. Jadi guna untuk membuat tautan adalah agar kita dapat menuju sebuah address yang lain dengan hanya 1 klik. Ini sangat sering digunakan di dunia bloging. Karena sering berbagi link ke sesama. Sebelumnya ada banyak tipe cara untuk membuat tautan. Yaitu:
1. Membuat tautan standard, tutorialnya ada disini.
2. Membuat tautan di gambar, tutorialnya ada disini.
3. Membuat tautan terbuka di tab baru, tutorialnya ada disini.

Mengganti Template Blog

Pada kesempatan kali ini saya akan mencoba berbagi tentang cara mengganti dan memperindah blog template. Tentunya anda masih kurang puas dengan template standard dari blogger. Pasti anda ingin menggantinya kan? Saya akan memberikan tutorialnya. Ada beberapa cara untuk mengganti maupun memperindah tampilan template blog anda. Diantaranya sebagai berikut:
1. Mengubah template dengan perancang template, tutorialnya ada disini.
2. Mengganti template, tutorialnya ada disini.
3. Mengatur komponen template, tutorialnya ada disini.

Menghilangkan Tanggal Posting

Tanggal posting berguna untuk memeri informasi kapan postingan Anda terPublish sehingga pengunjung dapat melihatnya...Tapi jika Anda kurang menyukai tanggal posting tampak pada Blog Anda langsung saja

Masuk menu Layout kemudian masuk Edit HTML dan cari code yang mirip seperti ini di Blog Anda. (supaya lebih mudah gunakan ctrl+F)

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
}

nah jika sudah ketemu tambahkan code Css:

visibility:hidden;

kedalam Css diatas sehingga menjadi seperti

h2.date-header {
margin:.5em 0 0;
padding:0;
font-size:75%;
color:#777;
visibility:hidden;

kemudian Simpan pengaturanya..

Mengatur Jumlah Postingan

Seperti yang anda ketahui. Kalau saat halaman awal itu blogger menampilkan keseluruhan artikel yang kita posting. Dan yang apabila anda sudahmemasang label atau sudah membuat daftar isi. Otomatis sudah tidak perlu untuk menampilkan seluruh artikel kita di halaman awal. Untuk mengaturnya sebagai berikut:
Log in ke akun blogger anda >>Pengaturan >> Format,

Spoiler

di kalimat awal ada tulisan tampilkan sebanyak mungkin. Silahkan anda mengatur seberapa banyak postingan yang akan di tampilkan di laman utama.

Setelah anda mengatur jumlah postingan yang akan di tampilkan di laman utama blog anda, jangan lupa untuk klik simpan setelan.

Membuat Browser Bergerak Berputar

Sebagai contoh lihatlah perubahan pada saat anda memasuki alamat blog ini,, coba klik disini dan lihat lah apa yang terjadi
Sudah jelas Terlihat perubahan yang terjadi pada browser anda,, dengan script browser bergerak ini maka tampilan saat membuka blog anda akan semakin unik dan menarik...
Tertarik untuk membuatnya langsung saja ikuti langkah - langkah di bawah ini :
1. Log in blogger
2. Rancangan
3. Elemen Laman
4. Tambah gadget
5. HTML/Java Script
6. Pastekan kode berikut.

<script>
window.scrollBy(0, 1)
window.resizeTo(0,0)
window.moveTo(0,0)
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = "Cljck"
alert("Cljck")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script>

7. Simpan Perubahan.
8. Silahkan lihat hasilnya

Menghilangkan tanda obeng dan Tang (Quick Edit)

Dimana kita menemukan tanda Obeng dan Tang?mungkin ini pertanyaan pertama anda saat lihat postingan saya ini,,sekarang saya langsung jawab ya tanda obeng dan tang kita temukan saat kita mengedit blog kita dan melihatnya maka akan muncul tanda2 ini di setiap halaman gadget kita maksudnya supaya kita bisa langsung edit gadget kita,,untuk menghilangkan tanda tersebut ikuti langkah-langkah dibawah ini:
1. Log in ke blogger >> Rancangan >> Edit HTML >> (biasakan untuk memback up template anda)
2. Cari (gunakan ctrl+f agar lebih mudah)

]]></b:skin>

3. Pastekan script dibawah ini diatas kode no 2

.quickedit{
display:none;
}

4. Simpan template
5. Lihat hasilnya diblog anda..

Membuat News Ticker di Bagian Bawah Blog

Sudah tahu apa itu News Ticker? Jika Anda sering melihat televisi, tentu Anda sering melihatnya. Berita berjalan dibagian bawah layar televisi Anda. Apakah Anda tertarik memasangnya di blog Anda? Jika tertarik, mari ikuti tutorial berikut ini...

1. Login ke blogger
2. Klik Rancangan/Tata Letak>>Edit HTML (biasakan untuk memback up template anda)
3. Cari kode(supaya lebih mudah gunakan ctrl+F)

]]></b:skin>

4. Tambahkan kode berikut ini di atas kode no 2

#newsticker {
background-color:#ffffff;
border-bottom:2px solid #000;
border-top:2px solid #000;
bottom:0;
font-family:Verdana;
font-size:11px;
left:0;
position:fixed;
text-align:left;
width:100%;
z-index:10000;}

5. Selanjutnya cari kode(supaya lebih mudah gunakan ctrl+F)

<body>

6. Paste kode tersebut di atas kode no. 5

script feeds berjalan Anda

</div>

Silahkan ganti yang bagian berwarna merah (script feeds berjalan) dengan script artikel terbaru Anda, Anda bisa memilih diantara dua pilihan berikut ini:

Membuat Kotak Banner Iklan Berjalan

Seperti biasa Login ke Blogger >> Rancangan >> Tambah Gadget >> HTML/Java Script

lalu masukan kode di bawah ini ke dalamnya

<center><script type="text/javascript" src="http://oketrik.googlecode.com/files/crawler2.js">
</script>

<div class="marquee" id="mycrawler2" style="height:150px;">

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<a target="_blank" href="http://#"><img alt="PasangIklanoketrik" src="http://oketrik.googlecode.com/files/KotakBanneriklan.gif" border="0" /></a>

<script type="text/javascript">
marqueeInit({
uniqueid: 'mycrawler2',
style: {
'padding': '2px',
'width': '960px',
'height': '180px'
},
inc: 8,
mouse: 'cursor driven',
moveatleast: 1,
neutral: 150,
savedirection: true
});
</script></div></center>

NB:Tulisan yang berwarna merah adalah tinggi banner silahkan anda ganti sesuai keinginan, kuning dapat diganti dengan gambar banner iklan yang anda punya, hijau anda dapat mengisinya dengan alamat (URL) kontak yang bisa dihubungi untuk pemasangan iklan

Membuat Border/Warna Beda Pada Script di Posting

Caranya saat membuat atau mengedit sebuah entri klik tab Edit Entri. Lalu copy paste script di bawah yang anda inginkan ke entri tersebut.

Solid Border

<div style="border: 2px #006400 solid; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

NB : Ganti tulisan yang berwarna merah dengan postingan anda.
Tulisan yang berwarna biru adalah kode warna untuk latar border. Anda bisa menggantinya dengan warna yang anda inginkan. Untuk mengetahui kode warna saya sudah posting disini .

Ridge Border

<div style="border: 2px #006400 ridge; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Groove Border

<div style="border: 2px #006400 groove; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Inset Border

<div style="border: 2px #006400 inset; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Outset Border

<div style="border: 2px #006400 outset; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Double Border

<div style="border: 2px #006400 double; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Dotted Border

<div style="border: 2px #006400 dotted; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Dashed Border

<div style="border: 2px #006400 dashed; padding: 10px; background-color: #228AE5; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

Border dengan scroll, lebar dan tinggi

<div style="border: 2px #006400 solid; padding: 10px; background-color: #228AE5; overflow: auto; height: 50px; width: 300px; text-align: left;"> TULIS SCRIPT/KODENYA DISINI </div>

cara membuat tabel dipostingan blogspot

untuk membuat tabel hal yang harus diperhatikan adalah kode utama berikut

<table border="1" align="left"><tbody>.....</table> Kode untuk row/baris adalah <tr>..........</tr> Kode untu kolom/column adalah <td>.........</td>

contoh:

<table border="1" align="left"><tbody><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr><tr><td>isi tabel disini</td><td>isi tabel disini</td></tr></table>

isi tabel disini	isi tabel disini
isi tabel disini	isi tabel disini

Kalau ingin menambah baris dan kolom silahkan ditambahkan kembali. Kode baris yaitu

<tr>

sedangkan kode kolom yaitu

<td>

Membuat Drop Cap pada Posting

Langsung kecaranya:
1. Log in blogger >> Rancangan >> Edit HTML >> biasakan untuk memback up template anda
2. Cari kode(supaya lebih mudah gunakan ctrl+F):

.post

3. Perhatikanlah beberapa baris kode dibawahnya. Kemudian masukkan kode di bawah ini tepat di bawah tanda

}

.dropcaps {
float:left;
color:#000000; (warna huruf drop cap)
font-size:100px; (ukuran font drop cap)
line-height:80px; (tinggi huruf drop cap)
margin-top:-21px; (jarak huruf dorp cap dari atas)
margin-right:5px; (jarak huruf drop cup dari kanan paragraph)

NB:Kalimat dalam kurung adalah sebagai keterangan dari kodenya. Anda bisa rubah masing-masing pengaturan tersebut sesuai keinginan anda.
4. Simpan Template.

Lalu sekarang langsung edit entri.
1. Posting, edit entri, pilih tab edit HTML
2. Masukkan kode berikut diawal paragraf:

3. Lalu setelah huruf pertama masukkan kode berikut:

</span>

Menampilkan Data Excel di Postingan Blog

Jika anda mempunyai data excel, spreadsheet atau table, dan ingin menampilkan atau menyisipkannya di artikel postingan blog , data tersebut tidak dapat langsung kita copy paste di artikel, tetapi harus diubah dulu ke dalam format html.
Salah satu situs yang menyediakan layanan konversi data excel/ spreadsheet/ table ke dalam format HTML secara online adalah http://tableizer.journalistopia.com/
Blok data excel yang akan kita konversi, seperti contoh dibawah ini

Spoiler

• Copy, kemudian pastekan di area yang disediakan di halaman http://tableizer.journalistopia.com/

Spoiler

• Pilih ukuran huruf, jenis huruf dan warna header sesuai keinginan anda
• Kemudian klik Tableize it, sesaat kemudian kode htmlnya akan tampil.
• Silakan copy dan paste ke artikel anda.

Spoiler

Semoga bermanfaat.

Pasang Custom Cursor di Blogspot

Ada banyak script untuk memasang cursor pada blog supaya terlihat lebih atraktif dan menarik. Di posting kali ini saya akan memberikan tutorial tentang bagaimana memasang custom cursor pada blogspot, yah walaupun sudah banyak blog2 yang sudah menulis tentang ini sebelumnya... Hehehehe... tapi tak apalah awak tulis kembali ( duh bahasa mana nih... :D hehehe ) Langsung aja yup kalian ikutan langkah2 berikut ini.

Instruksi Dasar :

1. Login Blog terlebih dahulu di disini
2. Pilih Layout untuk memulai pengeditan pada Blog yang diinginkan
3. Pilih Tab Edit HTML
4. Cari kode(Gunakan ctrl+f)

]]></b:skin>

5. Letakkan script dibawah ini setelah kode diatas

Setelah script dan url cursor telah dimasukkan lalu Simpan perubahan dan bisa dilihat hasilnya :)

Contoh Cursor :

Cursor Default :

Cursor Link :

Dapatkan Cursor - cursor lucu dan menarik pada link berikut ini :

Mencegah Pembajakan Karya pada Blog

Mungkin pembajakan sudah terbiasa terjadi. Oleh karena itu pembajakan bukan hal asing bagi kita. Disini saya akan mengshare beberapa cara untuk menjaga privasi blog anda. Berikut tutorialnya.
1. Tidak boleh klik kanan, tutorialnya ada disini.
2. Tidak bisa di blok, tutorialnya ada disini.
3. Menampilkan link saat di copy paste, tutorialnya ada disini.

Mengganti Domain

Apakah anda merasa puas dengan nama domain dengan blogspot.com ??? Anda mau menggantinya dengn domain anda sendiri? Sudah banyak sekarang domain-domain yang bisa dipasang di blog anda. Seperti:
1. http://co.cc/, dengan cara memasangnya ada disini .
2.

Membuat Efek

Pasti anda menginginkan banyak tampilan efek pada blog anda. Tapi, anda tidak tau cara membuatnya. Berikut beberapa tutorial untuk memberikan efek. Diantaranya:
1. Memasang efek pada link, tutorialnya ada disini.
2. Memasang efek pada cursor, tutorialnya ada disini.
3. Memasang efek pada blog, tutorialnya ada disini.

Membuat Table

Ada beberapa macam table dalam dalam html, pilihannya sebagai berikut:
1. Membuat table dengan border tutorialnya ada disini.

2. Membuat Tabel Headers tutorialnya ada disini.

Apa itu Blog ?

Blog ( singkatan dari Web log) adalah situs yang sifatnya lebih pribadi, yaitu lebih berat kepada penggambaran dari si pembuat blog itu sendiri.

Secara garis besar, Weblog dapat dirangkum sebagai kumpulan website pribadi yang memungkinkan para pembuatnya menampilkan berbagai jenis isi pada web dengan mudah, seperti karya tulis, kumpulan link internet, dokumen-dokumen(file-file WOrd,PDF,dll), gambar ataupun multimedia.

Para pembuat blog dinamakan Blogger. Melalui Blognya, kepribadian Blogger menjadi mudah dikenali berdasarkan topik apa yang disukai, apa tanggapan terhadap link-link yang di pilih dan isu-isu didalamnya. Oleh karena itu Blog bersifat sangat personal.

Perkembangan lain dari Blog yaitu ketika Blog memuat tulisan tentang apa yang seorang Blogger pikirkan, rasakan, hingga apa yang dia lakukan sehari-hari. Blog kemudian juga menjadi Diary Online yang berada di Internet. Satu-satunya hal yang membedakan Blog dari Diary atau Jurnal yang biasa kita miliki adalah bahwa Blog dibuat untuk dibaca orang lain.

Blog dibuat oleh para desaigner penyedia blog agar bekerja secara otomatis dan mudah untuk dioperasikan , jadi bagi kita-kita yang masih bingung dengan bahasa pemrograman untuk membuat sebuah website tidak jadi persoalan. Apabila anda sudah bisa membuat sebuah account email di internet, maka dalam membuat blog pun saya yakin anda bisa.
Berikut adalah penyedia layanan gratis untuk membuat blog, yaitu:
Blogger dengan menggunakan domain "namablog.blogspot.com"
Wordpress dengan menggunakan domain "namablog.wordpress.com"
blogsome dengan menggunakan domain "namablog.blogsome.com"
Ngeblog dengan menggunakan domain "namablog.ngeblogs.info"
Blog dengan menggunakan domain "namablog.blog.com"
blogdrive dengan menggunakan domain "http://namablog.blogdrive.com/ "

Membuat dan Mempublikasikan Entri

1. Klik posting, lalu keluar tampilan posting, entri baru

Spoiler

Isi blog anda sesuai dengan materi yang anda inginkan. Blog ini tidak hanya bisa di isi dengan tulisan. Tetapi dapat diisi yg lain.

2. Setelah selesai klik simpan sebagai konsep, klik terbitkan entri.

Langganan: Postingan ( Atom )

Tips n' Trick Blog

Search

Contact Me

Followers

Membuat Teks Animasi

Menambahkan Icon Pada Label Atau Category

Memasang Tautan

Mengganti Template Blog

Menghilangkan Tanggal Posting

Mengatur Jumlah Postingan

Membuat Browser Bergerak Berputar

Menghilangkan tanda obeng dan Tang (Quick Edit)

Membuat News Ticker di Bagian Bawah Blog

Membuat Kotak Banner Iklan Berjalan

Membuat Border/Warna Beda Pada Script di Posting

Membuat Drop Cap pada Posting

Menampilkan Data Excel di Postingan Blog

Pasang Custom Cursor di Blogspot

Mencegah Pembajakan Karya pada Blog

Mengganti Domain

Membuat Efek

Membuat Table

Apa itu Blog ?

Membuat dan Mempublikasikan Entri

Statistic

Exchange Link

Search

Contact Me

Followers

Statistic

Exchange Link

Subscribe