Kaligrafi islam ; Font, shape, brush dan koleksi islam lainnya untuk tamu kita " ramadhan" .

Puasa adalah lokakarya sebulan untuk mencari dan menemukan ilmu-ilmu pengetahuan tentang hidup, tentang thariqat ilallahi. Itulah sebabnya kita di anjurkan untuk i'tikaf di masjid, untuk takafur, merenung, berkontemplasi, mengkalkulasi hidup, menembus ufuk-ufuk cakrawala anugerah Allah " Markesot Bertutur - Emha Ainun Nadjib.

"Allahumma bariklana fii rajab wa sya'ban wa balighna Ramadhan." (Ya Allah, berkatilah kami di bulan rajab dan Sya'ban, dan sampaikanlah kami di bulan Ramadhan).

Kalau tidak ada aral melintang, sekitar 5 atau 6 harian lagi kita akan melaksanakan ibadah shaum ramadhan. Tentu saja sebelum mengijak bulan mulia itu, saya ingin mengucapkan selamat menjalankan ibadah puasa kepada semua blogger yang kebetulan seorang muslim.

Jamu R-Mubarak.psd
Donlot: Di Sini

Dan sebagai blogger berstatus manusia yang tak luput dari kesalahan. Maka dalam kesempatan ini pula saya memohon maaf  yang sebesar-besar-nya, apabila ada postingan,  komentar atau komunikasi via shoutbox yang menyinggung atau menghina. baik itu di lakukan dengan sadar atau di luar kesadaran.  - maklum lidah tak bertulang.

Juga untuk menyambut tamu agung tersebut, kebetulan saya memiliki beberapa koleksi font kaligafi, shape dan brush kaligarfi  untuk program photoshop yang saya share untuk bisa anda unduh ( donlot ). Juga untuk anda yang ingin mencari lautan ilmu tentang islam, hikmah dan lain-lain saya sedikit mempunyai link situs yang mudah-mudahan bermangfaat.

Yu selamat menjalankan ibadah Ramadan .... Mohon maaf lahir batin.

 

Font Kaligrafi : Shia

Donlot : Shia Font Donlot

 

Islamic Shape 1 :

Donlot : Islamic Shape Donlot

 

Islamic Shapes 2 :

Donlot : Islamic shapes 2 Donlot

 

Islamic shapes 3 :

 

Donlot : Islamic Shapes 3 Donlot

 

Islamic Shapes 4 :

Donlot : Islamic Shapes 4 Donlot

 

Islamic Shapes 5 :

Donlot : Islamic Shapes 5 Donlot

* Sumber www.adobe.com

 

Islamic Brush :

Donlot : Arabic Brush Donlot

* Sumber :  www.brusheezy.com

 

Download Sofware

1. Qur'an Arabic Unicode

2. How to Calculate the Qiblat direaction

3. Terjemahan Al-Qur'an v1.5 released

4. Adzan untuk Hp

5. dan lain-lain

Visit : www.ebsoft.web.id

 

Islam Link Situs Direcktorie.

Visit : www.al-ikhwan.net

List Navigasi MSN Style

Ini sebenarnya bukan saya lho yang ngasih namanya, tapi pertanyaan yang di ajukan oleh bung Hendrawan.  “ ngomong2 gimana caranya bikin seperti yang ada diantara navbigasi dan isi postingan itu (yg kayak MSN style) “.

dan  kalau di pikir-pikir enak juga kedengarannya . heuheuehu….

Sebenarnya untuk membuat Style list atau navigasi seperti itu,  saya mengunakan pembagian kolom seperti yang telah di jelaskan pada “ Membuat postingan  ala Majalah atau Koran “, dan untuk list image-nya saya mengunakan teknik Css Sprite, dan ini pun sudah saya tulis pada “ list image dengan teknik css sprite “ .

Otre-lah karena terkadang kita tidak butuh  teori, dan lebih paham setelah mempraktekannya. jadi langsung saja pada prakteknnya.

Pertamaxxx.

seperti biasa buka tab Tata-Letak – Edit Html.

kemudian simpan syntax Css ini.

* {
margin: 0px;
padding: 0px;
}

 

di atas syntax ini.

body {
background:#ffffff;margin:0;color:#333333;
font:x-small Georgia Serif;font-size/* */:/**/small;
font-size: /**/small;text-align: center;
}

Setelah itu cari kode  ini.

]]></b:skin> 

kemudian di atas tag tersebut , yakni.

 

 

simpan  syntax Css ini.

 

/* List Yahooo

---------------------------------------------*/


#nyaho li {


list-style:none;font-size:12px;padding:0px;margin:0px;


}

#nyaho li a {

background:url(http://www.geocities.com/jaloea/icon-yahoo-04.gif)


no-repeat scroll 0pt;display:block;font-family:verdana;


font-size:84%;font-weight:bold;


line-height:normal;margin:-1px 0pt -2px 0;


padding:3px 0pt 13px 40px;text-indent:-15px;


}

/* Box

-----------------------------------------------*/


#boxes {


float:left;width:100%;


margin:5px auto;border:0px solid $bordercolor;


}


#box1 {


width : 140px;float : left;text-align : left;


padding : 0px;margin-left : 10px;margin-top : 10px;


text-align : justify;


}


#box2 {


width : 120px;float : left;text-align : justify;


padding : 0px;margin-left : 10px;margin-top : 10px;


}


#box3 {


width : 140px;float : left;text-align : justify;


padding : 0px;margin-left : 10px;margin-top : 10px;


}


#box4 {


width : 140px;float : left;text-align : justify;


padding-right : 0px;margin-left : 10px;margin-top : 10px;


}


#box5 {


width : 140px;float : left;text-align : justify;


padding-right : 0px;margin-left : 10px;margin-top : 10px;


}


#box6 {


width : 200px;float : right;text-align : justify;


padding-right : 10px;margin-left : 10px;margin-top : 6px;


}

#boxes p {

padding-left : 0px;padding-right : 0px;


}

 

* Sebenarnya kita bisa saja membuat  list-nya langsung pada tag boxes, namun mungkin seaktu-waktu anda membutuhkannya pada Html lain.

Keduaaaxxxx :

cari html ini.

<div id='crosscol-wrapper' style='text-align:center'>

        <b:section class='crosscol' id='crosscol' showaddelement='no'/>


      </div>

kemudian ganti dari tulisan “ no “ menjadi “ yes” seperti di bawah ini.

<b:section class='crosscol' id='crosscol' showaddelement='yes'/>

Jika di ilustrasikan seperti ini.

sebelum ( lihat garis merah ):

Sesudah :

Karena kita akan menambahkan Navigasi/list MSN ini di bawah header.

 

Setelah beres Simpan Template.

Ketigaaxxxxx :

Buka tab Elemen Halaman, dalam tab Tambahkan Gadget ( di bawah header )

 

Setelah terbuka  pilih Html/Javascript.

 

kemudian masukan tag html ini.

 

<div id="boxes">

<div id="box1"><ul id="nyaho">

<li><a style="background-position: 0pt -1120px;" href="Url Link" title="keterangan link">Nama List</a></li>

<li><a style="background-position: -400px -1280px;" href="Url Link" title="Keterangan">Nama List</a></li>

<li><a style="background-position: -400px -120px;" href="Url Link" title="keterangan">Nama List</a></li>


</ul></div>

                               <div id="box2"> <ul id="nyaho">

<li><a style="background-position: 0pt -1600px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -1400px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -600px;" href="Url Link">Nama List</a></li>

</ul></div>

<div id="box3"> <ul id="nyaho">

<li><a style="background-position: -400px -760px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt -439px;" href="Url Link">Nama List</a></li>

<li><a style="background-position: 0pt 0px;" href="Url Link">Nama List</a></li>

</ul></div>          

              <div id="box4"><ul id="nyaho">

<li><a style="background-position: 0pt -1320px;" href="Url Link">Banner Link</a></li>

<li><a style="background-position: 0pt -1280px;" href="Url Link"> Komentar</a></li>

<li><a style="background-position: 0pt -80px;" href="Url Link" title="Recent Post">Recent Post</a></li>

</ul></div> 

                 <div class="clear"></div>

                </div>

 

* atau kode-nya bisa kamu donlot di sini.

Url Link  ( alamat link ) , contoh ; http://catalog-tutorial.blogspot.com/2008/04/technorati-vitamin-untuk-blog.html

Keterangan : Vitamin Blog

Nama List : Tecknorati.

Mempercantik Area Komentar Episode 2

Baiklah kita lanjutkan lagi tulisan yang tertunda seputar mempercantik area komentar. Dalam postingan sebelumnya, saya menulis  cara menambah background warna atau gambar pada form komentar ( kotak komentar ) intip sini.

Maka untuk episode lanjutan  ini,  tentang  cara  merubah atau mengutak-atik pada area komentarnya, atau istilah yang di pakai oleh blogspot “ comments-block “.

Oh ! Tentu saja tulisan ini hanya menjelaskan dan mengacu pada bagaimana proses membuat " comment block" yang saya miliki.

Dan tentu juga " commnets-block" yang saya percantik  merupakan " commnets-block" yang di miliki template " Minima", template standar yang di miliki Blosgpot.

Sebelum

Sesudah

 

Jika di ilustrasikan mungkin seperti inilah syntax Css template Minima untuk area Komentar.

Otre kita langsung saja.

Pertamaaxx :

seperti biasa buka tab Tata-Letak – Edit Html.

Kemudian tandai kotak kecil / centang di samping tulisan Expand Template Widget.

 

Keduaaaaxx :

cari syntax Css untuk komentar ini. ( ngga perlu sama yang penting tag  css untuk komentar )

/* Comments
----------------------------------------------- */
#comments h4 {
  margin:1em 0;
  font-weight: bold;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.2em;
  color: $sidebarcolor;
  }

#comments-block {
  margin:1em 0 1.5em;
  line-height:1.6em;
  }
#comments-block .comment-author {
  margin:.5em 0;
  }
#comments-block .comment-body {
  margin:.25em 0 0;
  }
#comments-block .comment-footer {
  margin:-.25em 0 2em;
  line-height: 1.4em;
  text-transform:uppercase;
  letter-spacing:.1em;
  }

#comments-block .comment-body-author {
margin:.25em 0 0;
color:#EF2C2C;
}

#comments-block .comment-body p {
  margin:0 0 .75em;
  }

 

Kemudian ganti dengan kode ini.

/* Comments ----------------------------------------------- */ #comments { background: none; border: solid #cccccc 1px;/* border atau bingkai */ margin-bottom:10px; } #comments h4 { margin:1em 0 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; padding-left:20px; letter-spacing:.2em; color:#CE2A0F; } #comments-block { margin:1em 01 .5em 1em; line-height:1.6em; padding-bottom:25px; } #comments-block .comment-author { margin:.5em 0; padding: 0 20px 0 20px; color: #A6210B; background: #EBF3FB;/* warna background komentator */ } #comments-block .comment-body { margin:.25em 0 0; padding: 0 20px 0 20px; background: none; } #comments-block .comment-body-author { margin:.25em 0 0; padding: 0 20px 0 20px; color: #CF9118; } #comments-block .comment-footer { margin:2em 0 .5em 70px; line-height: 1.4em; text-transform:normal; padding: 0 20px 0 20px; font-size:10px; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em 70px; } .comment-form { background:#EFEFEF; border:5px solid #cccccc; margin:0 10px 20px 10px; padding:10px 0 0 15px; }

Ketigaaxx :

Setelah beres kemudian meluncur ke bawah . dan cari kode ini. – setelah itu hilangkan atau hapus kode tulisan yang di beri warna merah di bawah.

 

<b:loop values='data:post.comments' var='comment'>
        <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

 

* untuk ke hati-hatian selalu ingat kode yang di buang atau di hilangkan.

 

Keempaxxx :

cari kode ini .- dan tambahkan kode seperti yang saya beri warna.

 

<dd class='comment-body'>

<div class='commentphoto' style='float:left;margin-top:.25em;'/>
            <b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
              <p><data:comment.body/></p>
            </b:if>
          </dd>
          <dd class='comment-footer'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
                <data:comment.timestamp/>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd>

     <div style='clear:both;'/>
        </b:loop>
      </dl>

 

Kelimaxxx :

Scroll mouse ke atas dan temukan tag ini.

</head>

 

kemudian simpan  javascript ini di atasnya.

 

<script src='http://yggomelprup.googlepages.com/blogger_comment_photos.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
BloggerProfiles.noimage = 'http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif';
BloggerProfiles.imageWidth = 50;
BloggerProfiles.imageHeight = 60;
addLoadEvent(function(){showCommentPhotos('commentphoto','comment-author', 1);});
//]]>
</script>

UPDATE :

Jika link gambarnya Not Found, ganti url gambar di atas dgn url ini.

http://lh3.ggpht.com/jaloee/SJr2PbdrTsI/AAAAAAAACYI/EnzbBOOGxBg/nopic_48.gif

 

Setelah itu Simpan Template.

jika tidak ada masalah hasilnya harusnya seperti ini.

Oh ! tentu saja anda harus menyesuaikan dengan tampilan dan warna blog sendiri.

Tulisan ala Majalah atau koran

Untuk menambah atau membagi kolom pada area postingan layaknya seperti majalah atau koran, caranya sangatlah mudah. Namun yang saya alami, kendala-nya  adalah postingan atau tulisan kita  menjadi berganda atau kembar.

Menurut Hoctro-hack, salah satu solusinya mesti mengunakan JSON  (JavaScript Object Notation), namun sampai sekarang jago ngehack ini belum juga turun gunung.

Baiklah sambil berharap dan menunggu siapakah  orangnya yang dapat meng-hack  area postingan terbelah ke dalam dua kolom ini.

Kalau kita mau dan ingin sedikit intermezo membagi tulisan kita layaknya sebuah majalah atau koran  , tidak ada salahnya  mencoba dan memangfaatkan cara yang sederhana, yakni mengunakan kode Css dan tag Div.  

contoh.

Menurut Hoctro-hack, jika ingin tidak berganda atau kembar maka yang perlu dilakukan adalah mengunakan JSON, namun sampai sekarang rencana-nya belum juga terlaksana.

Baiklah sambil menunggu siapa orang-nya yang dapat meng-hack  area postingan terbelah menjadi dua kolom,  kita mengunakan secara biasa saja dulu, yaitu  menulis.

 

* mungkin jika di ibaratkan kolom merupakan induk ( tempat ) bagi kolom1 dan kolom2.

Penerapan :

baiklah langsung saja pada  penerapanya.

Pertamaxx : buka tab pengaturan – format :

kemudian di samping kanan tulisan “ Konversi ganti baris “ pilih ke “ tidak “ , karena terkadang “Post Editor” blogspot tidak pamiliar dengan tag html lainya.

ilustrasi gambar.

 

Keduaaxxx : kemudian masukan Css ini di atas tag : ]]></b:skin>

/* kolom
------------------------------------*/

#kolom { margin-left : 0px; margin-right : 0px;}

#kolom1 { width : 46%; float : left;text-align : justify;
padding:0px;margin:0px;}

#kolom2 { width : 46%;float : right;text-align : justify;
padding:0px; margin:0px;}

opsional : kita bisa  menambah sebuah heading <h3> atau <h2> untuk bagian judul pada setiap kolomnya atau menambah baris untuk tulisan “ selanjutnya “ atau untuk kasus-kasus tertentu kita bisa juga memberikan  properti float pada kolom induk-nya .

Ketigaaxxx : buka “ Post Editor “ blog kemudian pilih “ Edit Html “

Kemudian buatlah tulisan seperti ini.

 

<div id=”kolom”>

<div id=”kolom1”>artikel kolom pertamaxxxxxxxxxxxxx…</div>

<div id=”kolom2”>artkel kolom keduuuuuuuuaaaaaaaaaaaxxxx.</div>

<div class=”clear:both”></div>

</div>

 

Cara Instan.

Hoho.. terkadang kalau mesti  membuat dan memasukan  Css-nya ke dalam layout , ada saja  yang bilang aduh koq ribet sih !

Oke deh.. jika kita ke pingin-nya  langsung alias instan tampa perlu membuat dan memasukan dulu sintax css-nya  , kita bisa saja langsung memasukan kode htm ini ke dalam “ Post Editor” blog.

<div style="width: 45%; float: left;">Tulisan Kolom Pertamaxxx</div>

<div style="width: 45%; float: right;">Tulisan Kolom ke Duaaaaaaa</div>

<div style="clear: both;"></div>

 

Tambah bumbu tambah sedap

mungkin jika di tambahkan dengan cara penulisan Alert Message, hasilnya bisa seperti ini.

Iklan Pertamax:   
Apakah anda merasa kesepain ? butuh teman untuk kencan.. silahkan hub“ 
Read more 

Iklan Keduaaaxx:   
Di cari cewek cantik yang baik hati dan ramah linkungan .. hub phone ini .
Read more 

Iklan Ketigaxxxxx:    
Anda bosan dengan pasangan hidup anda ? jika ya.. itu tandanya anda bermasalah 

Atau mungkin seperti ini :

Atau Mungkin anda punya ide lain dan cara lain ??

 

* jika kode-kode di atas bermasalah, mungkin anda perlu menulis ulang secara manual, alias ngga pake copas ( copy paste ).

Note : dengan beberapa tambahan sintax css, kita bisa menerapkanya juga ke dalam sidebar kolom.

 

Template Grid Focus by Amanda

Secara garis besar saya sangat menyukai template Grid Fokus yang di alihkan dari theme wordpress ke blogger oleh Amanda ini.

Walaupun ketika  pertama kali saya melihatnya terkesan sederhana, namun setelah saya mencoba mengunduhhnya, kesan kesederhaan itu justru hilang.

Apalagi setelah meletakan beberapa widget pada bagian sidebarnya. akan terlihat sangat bagus, terutama bagi yang suka dengan desain ala megazine, seperti the new york time, nationalpost, thetechnologyherald dll.

Selain itu  salah satu kekuatan pada template ini dan yang saya suka adalah  bar navigasi-nya  yang terpasang pada bagian atas dan bawah, walaupun hanya di desain mengunakan sebuah border / garis , namun sangat multifungsi dan sangat cocok dengan keseluruhan perwajahan templatenya.

Template ini di bagi ke dalam tiga kolom, dan dua bar navigasi atas dan bawah, dan jika kita biasa memakai template bawaan blogger, maka kita tidak akan pusing dengan sintax yang aneh-aneh dari template ini. karena template yang di alihkan ke blogger ini isinya tak jauh jika kita melihat template standar.

Grid Fokus : Template New Blogger

Web designerWall :   
“ If you are looking for inspiration for grid and column design, here is a nice collection of 32 column-based websites. These sites show how grid layout can be applied on various type of sites“ 
Read more 

Eosmate-Blog
“Berbicara tentang desain blog atau situs sekalipun, maka tidak akan terlepas jauh dari bagaimana kita mengelola layout atau tata letak, “ …
Read more

Enam hari yang melelahkan

ah akhrinya… setelah satu pekan memilah dan memilih, menakar dan mengukur, kelar juga saya menganti perwajahan blog ini.  Walaupun pada dasarnya saya masih teramat sayang pada perwajahan blog yang lama ala nyahoo. sangat simple dan tidak neko-neko.

Tapi apapun itu, mudahan-mudahn perwajahan yang baru ini lebih berkesan dan dapat diterima terutama oleh teman-teman yang selalu hadir menberikan supportnya. dan saya berharap sih, mudahan-mudahan saja ini lebih terbuka dan bersahabat seperti pernah di sentil oleh gus – semarang review.

Jadi intinya gus.. mungkin saya akan melerik juga page rank dan konco-konconya, atau ngikut bisnis  juga.

Oh iya saya mesti berterima-kasih juga pada kang Firdaus. karena orang ini selama tiga hari kemarin saya ijinkan untuk memantau  perkembangan perwajahan blog  yang saya edit ini.

Juga yang tidak kalah baiknya adalah Amanda Fazani,  yang telah memberikan pencerahan dan ide hingga saya tak perlu banyak mikir lagi untuk memasang sebuah tab menu yang cantik dan sangat multi -funsional.  Apalagi tab menu-nya sangat pas dengan keseluruhan perwajahan blog baru ini.

Akhirnya saya menyadari perwajahan hanya sebagian pernik  dari kegiatan ngeblog, sedangkan tema yang sebenarnya menurut saya ngeblog adalah pertemanan yang memotivasi dan perenungan untuk mutu kualitas hidup kita sebagai “ manusia “.  wallahu’alam…

Kado buat ibu pertiwi ke 63 th

Kebaya Merah :
Iwan Fals, Swami

Kebaya merah kau kenakan
Anggun walau nampak kusam
Kerudung putih terurai
Ujung yang  koyak tak kurangi cinta ku

Wajah mu seperti menyimpan duka
Pada hal kursi mu di lapisi beludru
Ada apakah ?
Ibu …

Ceritalah seperti dulu
Duka suka yang  terasa
Percaya pada anak mu
Tak terpikir untuk tinggalkan  diri mu

Ibu ku …  Darah ku …  Tanah Air ku
Tak  rela ku lihat…  Kau Seperti itu
Ada apakah ?
Ibu…

 

17 agustus tinggal hitungan jari,  dan banyak cara anak bangsa negri ini untuk menyambutnya,  ada yang sampai panas-panas di jalanan menukarkan sebotol  air aqua  untuk biaya memeriahkan ulang tahunnya. ada perlombaan ada hiburan dan banyak lagi.

Begitu juga seperti agustusan sebelumnya, saya ingat pernah membuat blog yang layout-nya dari kardus.. Sedangkan untuk  ulang tahun yang usianya ke 63 kali ini, tadinya saya binggung mau kasih kado apa yach ?

Namun saya jadi teringat rencana 4 bulan yang lalu , yaitu  ingin membuat brush photoshop para  president yang pernah menjabat di republik ini. -  dari mulai Soekarno, soeharto sampai yang sekarang ini.

Dan tentu saja saya hanya melihat mereka  sebagai seorang president atau mantan president yang masuk dalam buku sejarah republik ini. tidak lebih dan tidak kurang.

Selain itu saya buat juga brush seniman , budayawan dan tokoh politik. seperti Iwan Fals, Ws Rendra, Emha AN, Taufik Ismail dan Amien Rais.

Mudahan-mudahan saja kalau ada kesempatan lain dan waktu yang luang , saya ingin membuat lebih banyak lagi brush. terutama untuk orang-orang pergerakan jaman dahulu.  – atau mungkin anda mau melanjutkan-nya ?

Oh ya.. harap maklum karena biasanya saya memburu brush photoshop bukan membuat brush, jadi pastinya masih banyak kekuranganya, – apalagi mengejar deadline 17 agustusan nanti. atau  juga photo yang saya dapatkan ketika googling kebetulan ber- Resolusi Kecil ( buram ). sorry bangeut.

Brush ini seratus persen gratis, dan jika anda ingin men- share lagi kepada teman-teman  anda,  mestinya harus benar-benar seratus persen gratis juga.

 

View Download Brush untuk photoshop  : Brush Agustusan.zip

 

* jika saudara belum mengerti cara menginstall brush ke dalam program photoshop bisa saudara baca pada tulisan ini.

di posting ke dalam ke dua blog ..

 

del.icio.us tags: photoshop brush

Mempercantik bagian komentar episode 1

Yup kita lanjutkan tulisan seputar blogspot ini, dan kebetulan sekarang ini saya lagi ber-ekperimen mengedit-edit bagian kolom komentarnya, bagian yang sering kali kita lupakan atau diabaikan.

Pada hal untuk mempercantik desain bagian kolom komentar ini, kemungkinanya banyak sekali. Apalagi sekarang blogspot telah memiliki kotak komentar yang langsung berada di bawah postingan. sangat di sayangkan jika bagian ini di abaikan oleh kita.

Oceh mari kita langsung saja, namun yang pertama kita akan desain atau edit ialah menambah background warna atau gambar pada kotak komentarnya. sepeti gambar berikut ini.

Awalnya sebelum menambah background warna ke dalam kotak komentar, saya mencari dulu bagian tag html-nya dan ternyata setelah saya intip tag-nya seperti ini.

<div class="comment-form">
kotak komentar
</div>

Setelah itu karena dia merupakan Html-Class, maka saya menambahkan pada Css-nya  selektor Class : comment-form, yang di awali dengan tanda titik ( . ).

.comment-form {

}

kemudian saya tambahkan sebuah background ( latar ) berwarna. kode css-nya jadi seperti ini.

.comment-form {
 background:#DCC4DE; 
}

Setelah itu saya tambahkan sebuah properti binkai atau border yang tebalnya 5px;

.comment-form {
background:#DCC4DE;
 border:5px solid #8C748F;
}

hasil-nya menjadi seperti gambar ini.

kalau kita perhatikan tanda panah, maka yang terlihat . pertama kotak textarea  yang menempel pada border dan kedua  background warna yang jaraknya terlalu dekat dengan tulisan bawah. keliatannya kurang sedang di pandang dan tidak enak di lihat.

Maka solusinya saya menambahkan kode yang mengatur jarak antara textarea dan background, yakni sebuah margin dan padding.

Jika anda belum mengetahui perbedaan antara margin dan padding. saudara bisa mengintipnya di sini.

Dan hasil keseluruhan kode css-nya menjadi seperti ini.

.comment-form {
background:#DCC4DE;
border:5px solid #8C748F;
margin:0 10px 20px 10px;
padding:0 0 0 15px;
}

coba hasilnya bandingkan dengan gambar  yang di atas.

 

Oceh karena kotak komentar bisa kita tambahkan sebuah background warna maka kita pun bisa  menambahkan background berupa gambar seperti di bawah ini .

Untuk background yang bergambar saya mengunakan  kode Css seperti di bawah ini.

.comment-form {
margin:10px 10px 20px 10px;
padding:65px 0 0 20px;
background:transparent url
(http://lh4.ggpht.com/jaloee/SJ3vZ2an3LI/
AAAAAAAACYY/pIG3okitsFY/kataku_form02.jpg)
no-repeat left top;
border:0px solid #8C748F;
}

*Tulisan yang berwarna merah ganti dengan url gambar yang anda miliki.

Gambar di atas desain dan idenya  dari situs toggletext.com .

Related Posts

from tag editblog

• Menambah Icon dan Bakcground-Image pada elemen post-footer
• Post-Footer : Menambah Sosial Bookmarking
• Post–footer : mengenal tag html “post–footer” pada template minima

(more..)

 

del.icio.us tags: tutorial blogger Blogspot, kolom komentar

Membuat kata-kata bijak menjadi lebih berkesan dengan “ Alert Message “

Tentang membuat tulisan  “ Alert Message “ ini pernah saya publis di blog ini, tertanggal 26 oktober 2007.

Tujuan membuat “ alert message “ ini sendiri sebenarnya sangat simple.  Yakni memberikan ruang dan bingkai yang sangat khusus, terutama untuk  kata-kata mutiara, kata peringatan atau kata-kata  yang teristimewa dan indah menurut kita. – yang  biasanya kata-kata tersebut sering di wakili oleh sebuah block queto, huruf miring dan tebal, atau di beri garis bawah.

Namun dengan gaya tulisan “ alert message “ ini, kata-kata indah itu  akan semakin eklusif.

“ Ketika satu pintu kebahagiaan tertutup, pintu yang lain dibukakan. Tetapi acap kali kita terpaku terlalu lama pada pintu yang tertutup sehingga tidak melihat pintu lain yang dibukakan bagi kita “.

Oceh :

Ada dua cara yang bisa kita lakukan untuk membuat tulisan “ Alert Message “ ini.

Pertamaxxx :

Menyimpan coding Css –nya ke dalam blog.

Tentutakan dulu sebuah icon atau gambar yang akan di letakan pada bagian kiri pada tulisan “ alert message " .

contohnya saya pake gambar ini.

Kemudian masukan kode Css ini  ( bisa di simpan di atas tag 
]]></b:skin> )

 

.alert {  
background:#fff url(http://lh3.ggpht.com/jaloee/SJh1AWYBxtI/AAAAAAAACWc/0TdjofpRUBU/light.png) center no-repeat;  
background-position: 15px 50%; /* posisi gmabar */  
text-align: left;  
padding: 5px 20px 5px 75px; /* jarak gambar dan tulisan */  
border-top: 2px solid #ffd324;  
border-bottom: 2px solid #ffd324;  
}

* tulisan berwarna merah merupakan url gambar.

 

Setelah itu buat tulisan-nya  ke dalam editor blog, mesti dalam  format Html seperti ini.

<p class= "alert"> DI SINILAH KITA MENULISKAN KATA-KATA MUTIARA ATAU PESAN </p>

hasilnya seperti gam ini.

Keduaxxxx :

Cara ke dua  : Kalau  kita malas membuat dan menyimpan kode Css -nya, kita bisa langsung membuat -nya ke dalam editor blogspot- Html.

seperti ini.

    

<p style="background:#fff url(http://lh4.ggpht.com/jaloee/SGjtZsChf7I/AAAAAAAACEk/N_HAnR0jplA/8.gif) center no-repeat;background-position:15px 50%;text-align:left;padding:5px 20px 5px 50px;border-top:2px solid #ffd324;border-bottom:2px solid #ffd324;"> Cinta membuat kita bergairah dalam hidup ..</p>

hasilnya :

 

del.icio.us tags: Tutorial Blogger Blogspot, Alert Message

Bingkai Untuk Sebuah Karya Puisi

Saya telah menyaksikan
Bagaimana keadilan telah dikalahkan
oleh para penguasa
dengan gaya yang anggun
dan sikap yang gagah
Tampa ada ungkapan kekejaman
diwajah mereka

Dengan bahasa yang rapi
mereka keluarkan keputusan-keputusan
yang tidak adil terhadap rakyat

Serta dengan budi bahasa yang halus
mereka saling membagi keuntungan
yang mereka dapat dari rakyat
yang kehilangan tanah dan ternaknya

Ya, semuanya dilakukan
sebagai suatu kewajaran

Demi Orang-Orang Rangkasbitung…
W.S Rendra

 

Malam selalu sunyi, walaupun begitu tak terasa tangan dan pikiran mencoba menjelajahi segala kemungkinan, sampai berhenti saat tak ada lagi sudut kemungkinan dari setiap kemungkinan.

Bingkai untuk sebuah puisi ini, merupakan trik css yang masih merujuk kepada tulisan sebelumnya, yakni “ Membuat kata-kata bijak dengan bingkai – alert message “.

Di sini saya hanya mempermainkan background positionnya. jika pada tulisan kemarin, saya meletakan gambarnya di samping kiri.

background-position: 15px 50%; /* posisi gmabar */

15px = posisi gambar secara horizontal (antara kiri dan kanan)
50% = posisi gambar secara vertikal ( antara atas dan bawah ).

Maka untuk membuat bingkai puisi ini, saya meletakan gambarnya di ujung paling atas. maka coding css background position-nya seperti ini :

background-position: 50%  0px; /* posisi gmabar */

hingga meletakan gambar di tenggah-tengah ( 50%  secara horizontal ) dan menariknya di ujung paling atas ( 0px – nol secara vertikal ).

Dan ini merupakan kode keseluruhannya,

Ingat jika ingin menganti baris gunakan <br/> dan untuk menganti tag <p> ( paragraf ) - gunakan <br/><br/>  ( secara berulang-ulang ).

 

<p style="border-right: #ffd324 2px solid; padding-right: 5px; border-top: #ffd324 2px solid; padding-left: 5px; background: url(http://lh3.ggpht.com/jaloee/SJnkSrFjzrI/AAAAAAAACXw/l0Kv-9PRepQ/pin.png) #f3f0eb no-repeat 50% 0px; padding-bottom: 5px; margin: 10px auto; border-left: #ffd324 2px solid; width: 300px; padding-top: 20px; border-bottom: #ffd324 2px solid; text-align: center">

         

<br />Saya telah menyaksikan  

   

  <br />Bagaimana keadilan telah dikalahkan       
     <br />oleh para penguasa 
         

  <br /><br />dengan gaya yang anggun       
   <br />dan sikap yang gagah
      

</p>

*Gambar pin di atas saya pinjam dari webdesignerwall.com .

* dan saya pikir.. mungkin banyak cara lagi selain ini.

Related Posts

from tag editblog

• Membuat kata-kata bijak menjadi lebih berkesan dengan “ Alert Message “
• Menambah Icon dan Bakcground-Image pada elemen post-footer
• Post-Footer : Menambah Sosial Bookmarking
• Post–footer : mengenal tag html “post–footer” pada template minima

(more..)

 

del.icio.us tags: Tutorial Blogger Blogspot

Menambah Icon dan Bakcground-Image pada elemen post-footer

Ini merupakan tulisan ke tiga tentang post-footer. yang mengacu dan intinya masih bersandar kepada tulisan pertama yakni “ Mengenal tag Html post-footer “.

Dan untuk tulisan sekarang , Bagiaman cara menambah icon/ gambar pada setiap elemen yang ada pada post-footer , seperti menambah icon untuk label, komentar dll.

Dan bagaimana cara-nya menambah bingkai,  warna atau background gambar  .

oceh deh …

Pertamaxxxx :

untuk menambah icon ke dalam elemen label, yang perlu kita lakukan yaitu menambah selector class dan properti-nya ke dalam Css seperti ini:

.post-labels {
background:url(http://3.bp.blogspot.com/_Zuzii37VUO4/
RnzHDsXWxoI/ AAAAAAAABzw/qHnaTuNxrLQ/s1600/tags.gif)
left no-repeat;
padding-left:20px;
}

hasilnya seperti ini :

sedangkan untuk menambah bingkai  (border) , icon dan background warna, misalkan pada elemen komentar kita cuman cari tulisan selecktor Class ini :

.comment-link

kemudian dalam propertinya kita tambahkan seperti tulisan yang saya beri warna.

.comment-link {
  margin-$startSide:.6em;
  border:1px solid #000;
  padding:5px 5px 5px 20px ;
  background:#C7DFB5 url
(http://4.bp.blogspot.com/_Zuzii37VUO4/RnzG_8XWxjI/
AAAAAAAABzI/LduyqkCDRJo/s1600/mini-comments.gif)
no-repeat left;
  }

hasilnya seperti ini :

Keduaaaxxx :

Untuk menambah bingkai, warna dan background image ke dalam  post-footer, cari saja selector class  ini.

.post-footer {
  }

* Contoh Menambah border ;

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  ……
  ……
  Border: 1px solid #DFDFDF;
  padding:5px;

}

hasilnya seperti ini :

* Menambah border radius ;

.post-footer {
  margin: .75em 0;
  color:$sidebarcolor;
  …..
  …..
   Border: 1px solid #DFDFDF;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  padding:5px;
}

hasilnya seperti ini :

- Note : border radius di atas tidak berlaku utuk Ie6 dan Ie7.

* Menambah background warna ;

.post-footer {
  Background:#C7DFB5;
  padding:5px;
  margin: .75em 0;
  color:$sidebarcolor;
  …..
  ….. 
}

hasilnya seperti ini :

* Menambah background gambar :

/* yg perlu kita lakukan menyiapkan dulu gambar yang akan kita jadikan background.

Contoh gambar di samping ini ukuran widht ; 5 px height; 40px

kemudian dalam propertinya saya beri nilai background repeat-x

.post-footer {
  Background:#C7DFB5 url
(http://i120.photobucket.com/albums/o190/jaloewig/
catalog-tut/bg_com01.gif) repeat-x left top;
  padding:5px 0 2px 5px;
  margin: .75em 0;
  color:$sidebarcolor;
  ……
  …… 
}

hasilnya seperti ini :

 

Related Posts

from tag editblog

• Post-Footer : Menambah Sosial Bookmarking
• Post–footer : mengenal tag html “post–footer” pada template minima

(more..)

Related Posts

from tag blogger_layout

• Menambah Gambar Untuk Header ( Judul Blog )
• Membuat Read More Di New Blogger
• Menambah Sebuah Breadcrumb Trail ke dalam blogger Post
• Menambah Kolom di New Blogger
• Read More Style Ala yahoo
• Menambah Figura atau gambar icon dalam tanggal postingan
• Menambah Background-Gambar pd Blog

(more..)

del.icio.us tags: tutorial blogger, Blogspot