Free Donlot Beloon Online Template

Karena cukup banyak yang meminta template versi beloon-online yang saya pake, sampai ada sebagian sobat yang beberapa kali meminta template tersebut. Maka kemarin saya buat template yang kolom dan cara kerjanya sama.

Selanjutnya untuk mempercantik dengan berbagai fungsi dan aksesories saya serahkan saja kepada anda , karena template ini masih perawan sekali, kalaupun saya pegang atau usap-usap cuman sedikit badan kepala dan kakinya :), untuk sample  anda bisa lihat beloon-template .

View : Demo | View : Donlot

Saran saya gunakan se-banyak-banyak-nya url feed, baik mengunakan Ajax Feed Rss, bloglist widget atau yang lainnya. karena template ini cocok di gunakan untuk blog berita. Untuk read-more atau pemengalan artikel Read-More Liberal sepertinya yang cucok untuk di gunakan.

Css Conditional Comments: Solusi Bug untuk Ie

Hari gini masih pake browser IE ?

Peryataan seperti itu sering saya jumpai, bahkan tidak tanggung-tanggung, blogger sekelas “ C “ pun dalam satu balasan komentarnya pernah berkata seperti itu.

Ie terutama ie 6 , memang merupakan browser yang sering membuat saya frustasi. Terkadang kalau sebel dan malas membetulkanya saya pun sering mengatakan seperti itu “ Hari gini masih pake browser ie “ :D. 

Namun terkadang saya merasa bangga juga, jika saya bisa melewati test rendering di browser ini. tidak tahu kenapa ada kepuasan tersendiri jika hasilnya tidak terlalu buruk untuk di tampilkan di browser ie 6.  - makanya pernah teman saya suatu hari mengatakan via comment , bahwa saya ini terlalu perfeksiones  ( huhuuuuuuu ).

Kalau kita googling banyak sih jawaban dan solusi tengtang masalah bug  ie ini. cukup masukan keyword “ conditional comment “ atau “ conditional formatting” maka seabreg list akan kita temukan.

Tapi saya sendiri untuk mengatasi masalahnya  sering mengunakan tag seperti ini.

* html #elemen { property:value }

Syntax css tersebut hanya di baca di ie saja tidak untuk browser lainnya.

contoh ; ketika saya mengunakan lebar sidebar 210px , namun mendapatkan masalah jika di render di IE , maka saya akan tambahkan seperti ini.

* html #sidebar {width:200px }

Dengan syntax tersebut biasanya sangat manjur saya gunakan.

Selain syntax tersebut ada juga yang mengunakan seperti ini contohnya.

html>body .elemen { property:value }

Ada juga yang mengunakan conditional comments  seperti ini.

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" />
<![endif]—>

Syntak tersebut biasanya saya simpan di bawah tag ini ]]></b:skin>

Ya..ya..ya selain itu masih banyak sih tengtang bug ie. seperti tengtang float,box, image png transparent , height dll.

mungkin list judul artikel di bawah ini bisa membantu dan menambah wawasan seputar conditonal comment ( bug ie only ).

1. ie css bugs thatll get you every time
2. howto – javascriptkit
3. how to create an ie only stylesheet
4. select cuts off options in ie fix
5. Box model
6. Targeting Ie Using Conditional Comment

 

 

Ah intermezo lagi

Walaupun saya tidak begitu serius tentang seo , namaun seo terlalu genit juga untuk saya lewatkan begitu saja, setidaknya itulah yang ssaya lakukan dua hari kemarin ini. main di kawahnya untuk optimisasi search google.

Apa yang saya pahami selama dua hari tersebut ?

Tetap saja nihil, tetap saja buram bagi mata pikiran saya. Namun satu hal yang membuat saya bertahan , karena sejak saya publis tulisan “ mendaftar blog di search engine”, banyak sekali perubahan yang di lakukan lapan optimisasi untuk search google ini. Apalagi jika melihat nasib blog karuhun ini, yang dulu beberapa artikelnya sempat teratas di list google. kini perlahan-lahan mulai anjlok. makanya kemarin itu saya coba perbaiki untuk sitemap dan feednya.

Dan bisa saya pahami juga alasan google tentang tidak konsisten atau fluktuasi dalam masalah  indeksi ini pada beberapa blog  saya . karena walaupun seandainya optimisasi search engine ini merupakan kalkulasi dan rumusan algoritma murni , namun faktor lain seperti misalnya server atau pusat data bisa saja mengalami ganguan. apalagi jika merujuk pada penjelsean google sendiri bahwa pusat datanya itu bukan hanya satu.

Satu hal lagi yang saya harus pahami , kalau memang ingin tetap konsisten, saya harus tetap menjaga ritme, konsisten menupdate blog , menulis artikel yang cocok dengan keyword, merawat situs dari html dan javascript yang sukar di kenali googlebot dan  selalu mengecek  pada  webmastertool-nya sendiri kalau ada perubahan settingan-nya.

yeah standar sih :)

Intermezo Sejenak

Sejam yang lalu, saat saya edit blog, sempat terkaget-kaget juga. karena tampa pemberitahuan sebelumnya pihak google blogcepot tambahin satu tab baru pada sub edit layout-nya yakni tab “ Monetize”. dan di ujung paling bawah pada tab “ elemen”  ada semacam pengesahan dari pihak google adsense “ Make money from your blog. Publish ads with Google AdSense”. hihi.. centel juga ternyata google ini.

Bagi blogger lain yang tidak ada tab “ Monitize “, untuk memunculkanya gampang sekali. kita tinggal atur setinggan “ Formatting” –nya pada Language-England.

Ah mungkin ini informasi yang bisa menjadi sangat basi, karena tampa di beritahukan juga semuanya pasti ngalamin yach ? . but bagi saya dan mungkin berjuta-juta blogger yang ngarep kelimpahan rezeki dari iklan adsense ini, pastinya cengar-cengir dengan kemudahan memasang iklan adsensenya. 

Oh iye walaupun ini cuman iseng, tapi kita mungkin sekali-kali pingin tahu berapa sih jumlah postingan yang ada di blog kita ?

Atau pingin tahu berapa banyak jumlah komentar yang ada di blog kita ?

Nah gampang saja. dengan bantuan tool ini yang di buat oleh blogger vietnam, kita dapat mengetahui berapa jumlah postingan atau jumlah komentar di blog kita.

caranya masukana saja alamat feed post kita : contoh

http://nama blog kamu.blogspot.com/feeds/posts/default

Atau alamat feed comment kita : contoh

http://namablog kamu.blogspot.com/feeds/comments/default

ayo siapa yang mau. “ Cek Jumlah Post Dan Comment "

Sebuah Apologi

Tentang Shout Box, Tukeran Link Dan Jawaban Tentang BlogList Content

Susah cari inspirasi ???

hiksss … dari pada pusing mikirin datangnya inspirasi, lebih baik saya jawab dulu beberapa pertanyaan yang tidak bisa saya balas via comment.

1. Tentang Shout-Box
2. Tentang Tukeran Link
3. Tentang Bloglist ; Terutama memaksimalkan lebar content bloglist dan memindahkan gambarnya menjadi di atas keterangan.

 

Tentang Shout-Box

Saya akui shoutbox merupakan sarana yang ampuh untuk menjalin pertemanan, mempererat persahabatan, memperkenalkan diri, ngobrol dan guyonan. Namun di sisi lain, jika yang menitip pesan via shout box begitu banyak,  begitu juga jika berbenturan dengan comment yang masuk.Maka  saya membutuhkan waktu yang panjang  untuk bisa  membalas-nya.  Sedangkan untuk saat ini saya tidak punya waktu yang cukup untuk online yang sangat lama.

Coba rasakan, ketika anda menitipkan pesan via shout box, kemudian saya tidak bisa membalas-nya. saya pastikan anda pasti sangat kecewa bukan ? ini pernah saya alami pula. karena itu untuk sementara  saya hilangkan dulu.

Tentang Tukeran Link

Masih banyak yang minta tukeran link dengan blog ini, namun seperti shout box untuk sementara tukeran link saya off dulu, alasanya berbeda dengan shout box. ini lebih kepada karena widget tukeran link saya sudah begitu banyak coba saja cek and periksa. Lagi pula menurut keterangan google sendiri , tukeran link tidak membantu atau tidak ada hubungannya denga ranking  seo.

Please yach harap di maklumi , bukan saya somse lho.

Tentang Bloglist

a. Memaksimalkan lebar content bloglist.

Jika anda coba periksa widget bloglist, maka content atau isinya lebarnya hanya sekitar 85% dari lebar area sidebar. untuk memaksimalkan bloglist menjadi full sidebar maka kode penambahkan untuk css nya seperti ini. ( red. saya coba dan berhasil )

#BlogList1 .blog-content {
  width:95%;
}

ket :

#Bloglist1 = merupakan sebuah Id yang harus unik atau tunggal. jika anda memiliki beberapa widget bloglist maka id nya akan seperti ini #BlogList1, #BlogList2,#BlogList3 dst.

.blog-content = merupakan sebuah class yang mengatur content atau isi, terutama jarak kalimat ( line height ) , ukuran lebar dll.

width:95% =  ukuran lebar content bloglist.

b. Menampilkan Gambar di atas keterangan pada widget bloglist.

Biasanya yang kita lihat gambar pada bloglist di samping kanan tulisan. untuk memindahkan gambar tersebut menjadi di atas tulisan pindahkanlah kode html gambar ini.

<b:if cond='data:showItemThumbnail == &quot;true&quot;'>
<b:if cond='data:item.itemThumbnail'> 
<div class='item-thumbnail'>
<a expr:href='data:item.blogUrl' target='_blank'>
<img alt='' border='0' expr:height='data:item.itemThumbnail.height' expr:src='data:item.itemThumbnail.url' expr:width='data:item.itemThumbnail.width'/>
</a></div></b:if> </b:if>

di atas kode html ini.

<div class='blog-icon'>
<b:if cond='data:showIcon == &quot;true&quot;'>
<input expr:value='data:item.blogIconUrl' type='hidden'/>
</b:if></div>

ket:

'data:item.itemThumbnail.height'

'data:item.itemThumbnail.width'

syntax tersebut  bisa di ganti dengan sebuah angka, misalkan;

"100" dan "200".

RecentPost dan Plus Gambar

Setelah cukup lama  mengutak-atik gadget bloglist, akhirnya saya menemukan widget baru yang bisa menampilkan feed berikut gambarnya ( recentpost thumbnails ), yang dalam beberapa hal saya setuju, widget feed thumbnails ini jauh lebih mudah untuk saya  konfigurasi dari pada gadget bloglist.

eh tidak ding, karena meskipun mudah pada awalnya saya cukup repot juga xixixi, karena widget ini di tampilkan atau mengunakan table, yang saya sendiri kurang pamiliar dengan html table. tapi setelah mencoba mengutak-atiknya dan mencari reperensi tengtang table ini, akhirnya saya bisa juga memainkan sedikit jurus- jurus  css untuk properti table.

ilustrasi recentpost thumbnais.

Jika anda tertarik ingin memasangnya, silahkan lakukan prosedur berikut ini.

1.Buka tab Edit Elemen kemudian pilih atau tambahkan gadget Htm/Javascript.

2. Setelah itu masukan script di bawah ini.

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://librarysupporter.googlepages.com/thumb.jpg";
imgr[1] = "http://librarysupporter.googlepages.com/thumb1.jpg";
imgr[2] = "http://librarysupporter.googlepages.com/thumb2.jpg";
imgr[3] = "http://librarysupporter.googlepages.com/thumb3.jpg";
imgr[4] = "http://librarysupporter.googlepages.com/thumb4.jpg";
showRandomImg = true;
tablewidth = 300;
tableheight = 50;
cellspacing = 0;
borderColor = "none";
bgTD = " ";
imgwidth = 50;
imgheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "";
showPostDate = false;
summaryPost = 50;
summaryFontsize = 11;
summaryColor = "#666";
icon2 = "  ";
numposts = 5;
home_page = "http://jaloee.blogspot.com/";
</script>
<script src="http://librarysupporter.googlepages.com/recentposts_thumb.js" type="text/javascript"></script>

3. Stop !!! jangan  di save dulu :) . karena kita harus mengetahui beberapa hal pada script di atas.

note 1

Script ini menjelaskan jika postingan kita tidak mempunyai sebuah gambar, maka gambar ( url gambar di atas ), akan mengantikanya. dan gambarnya akan di pilih secara acak ( true ).

note 2

Script ini menerankan lebar tabel, jarak antar cell, warna border, latar belakang cell. yang dapat anda konfigurasi dan di sesuaikan dengan lebar sidebar dan warna blog.

note 3

Script untuk tampilan lebar dan tinggi gambar. – kita bisa konfigurasi ulang.

note 4

Tampilan font, warna text link, text tebal.

note 5

Script tentang jumlah descriptsi recent post yang akan di tampilkan = 50; + .. , ukuran font, warna font, dan jumlah recentpost-nya = 5 ; ( bisa lebih bisa kurang )

note 6

Url blog yang akan di tampilkan recenspostnya , - home-page = http://bloganda.com/

note 7

Alamat kode javascript yang mengatur secara keseluruhan widget recentpost thumbail ini. dan salah satunya untuk kasus terntentu   kita bisa mengatur parameter feed / recent post yang akan di tampilkan. – ( tergantung kebutuhan ).

a. misalkan, saya hanya ingin menampilkan recent post dalam label atau categorie artikel “ Photoshop “ saja.

pertama buka kode javascrip dengan program notepad. kemudian cari dan ganti kode ini.

feeds/posts/default?max-results=

dengan paramter url feed ini.

feeds/posts/default/-/Photoshop?max-results=

Setelah saya menyimpanya dengan nama file recentphotoshop.js dan uploadnya.

( tentang mengatur parameter feed pernah saya tulis di recent post label. )

Selain itu ada lagi yang bisa ganti beberapa kode pada file javascript ini. seperti menganti tabelnya menjadi satu colom dua row. yang menghasilkan gambar feed-nya di atas, sedangkan posisi keterangan feednya di bawah.

ilustrasi gambar.

otre deh selamat berkreasi dengan widget recent post barunya.

source : mlxperience