Membuat Beberapa Efek dengan CSS3 di Widget Label Cloud Blogger

Orang sering bilang bahwa keberbedaan itu membuat sesuatu menjadi indah. Keragaman berbagai sisi kehidupan, alam dan budaya juga membuat bangsa lain banyak tertarik terhadap bangsa kita. Oleh karena itu jika anda suka sesuatu yang tidak biasa atau berbeda dengan yang lain, dan anda salah satu yang selama ini menggunakan "widget Label Cloud Bawaan Blogger" atau mungkin ingin menggunakan tag cloud bawaan blogger-blogspot, satu perubahan menggunakan kode CSS3 akan membuat cloud sederhana ini terlihat berbeda dan lebih indah dari biasanya. Kita akan tambahkan beberapa efek baru berupa background-color, color, border serta animasi yang tercipta melalui CSS3 transition dan CSS3 transformation. Jadi ketika cursor menyentuh teks link di label cloud maka akan muncul sebuah background color secara perlahan. Bersamaan dengan itu maka terjadi pula perubahan color teks link sera munculnya border. Satu tambahan efek animasi yang tercipta dari CSS3 transition adalah bertambah besarnya teks link bersamaan dengan terlihatnya background, perubahan color dan border link. Cukup menarik dan aku kira cukup pantas untuk menghiasai blog anda.

Bagi yang belum menggunakan atau memanfaatkan widget label tag cloud bawaan blogger, anda bisa ikuti langkah berikut ini untuk memasangnya di blog.

Cara Mengetahui dan Meningkatkan Harga Jual Blog

Mungkin kata "Harga Jual Blog" masih terdengar cukup aneh di telinga. Namun di jaman seperti sekarang apa yang nggak bisa di jual? Semua bisa, bahkan blog pun ada harganya. Mengetahui nilai harga jual blog yang telah kita kelola, pelihara dan selalu dengan setia dijejali dengan posting serta kerap dijenguk amatlah wajar. Ini bisa kita gunakan tolok ukur seberapa besar kemajuan yang telah tercapai dibalik kelelahan tenaga dan pikiran serta besarnya pengorbanan yang diberikan selama membuat hingga menjadi seperti sekarang. Tentang bagaimana hubungan harga jual blog dan cara menjualnya, terus terang aku sama sekali tidak tahu (karena harga jual blog ini pun untuk saat ini sama sekali belum ada alias $0.00).

Kekecewaan setelah melihat harga jual blog, apabila memang belum ada harganya, tentu saja mengecewakan hati. Hal seperti ini hendaknya bukan menjadi pintu bagi patahnya semangat, namun harus menjadi cambuk agar dalam tempo secepatnya harga jual tersembul. Aku yakin bahwa selama komitmen untuk terus membangun tanpa kenal patah semangat terus terpupuk, pasti dalam tempo yang tak lama apa yang menjadi harapan akan segera terwujud. Mengetahui harga jual tak ubahnya ukuran seberapa besar prestasi yang telah tergapai di dunia blogger. Semakin mahal harga secara otomatis dibarengi dengan peningkatan prestasi dan popularitas, dan begitu pula sebaliknya.

Bagaimana cara meningkatkan harga jual atau secepatnya mendapatkan harga jual blog?

Cara Membuat 2-dua Elemen Baru di Bawah Box Posting

Membuat 2 buah Elemen baru di bawah Post Widget/box posting/kolom komentar pasti akan sangat bermanfaat bagi siapapun. Elemen baru ini bisa dimanfaatkan untuk berbagai widget, terutama widget yang berkaitan dengan posting, seperti recent posts, related posts atau popular posts. Dengan letak yang tak jauh dari box posting tentu menjadi sangat ideal sekali. Selain widget yang tersebut di atas, mungkin sampeyan juga bisa memindahkan widget profile, stats atau atau label/categories. Yah ..., kenapa tidak? Sesuatu yang baru selama tidak merugikan aku kira layak untuk di coba. E ... barangkali pas buat blog sampeyan?!

Membuat widget baru dengan posisi seperti di atas tidaklah sesulit yang dibayangkan. Sampeyan bisa membuatnya dalam waktu 1/2 jam hingga 1 jam. Waktu yang lumayan lama ini tak lepas dari upaya menciptakan elemen yang berukuran pas dengan lebar halaman posting. Yah ...., mungkin kita harus merubah ukuran lebar dalam beberapa kali percobaan agar ukuran ke-2 widget baru benar-benar tepat dan presisi dengan ruang yang tersedia, baik di page elements atau di halaman blog. Untuk membuatnya silahkan ikuti langkah berikut.

2 Cara Merubah Text Read More/Baca Selengkapnya di Blogger-Blogspot

Cara mengganti atau merubah teks read more atau baca selengkapnya, yang setiap kali kita jumpai di banyak blog bisa dilakukan dengan dua cara.

• Melalui Widget Post
• Melakukan modifikasi di template.

Dua cara yang berbeda untuk merubah teks read more sebenarnya mempunyai tujuan yang sama, yaitu untuk membuat wajah read more yang berbeda melalui perubahan teks read more (baca selengkapnya). Kemudahan yang diberikan blogger untuk melakukan perubahan teks read more setidak-tidaknya akan memunculkan kreatifitas blogger untuk menuangkan kata yang variatif dan menarik hingga kesan "seragam" atau "monoton" dalam tampilan read more tak akan terjadi.

Dari dua pilihan perubahan yang bisa dilakukan, merubah teks read more melalui widget post merupakan cara termudah dan tercepat yang bisa dilakukan semua blogger. Perubahan dilakukan melalui "Page Element/Element Laman". Cara yang ke-2 (modifikasi) hanya dapat dilakukan melalui halaman "Edit HTML".

Menampilkan Nama dan Photo Blogger di Setiap Posting

posted by: Tanty Maharani »

posted by: Tanty Maharani Photo disamping merupakan satu hasil modifikasi pada template blog. Anda dapat mencobanya dengan menambahkan kode HTML baru di dalam template, baik untuk menampilkan nama author, photo author atau sekaligus dua-duanya disetiap posting di depan huruf pertama posting dan di atas posting. Untuk photo author akan berada di depan teks pertama posting, sedang nama author berada di atar posting persis. Jika anda ingin menampilkan nama author di depan teks pertama posting, maka cukup dilakukan dengan merubah tag p menjadi span dan tambahkan padding-right:10px;.

Agar photo author atau photo blogger tidak terlalu memenuhi halaman posting yang membuat tampilan blog justru kurang menarik, anda bisa menggunakan photo yang berukuran kecil (thumbnail/avatar) dengan ukuran sekitar 40px x 60px .

Kode HTML-1 : Menampilkan Nama Author di Atas Posting

Keuntungan dan Cara Membuat Link Demo

Beberapa blog sangat memerlukan sebuah link demo untuk menampilkan "sebuah fungsi ataupun bentuk lain yang tak mungkin di tampilkan di halaman posting (blog) karena berbagai hal, seperti misalnya beban yang teramat besar (baik ukuran ataupun kode yang digunakan). Untuk membuat sebuah bentuk DEMO, maka kita harus membuat blog baru yang khusus diperuntukkan untuk menampilkan segala sesuatu yang tak mungkin ditampilkan di blog. beberapa keuntungan akan diperoleh blogger dengan pemanfaatan blog baru sebagai demo, bahkan jika anda membuatnya dalam jumlah yang cukup banyak maka beberapa keuntungan bisa didapatkan sekaligus.

• Menciptakan link baru bagi blog utama. Dengan adanya satu atau beberapa link demo maka secara otomatis blog utama mempunyai beberapa buah link yang bermanfaat untuk percepatan peningkatan popularitas. Tentu saja dalam blog demo ini harus ditambahkan sedikit teks artikel serta link untuk kembali ke blog utama.
• Meringankan beban (loading) blog utama. Jika anda memuat posting tentang tutorial atau banyak menggunakan gambar untuk visualisasi materi posting, maka anda cukup menampilkan gambar yang berukuran besar atau demo tutorial di blog demo. Blog utama cukup di isi dengan gambar/image yang berukuran kecil sehingga beban loading blog akan tetap enteng. Bila hal ini berkaitan dengan tutorial kode HTML, maka dengan demo di blog lain secara otomatis tidak akan terlalu banyak kode CSS, javascript atau xHTML yang harus dijejalkan di blog utama.
• Keuntungan ekonomis. Dalam blog yang menyertakan iklan/adsense blog demo akan menjunjang penghasilan blogger karena akan banyak ruang/tempat untuk menampilkan adsense.
• Meningkatkan semangat posting. Dengan beberapa blog yang dimiliki membuat blogger punya lebih banyak tanggung jawab "untuk menyentuh" setiap blog yang dimiliki karena selalu berkaitan dengan posting di blog utama. Ini akan membuat rutinitas posting menjadi lebih tinggi. Apabila adsense sudah mulai berjalan, penghasilan yang diperoleh pasti akan lebih meningkatkan antusiasme posting/mengelola blog.

Cara Membuat Link Demo

2 (dua) Cara Menghilangkan Navbar Blogger-Blogspot

Sekalipun sebenarnya navbar yang terletak di bagian teratas blog mempunyai kegunaan, namun bagi banyak blogger, navbar dipandang mengganggu tampilan blog hingga berupaya untuk dibuang, disembunyikan, dihapus atau dihilangkan. Sebuah tindakan yang teramat wajar jika menilik betapa teramat sedikit blogger maupun pengunjung blog yang memanfaatkan navbar saat beraktifitas di sebuah blog. Ada beberapa cara untuk menghilangkan navbar blogspot ini, namaun dari sekian banyak cara, 2 cara ini dipandang paling efektif dan umum digunakan para blogger.

• Navbar dihapus total dari halaman blog:
  
  Dengan cara ini maka navbar tak akan terlihat sama sekali karena display navbar dibuat menghilang serta ketinggian navbar dibuat dalam nilai 0 (nol).
• Navbar disembunyikan:
  
  Navbar sepertinya hilang, namun sebenarnya hanya sekedar disembunyikan. Cara yang kedua ini banyak dikenal dengan istilah sebagai navbar tersembunyi, navbar otomatis atau navbar rahasia. Untuk membuat navbar dalam bentuk seperti ini kita memanfaatkan opacity effects sebagai cara untuk membuat efek transparansi hingga pada saat sebuah blog dibuka seakan akan navbar tidak ada. Navbar akan terlihat hanya pada saat mouse/cursor disentuhkan pada posisi dimana navbar berada (ujung atas blog).

Contoh bentuk Navbar Otomatis/Rahasia

Sentuhkan cursor di bawah ini!


Untuk model yang pertama tidak ada demonya karena anda bisa melihat dibeberapa blog yang ada banyak yang tanpa navbar.

Navbar Hilang Total

Tips Penting Cara Simpan Kode CSS di Template

Menyimpan kode CSS sepertinya hanya persoalan sepele. Sesuatu yang terkadang membuat kita tidak cermat dan berhati-hati. Masalah penempatan terutama. Masih banyak blogger yang belum mengetahui secara tepat bagaimana tempat dan cara yang paling tepat untuk menyimpan kode CSS di template, baik melalui halaman "Edit HTML" atau menggunakan Add a Gadget yang terletak di "Page Elements/Elemen Laman". Ketidak tahuan ini sebenarnya tidaklah berbahaya bagi desain blog, akan tetapi sering terjadi sebuah desain HTML baru yang sebenarnya hendak dipakai atau diterapkan di blog ternyata tidak berfungsi sebagaimana yang diharapkan. Persoalan ini sepanjang seluruh kode CSS sudah ditulis dengan benar, sebenarnya terjadi pada penggunaan tag style yang terdiri dari tag pembuka (<style type="text/css">) dan tag penutupnya (</style>).

Rahasia kecil penggunaan tag style

• Gunakan tag style saat menyimpan kode CSS di bawah kode ]]></b:skin>.
• Gunakan juga tag style saat penyimpanan kode CSS dilakukan melalui Add a Gadget/Tambah Gadget (Widget HTML/Javascript).
• Jangan gunakan tag style saat kode CSS disimpan di atas kode ]]></b:skin>.
• Untuk kode CSS yang telah di upload di file hosting, gunakan kode seperti berikut untuk menyimpan di template. <link href="URL CSS" rel="stylesheet" type="text/css" />. Penyimpanan bisa dilakukan di atas kode <head> atau melalui Add a Gadget/Tambah Gadget.

Cara Menyimpan Kode CSS di atas ]]></b:skin>

Tampilkan Posting dg Scroll Bar dan Scroll Box

Scroll Bar tidak hanya bisa digunakan di widget sidebar blog seperti yang biasa kita lihat. Bila kita mau, halaman posting bisa dibuat dalam bentuk scroll. Ada dua kemungkinan menempatkan sebuah scroll bar di posting blog.

• Membuat seluruh posting dalam sebuah bingkai scroll box.
• Hanya satu atau beberapa bagian posting yang terwadahi dalam scroll box.

Kedua model di atas, kedua-duanya harus dibuat dengan bantuan kode CSS supaya lebih mudah dan cepat dalam penulisan kode di halaman posting (di Mode Posting Edit HTML). Sekalipun demikian jika anda mau sedikit repot bisa juga kode HTMLnya dituliskan di halaman posting.

Pada model Scroll Bar yang pertama, seluruh posting akan terwadahi dalam scroll box. Tentu saja hanya pada artikelnya saja. Untuk judul posting, dia akan tetap pada posisi semula. Penggunaan model ini mengharuskan kita untuk membatasi tinggi scroll box supaya scroller dapat dibuat dan difungsikan. Ketinggian box sebaiknya dibuat dengan ketinggian minimal 400px agar halaman posting tidak terlalu pendek. Keuntungan posting dengan memanfaatkan scroll bar terutama akan terasakan bagi blogger yang sering membuat posting dengan artikel panjang lebar. Dengan pembatasan ketinggian scroll bar ini maka pengunjung atau pembaca blog tidak perlu menggulung halaman posting hingga ujung terbawah.

Model yang ke dua lebih fleksibel karena kita bisa memilih beberapa bagian tertentu dari posting untuk dimasukkan dalam scroll box. Beberapa "bagian posting yang khusus/special" mungkin bisa terwadahi di sini.

Untuk membuatnya cukup sederhana karena hanya beberapa kode saja yang diperlukan, akan tetapi jika scroll bar akan dibuat dalam bentuk yang lebih bervariasi, anda bisa tambahkan beberapa kode CSS seperti background-color, background-image, border, border radius, padding serta beberapa kode yang lain.

Scroll bar untuk seluruh posting

Menggunakan Kode HTML di Halaman Posting

Apabila kita hanya akan menggunakan di saat-saat tertentu saja, kita dapat gunakan secara langsung kode HTML-nya di halaman posting. Kode HTML-nya seperti terlihat di bawah ini:

<div style="height:400px;overflow:auto;overflow-x:hidden;padding:0 10px 0 0;margin:0;">
Tempatkan Posting di sini!
</div>

Anda juga bisa menambahkan beberapa kode CSS lain untuk membuat tampilan berbeda hingga akan terbentuk sebuah scroll box. Kodenya HTML-nya seperti berikut:

<div style="height:400px;overflow:auto;overflow-x:hidden;margin:4px;border:2px solid #888;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px;padding:10px 8px;margin:3px;background:#111;">
Tempatkan Posting di sini!
</div>

Jika anda ingin menggunakan cara yang lebih praktis, silahkan gunakan kode CSS dan simpan di atas kode ]]></b:skin>

Kode CSS Scroll Bar Posting Blog

Cara Buat Posting Gambar Lebih Menarik, Cantik,Mudah dan Cepat dengan Kode CSS

Posting gambar terhitung paling njelimet saat kita posting di "Mode Posting Edit HTML". Ini setimbang dengan hasil yang kita dapatkan di output blog. Dengan menambah beberapa kode HTML yang tak mungkin dilakukan jika hanya memanfaatkan "Posting Mode Tulis/Compose", maka gambar/image Posting menjadi tampil lebih cantik dan rapi.

Mengandalkan membuat kode HTML tambahan untuk gambar di halaman posting tentulah membuat halaman posting jadi berjubel bagai naik bis kota. Itupun masih ditambah dengan pusingnya kepala bila ada satu atau beberapa kode tertulis salah atau tak lengkap. Penerbitan posting kemudian harus dilakukan berulangkali karena kesalahan yang kode tersebut. Bila mata sudah mengantuk dan badan terasa lelah serta pikiran sudah mulai kendor, biasanya rasa jengkel meluap seketika. Bagaimana mengatasi rumitnya kode HTML saat posting? Akankah setiap kali kita akan selalu dihadapkan dengan persoalan seperti ini tanpa pernah punya solusi?

Kode CSS menjadi satu solusi yang paling tepat. Dengan menambahkannya di template di atas kode ]]></b:skin>, maka pecahlah sudah permasalahan satu yang menahun tersebut. Melalui kode CSS ini pula kita dapat membuat gambar tampil lebih cantik dengan menambahkan beberapa variabel baru seperti border, border-radius, padding, background dan jika dikehendaki bisa juga ditambahkan animasi dengan memanfaatkan CSS3 transition delay, CSS3 transition Property, CSS3 Transition Duration, CSS3 transformation, CSS3 drop shadow dan CSS3 Transition Timing Function. Kode CSS di bawah ini mempunyai 3 (tiga) fungsi penataan gambar posting. Disebelah kiri (float:left;), posisi di tengah (margin:0 auto;display:block;) dan gambar di kanan (float:right;). Setelah anda menggunakan kode CSS ini maka setiap kali posting gambar tinggal tambahkan class="...", kenudian lengkapi dengan width="...px" dan height="...px", maka gambar akan meluncur di halaman blog dengan cepat, mudah, praktis dan hasil memuaskan.

Contoh Gambar tanpa Accecories dan gambar dengan Accecories

Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!
Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.

Cara yang lebih praktis dalam posting gambar membuat waktu anda lebih bersisa. Akan lebih banyak waktu untuk membuat posting yang baru atau mungkin waktu buat dolan atau bersama keluarga. Satu yang lebih penting adalah: Kepala mot-motan dikala posting akan semakin terkurangi!
Karena beberapa sobat blogger banyak juga yang suka menampilkan gambar tanpa "bumbu penyedap" atau "accecories tambahan", maka dalam kode CSS ini kita sertakan dua macam kode, dimana kode yang pertama untuk menampilkan gambar apa adanya dan yang ke-2 (dengan tambahan "plus") kode CSS yang sudah dilengkapi dengan beberapa penambahan variabel baru guna mempercantik gambar. Untuk menggunakan di antara 2 (dua) pilihan tersebut anda langsung menggunakannya di halaman posting.

Kode CSS

Buat Kode HTML Gambar Posting Lebih Simple

Jika anda melakukan posting dan sebelumnya mengupload (unggah) gambar ke blogger, pasti yang akan anda terima adalah sebuah kode HTML gambar dengan jumlah yang bikin halaman posting penuh sesak. Anda akan melihatnya jika membuka halaman posting pada Posting Mode Edit HTML, karena jika yang digunakan "Posting Mode Tulis/Compose" anda hanya akan melihat bentuk gambarnya saja. Posting dengan "Mode Edit HTML" memang sedikit lebih rumit jika dibandingkan dengan "posting Mode Tulis/Compose", namun dibalik kerumitan ini banyak kelebihan yang dimiliki. Satu yang jelas adalah hanya melalui posting "Mode Edit HTML" sebuah gambar/image bisa ditampilkan di halaman blog dengan berbagai gaya. Anda bisa menambahkan beberapa kode HTML untuk membuat gambar tampil dalam wujud yang berbeda. Tidak hanya berbentuk segi-empat polos tak berhias, namun beberapa kode tambahan tadi bisa membuat gambar menjadi berbentuk lengkung, mempunyai shadow, beranimasi dsb. Kali ini kita tidak akan membahas bagaimana cara menghias gambar posting, tetapi bagaimana membuat dokumen gambar yang berupa kode HTML hasil unggah gambar di blogger bisa ditampilkan dalam bentuk yang lebih sederhana, praktis, tidak terlalu memenuhi halaman posting namun tetap memberikan hasil tampilan dan fungsi yang sama.
Sebagai contoh kita akan perlihatkan kode HTML sebuah gambar yang telah "di Unggah di Blogger. Kode yang kita terima di halaman posting "Mode Edit HTML" adalah sebagai berikut.

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s1600/029.jpg">
<img style="cursor:pointer; cursor:hand;width: 276px; height: 182px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglPbXiCeqZQ5At2VB6dmbCLP1ec507futTi58UgPzjkp1F5N7euWejEr6q9alzFQCR1qEhyxcf7SEWoanOBALhuX0F2cTt8oqBE-dXo3h0RxyKqJEX732eJO9zYY-CBHCnpyG-EuFWgbM3/s320/029.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5527567097891621922" />
</a>

Dengan kode HTML sepanjang itu jika dalam posting kita gunakan gambar lebih dari lima buah gambar saja, maka halaman posting tentu akan jadi penuh sesak dan membuat kepala pusing. Ada sebuah solusi untuk mengatasi hal ini, dimana kita akan hilangkan beberapa kode yang ketika dihilangkan tak akan berpengaruh apapun terhadap kualitas gambar. Kode gambar kita rubah menjadi seperti di bawah ini:

Cara Buat Text Links, Image Links dan Hyperlinks

Link pada sebuah blog ditandai dengan penggunaan tag "a" dengan bentuk kode HTML seperti di bawah ini:
<a>Text Link atau Image Link</a>
Sebuah atau beberapa buah link berfungsi untuk membuka sebuah dokument baru, baik yang ada di bog itu sendiri ataupun yang bearada di blog/web yang lain. Link juga bisa dimanfaatkan untuk berbagai kepentingan persahabatan, komunikasi atau jalinan hubungan yang saling menguntungkan antar sesama blogger, dengan situs-situs jejaring sosial, layanan promosi blog serta beberapa kepentingan lainnya. Menggunakan link sebagai cara untuk menjalin hubungan yang menguntungkan sesama blogger dilakukan melalui link exchange atau banner exchange yang bertujuan untuk saling mempromosikan blog.

D E M O Text Link dan Image Link

Setiap kali KLIK berhadiah tunai Rp.1000,00.!

Menggunakan link untuk membuka sebuah dokumen yang masih terdapat di dalam blog/web ditujukan supaya para pengunjung blog lebih mudah untuk membuka beberapa dokumen yang ada di dalam blog dengan cukup meng-klik sebuah text link atau image link yang dipasang sebagai tanda bahwa pada posisi tersebut terdapat sebuah link. Penanda link biasanya berupa perubahan yang terjadi pada mouse/cursor (menjadi berbentuk tangan-pointer dan beberapa bentuk yang lain), perubahan warna pada teks, munculnya sebuah background atau perubahan background text link atau bahkan bisa dilakukan dengan memberikan sebuah kode tambahan yang berupa kode CSS atau javascript, sehingga ketika sebuah link tersentuh cursor maka terlihat sebuah tooltip. Melihat dari fungsi dan kegunaan sebuah link, maka sudah selayaknya semua blogger memahami cara membuat teks link dan image link.

Contoh bentuk Teks Link dan Image Link

Text Link

Contoh-1:
<a href="http://tantytm.blogspot.com/">Tanty Template Modification</a>

Contoh-2:
<a href="http://tantytm.blogspot.com/2010/10/cara-kilat-buat-horizontal-tab-menu-di.html">Cara Membuat Horizontal Tab Menu</a>

Contoh-3:
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrNJYXIivnpvm0jHwkg-Ed50-vdiJFTAip8aFq4T2lB9A8rPM_k1MR_zgUfC1Hxspa_Zv311tZR779dCYHF6PLV5Nwgvvtgka36IA7oXhGbpNl2EPS7PH-Ij-uBGU3cOzE7NCy80Y0B5M3/s1600-r/images.jpeg">Indian Apache</a>

Dalam bentuk yang lain, sebuah link dibuat dengan menambahkan title yang nantinya akan muncul sebagai tips.

<a href="http://tantytm.blogspot.com/" title="Panduan dan Tutorial Blogger>Tanty Template Modification</a>

Image Link

Image link tidak menggunakan teks sebagai penanda link, akan tetapi memanfaatkan sebuah gambar/images. Penggunaan gambar biasanya bertujuan untuk membuat blog menjadi terlihat menarik sekaligus diharapkan membuat pengunjung semakin tertarik juga untuk meng-KLIK link yang di tampilkan. Supaya beban blog tidak terlalu berat sebaiknya penggunaan sebuah image link di batasi pada gambar yang bebannya kecil (dalam pixel).

Contoh Image link :

<a href="http://gubhugreyot.blogspot.com/"><img src="http://i49.tinypic.com/295t7t/tantytm/images/loading.gif" /></a>

Gambar yang kita gunakan sebagai image link adalah pada kode HTML di atas adalah:

<img src="http://i49.tinypic.com/295t7t/tantytm/images/loading.gif" />

Silahkan anda gunakan berbagai gambar untuk menggantikan link gambar seperti yang terlihat di contoh tersebut di halaman posting atau di bagian manapun dalam blog seperti misalnya ditambahkan melalui "widget HTML/Javascript" (Add a Gadget/Tambah Gadget).

Untuk menampilkan sebuah link supaya terlihat lebih atraktif, beberapa blogger menambahkan kode CSS baru atau javascript seperti misalnya membentuk sebuah link dengan fade effect (link pelangi-rainbow link) atau memberi background animasi gif, sehingga ketika mouse berada di atas link akan terlihat sebuah background animasi yang cantik. Dalam perkembangan terakhir, dengan hadirnya CSS3, fade effect pada sebuah link tak perlu lagi menggunakan javascript. Meskipun dengan penampilan yang tak sehebat rainbow link, CSS3 bisa memberi tampilan baru bagi link dengan cukup baik.

Membuat Link untuk membuat sebuah dokument terbuka di jendela baru (open in new window/opan in new tab

Untuk membuat sebuah link mampu membuat dokumen terbuka di jendela baru, kita cukup tambahkan kode target="_blank" dengan bentuk seperti contoh berikut.

<a href="http://tantytm.blogspot.com/" target="_blank" >Tanty Template Modification</a>

Dengan penambahan sedikit kode tersebut, maka ketika seorang pengunjung/pembaca blog meng-klik link, maka dokumen akan terbuka di jendela yang berbeda.

Semoga bermanfaat!

Happy Blogging ....!

Tutorial Menarik Lain

Anda bisa mengikuti tutorial blogger yang super lengkap dan berisi ratusan tutorial dengan bahasa yang gampang dipahami lengkap dengan berbagai desain cantik CSS3 dengan membuka link di bawah ini:

• gubhug reyot
• bloggerstuars

Cara Kilat Buat Horizontal Tab Menu di New Blogger Templates

Membuat Tab Menu Horizontal di Blogger Baru. Jika anda menggunakan New Blogger Template sebagai template default, maka untuk membuat sebuah tab menu horizontal di bawah header blog akan sangat mudah dilakukan tanpa perlu menambahkan kode CSS baru. Beberapa link tinggal kita tuliskan dengan bantuan kode ul dan li. Cara ini menjadi terasa amat praktis sehingga sangat menguntungkan bagi para blogger pemula.

Contoh bentuk Tab Menu

• Javascript
• CSS3
• File Hosting
• Tutorial Blogger
• Template Modification
• Gallery

Tab Menu Horizontal dapat dibuat oleh siapapun dengan cara;

• Login : Login ke blogger dengan cara:
  • Tulis User Name (Nama Pengguna) atau Email Address.
  • Tulis Password (Kode Rahasia/Sandi).
  • Klik "Login".
• Begitu halaman "Dasboard/Dasbor" terlihat, cari link "Design/Rancangan". Klik link tersebut.
• Selanjutnya anda akan melihat Page Elements/Elemen Laman dengan ciri adanya box bertuliskan "Add a Gadget/Tambah Gadget". Beberapa box terlihat bergaris putus-putus. Klik "Add a Gadget yang berada di bawah header. Tunggu beberapa saat.
• Terlihat beberapa widget yang bisa ditambahkan di blog seperti "Entri Populer, Statistik Blog, Laman, Pengikut dan beberapa yang lain. Carilah "HTML/Javascript" dan silahkan klik di sini!
• Tuliskan kode (xHTML) dalam box widget HTML/Javasript yang tersedia.
• KLIK "SAVE Templates/Simpan Template".
• Buka blog dan lihat hasilnya!

Contoh Kode Tab Menu

<ul>
<li><a href="URL" target="_blank" title="Tuliskan title di sini!">Nama/Judul Tab</a></li>
<li><a href="http://tantytm.blogspot.com/" target="_blank" title="CSS3">CSS3</a></li>
<li><a href="http://tantytm.blogspot.com/" target="_blank" title="Free CSS, Javascript, Image Hosting">File Hosting</a></li>
<li><a href="http://tantytm.blogspot.com/" target="_blank" title="Panduan dan Tutorial Blogger">Tutorial Blogger</a></li>
<li><a href="http://tantytm.blogspot.com/" target="_blank" title="Car Lengkap Memodifikasi New Blogger Template dan Template Lama">Template Modification</a></li>
</ul>

Keterangan:

• Karena bisanya link Horizontal tab menu di New Blogger Templates berukuran cukup besar, sebaiknya nama/judul link dibuat sesingkat mungkin sehingga link yang termuat menjadi lebih banyak.
• Ganti URL dengan dengan alamat-alamat yang ingin ditampilkan atau bisa juga dengan mengambil URL dari widget seperti pada Categories/Label.

Untuk membuat tab horizontal yang berbeda dari bawaan blogger tersebut (mungkin karena anda nggak suka!), anda bisa melakukan modifikasi di template. Untuk sementara ini bila anda ingin segera mendapatkan tutorial lengkap tentang modifikasi blog serta tab horizontal di blogger baru, silahkan cari di link di bawah ini:

Best Blogger Tutorial Collection

Buat Pembatas Antar Komentar Menggunakan Background Image

Komentar bagi seorang blogger adalah ibarat setetes air di tengah teriknya mentari di atas gurun. Sangat diharapkan untuk tetap menyalakan semangat posting. Dan tetesan air itu kurasakan juga hari ini. Menggugah semangat ku yang beberapa waktu sempat lunglai ditelan banyaknya kesibukan. Yah..., sekalipun ketika mau memulai terasa begitu berat. Kemalasan telah sedikit menggerogoti rasa antusias yang selama ini begitu menggelegak. Beruntunglah sekalipun dengan langkah tertatih akhirnya jemari ku mulai menari menyentuh setiap onggokan hitam berbalut putih huruf di keyboard ku! Buih ..., setelah sekian bulan tak pernah tersentuh, akhirnya pagi ini satu posting tutorial dan panduan blogger dalam memodifikasi blog selesai ku buat.

Satu hal sederhana dan masih berhubungan dengan "komentar si penyala semangat posting", kali ini aku akan mencoba membedah sedikit persoalan bagaimana "menambal" template/blog kita supaya terlihat rapi dan kolom komentar terlihat sedikit berbeda dengan tampilan biasanya. Membuat sebuah garis batas antar setiap komentar yang telah diberikan pengunjung mungkin akan membuat blog terlihat lebih indah dan dengan mudah siapapun dapat membedakan satu persatu komentar yang menghiasi halaman posting.

Batas setiap komentar yang masuk dapat dibuat dengan 2 (dua) buah macam cara:

• Menggunakan border : penggunaan border adalah sebuah cara yang paling simpel sekalipun tidak banyak variasi bentuk pembatas komentar yang bisa diciptakan. Kita hanya bisa merubah jenis bordernya serta warna border. Bagi yang menyukai "blog minimalis" ini adalah cara yang paling tepat. Sederhana, praktis pembuatannya dan tentu saja dengan amat cepat segera bisa diselesaikan.
• Menggunakan background-image : Memanfaatkan sebuah background sebuah gambar merupakan cara yang paling tepat bagi blogger yang menyukai warna, seni atau keindahan. Dengan background-image kemungkinan pembuatan bentuk batas komentar menjadi tidak terbatas. Berbagai variasi bentuk dan warna bisa dibuat, bahkan bagi yang menyukai sebuah gambar animasi (.gif), maka dengan amat cantiknya sebuah batas komentar beranimasi dapat kita buat.

Cara Membuat Batas Setiap Komentar

• Login : Silahkan lakukan login ke blogger terlebih dahulu.
  • Tulis User Name (Nama Pengguna) atau bisa juga menggunakan Alamat Email (Email Address).
  • Tulis juga Password (Kode Rahasia/Sandi).
  • Klik Login.
• Dasboard (Dasbor) : Klik Design (Rancangan).
• Design (Rancangan) : Klik Edit HTML.
• Di halaman HTML ini akan terlihat banyak sekali kode html, silahkan cari kode ]]></b:skin>. Copy paste kode CSS di atas kode ]]></b:skin>.
• Klik SAVE Templates (Simpan Template).
• Anda harus membuka halaman posting yang sudah ada komentarnya. Apabila belum ada , buatlah komentar sendiri supaya bisa terlihat hasilnya. Jika dikehendaki, setelah bisa diketahui hasil akhir pembuatan batas komentar, maka komentar bisa anda hapus melalui link Comments atau Komentar.

Batas Komentar Menggunakan Border

Kode CSS

dd.comment-footer {
      border-bottom: 4px solid #888; 
}

Beberapa perubahan yang dapat dilakukan jika kita gunakan border:

• Silahkan anda bisa merubah tebal border (4px) sesuai tebal batas komentar yang di kehenndaki. Semakin besar nilainya maka akan semakin tebal bentuk batasnya.
• Untuk merubah warna border, anda bisa mengganti kode warna (#555) dengan kode warna yang lain. Bisa dalam bentuk kode menggunakan angka dan huruf (#000, #fff, #333, #b40303 , ... dsb) atau kode warna berbentuk teks (contoh: blue, red, white ... dsb).
• Pilihan lain yang bisa anda lakukan untuk merubah bentuk batas komentar adalah dengan merubah style border-nya (contoh: ridge, dotted, solid, outset, dashed, inset). Dibawah ini adalah bentuk perubahan yang dilakukan.

dd.comment-footer {
      border-bottom: 1px dotted lightblue; 
}

Batas Komentar Menggunakan Background-Image

Menggunakan sebuah background-image tidak jauh berbeda dengan penggunaan border, hanya kode CSS yang kita gunakan sedikit berbeda.
Kode CSS

dd.comment-footer {
      padding-bottom: 4px; 
      background: url(http://i43.tinypic.com/2aeqkiv/tabtytm/bgimg/.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Keterangan

• Untuk background position pada posisi vertical kita gunakan sebesar 15px.
• Background-position horizontal bernilai 50% supaya posisi background center horizontal.
• Saat menggunakan sebuah background-image sebagai batas komentar, kita harus mengetahui ketinggian background (gambar).
• Tinggi gambar tersebut kita gunakan sebagai padding-bottom dengan menambahnya sebesar 10px. Penambahan ini dimaksudkan untuk menciptakan ruang dengan komentar di bawahnya.
• Dengan perhitungan menggunakan angka angka di atas, maka batas tiap komentar akan lekat di teks terakhir komentar sementara di bawahnya ada padding yang mencukupi.
• Dalam kode CSS di atas digunakan background berktinggian 4px oleh karena itu padding-bottom = 4px + 10px = 14px.

Beberapa Kode CSS yang bisa dimanfaatkan

Beberapa kode CSS yang telah lengkap dengan background-image ini bisa dimanfaatkan langsung dengan menyimpan di atas kode ]]></b:skin>.

dd.comment-footer {
      padding-bottom: 22px; 
      background: url(http://i37.tinypic.com/t8b1na/tantytm/bgimg/Redball12.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 25px; 
      background: url(http://i54.tinypic.com/28l7tyr/tantytm/bgimg/V15H5.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 16px; 
      background: url(http://i40.tinypic.com/2evwaq9/tantytm/bgimg/V6H345.png) bottom left repeat-x;
   background-position: 50% 15px;
}

Menggunakan background animasi:

dd.comment-footer {
      padding-bottom: 24px; 
      background: url(http://i47.tinypic.com/1zf69nr/tantytm/bgimg/minusAnima14.png) bottom left repeat-x;
   background-position: 50% 15px;
}

dd.comment-footer {
      padding-bottom: 35px; 
      background: url(http://i51.tinypic.com/2r2q805/tantytm/bgimg/bloodanima.gif) bottom left repeat-x;
   background-position: 50% 15px;
}

Tutorial lain yang jauh lebih lengkap dengan jumlah ratusan posting menarik dapat anda buka melalui link di bawah ini:

Best Blogger Tutorial Collection