belajar blogger

Membuat Tulisan Muncul Ketika Gambar Disorot

https://ayo-blogspot.blogspot.com/2012/08/membuat-tulisan-muncul-ketika-gambar.html
Kamis, 16 Agustus 2012 – 19.37

Trik ini bersifat unik dan tidak salah jika teman2 tertarik untuk mencobanya. Kenapa harus mencoba...? ya gak harus sih tapi kalau teman2 berminat monggo...cos yang namanya unik pasti banyak yang suka, ya lumayan kan buat memberi kesan yang unik kepada para pengunjung blog kita, lalu bagaimana teman2 tertarikkah untuk mencobanya. Oh iya dari tadi saya hanya ngoceh mlulu, nawarin untuk mencoba tapi kok gak diberi contohnya...gimana tooo...

Ok, bagi teman2 yang memang penasaran apa sih maksudnya "membuat tulisan muncul ketika gambar disorot"?, ya dah coba kursornya teman2 disorot ke gambar berikut

t4belajarblogger.blogspot.com

Adakah hal yang unik?

Yapz betul, ketika teman2 menyorot gambar di atas, maka ada tulisan yang muncul yaitu tulisan ini "Blog Kumpulan Tutorial Blogging di Blogger"

Lalu bagaimana cara membuatnya...?

Caranya gampang. Teman2 hanya membutuhkan kode script berikut ini

Bagaimana, simpelkan?

yang perlu teman2 ubah adalah alamat URL gambar yang saya tandai dengan warna hijau, keterangan gambar yg berwarna merah, serta tulisan yang akan muncul ketika gambar anda nanti ada yang menyorotnya (lumut)

Kalau teman2 bertanya, bisa gak ya gambar di atas disisipi link, tapi tulisannya akan tetap muncul kalau disorot. Maka jawabannya BISA...

Trus bagaimana caranya....

Caranya gampang, teman2 hanya membutuhkan script berikut ini

dan nanti hasilnya seperti berikut ini (Diklik ya...biar tahu bedanya)

Nah, tentu teman2 sudah pada tahu bagian yang mana saja yang harus diubah, kan dah ada contohnya tuh di atas...

Oh ya, script di atas adalah script banner ber-link dengan tipe open new tab dengan kata lain kalau tman2 mengkliknya maka akan terbuka pada halaman tab baru atau tab yang berbeda. Bagi teman2 yang ingin mengganti script tersebut menjadi script banner ber-link dengan tipe open same tab alias terbuka pada tab yang sama, maka caranya gampang. Teman2 tinggal menghapus tulisantarget="_blank"

Dah itu selesai

Semoga Bermanfaat []

Huruf pada Awal Postingan Besar Seperti pada Koran

https://ayo-blogspot.blogspot.com/2012/08/huruf-pada-awal-postingan-besar-seperti.html
19.36

Kalau kita memperhatikan baik2 judul di atas maka kita langsung tahu kalau yang ingin kita bahas dalam postingan kali ini adalah cara membuat huruf yang memilki ukuran relatif besar alias super jumbo dalam postingan, kalau teman2 sering baca koran tentunya akan langsung paham apa yang saya maksud, tapi yaaa...bagi teman2 yang belum memilki bayangan mengenai apa yang akan kita bahas dalam postingan kali ini yaaa...boleh lah nengok ke huruf "K" yang super jumbo di bagian awal postingan ini. nah itu maksudnya...kita akan bahas cara buat huruf super jumbo seperti di samping kiri atas tu...

Sebenarnya kita bisa membuat huruf yang memilki ukuran relatif besar pada postingan kita dengan menggunakan tool yang telah disediakan oleh pihak blogger itu sendiri, yaitu di bagian untuk mengatur ukuran besar-kecilnya suatu font yang seperti ini lho:

, namun sayangnya ukuran besar yang dapat kita atur terbatas dan tidak bisa menyerupai gaya koran

Oleh karena itu bagi teman2 yang tertarik untuk membuat huruf jumbo ala koran seperti di atas maka bisa diperaktekkan melalui langkah2 berikut

1. Login ke blogger >> tata letak >> Edit HTML

2. Dan letakkan kode berikut tepat di atas kode ]]></b:skin>

/* huruf jumbo
----------------------------------------------- */
.jumbo {
float:left;
color: #000000;
line-height:80px;
padding-top:1px;
padding-right:5px;
font-family:times;
font-size:100px;
}

3. kalau sudah, simpan hasil kerjaan temn2

Selanjutnya yang harus teman2 lakukan ketika memosting adalah mengapit huruf pada awal postingan atau yang ingin dijadikan huruf jumbo dengan menggunakan kode berikut

<span class="jumbo">Huruf yang ingin dijadikan huruf Jumbo</span>

Jangan bingungg yaaaa....

Sebagai contohnya adalah seperti berikut ini

<span class="jumbo">K</span>alau kita memperhatikan baik2 judul di atas maka kita langsung tahu kalau yang ingin kita bahas dalam postingan kali ini adalah cara membuat huruf yang memilki ukuran relatif besar alias super jumbo dalam postingan, kalau teman2 sering baca koran tentunya akan langsung paham apa yang saya maksud, tapi yaaa...bagi teman2 yang belum memilki bayangan mengenai apa yang akan kita bahas dalam postingan kali ini yaaa...boleh lah nengok ke huruf "K" yang super jumbo di bagian awal postingan ini.

Maka hasilnya nanti seperti berikut ini

Kalau kita memperhatikan baik2 judul di atas maka kita langsung tahu kalau yang ingin kita bahas dalam postingan kali ini adalah cara membuat huruf yang memilki ukuran relatif besar alias super jumbo dalam postingan, kalau teman2 sering baca koran tentunya akan langsung paham apa yang saya maksud, tapi yaaa...bagi teman2 yang belum memilki bayangan mengenai apa yang akan kita bahas dalam postingan kali ini yaaa...boleh lah nengok ke huruf "K" yang super jumbo di bagian awal postingan ini.

Gimana, gampangkan...? N than slamat mencoba...

Oh iya, bagi teman2 yang mau mengganti warna huruf GD tersebut, caranya gampang. Tinggal diganti kode warna yang tertera pada [color: #000000;], nah #000000 artinya warna item, biar lebih gampang silahkan pilih kode warna yg anda inginkan di sini.

Semoga Bermanfaat []

Membuat Recent Post dengan Thumbnails

https://ayo-blogspot.blogspot.com/2012/08/membuat-recent-post-dengan-thumbnails.html
19.35

Kelihatannya setelah membahas tutorial cara membuat related post dengan thumbnails terasa kurang dah kalau maslah recent post juga gak dibahas. Memang sih untuk maslah recent post ini sudah di bahas pada postingan yang lalu, yaitu dengan judul Cara Membuat Recent Post, namun bedanya dengan yang ingin kita bahas kali ini adalah cara membuat recent post alias postingan terbaru disertai tampilan gambar/thumbnails. Agar gak kelamaan, silahkan ikuti langkah2 berikut

1. Login ke blogger, pilih tata letak, lalu tambah gadget HTML

2. Taruh kode berikut di dalamnya dan jangan lupa disimpan

Nah bagian2 yang harus teman2 atur agar sesuai dengan blognya tman2 adlh sebagai berikut:

-boxwidth = lebar widget recent post

-cellspacing = spasi masing2 cells, disesuaikan.

-borderColor = Warna border/garis tepi [pilih warna di sini]

-thumbwidth dan thumbheight = silahkan untuk disesuaikan dengan keadaan blog anda.

-fntsize = GD font/tulisan

-acolor = Wrna juudl post pada recent post [pilih warna di sini]

-aBold = tebal judul postingan yg tampil pada widgwt recnt post

-Numpost = jumlah postingan yg akan muncul pada recent post thumbnails widget

-tulisan biru tebal = itu harus diganti dengan alamat blognya tman2

Biasanya beberapa rekan blogger ada yg mengalami beberapa maslah yg tdk diinginkan, seperti widget tersebut gak mau tampil, maka kemungkinan ada beberapa langkah lagi untuk mensetting blog anda agar widget tersebut bisa tampil:

1. Pergi ke halaman pengaturan >> pilih opsi feed situs

2. lalu pada bagian "Izinkan Feed Blog" silahkan untuk menyetingnya menjadi: Penuh

3. Untuk bagian "Posting URL Pengubahan Arah Feed", silahkan dikosongkan.

4. simpan hasil setelan anda. Silahkan lihat hasilnya

Semoga Bermanfaat []

Membuat Related Post Disertai Gambar/Thumbnails

https://ayo-blogspot.blogspot.com/2012/08/membuat-related-post-disertai.html
19.34

Di postingan yang lalu2 kita telah membahas bagaimana Cara membuat Related Post. Teman2 pasti sudah pada tahukan apa itu related post, yapz benar yaitu postingan yg berhubungan. Beda tutorial sekarang dengan yg sebelumnya terletak pada aksesoris berupa gambar tampilan dari postingan yg berhubungan atau biasa juga kita sebut dengan thumbnails. Tentu dengan adanya tampilan gambar ini akan membuat related post-nya teman2 lebih menarik. Agar gak kelamaan seperti biasa..

1. Silahkan login dulu ke aku bloggernya teman2 lalu pilih tata letak dan edit HTML

2. Letakkan kode berikut di atas kode tag </head>

<b:if cond='data:blog.pageType == "item"'>

<style type="text/css">

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, “Times New Roman”, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts a:hover {

background-color:#d4eaf2;

}

</style>

<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/postsemisalbergambar.js' type='text/javascript'/>

</b:if>

3. Lalu cari kode

atau

4. Kalau dah ketemu salah satu dari dua kode di atas, maka letakkan kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<b:if cond='data:blog.pageType == "item"'>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:if></b:loop><a href='http://t4belajarblogger.blogspot.com/2009/12/membuat-related-post-disertai.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>

<script type='text/javascript'>

var currentposturl="<data:post.url/>";

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

5. Simpan hasil kerjaannya teman2

Bagi teman2 yang ingin mengatur jumlah post yg ingin ditampilkan dalam daftar related post, silahkan diatur jumlahnya pada bagian [var maxresults=5;]

Dan untuk tulisan related posts bisa juga diganti dengan kata2 sesuai keinginan tman2, untuk mengubahnya perhatikan pada bagian [var relatedpoststitle="Related Posts"; ], bisa diganti dengan kata2 seperti post semisal, postingan yg berhubungan, atau bisa juga "baca juga artikel lain..."

--------------------------------------------------
NB:
-. Agar gambar dapat tampil pada related post, maka postingan teman2 harus terdapat gambar yang di-upload melalui blogger langsung, bukan gambar yang dipasang dengan menggunakan kode script.

-. Sebelum menggunakan trik ini, teman2 harus mensetting label setiap postingannya teman2. berhubung trik ini bekerja dengan sistem melacak label/kategori semisal.

-. Teman2 gak perlu khawatir trik ini gagal, adanya related post thumbnails pada blog ini menandakan trik ini berhasil dan bisa digunakan, asal sesuai instruksi.

--------------------------------------------------

Bagi teman2 yang mungkin merasa trik di atas merepotkan alias agak rumit, maka teman2 juga bisa menggunakan jasa pembuatan related post secara otomatis yang telah disediakan oleh website yang bernama LinkWithin.com, tentu caranya lebih simple daripada cara di atas. Teman2 cukup mengisi beberapa form untuk memualai membuatnya, email, alamat blog, platform (ex: blogger, wordpress, dll), dan yg terakhir adalah lebarnya yg merupakan jumlah tampilan related post yg ingin ditampilkan, dan ini bertkisar mulai 3-5 tampilan. Silahkan untuk menyesuaikannya dengan lebar dinding postingan tman2

dah dulu yaaa....

Semoga Bermanfaat []

Cara Membuat Scroll Bar di dalam Blog

https://ayo-blogspot.blogspot.com/2012/08/cara-membuat-scroll-bar-di-dalam-blog.html
19.33

Apa itu scrool bar? hahaha saya kira tman2 semua sudah pada tahu tuh, tapi bagaimana kalau pertanyaannya saya ganti? "siapa yang tahu cara membuat scrool bar di dalam blog?" kalau ini jawabannya dah pasti gak semua tahu cara membuatnya...kalau teman2 yg sedang baca ini belum tahu cara membuatnya santai aj, saya juga sebelumnya gak tahu sama sekali, sama halnya dengan tman2 yg msih awam mengenai hal ini. Untuk itu di sinilah letak pentingnya sharing sesuatu yg kita ketahui, walau secuil gak apa2 yg penting kita bisa sling berbagi ilmu...., iya gak..?

Yohoooooo...lanjuuuut

Agar gak hanya sekedar cuap2, teman2 bisa melihat contoh tampilan yang akan kita bahas dalam postingan kali ini

CONTOH DAFTAR ISI SCROLL BAR

0001. Panduan Mendaftar di Blogger.

0002. Panduan Memosting di Blogger.

0003. Panduan Memasang Template.

0004. Cara Memasang Profil.

0005. Mengenal Fungsi Gadget Blogger.

0006. Tips Mencari Kata dan Kode dengan Mudah.

0007. Aneka Cara Membuat HyperLink.

0008. Memasang Banner Blog.

Kumpulan Tutorial Blogger:

Nah, tombol yg bisa dibuat nggulung2 itulah yang namanya scroll Bar. Tuh di browsernya teman2 juga ada...

Oh iya judul yang kita gunakan adalah "Membuat scroll bar di dalam blog", saya pribadi sengaja menggunakan kata scroll bar di dalam blog agar nuansanya terasa lebih global alias lebih umum. Apa maksudnya...? Yang namanya dah blog berarti scrool bar yang ingin kita bahas tersebut dapat kita tampilkan ke dalam posting maupun gadget HTML yang kita miliki....gtuuuu maksudnya^

Untuk membuat yang seperti di atas tu, kita hanya membutuhkan kode script berikut

<div style="overflow: auto;background-color: #FF9900; margin: 0px auto; padding: 5px; height:135px;width: 85%;text-align: left;">

SILAHKAN DIISI APA SAJA DI SINI YANG MENURUT ANDA HARUS DISINGKAT DENGAN MENGGUNAKAN FORM SCROLL, TEKS ATAU KODE JUGA BOLEH

</div>

Wah ternyata untuk membuat yang seperti itu, kita hanya membutuhkan script yang relatif pendek...

Dan dari kode di atas, teman2 juga bisa mengaturnya menjadi sedemikian rupa, entah itu warna backgrounya ataupun ukurannya (tinggi n lebar)

Maka teman2 bisa mengotak-ngatik pada bagian background-color:#FF9900 [sesuaikan warna pilihan anda, cari kode warna di sini], serta untuk tinggi dan lebarnya teman2 bisa memperhatikan pada bagian yang telah saya tandai dengan warna hijau (tinggi/height) dan biru (lebar/width), dan silahkan untuk menyesuaikan isi dari form scroll bar pada bagian yang telah saya tandai dengan warna lumut.

Dah dulu yaaa...selamat mencoba

Semoga Bermanfaat []

Membuat Tombol PopUp Window

https://ayo-blogspot.blogspot.com/2012/08/membuat-tombol-popup-window.html
19.32

Setelah kita membahas tentang tutorial blogger "Cara Membuat Auto Popup Window" nah tibalah waktunya kita membahas bagaimana cara membuat/menampilkan popup window pada blog kita namun tidak secara automatis, dengan kata lain harus ada proses yang melibatkan brainware (pengguna/manusia...ya kita..)^

Sebagai contohnya saja yaitu tombol popup window berikut (coba diklik yaaa....)

Nah bagaimana...kelihatan unik dan menarikkan?

bagi teman-teman yang ingin memasang tombol popUp window di blognya maka teman2 hanya membutuhkan script berikut

Keterangan:

Merah=rataan tombol, bisa diganti left untk kiri dan right untuk kanan.
Biru=alamat URL yang ingin ditampilkan di dalam popUp window.
orange=kalau anda memilih "yes" maka window yg muncul nanti akan memiliki scroolbar, kalau "no", yaaaa...gak muncul scroolbar (juga tergantung besar-kecilnya window/ukuran aslinya)
hijau=adalah tinggi dan lebar window yang akan muncul. Silahkan diatur sesuai keinginan anda.
Lumut=tulisan yang muncul pada tombol popUp window. Pada contoh di atas, saya menggunakan kata "BERLANGGANAN TUTORIAL BLOGGER"

Bagaimana teman2 cukup gampang dan simple bukan......?

Semoga Bermanfaat []

Location