20.1.12
36

Cara memasang facebook like pada post blogspot otomatis

post kang bagas96 5:24 AM
20 januari 2012 wah tidak terasa sudah hampir berlalu bulan pertama di tahun 2012 rasanya sangatlah cepat waktu berlalu (read: apa saya yang lelet yak ahehe) sampe-sampe eh salah ejaan kayaknya sampai-sampai kang bagas belum pernah menerbitkan 1 postingpun di blog dot wapinfo dot us pada bulan januari (read: padahal sudah jadi kebiasaan post sebulan sekali) saking lamanya tidak update banyak sohib-sohib juga yang menanyakan perihal tersebut, dan penjelasan saya sama maleeeeeeeeesss (tanya: wah ko bisa males kang?) jawabannya karena pertengahan januari kang bagas sudah tidak menikmati internet gratis lagi jadi rada-rada itung-itungan antara broswing di internet sama broswing di real buat nyari napkah tentunya hehehe.. Kembali ke paketpun rasanya tidak berkecukupan semua serba tersendat (read: maklum blogger tidak punya modal ngandelin gratisan ahehe) jadi buat sobat yang mungkin punya gratisan internet tsel 20 januari 2012 via operamini agar di share supaya kang bagas bisa bernapas dengan lega lagi hehe... (read: heum itung-itung setor kata kunci buat mbah google ahehe dan yang masuk nanya mbah google pasti kesel kecewa marah karena tidak mendapatkan info yang di cari malah artikel sampah ini hehe) Eh ko yang di judul cara menampilkan facebook like ko malah ngomongin internet gratis hehe kayaknya tidak nyambung banget dengan judul artikel hehe ya sudah sekarang ke pokok pembahasan menampilkan button like facebook pada posting blog, seperti biasanya kang bagas hanya memberi info secara garis besarnya saja (read: biasa tidak pandai merangkai kata gan hehehe) langkah pertama siapkan secangkir kopi+ roko dan roti bakar kalau ada (ini untuk bloggerboy) kalau untuk bloggergirl cukup siapkan kompresan saja karena biasanya kalau membahas script jawabannya Pusing lihatnya hehe tapi tenang saja yang ini sangat sederhana saja tadi cuman lebai saja soalnya kang bagas benar-benar pengen iseng hehe sedikit penjelasan tentang pungsi facebook like yang akan kang bagas share yaitu Memasang facebook like di posting blog yang nantinya dapat menjadi tolok ukur bagi blogger untuk mengetahui respon pengunjung selain dari comment (itutuh tiap di klick ada jumlah angkanya kalau gada yang klick ya klik sendiri aja he). Selain itu memasang ataumembuat tombol facebook like secara otomatis juga akan mengirim url yang disukai pengunjung ke dinding facebook nya. Ini juga menjadi keuntungan tersendiri, karena publikasi artikel posting dapat menjangkau area yang lebih luas. Hack widget ini akan memunculkan Facebook Like Button di setiap posting Blog Blogger sobat . Ada beberapa jenis Facebook like button dan juga pungsinya. Di antaranya ketika mengklick (read: aduh tidak enak banget kalimatnya tapi ini yang paking pas he) lanutan ketika mengklik pada saat membuka posting maka pada saat membuka posting lain tampilan facebook like masih sama jumlahnya alias 1 klik untuk semua artikel dan hasil pada dinding facebookpun contoh bagas sembilan enam menyukai www.blog.wapinfo.us rasanya kurang sempurna karena kita tidak tahu post yang mana yang paling di sukai tapi tenang aja itu hanya berlaku untuk button like standar yang di sediakan facebook kali ini kang bagas akan share fb like yang sudah di sesuaikan untuk blogger jadi tiap di klik jumlah di tiap postnya akan berbeda begitupn hasil share ke dinding akan menampilkan uraian judul post dan ketika di kunjungi langsung mengarah ke link post blog.. Untuk kodenya silahkan copy yang ini menampilkan fb like layout standar/ tampilan penuh dengan menampilkan nama-nama yang melike post:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=standard&amp; show_faces=false&amp;width=90&amp; action=like&amp;font=arial&amp; colorscheme=light&amp;height=25&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:145px; height:55px;'/> </b:if>
Copy paste script yang ini menampilkan fb like layout button count/ tampilan hanya button like + jumlah klik saja:
<b:if cond='data:blog.pageType == &quot;item&quot;'> <iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;send=false&amp;layout=button_count&amp; show_faces=false&amp;width=90&amp; action=like&amp;font=arial&amp; colorscheme=light&amp;height=25&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:145px; height:55px;'/> </b:if>
Copy paste script dan untuk meletakan kodenya sobat bisa memasang di bawah kode <data:post.body/> dan selanjutnya save template dan silahkan untuk mencoba tutorial di atas jika ada galat atau parse kode yang salah saat upload template tuliskan komentar agar saya cepat-cepat memperbaikinya terimakasih
22.8.11
47

Memasang logo blog menggunakan images atau gambar pada header

post kang bagas96 1:49 AM
Posting lagi yuk, berhubung kang bagas96 lagi ada waktu luang jadi sempet nih buat nulis artikel dan kali ini saya akan memberi info ringan cara mengganti header text menjadi header bergambar/ logo blog images yang sempat di rekues sobat kang bagas dan kali ini saya share cara yang sederhana saja

Dan untuk caranya biasa edit css pada bagian html template dan cari kode berikut

#header-wrapper {
margin:0 auto;
color:#090;
background-color: #070;
font-weight:normal;
line-height:30px;
}

#header-inner {
background-position: left;
margin-left: auto;
margin-right: auto;
}

#header {
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:3px 3px 0;
padding:3px 5px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-weight:normal;
display:none;
color:#ff0;}

#header a {
color:#ff0;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 3px 3px;
padding:0 5px 3px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1em;
font: $descriptionfont;
color: #fff;
}

Cari kode yang berwarna merah yaitu
#header h1 dan #header .description
jika sudah ketemu tambahkan kode ini display: none
contoh

#header {
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:3px 3px 0;
padding:3px 5px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font-weight:normal;
color:#ff0;
display:none;}

#header a {
color:#ff0;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 3px 3px;
padding:0 5px 3px;
text-transform:normal;
letter-spacing:.2em;
line-height: 1em;
font: $descriptionfont;
color: #fff;
display:none; }


jika sudah tinggal save dan upload ulang sementara nanti hasilnya pada header tidak nampak judul dan descripsi blog dan langkah terakhir yaitu menambahkan logo gambar pada header

1. Login blog
2. Masuk rancangan/tataletak
3. Pada bagian rancangan lihat ada gadget header misal 'kang bagas96 (header)' dan pada sisi kanannya ada link EDIT
klik link tersebut dan akan ada menu unggah/upload gambar bisa langsung upload dari drive mmc sobat atau lewat url

tinggal sobat pilih saja jika tidak memiliki url gambar sebelumnya saya sarankan untuk memilih yang upload saja

jika sudah di upload akan muncul gambar yang sobat pilih dan terakhir simpan maka proses pembuatan logo blog header menggunakan gambar sudah berhasil dan tinggal sobat lihat hasilnya

21.8.11
30

Cara merubah menu navigasi part 1

post kang bagas96 4:15 AM
Untuk kali ini kang bagas96 menulis tutorial cara merubah navigasi blog mobile autowindow part 1 di karenakan banyak tutorialnya untuk menegtahui kode css dan html sebuah navigasi blog (itutuh yang setelah header kaya beranda, blog dan lain-lain)

Langsung saja untuk template autowindow cari kode css ini

.navigasi {background:transparent; width:100%;margin:0 auto; padding-top:-1px;}

.menunavigasi{ height:20px; background-color: #ff9;
color: #000;max-width: 100%; border-bottom:4px solid #33C;}

.menunavigasi ul{
margin: 0; padding-left:0px;
font: normal 12px Arial;color:#cccccc;text-transform:none;
list-style-type: none; letter-spacing:.01em;
}

.menunavigasi li{
display: inline; margin: 0;
}

.menunavigasi li a{
font-size:12px;
float: left;
display: block;
text-decoration:none;
padding: 4px 4px;
color: #111;
}

.menunavigasi li a:visited{color:#fff;
background:#33C;
font-size:10px;
font-weight: bold;}

.menunavigasi li a:hover { color:#111;text-decoration:none; /*Background Setelah Pointer Diarahkan */
}

.menunavigasi li.selected a {-moz-border- radius-topleft:6px;
font:normal 12px Segoe UI;text-transform: uppercase;
color: #000; text-decoration:none;
}

jika sudah ketemu silahkan ganti background dan color untuk merubah tampilan navigasi pada mobile template autowindow v1.

Dan untuk penjelasan mendetail tunggu saja post berikutnya soalnya tidak enak sama kang agus yang sudah menunggu lama tidak saya buatkan tutor nya mudah-mudahan saja bisa di maklumi :D

16.8.11
34

Memasang buka tutup pratayang smiley kommentar

post kang bagas96 4:04 AM
Met sore kawan-kawan gimana kabarnya sore ini mudah-mudahan pada sehat walapiat ea amiinn..
Dan gimana puasanya mudah-mudahan pada lancar aja dan gak kerasa udah 16 hari kita menjalankan puasa :D..

Sambil ngabuburit kang bagas96 mau membagi tips memasang pratayang smiley comentar pada blog tampilan hape terutama bagi sobat yang sudah menggunakan template mobile blog..

Dan kali ini saya memberi info tentang memasang contoh smiley yang bisa di show dan hide / di tampilkan dan di sembunyikan caranya sederhana saja karena pada template mobile sudah di pasang js smiley commentar jadi hanya tinggal memasang kode contoh smileynya karena sebelumnya tidak kang bagas96 tampilkan karena sedikit berat dan membuat lama loading ketika membuka artikel

dan langsung saja ke caranya
seperti biasa edit template dan cari kode berikut

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

jika sudah ketemu letakan javascript ini di bawahnya
<script language="JavaScript" src="http://hell.yn.lt/js/blog/smiley.txt"></script>

contoh:

<div class='comment-form'>
<a name='comment-form'/>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>

<script language="JavaScript" src="http://hell.yn.lt/js/blog/smiley.txt"></script>


dan langkah terakhir tinggal save untuk contoh kurang lebih seperti ini



copy paste javascript:


bagi yang berminat silahkan di coba laporkan jika ada kesalahan/script tidak bekerja :D

26.7.11
31

Cara melihat tampilan penuh template mobile via opmin

post kang bagas96 9:19 PM
Berbagi pengalaman lagi nih buat kawan-kawan blog mobile karena sebuah pertanyaan datang dari seorang kawan tapi mohon maaf mungkin telat reply karena biasalah kang bagas tidak punya jadwal tetap updat artikel hehe.... Dan ini jawaban untuk pertanyaan sobat 'Bagaimana akang membuat template autowindow menggunakan hp sedangkan untuk melihat tampilan pc nya gimana?' Wah pasti sobat juga berpikir bagaimana bisa menyesuaikan tampilan full hanya menggunakan hp mungkin pemikiran sobat merasa tidak mungkin/ kang bagas hanya melebih-lebihkan .. Okedeh sebenarnya selama ini saya menggunakan javascript fram untuk mendapatkan tampilan full (meski tidak 100% menyerupai pc tetapi setidaknya kita mendapatkan gambaran tentang penyesuaian lebar template pada resolusi layar monitor lebih lebar)dan pasti sobat juga sudah mengenal javascript ini langsung saja copy script di bawah ini javascript:finderonly= location.href;opmin= prompt('silahkan masukan alamat wap/blog anda', finderonly);browser=prompt ('apa anda tetap ingin melanjutkan? klik ok untuk melajutkan',opmin);if (opmin& &browser) {F1nd='<frameset%20cols= \'*,*\'><frame%20src=\ ''+opmin+'\'/>';F1nd+='' ;F1nd+='</ frameset>';with(document) {write(F1nd);void(close())}} else{void(null) } copy code html Dan cara menggunakannya masuk ke blog yang mau sobat lihat dalam halaman lebar (kususnya untuk template mobile blog) kemudian masukan script di atas di adres bar/ yang biasanya untuk menulis url yang mau kita kunjungi Nantinya akan muncul alert dan isi urlnya dengan url yang mau sobat kunjungi dan tekan ok maka nantinya akan muncul tampilan blog dalam tampilan lebar (fuul sesuai ukuran blog) Namun dengan menggunakan script ini belum sempurna untuk melihat blog dalam tampilan penuh via opmin Langkah ke2 masukan kata 'about:config' ini pada adres bar (bukan adres google search) tanpa tanda kutip / about:config setelah muncul halaman pengaturan cari menu ini 'fit text to screen' jika pada kolom di sampingnya pada posisi yes maka ubah menjadi no Sementara untuk apa guna pengaturan ini? Karena text pada layar ponsel menyesuaikan dengan ukuran layar jadi meski menggunakan javascript di ataspun kurang sempurna karena text post tidak memenuhi bagian main post blog sehingga kurang mirip dengan tampilan pc pada umumnya yang tulisannya menyesuaikan lebar main post.... Jika sudah di setting seperti di atas maka nantinya text tidak lagi menyesuaikan dengan layar ponsel jadi bisa mengukur pas pada saat di buka via ponsel dan pas juga saat di buka via pc jika ingin mengembalikan tinggal atur kembali menjadi yes setelah pengaturan opmin di lakukan ulangi kembali cara pertama dengan mengcopy javascript di atas dan meletakannya di adres bar atau melakukan repres :) Semoga tips ini bisa bermanpaat..
About blog | Feedback | Rss
Copyright 2009 - 2012 Hak cipta di lindungi UUD
Naik