TIK ITU ASIK: Blog Triks

Showing posts with label Blog Triks. Show all posts

Membuat scroll di postingan

Halo para sobat bloger jumpa lagi di postingan baru Blogger Tutorial, kali ini saya akan kasih tau para sobat blogger yang pingin di dalam postingan ada scrollnya, buat mengirit-ngirit tempat posting.

wah bagus juga yaaaa....????? kalo di dalam posting ada scrollbarnya kalo para sobat pingin dan penasaran, langsung aja ajarin ajarin caranya cukup gampang ko' dan ga banyak copy paste disana sini

Oke para sobat seperti biasa login dulu ke blog para sobat

Klik Tata Letak edit HTML
Beri tanda centang pada "Expand Template Widget" yang ada di pojok kanan
Kemudian Carai code berikut ]]></b:skin> copy dan letakkan code di bahwah ini tepat di atas ]]></b:skin> :

.scrollbox {
height:150px;
width:450px;
overflow:auto;
}

Lihat text yang berwarna kunig itu adalah ukuran scrollbar. para sobat bisa menggantinya dengan ukuran yang para sobat inginkan. lalu simpan template

pada saat para sobat posting, letakkan isi posting yang akan di scrollbar di antara code <div class="scrollbox"> dan </div>

Contohnya adalah sebagai berikut.
<div class="scrollbox">
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat,nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
nah disini isi postingan para sobat, nah disini isi postingan para sobat,
</div>

Selamat mencoba, semoga bermanfaat, n jangan lipa comennya ok

Kang Fathur

Cara Membuat/Memasang Tombol Google +1 di Blogger/Blogspot

Blog Triks Blogger Tutorial Tips Blogger Tips Trik Blog Widget

Seperti yang telah ramai diberitakan di dunia internet, Google telah membuat satu fitur baru:" Official Google +1 Button" yang merupakan tool bagi pengunjung blog/web serta search engine untuk memberikan "voting" bagi sebuah halaman blog/web yang menurutnya memiliki nilai (value) manfaat yang besar. Menurut Google, +1 Button juga memberikan referensi dan rekomendasi bagi Google dalam menentukan peringkat suatu halaman web di search engine (SERPs). Oleh karena itu, memasang tombol +1 Google bisa menjadi salah satu alternatif bagi pemilik blog/web untuk meningkatkan SEO blog/web tersebut. Meskipun saat ini fitur Google +1 baru muncul di domain google.com, namun memasangnya mulai sekarang tidak ada salahnya, karena di domain tersebut pun semua website di berbagai belahan dunia juga diperhitungkan, apalagi jika nanti fitur ini juga muncul di domain google.co.id, pasti lebih bermanfaat dan berkali lipat efeknya terhadap SEO dan SERPs.

Cara memasang Tombol +1 Google di Blogger/Blogspot:
Untuk template blogger yang default atau secara official merupakan bawaan blogger, fitur ini dapat dibuat dengan mudah melalui halaman page elements/edit gadget, karena fitur ini sudah secara resmi ditambahkan ke Blogger. Perhatikan gambar berikut:

Tombol +1 Google dapat dengan mudah ditampilkan dengan mencentang "Show Share Button". Masuk ke dashboard > design/rancangan > kemudian klik "edit post " di bagian badan template dan akan tampil pop up window seperti gambar di atas.

Namun, bagi template yang sudah dimodifikasi dan bukan default template, fitur "share button" biasanya telah dihapus. Oleh karena itu diperlukan editing template HTML untuk menambahkan fitur/tombol +1 Google tersebut.

Secara official, ada 4 jenis button atau tombol Google +1:

Besar (tall)

Standar

Medium

Small

Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"
Copy kode berikut dan paste tepat SEBELUM kode </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
Copy kode berikut:


<b:if cond='data:blog.pageType == "item"'>
<div class='post-share-buttons' style='float:right;padding:4px;'>
<g:plusone size="standard"></g:plusone>
</div>
</b:if>


Kostumisasi Tombol Google +1:
- Ganti standard dengan tall, medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.
- Ganti right dengan left jika ingin button/tombol berada di sisi kiri.
- Kode berwarna biru akan menampilkan tombol hanya ketika halaman posting dibuka. Jika anda menggunakan auto readmore, maka tombol tersebut tidak akan muncul di post summary, sehingga tampilan post summary tidak akan rusak. Jika anda tidak menggunakan auto readmore atau menggunakan readmore tapi tetap ingin menampilkannya di post summary, hapus kode biru tersebut.
Jika ingin memasang button di bagian bawah posting, cari <div class="post-header-line-1"> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya. Jika kode tersebut tidak ketemu, letakkan kode di ATAS <data:post.body>.
Jika ingin memasang button di bagian bawah posting, cari <data:post.body> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.
Save template.

Kang Fathur

Cara Mengganti Icon Pada Adress Bar

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Ada salah satu sobat yang bertanya melalui komentar "kang fatur gimana cara mengganti icon pada adress bar kaya yang punya kang fatur". OK untuk sobat raa_cassie mungkin ini jawaban dari saya, mudah-mudahan bisa membantu

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :

Bagi sobat yang tidak puas dengan icon/gambar tersebut, sobat bisa menggantinya dengan gambar sesuai dengan keinginan kita. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....

masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYXV-70J6SPqy5CyYmsgrL05NVDLZbt3cXoveCNC7zTLDGylLPvZPfWPT1AZRwNFZyVaV3YwiyMnHI2covsCysRTWebL7N0KJSzsaQzik93cle27677irdrVpvSYzRDUzY9fmtWmq0Zwg/s1600/Title+Bar.gif' rel='shortcut icon'/>

Ganti huruf yang dicetak tebal dan merah dengan lokasi gambar dimana sobat menyimpannya. Sobat bisa menyimpan gambarnya di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo sobat tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

http://img87.imageshack.us/img87/5862/image1an1.gif

http://img110.imageshack.us/img110/6218/image2ie0.gif

http://img98.imageshack.us/img98/9617/image3cr0.gif

http://img134.imageshack.us/img134/633/image4hx4.gif

http://img139.imageshack.us/img139/83/image5oa7.gif

http://img509.imageshack.us/img509/6449/image6fu0.gif

http://img527.imageshack.us/img527/6543/image7go9.gif

http://img507.imageshack.us/img507/5774/image8wn8.gif

http://img150.imageshack.us/img150/5784/image9qo1.gif

http://img404.imageshack.us/img404/1214/image10vr1.gif

http://img412.imageshack.us/img412/3808/image11pc0.gif

http://img100.imageshack.us/img100/4658/image12du2.gif

http://img132.imageshack.us/img132/4733/image13lj1.gif

http://img145.imageshack.us/img145/7793/image14zg9.gif

http://img412.imageshack.us/img412/4403/image15jc7.gif

http://img264.imageshack.us/img264/7575/image16kn8.gif

Selamat mencoba....

Kang Fathur

Efek Opening Aneh

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Hahahah... kayak ga ada nama yang lain aja buat efek pembuka yang satu ini ! btw karena sudah bingung buat kasih namanya, terpaksa saya kasih nama n'tu ajah.....
setelah kang fatur posting Membuat Efek Roaming Windows akhirnya kangfatur buat lagi nie yang judulnya pake aneh, Kenapa diblang aneh yaa karena membuat Jendela kita menjadi mondar mandir kaya yang lagi pusing hehe. Okay... , jika para sobat tertarik, silahkan ikuti langkah-langkah berikut :

1. Sign in ke account blogger sobat
2. Pergi ke Layout | Page Elements tab untuk blog Sobat
3. Klik "Tambah Gadget" link yang muncul di sidebar tata letak Sobat untuk menambahkan script
4. Sobat akan melihat jendela popup dengan semua jenis Gadgets yang dapat ditambahkan ke blog Sobat.
5. Klik pada "HTML / JavaScript" gadget

Kemudian Copast(Copy paste) kode dibawah ini :

<script>
//Edited by Andreas fafandreo at october'2008
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)
{
c=c-16
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
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>

Setelah sobat paste kode diatas, silahkan sobat klik tombol Save/simpan o.k?
Jangan lupa, karena kita menginginkan agar gadget ini beraksi pada saat awal halaman dibuka, maka letakkan gadget ini pada posisi PALING ATAS !! baik pada side bar maupun tempat gadget lainnya o.K?
Dan lihat hasilnya !! hehehe... kalian dapet opening yang bikin dag-dig-dug pengunjung !!
Mudah bukan ?

Kalau sudah dipasang... silahkan anda bagikan ilmu ini pada teman-teman yang membutuhkan, Jangan pelit ya ?

Selamat mencoba !!

Kang Fathur

Menghilangkan Navbar Blogspot

Blog Triks Blogger Blogger Tutorial Tips Blogger Tutorial Blog

Sobat Monik mengajukan pertanyaan yang di tulis melalui shoutMix di Blog Kang Fatur yang ini. Beliau menanyakan bagaimana cara menghilangkan Navbar Blogger, dan kali ini saya akan mencoba membahasnya. Apa itu Navbar Blogger? navbar blogger adalah suatu frame yang berukuran kecil miliknya blogger yang terdapat di bagian atas blog. frame ini berfungsi untuk login ke blogger atau bisa juga sebagai jalan untuk melihat blog lain atau bisa juga untuk menandai blog yang sekiranya melanggar TOS blogger seperti blog yang mengandung unsur SARA ataupun pornografi untuk dilaporkan ke pihak blogger.

Apakah kita bisa menghilangkan Navbar Blogger? jika pertanyaannya seperti itu maka tentu jawabanya adalah bisa, akan tetapi sebelum menghilangkan navbar tersebut ada baiknya sobat berfikir-fikir dahulu dan silahkan baca TOS blogger secara seksama, karena resiko yang akan di pikul sangatlah berat yaitu akan di tutupnya account blogger sobat atau dengan kata lain sobat akan kehilangan blog kesayanangannya. Lumayan mengerikan bukan? memang beberapa waktu yang lalu tersiar kabar bahwa pernah ada yang menanyakan ke pihak blogger apakah boleh menghilangkan navbar blogger atau tidak? dan katanya sekarang pihak blogger membolehkan untuk menghapus navbar, tapi entahlah apakah berita tersebut benar atau tidak yang jelas sobat harus selalu membaca TOS secara seksama.

Masih bersikeras untuk menghilangkan navbar blogger? jika masih akan saya beritahu, akan tetapi resiko di tanggung masing-masing, saya tidak bertanggung jawab jika di kemudian hari terjadi sesuatu dengan blog sobat.

Untuk menghilangkan navbar blogger, sobat tinggal menambahkan kode di bawah ini pada style sheet CSS :

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Atau bisa juga menaruh kode berikut persis di bawah kode <body> :
<style type='text/css'>
#navbar-iframe {display:none;}
</style>

Mau pilih yang mana? keduanya mempunyai fungsi yang sama yaitu menghilangkan navbar blogger. Masih bingung juga dalam pemasangan kode di atas? silahkan ikuti langkah-langkah berikut ini :

Untuk template klasik

1. Sign in di blogger
2. Klik menu Template
3. Klik menu Edit HTML
4. Copy seluruh kode yang ada lalu save di komputer sobat sebagai backup data agar aman
5. Copy kode berikut lalu paste di atas kode </style>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

Klik tombol Simpan Perubahan Template
Selesai.

Untuk template baru

1. Sign in di blogger
2. Klik menu Layout
3. Klik menu Edit HTML
4. Klik link bertuliskan Download Template Seluruhnya, silahkan save dulu untuk backup data
5. Copy kode berikut lalu paste di atas kode ]]></b:skin>

/* hilangkan navbar
----------------------------- */

#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}

6. Klik tombol Simpan Template
7. Selesai.

Selamat menikmati blog tanpa Navbar, semoga bermanfaat.

Kang Fathur