Archive for Maret 2013

Cara Membuat Kotak Space Banner Iklan Di Blog (Updated)

Menampilkan space iklan di blog memberi peluang & informasi pada advertiser bahwa blog tersebut menawarkan space iklan yg dapat disewa. Apalagi jika blog tersebut memiliki kredibilitas, rank, serta traffic tinggi, maka advertiser/pemasang iklan pasti akan berbondong-bondong untuk memasang iklan/banner iklan di blog tersebut. Namun tidak ada salahnya juga bagi blog baru memberikan space/ruang tersendiri sebagai tempat beriklan advertiser. Hitung-hitung sebagai persiapan dan kali saja ada advertiser yg tertarik. Selain itu penggunaan space iklan dapat menjadi daya tarik tersendiri apabila diletakkan dengan benar.

Nah, guna memasang space iklan, kita butuh menyusun template tersendiri agar iklan tersusun rapi dan enak dilihat. Jadi tidak asal pasang gambar dan link karena hasilnya bisa berantakan. Kali ini saya akan share kode template iklan yg saya buat serta gunakan untuk blog buka-rahasia.blogspot.com.

Fitur dari template iklan 125x125 buka-rahasia.blogspot.com:

Fleksibel, susunan yg tampil sesuai dengan lebar widget.
Efek Border radius.
Efek Transparan/Opacity ketika gambar di-hover.
Gampang di edit guna memasang gambar iklan & link.
Update (28-01-2012, 19.03 WIB): Dengan menghilangkan width serta height, template space iklan ini sekarang bisa digunakan untuk berbagai jenis ukuran banner iklan, 125x125, 300x250, 468x60, dst. Gunakan gambar sesuai dengan ukuran yg diinginkan maka widget space iklan akan muncul sesuai dengan ukuran tersebut.

Cara Memasang Kotak Space Banner Iklan di Widget Blog:

1. Masuk ke dashboard > template/design < Edit HTML

2. Copy kode CSS berikut & letakkan di ATAS ]]></b:skin>

#bukarahasiaads {margin:0px;padding:0px;text-align:center}
#bukarahasiaads img {margin:1px 1px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#bukarahasiaads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

Ganti nilai pada margin:1px 1px untuk mengatur jarak gambar iklan. Nilai pertama jarak atas bawah, nilai kedua jarak kiri kanan.

3. Save Template.

4. Buka layout/design > Add a widget > Pilih HTML/Javascript.

5. Copy kode HTML berikut (edit terlebih dahulu untuk memasukkan link dan url gambar gambar yg ingin digunakan):

<div id="bukarahasiaads">
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title=" TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a>
</div>

Jika ingin menambahkan/mengurangi kotak space iklan tambahkan/hapus bagian:
<a href="MASUKKAN-URL" target="_blank" title="TITLE-IKLAN"><img alt="ALT/TEXT GAMBAR" border="0" src="URL GAMBAR" /></a> di atas </div>.

6. Save. Drag/geser gadget ke posisi yg diinginkan, untuk ukuran yg lebar & besar, letakkan widget di bawah header atau di atas posting. Save lagi.

Anda dapat menggunakan gambar berikut sebagai gambar space iklan (ukuran 125x125), untuk ukuran lain atau ingin yg sesuai selera & desain blog, bisa dicari di Google dengan keywords "ads space banner image (ukuran banner)". Upload gambar, ganti URL GAMBAR dengan url gambar yg sudah di-upload.

Note: Host/upload gambar sendiri. Jangan hanya gunakan url gambar di atas karena sewaktu-waktu gambar dapat hilang/dihapus. Klik kanan di atas gambar, save as ke komputer, lalu upload.

Jika seorang advertiser tertarik, maka dia tinggal mengklik url yg ada pada gambar banner (biasanya link diarahkan ke halaman pasang iklan/advertise atau ke email/contact form).
Have a nice Blogging.

Rabu, 27 Maret 2013

Posted by Unknown

0 Comments

Cara Memasang Facebook Activity Feed Widget di Blogger

►

ika sebuah widget blogbermanfaat besar dalammeningkatkan jumlah pageviewsehingga jumlah traffic semakin naik, apakah anda akan menolak memasangnya? :) Tentu tidak. Tidak ada orang yang tidak memiliki akun Facebook (mungkin ada ya, tapi kecil), sehingga seluruh plugin Facebook memiliki fungsi besar dalam menampilkan hal-hal yang personalized di dalam blog. Dengan demikian, user engagement pengguna Facebook akan terasa juga apabila kita menggunakan plugin-pluginnya di web/blog.

Nah, plugin Facebook satu ini juga memiliki andil besar, Facebook Activity Feed Plugin, yang dari namanya bisa dipahami bahwa fungsinya menampilkan seluruh feed aktivitas user Facebook di dalam sebuah website/blog. Yang paling sering kita lakukan adalah "like" atau "recommend". Maka widget ini berfungsi menampilkannya secara personalized (berdasarkan akun anda dan keterkaitan dengan teman-teman anda di Facebook).

Jadi, mari kita pasang widget Facebook Activity Feed ini dengan langkah-langkah yang cukup sederhana, karena plugin ini sudah saya buat dalam bentuk pre-made, tinggal pasang saja, tanpa perlu langkah-langkah lain. Namun jika anda ingin menelusuri lebih jauh setting plugin ini, ada 3 tipe konfigurasi: App ID, action types, dan domain. Dari ketiga jenis tersebut, yang paling lengkap sekaligus membatasi penampilan aktivitas user adalah jenisdomain. Sehingga ini setting yang saya pilih karena lebih cocok. Jika tertarik mengulik-ngulik lagi, kunjungi FB developers page untuk Activity feed plugin.

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Note: Lewati langkah 1 - 5 jika anda sudah menggunakan plugin Facebook Recommendation Bar yang dulu saya share, Facebook Comments, dan plugin-plugin Facebook lain yang menggunakan format HTML5 dan langsung masuk ke langkah 6.

1. Buka dashboard > template

2. Klik "Edit HTML" (note: jika perlu backup template lebih dulu)

3. Cari (Ctrl+F) tag <body> atau jika anda sudah menggunakan template-template modifikasi atau bawaan Blogger, cari <body (tanpa penutup).

4. Tepat di bawah tag <body> paste/letakkan code berikut:

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

5. Save template.

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

6. Buka halaman "Layout"

7. Klik "add a / tambah gadget" sesuai posisi yang diinginkan dan pilih HTML/Javascript.

8. Copy, edit/customize, dan masukkan code berikut ke dalam kolom HTML/Javascript:

<div class="fb-activity" data-site="http://buka-rahasia.blogspot.com" data-width="340" data-height="340" data-border-color="#ffffff" data-header="false" data-recommendations="true"></div>

Ubah beberapa perintah dan nilai untuk melakukan kostumisasi:

Ganti http://buka-rahasia.blogspot.com dengan url blog anda.
Saya sudah set default lebar dan tinggi sebesar 340 piksel , jika ingin mengaturnya ubah nilai dalam data-width="340" untuk mengatur lebar widget sesuai blog dan ubah nilai dalam height="340" untuk mengatur tinggi widget.
Ubah #ffffff (putih) untuk mengganti warna border (gunakan generator kode warna). Warna yang sama seperti background akan membuat widget tampak transparan.
Ubah nilai dalam data-header="false" menjadi true untuk menampilkan header activity feed (sama seperti Facebook Like Box).
Terakhir, ubah nilai dalam data-recommendations="true" menjadi false untuk tidak menampilkan rekomendasi. Namun jika aktivitas pada web/blog anda minim, rekomendasi tetap akan ditampilkan.

9. Save widget. Jika perlu susun posisi widget melalui halaman layout pada tempat yang sesuai.

10 Kunjungi blog untuk melihat hasilnya.

Troubleshooting

Mengatur setting dan menambahkan plugin Facebook activity feed ini cukup mudah. Tapi jika ada problem, silahkan tinggalkan komentar. Saya menghindari penggunaan app ID di atas karena fungsinya tidak begitu penting pada widget ini dan supaya tidak kompleks, tidak seperti widget recommendation bar yang mewajibkan ID aplikasi. Jika widget tidak muncul, ada kemungkinan sebenarnya anda belum menambahkan kode Javascript SDK, namun melewati langkah 1 - 5. Bagaimanapun, tetap tinggalkan komentar jika ada problem. :)

Posted by Unknown

0 Comments

Cara Membuat Kotak Permalink di Bawah Posting Blog

►

Sudah pernah melihat kotak permalink, bukan? Salah satu elemen blog yang berfungsi untuk memberikan kemudahan bagi blog/web lain membuat tautan/linkback ke salah satu halaman posting blog; seperti yang saya sediakan di bawah posting-posting blog ini. Adanya kotak atau kolom permalink sangat membantu sobat dalam meningkatkan visibilitas dan traffic blog karena apabila ada blogger lain menyukai dan menganggap posting atau artikel blog sobat penting, maka dia dapat dengan mudah menemukan tag permalink di bawah artikel, meng-copy-nya, dan memasang/membaginya di blog; sehingga dia tidak perlu repot-repot membuat tag permalink sendiri. Jika sobat belum memiliki dan ingin membuat, silahkan ikuti tutorial menambahkan kotak permalink di bawah posting berikut.

Konsep dan Kode Kotak Permalink

Konsep yang saya gunakan adalah kotak permalink otomatis dengan memanfaatkan dua tag XML Blogger, yaitu <data:post.url/> untuk memanggil url posting yang sedang ditampilkan, dan <data:post.title/> untuk memanggil judul posting yang sedang ditampilkan, very easy! Permalink juga dilengkapi dengan tag link </a>. Kemudian permalink tersebut diletakkan pada textarea dengan memanfaatkan beberapa fungsi javascript sederhana. Dengan cara ini, semua isi kotak permalink tampil secara otomatis tanpa harus membuat isi secara manual dan dapat langsung digunakan.

Berikut kode-nya:

<div style='line-height:1.4em;padding: 1px; margin: 2px;background-color:#ffffff;font-size: 11px;text-align: justify'>
<span>Ganti teks ini dengan informasi mengenai permalink atau apapun di sini.</span><br />
<textarea cols='60' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2' style='margin-top:3px;width:auto;'><a href="<data:post.url/>"><data:post.title/></a></textarea><br/>
</div><br />

Kostumisasi CSS:

Secara default saya menggunakan:

- background-color: #ffffff (putih), ganti #ffffff dengan kode warna lain sesuai dengan warna background posting blog.

- padding: 1px dan margin: 2px, ganti 1px dan 2px dengan nilai lain untuk menambah atau mengurangi padding dan margin.

- font-size: 11px, ganti dengan nilai lain untuk menambah/mengurangi ukuran huruf (pada text di atas kotak permalink).

Cara Memasang Kotak Permalink di Bawah Posting Blog

1. Copy kode di atas setelah melakukan kostumisasi, jika belum tahu apa yang harus dikostumisasi agar kotak permalink sesuai dengan desain blog, copy dulu saja.

2. Buka HTML editor blog, Dashboard > Template > Edit HTML.

3. Jangan lupa centang "Expand Widgets Template"

4. Cari <data:post.body/>. Bagi yang menggunakan readmore otomatis, akan ada lebih dari satu tag tersebut. Pada kebanyakan template, tag yang ditampilkan secara penuh adalah tag kedua. Jika tidak yakin, pilih dan coba dulu yang pertama, jika tidak bisa pilih tag sama yang kedua.

5. Letakkan kode kotak permalink tepat di bawah <data:post.body/>.

6. Save template.

7. Cek hasilnya pada salah satu halaman posting dan lihat apakah dibutuhkan kostumisasi di bagian CSS seperti di atas.

Okay, itu dia langkah-langkah memasang kotak permalink di bawah posting Blogger. Semoga dulu sobat yang pernah menanyakan mengenai kotak permalink yang saya gunakan terpuaskan. And, have a nice blogging, guys!

Update:
Jika pada kasus tertentu anda mengalami kesulitan menampilkan permalink yang ikut tampil di halaman utama, itu karena pemasangan kode di data:post.body yang di bagian bawah readmore. Jika tidak tahu data:post.body yang mana yang tepat, gunakan ini (caranya sama persis dengan di atas):

<b:if cond='data:blog.pageType == "item"'>
Letakkan kode kotak permalink di sini
</b:if>

Posted by Unknown

0 Comments

Cara Membuat/Memasang Favicon & Animated Favicon di Blog

►

Favicon adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.

Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon anda dapat menggunakan file gambar berformat gif.

Berikut langkah-langkah pembuatannya:

1. Siapkan gambar yang hendak anda jadikan favicon, atau anda dapat mencarinya di situs-situs yang menyediakan gambar icon gratis. Anda dapat pula mencari gambar favicon maupun animated favicon gratis. Gunakan keyword "free favicon/animated favicon image" di Google.

2. Untuk membuat file ico, anda dapat menggunakan photoshop atau gunakan jasa situs generator ico gratis seperti: www.favicon.cc, www.favicongenerator.com, atauwww.favicon.co.uk. Untuk animated favicon anda (gif) anda dapat membuat animasinya di situs www.animatedfavicon.com. Upload file anda ke situs-situs tersebut, ikuti beberapa langkahnya, dan download file hasilnya.

3. Upload file favicon anda ke situs hosting gambar yang mensupport gambar ico karena Blogger tidak mensupport upload gambar berformat ico. Lihat list situs terbaik untuk hosting gambar ico dan gif ini untuk mengupload favicon anda.

4. Copy terlebih dahulu direct link dari gambar yang telah diupload.

5. Kemudian masukkan url-nya ke script tag berikut ke bagian antara <head> dan </head>di template HTML anda. Saya sarankan untuk dimasukkan setelah meta tag agar cepat termuat oleh browser namun tidak mengganggu meta.

Untuk favicon file ico:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Untuk animated favicon file gif:

<link href='url gambar gif anda' rel='icon' type='image/gif'/>

Untuk menggunakan kedua-duanya dan berjaga apabila file gif gagal dimuat oleh koneksi yang sangat lambat, gunakan kedua file ico dan gif anda. Masukkan kedua tag dengan urutan sebagai berikut:

<link href='url gambar .ico anda' rel='shortcut icon' type='image/vnd.microsoft.icon'/>
<link href='url gambar gif anda' rel='icon' type='image/gif'/>

6. Preview dan save.

7. Done!

Update:
Blogger kini telah memiliki fitur Blogger Custom Favicon yg dapat menambahkan Favicon secara otomatis dengan cara yg lebih mudah. Silahkan coba.

Posted by Unknown

0 Comments

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

►

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.

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 3 jenis button atau tombol Google +1:

standard

medium

small

1. Masuk ke dashboard > design/rancangan > edit HTML >"expand widget templates"

2. Copy kode berikut dan paste tepat SEBELUM </head>

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

3. 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:

a. Ganti standard dengan medium atau small jika ingin mengubah ukuran tampilan button/tombol seperti contoh di atas.

b. Ganti right dengan left jika ingin button/tombol berada di sisi kiri.

c. 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.

Cara Memasang Google +1 Button:

(Update: Ini sekaligus untuk menjawab beberapa permasalahan yang disampaikan dalam beberapa komentar di bawah):

>> Karena banyaknya permasalahan ketika memasang tombol Google +1, kode yang harus dicari saya ubah untuk memudahkan pemasangan (meskipun sebenarnya sama saja, hanya untuk memudahkan pencarian)

4. 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/>.

5. Jika ingin memasang button di bagian bawah posting, cari <data:post.body/> (gunakan Ctrl+F) dan paste kode tersebut tepat di BAWAH-nya.

6. Save template.

>> Tombol Google +1 sebenarnya sampai saat ini masih menjadi uji coba Google, baik dalam script-nya (beta) maupun dalam fungsinya sebagai vote dan share hasil pencarian. Seperti yang saya amati, script Google +1 masih tidak stabil; baik dalam fase file downloading-nya maupun ketika diload oleh beberapa browser tertentu. Kadang-kadang tombol tidak muncul atau kita tidak bisa melakukan vote, sehingga, ketika setelah script dipasang tombol tidak muncul, kemungkinan juga disebabkan oleh permasalahan itu.

Posted by Unknown

0 Comments

Cara Memodifikasi Tampilan Link di Blogger/Blogspot

►

Tips-tricks Blogger kembali lagi membahas tentang mengedit tampilan link di template Blogger/Blogspot. Kali ini diupayakan secara lengkap dan esensial agar nanti sobat dapat mengutak-atik bagian tampilan link secara mandiri.

Bagian CSS yang memberi aturan pada link ada 4 jenis:

1. a : tampilan dasar suatu link

2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)

3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.

4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

Sedangkan style text CSS memiliki beberapa jenis:

1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.

2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)

3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.

4. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

Nah, setelah mengetahui beberapa properti style CSS pada link, untuk mengubah tampilan default link pada blog, silahkan lihat pada template Blogger/Blogspot sobat (lihat melalui edit HTML), kemudian cari aturan CSS yang mengatur link, yaitu a, a hover, .... dan seterusnya.

Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):

a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}

Pada bagian berwarna biru itulah sobat bisa memodifikasi tampilan link, baik tampilan awal link (a), ketika mouse di-hover di atas link (a:hover), dan ketika link telah di klik/dikunjungi (a:visited). Ingat, tampilan dasar link selalu bergaris bawah, maka untukmenghilangkan garis bawah (underline) link pada tampilan link dasar maupun ketika di-hover, harus ditambahkan text-decoration: none. Sedangkan untuk warna, sobat bisa pula mengganti value warna di link di tempate sobat dengan mengganti kode di belakang color:dengan kode warna lain yang diinginkan. Untuk mengetahui kode-kode warna, gunakan Hex Color Code Chart Generator.

Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:

1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}

Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

Jika ingin mengubah tampilan link secara individual dan berbeda dari aturan default link yang mengikuti aturan template, sobat bisa langsung memasukkan perintah CSS text-style ke dalam link yang ingin diberi tampilan berbeda (style="....."), misalnya:

<a href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>

Maka hasilnya akan seperti ini:

tips-tricks blogger

(Note: Penggunaan text decoration berjenis blink di atas hanyalah untuk contoh, perhatikan benar-benar penggunaan text decoration seperti ini karena dapat membuat mata lelah dan sakit. Ga percaya? Silahkan dilihat terus link di atas dalam waktu 2 atau 3 menit. Hehe... Padu padankan warna, ukuran, serta urgensi/kepentingan penggunaannya sehingga benar-benar pas dan tidak berlebihan).

Nah, sekarang jika sobat ingin mengutak-atik tampilan link blog silahkan dicoba dengan memperhatikan aturan-aturan CSS dan cara di atas. Yang penting, utak-atik, coba terus, belajar dan belajar! Good luck!

Posted by Unknown

0 Comments

Cara Memodifikasi Tampilan Link di Blogger/Blogspot

►

Bagian CSS yang memberi aturan pada link ada 4 jenis:

1. a : tampilan dasar suatu link

2. a:hover: tampilan link ketika mouse berada di atas link (mouse hovering)

3. a:visited: tampilan link setelah di-click atau ketika halaman link tersebut telah dibuka.

4. a:active: tampilan link ketika di-click ( ketika halaman baru belum terbuka secara sempurna)

Sedangkan style text CSS memiliki beberapa jenis:

1. color: warna link, valuenya berupa warna hexadesimal, RGB, maupun color name.

2. Text decoration: hiasan pada link, berupa underline (garis bawah, ini bawaan secara default), none (tanpa hiasan), overline (garis di atas) dan blink (berkedip)

3. Font-size: ukuran teks, biasanya dalam pixel (px), em, persen (%), dll.

4. dan masih banyak lagi jenis text-style yang lainnya, sobat nantinya silahkan mempelajari sendiri cara-cara memodifikasi tampilan teks dengan CSS.

Clue: aturan CSS terletak di antara <b:skin><![CDATA[ dan ]]></b:skin>, aturan link berada di bagian awal, biasanya setelah variable dan setelah body {...}

Contoh aturannya seperti ini (namun tidak sama persis tergantung aturan CSS teks-nya):

a {color: #1C4991; text-decoration: none;}
a:hover {color: #f2984c; text-decoration: underline;}
a:visited {color: 1C4991; text-decoration:none;}

Jika ingin menambahkan aturan link lain yang belum ada di template sobat, misalnya belum ada a:hover, maka tinggal ditambahkan saja, dengan catatan urutannya harus seperti ini:

1. a {aturan css text styling}
2. a:hover {aturan css text styling}
3. a:visited {aturan css text styling}
4. a:active {aturan css text styling}

Keempatnya harus memiliki unrutan seperti itu, jadi tidak boleh terbalik-balik, kecuali jika salah satunya tidak ada, boleh langsung melompat ke aturan link lain.

<a href="http://buka rahasia.blogspot .com" style="color:#FF9900;text-decoration:blink;font-size:24px">tips-tricks blogger</a>

Maka hasilnya akan seperti ini:

tips-tricks blogger

Posted by Unknown

0 Comments

Cara Membuat Auto Read more (Thumbnails) Blogspot V2

►

Script auto readmore blogger/blogspot dengan thumbnails (gambar preview) ini adalah penyempurnaan dari script auto readmore V1, di mana ditemukan adanya masalah pada halaman statis. Ketika halaman statis ditampilkan, auto readmore ikut muncul, sehingga harus diberi pengecualian (b if cond & b else) untuk static pages pada scriptnya. Selain itu, javascript dlm auto readmore ini juga bersifat internal jadi tidak perlu lagi memuat file .js eksternal yang diupload ke hosting lain. Meskipun file template menjadi sedikit lebih besar, namun loading page menjadi lebih cepat daripada auto readmore sebelumnya.

Langkah-langkahnya:

1. Masuk ke dahboard > Design/Rancangan > Edit HTML. Jangan lupa centang 'Expand Widget Templates'. Download/back up file XML template terlebih dahulu agar nanti bisa mengembalikan seperti semula jika ada kesalahan.

2. Jika dulu sudah diisi script auto readmore yang pertama, hapus terlebih dahulu, gunakan panduan dari posting auto readmore V1 untuk mengetahui mana saja yang harus dihapus.

3. Copy-paste script berikut tepat DI BAWAH </head> (gunakan Ctrl+F):

<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes-dengan gambar,no-tanpa gambar
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 150;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
    if(strx.indexOf("<")!=-1)
    {
        var s = strx.split("<");
        for(var i=0;i<s.length;i++){
            if(s[i].indexOf(">")!=-1){
                s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
            }
        }
        strx = s.join("");
    }
    chop = (chop < strx.length-1) ? chop : strx.length-2;
    while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
    strx = strx.substring(0,chop-1);
    return strx+'...';
}

function createSummaryAndThumb(pID){
    var div = document.getElementById(pID);
    var imgtag = "";
    var img = div.getElementsByTagName("img");
    var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
    if(img.length>=1) {
        imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
        summ = summary_img;
    }
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
}
//]]>
</script>

Yang berwarna merah adalah jumlah dan ukuran tampilan, summary_noimg=jumlah karakter tanpa gambar, summary_img=jumlah karakter dengan gambar, sedangkanimg_thumb_height dan img_thumb_width adalah ukuran gambar (dalam pixel). Ubahlah sesuai dengan keinginan.

3. Kemudian cari <data:post.body/> (gunakan Ctrl+F), dan GANTI dengan:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read More >></a>
</b:if>
</b:if>

Kostumisasi:
Ganti Read More >> dengan kata-kata yang diinginkan. Atau jika ingin menggantinya dengan gambar, ganti tulisan berwarna merah tersebut dengan:

<img border='0' src='url (direct link) gambar readmore'/>

Ganti url (direct link) gambar readmore dengan alamat url dimana anda mengupload dan menghosting gambar.
----------------
Update (12102011):
Di komentar sobat Ari di bawah ditanyakan: bagaimana cara agar tampilan teks di post summary - auto readmore bisa rata kiri kanan (justified)?
Lihat bagian ini pada script kedua di atas. Jika auto readmore sudah dipasang, cari dengan Ctrl + F:

<div expr:id='"summary" + data:post.id'>

Untuk membuat teks di post summary dlm readmore justify, tambahkan style css ini ke dalam tag: style='text-align:justify;'
Jadinya:

<div style='text-align:justify;' expr:id='"summary" + data:post.id'>

----------------
4. Preview terlebih dahulu, jika sudah beres, kemudian save.

Gunakan kotak komentar untuk menyampaikan pertanyaan, permasalahan, atau apapun tentang script ini.

Posted by Unknown

0 Comments

Tergelundung.com

Archive for Maret 2013

Cara Membuat Kotak Space Banner Iklan Di Blog (Updated)

Cara Memasang Kotak Space Banner Iklan di Widget Blog:

Cara Memasang Facebook Activity Feed Widget di Blogger

Cara Menambahkan Facebook Activity Feed ke dalam Widget Blog

Troubleshooting

Cara Membuat Kotak Permalink di Bawah Posting Blog

Konsep dan Kode Kotak Permalink

Cara Memasang Kotak Permalink di Bawah Posting Blog

Cara Membuat/Memasang Favicon & Animated Favicon di Blog

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

Cara Memodifikasi Tampilan Link di Blogger/Blogspot

Cara Memodifikasi Tampilan Link di Blogger/Blogspot

Cara Membuat Auto Read more (Thumbnails) Blogspot V2

Followers

Blog Archive

Blogger news

Blogroll

About