Ardianzzz

The Pogues & Kirsty McColl Fairytale Of New York

2010-12-25T12:40:00.000+07:00

Kaos

2010-12-10T02:05:00.001+07:00

I Love TxP!

2010-08-11T06:16:00.006+07:00

Akhirnya ardianzzz.com bisa mejeng di welovetxp.com. Seneng deh. :)

Beberapa waktu lalu juga sempat mejeng di JurusGrafis thanks buat Richard Fang. :)

Tetapi screenshot yang digunakan masih menggunakan template lama, sekarang sudah ganti… Hihi…

Browser

2010-08-03T09:14:00.004+07:00

Haha… Lucu! mungkin cocok bagi penggemar Opera. Selengkapnya disini

Nofollow?

2010-07-28T08:53:00.004+07:00

Baru-baru ini saya banyak menjumpai galeri template blog gratis — kebanyakan khusus blogspot — yang dikelola oleh narablog lokal. Pihak pengelola blog tersebut mengharapkan kontribusi dari user, misalnya dengan mengirimkan template buatan sendiri untuk dipajang di blog tersebut.

Tidak ada yang salah, hanya saat saya iseng-iseng mengitip kode sumber, ternyata hampir semuanya menggunakan link nofollow. Aneh? tidak juga, hanya saja ketika saya mau mengirimkan "My Handmade Template" pastilah menginginkan imbal balik, minimal backlink mungkin? Saya dengar backlink bagus untuk SEO.

Hahah... Mungkin sekedar pesan bagi pengelola blog-blog tersebut, sebelum anda mengharapkan sesuatu dari kontributor, tanyakan dahulu apa yang mereka harapkan dari anda...

Karakter Spesial

2010-07-25T12:11:00.006+07:00

Mungkin salah satu hal yang paling kusukai pada blogspot adalah konversi karakter spesial otomatisnya. :)

◄ ► ☺ ☻ ♥ ﬁ ﬂ § ¶ ☜ ☞

I like this!

Start Selling, Not Sharing?

2010-07-10T19:16:00.005+07:00

Start Selling ~~Not Sharing~~. Mencari uang di internet, lewat blog? hey bung itu susah. Bukan masalah jika kita ingin memiliki blog yang laris dengan 10K pageviews/hari atau memiliki ad spot yang laris manis dengan harga yang menggiurkan. yang menjadi masalah adalah apa yang kita lakukan untuk mencapainya? Apakah dengan membuat blog dengan konten yang amburadul, blogwalking, spamming, hingga memasang popup iklan yang musti diklik dua kali baru enyah?

Ironis? yeah, mungkin anda adalah salah satunya. Memanfaatkan fasilitas gratis dari blogspot, co.cc atau apalah untuk mengumpulkan receh dari kumpulblogger atau PTC lainnya. Salah? tidak samasekali. Hanya saja yang perlu "sedikit" diperhatikan adalah jangan sampai fokus mengelola blog menjadi kacau karena anda lebih memperhatikan iklan-iklan — yang belum tentu menghasilkan — tersebut.

Hey melenceng dari judul! yup coba diluruskan lagi. Coba kita sedikit evaluasi. Kita ingin mendapat banyak pengunjung, kita ingin mendapat uang dari bisnis periklanan yang bagus. Tetapi kita tidak memiliki blog yang cukup bagus. Blog yang kita miliki tak lebih dari tong sampah yang berisi spam link, PTC yang tidak jelas & iklan popup sebesar layar SVGA yang terkesan "mengintimidasi" pengunjung untuk melihat dan — tentu saja — mengkliknya.

Jika memang begitu keadaanya, wajar jika anda gagal dalam usaha bisnis online lewat media blog. Sama saja anda menjual barang yang jelek tetapi menginginkan harga yang bagus. Nilailah sendiri, saya yakin jika anda membeli sesuatu pasti menginginkan kualitas yang sepadan, sesuai dengan uang yang telah anda keluarkan. Ketika anda mendapat barang yang buruk, mungkin akan kesal, merasa telah tertipu.

Saat ini para netter & blogger sudah semakin cerdas. Mereka bisa memilih untuk mengkonsumsi konten tertentu yang mereka sukai & inginkan. Buatlah blog yang bagus, perlakukanlah pengunjung blog anda dengan baik layaknya tamu. Jangan bohongi mereka dengan link-link palsu, auto generated content yang tidak bermutu, konten hasil salin tempel, & iklan-iklan yang intimidatif. Mulailah menjual kualitas, mulailah dari sekarang.

Hiatus??

2010-07-06T12:16:00.004+07:00

Ah ya sepertinya saya tersendat untuk memperbaharui blog. Mungkin bisa dikatakan hiatus, tapi Haha saya rasa hiatus bukanlah topik yang menarik untuk ditulis di sana. Benar, akhir-akhir ini saya cukup sibuk dengan "dunia offline". Mungkin sedikit banyak cukup berhubungan dengan "dunia online" hehe..

Selain itu juga sempat terpikir untuk mengubah konsep blog (bukan redesain, saya sudah bosan dengan redesain :p). Ketika sebelumnya saya cukup bangga mengusung konsep BlogaZine sepertinya harus mulai membuat konsep yang baru karena BlogaZine sudah umum dijumpai bahkan di kalangan narablog dalam negri ;). Ah ya, blogazine telah menjadi trend dan mungkin akan kehilangan keistimewaannya beberapa bulan kedepan haha..

Sepertinya terlalu muluk-muluk... kita lihat saja nanti :p ❧

Kembali Lagi

2010-06-22T17:16:00.005+07:00

Setelah satu bulan berkutat di ardianzzz.com menggunakan Textpattern kini kembali lagi mengurusi blog ini. Sejak awal, konsep ardianzzz.com adalah sebuah ezine yang berfokus pada blogging experience, Design & typography. Yang ternyata mendapatkan respon yang cukup baik dari kawan-kawan narablog.

Mungkin alasan untuk mengelola 2 buah blog sederhana saja, alasan pertama karena sayang untuk "mematikan" blog ini. Saya sudah mengelola blog ini lebih dari 3 tahun lamanya. Meskipun kini telah bermigrasi menggunakan Textpattern, tetapi saya tidak lupa dengan mesin blogspot yang sangat mudah untuk dioprek ini. Sangat menyenangkan bermain dengan blogspot. :)

Alasan kedua adalah sebagai blog yang bersifat lebih personal. Saya tidak ingin mengacaukan fokus tulisan saya di ardianzzz.com. Saya tahu, pengunjung ingin membaca artikel yang bagus dan tentu saja bukan curahan hati saya atau foto-foto narsis yang kurang bermanfaat.

Sebenarnya sempat terfikir untuk membuat sideblog menggunakan subdomain. Saya urungkan karena malas dan akhirnya saya memutuskan untuk menghidupkan blog ini saja lumayan sudah memiliki PR 3, sayang dibuang :)

Beberapa kawan narablog mungkin pernah bertanya-tanya tentang siapa saya—ah ya, hingga sekarang saya belum juga memajang halaman "About Me" hehe. Dengan hadirnya "blog pribadi" ini mungkin bisa membantu menghilangkan perasaan penasaran tersebut hehe, sepertinya saya juga akan membagi tips dan tutorial khusus untuk blogspot disini

Ah sepertinya itu saja, selamat datang kembali—di Blogspot :p

Pindah...

2010-05-13T14:15:00.009+07:00

Saya hanya ingin menjelaskan kepada kawan-kawan blogger yang masih meluangkan waktu untuk mengunjungi blog ini. Mungkin blog ini untuk kedepannya tidak akan saya update lagi karena saya memiliki rencana untuk berganti mesin.

Saya tidak berencana untuk berhenti ngeblog. Hanya berganti mesin saja. Terus terang, saya sudah bosan dengan BlogSpot. Beberapa alasannya adalah:

Kode yang tidak valid ―Ah ya, semua tahu itu.
Navbar, navbar & navbar! tidak ada peraturan yang jelas mengenai navbar!
Sistem komentar ―yeah! saya menginginkan yang lebih baik dengan dukungan gravatar/incarnate misalnya. Tetapi jujur, saya tidak ingin mengunakan IntenseDebate ataupun Disqus.
Tweaking, Hacking bla bla... Memang melakukan tweaking & hacking sangat menyenangkan. Tetapi apakah hal tersebut harus selalu dilakukan untuk memperoleh desain yang bagus & unik? saya rasa tidak ada waktu untuk hal seperti itu

Saya telah mencoba eberapa Blog engine mulai dari Wordpress (WP) ―Ah ya, Wordpress. Jika ingin tampil lika pro gunakanlah Wordpress―, Textpattern (TxP), Expression engine (EE) ―Versi gratis―, Pivotx, FlatPress, CuteNews, Chryp, dan beberapa Blog engine berbasis PHP yang tidak terkenal lainnya.

Pada akhirnya saya memutuskan untuk menggunakan Textpattern karena fleksibilitasnya. Yeah saya merasa lebih cocok mengguakan mesin ini daripada menggunakan EE atau WP.

Yeah saya sangat suka dengan Blogspot. Saya telah menggunakan mesin ini sejak 2007 ―Pertama kali mengenal blog & blogger― dan tentunya saya telah banyak belajar ―Dalam menggunakan blogger― selama tiga tahun terakhir ini. Tetapi burung harus meninggalkan sarangnya jika ingin terbang. Yeah Blogspot memang tempat yang baik untuk belajar blogging, mungkin yang terbaik..

Mengenali Helvetica dan Arial

2010-04-24T18:08:00.006+07:00

Seperti yang kita ketahui, font Helvetica & Arial adalah tipe sans-serif yang sangat populer digunakan. Keduanya memiliki bentuk karakter yang sangat mirip bahkan dapat dikatakan sama. Akan tetapi, Helvetica & Arial adalah font yang berbeda. Helvetica didesain oleh Max Miedinger pada tahun 1957 ―nama Helvetica berarti Swiss(dalam bahasa latin). Sedangkan Arial dibuat pada tahun 1982 oleh Robin Nicholas & Patricia Saunders.

Meskipun keduanya memiliki bentuk yang identik, tetapi masih terdapat perbedaaan pada beberapa karakter. Jika kita lihat dengan seksama, maka dapat kita jumpai perbedaan yang mencolok pada karakter a, f, r, t(lowercase) dan C, G, Q, R(Uppercase).

Untuk lebih jelasnya dapat dilihat pada gambar berikut ini:

Mungkin perbedaan tersebut sangat kecil dan tidak begitu berarti. Tetapi bagi yang suka dengan detil pasti tidak ingin berbuat kesalahan dengan menulis "I Love Helvetica" Menggunakan Arial.

Referensi

Sedikit Sentuhan Pada Ampersand

2010-04-19T11:10:00.030+07:00

Tulisan ini dipindahkan di: http://ardianzzz.com/sentuhan-ampersand.html

(blogspot) Lightbox Effect Pada Kotak Komentar

2010-03-26T00:31:00.012+07:00

Berhubung banyak yang menanyakan tentang trik Lightbox effect pada form komentar, berikut ini akan saya jelaskan bagaimana instalasinya pada platform blogspot.

Seperti yang kita tahu, banyak sekali framework atau plugin javascript yang dapat digunakan untuk membuat efek lightbox. Untuk membuat efek lightbox pada form komentar, kita membutuhkan plugin yang dapat menampilkan inline content. Saya memilih jQuery Superbox karena cukup mudah digunakan dan dikustomisasi. Berikut ini adalah tahapan instalasinya:

1. Instalasi jQuery Superbox

Saya tidak akan membahas banyak untuk petunjuk instalasi jQuery Superbox. Untuk lebih jelasnya, dapat dilihat pada official websitenya.

2. Setting HTML & CSS

Setelah proses instalasi berhasil, kita menggunakan fitur content mode. Prinsip kerjanya adalah kita memunculkan content yang tersembunyi dalam bentuk modal window (lightbox). Berikut ini adalah tampilan kodenya:

<div class='comment-form'>
    <a name='comment-form'/>
    <h4 id='comment-post-message'><data:postCommentMsg/></h4>
    <p><data:blogCommentMessage/></p>
    <data:blogTeamBlogMessage/>
    <a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
    <iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='275' id='comment-editor' name='comment-editor' scrolling='no' src='' width='100%'/>
    <data:post.friendConnectJs/>
    <data:post.cmtfpIframe/>
    <script type='text/javascript'>
      BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </script>
  </div>

Dari kode tersebut kita tahu bahwa id form komentar adalah #comment-form maka tambahkan CSS berikut ini:

#comment-form {
display:none;
}

3. Aktifasi

Yang perlu kita lakukan adalah membuat sebuah link yang berfungsi menampilkan div#comment-form dalam bentuk modal box. Pertama-tama, carilah kode berikut ini:

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <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>
        </b:loop>
      </dl>

kemudian tambahkan kode

<a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>

Gunakan ukuran modal box yang sesuai. Pada kode di atas, [400x420] berarti modal box yang ditampilkan berukuran panjang 400px dan lebar 420px. Kemudian tambahkan kode tersebut tepat setelah kode:

</b:loop>

Secara keseluruhan, kode tersebut adalah:

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <b:if cond='data:comment.favicon'>
              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
            </b:if>
            <a expr:name='data:comment.anchorName'/>
            <b:if cond='data:comment.authorUrl'>
              <a expr:href='data:comment.authorUrl'><data:comment.author/></a>
            <b:else/>
              <data:comment.author/>
            </b:if>
            <data:commentPostedByMsg/>
          </dt>
          <dd class='comment-body'>
            <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>
        </b:loop>

        <a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>

      </dl>

4. Kesimpulan

Sampai saat ini saya belum begitu mengetahui apakah penerapan lightbox effect pada form komentar akan meningkatkan minat pengunjung untuk berkomentar atau malah sebaliknya. Tetapi menurut saya ini cukup fungsional terutama untuk plattform blogspot yang memiliki kotak komentar yang sangat kaku dan tidak fleksibel. Perlu diingat bahwa ini hanyalah sebuah contoh metode. Kita tidak diharuskan menggunakan jQuery Superbox atau copas mentah-mentah kode di atas. Karena saya merasa kita dapat lebih kreatif untuk membuat sesuatu menjadi lebih baik.

Selamat mencoba!

Super Simple AJAX Shoutbox

2010-03-23T01:09:00.002+07:00

(poster) Seberapa Unik Blogmu?

2010-03-19T14:06:00.025+07:00

15 Contoh Penulisan Dengan Georgia

2010-03-17T00:42:00.001+07:00

Georgia adalah salah satu font yang paling banyak dipakai pada sebuah web/blog. Menurut smashing magazine, Georgia adalah font tipe serif yang paling populer digunakan pada konten dan headline. Berikut ini adalah 15 contoh styling Georgia menggunakan CSS.

1. Ukuran Ekstra Besar Normal

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

font-family: Georgia, serif;
font-size: 41px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.2em;

2. Ukuran Ekstra Besar Normal

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

font-family: Georgia, serif;
font-size: 44px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: -3px;
line-height: 1.2em;

3. Ukuran Besar Normal Italic

font-family: Georgia, serif;
font-size: 20px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

4. Ukuran Besar Normal

font-family: Georgia, serif;
font-size: 24px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.2em;

5. Ukuran Besar Normal

font-family: Georgia, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

6. Ukuran Menengah Normal Uppercase

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1.7em;

7. Ukuran Menengah Normal

font-family: Georgia, serif;
font-size: 16px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

8. Ukuran Menengah Normal

Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.6em;

9. Ukuran Menengah Bold

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: 0.2px;
line-height: 1.5em;

10. Ukuran Menengah Normal

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

font-family: Georgia, serif;
font-size: 16px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.4em;

11. Ukuran Menengah Normal

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.

font-family: Georgia, serif;
font-size: 13px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.45em;

12. Ukuran Kecil Normal Uppercase

font-family: Georgia, serif;
font-size: 10px;
font-style: normal;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 1px;
line-height: 2em;

13. Ukuran Kecil Normal Italic

Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.42em;

14. Ukuran Kecil Normal

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

font-family: Georgia, serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

15. Ukuran Kecil Bold

ont-family: Georgia, serif;
font-size: 12px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: normal;
line-height: 1.5em;

sumber: Typechart

15 Icon Cantik Dengan Gaya Yang Berbeda, Gratis!

2010-03-11T20:53:00.036+07:00

Koleksi icon sangat diperlukan bagi seorang web desainer karena selain sebagai design resource juga dapat menjadi sumber inspirasi. Kita telah sering melihat icon dengan desain yang glossy, simple, dan elegan. Akan tetapi, icon-icon tersebut terlihat kurang sesuai jika digunakan untuk desain tertentu. misalnya desain dengan nuansa grungey.

Berikut ini adalah 15 koleksi icon cantik yang memiliki gaya yang berbeda, yaitu terkesan ngasal, sedikit kotor, colorful dan tentu saja cantik yang mungkin cocok dengan desain anda.

1. Wooden Badges

2. Handycons 2

3. Handy

4. Social Icons Hand Drawn

5. RM Kute Toolbar Icons

6. Natsu Icon Set

7. Red Little Shoes Icon Set

8. Hand Drawn Doodle Icons

9. ICon Pack

10. Sketchy Icons

11. Extreme Grunge Garment Icons

12. Woven Fabric Social Media Icon Set

13. Grunge Peeling Stickers Social Media Icons

14. Sketchy Web Icons

15. Old Bottle Crowns

(blogspot) Bookmark Menu a-la CSS3

2010-03-05T07:12:00.026+07:00

Kita tahu bahwa keberadaan Social Bookmark dapat digunakan untuk meningkatkan trafik web/blog dengan cukup efektif. Biasanya, untuk memudahkan pengunjung melakukan bookmarking, banyak pengelola web/blog yang menyediakan menu social bookmark pada web/blog mereka. Kebanyakan menggunakan gambar daripada link teks karena dirasa lebih komunikatif dan lebih bagus tentunya.

Nah berikut ini adalah tutorial singkat membuat bookmark bar yang cantik pada blogspot dengan CSS3

1. Langkah Awal
Selalu diingat bahwa sebelum melakukan editing pada template, hendaknya kita melakukan backup terlebih dahulu untuk mengantisipasi hal-hal yang tidak diinginkan. Setelah itu, pilih opsi Expand Template Widget

2. CSS
Mesukkan kode CSS berikut ini. Jika belum tahu, letakkan saja sebelum tag ]]></b:skin>

/* BookmarksBar
----------------------------------------------- */
ul.socials {

}

ul.socials li {
display: inline;
}

ul.socials li img{
width:48px;height:48px;
}

ul.socials a {
background:transparent;
display: inline;
float: left;
margin: 0 0 27px 10px;
width: auto;
padding: 10px 10px 15px;
text-align: center;
font-family: "Marker Felt", sans-serif; text-decoration: none; color: #333;
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform .15s linear;
-moz-transform: rotate(-2deg);
}

ul.socials img {
display: block;
}

ul.socials a:after {
content: attr(title);
}

ul.socials li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}

ul.socials li:nth-child(3n) a {
-webkit-transform: none;
position: relative;
top: -5px;
-moz-transform: none;
}

ul.socials li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
position: relative;
right: 5px;
-moz-transform: rotate(5deg);
}

ul.socials li:nth-child(8n) a {
position: relative;
right: 5px;
top: 8px;
}

ul.socials li:nth-child(11n) a {
position: relative;
left: -5px;
top: 3px;
}

ul.socials li.messy a {
margin-top: -375px;
margin-left: 160px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
}

ul.socials li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

2. HTML
Masukkan kode HTML berikut ini pada bagian post-footer blog. Jika kesulitan, carilah kode <div class='post-footer-line post-footer-line-'>
biasanya, pada template default, terdapat tiga baris footer. Letakkan pada baris yang disuka.
Jika menginginkan icon yang berbeda, gantilah tulisan yang berwarna merah dengan alamat gambar yang dikehendaki.

<b:if cond='data:blog.pageType == "item"'>
<div class='sexy-bookmarks'>
<ul class='socials'>

<li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49HnFq7hyI/AAAAAAAABPg/7hhSAKnRCck/s400/1267557422_facebook.png'/></a></li>

<li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://2.bp.blogspot.com/_fD0JUTei5H8/S49ImNoQFdI/AAAAAAAABPw/vXKwNIs7JxU/s400/1267557431_twitter.png'/></a></li>

<li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49IlyNUsxI/AAAAAAAABPo/meQjq-OoeoM/s400/1267557426_reddit.png'/></a></li>

<li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49ImVV2kbI/AAAAAAAABP4/FQeEcQRm38A/s400/1267557435_delicious.png'/></a></li>

<li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://1.bp.blogspot.com/_fD0JUTei5H8/S49Im75MrnI/AAAAAAAABQA/h8Ys5DiZSJk/s400/1267557438_technorati.png'/></a></li>

<li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://4.bp.blogspot.com/_fD0JUTei5H8/S49InNLmWAI/AAAAAAAABQI/rNwyFghjcqw/s400/1267557441_digg.png'/></a></li>

<li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_Blank'><img src='http://2.bp.blogspot.com/_fD0JUTei5H8/S49QYWo_HEI/AAAAAAAABQQ/f1XJy4unu-o/s400/1267557447_stumbleupon.png'/></a></li>
</ul>
</div>
</b:if>

4. Demo

▪ Lihat Demo ▪

Perlu diperhatikan, karena trik ini menggunakan CSS3 (seperti -moz-transform, -webkit-animation, dsb), maka efek animasi hanya dapat ditampilkan pada browser tertentu saja. Paling baik jika dilihat menggunakan browser berbasis wbkit seperti Safari 4 dan Google Chrome 3+. Tetapi masih cukup bagus bila menggunakan Firefox 3.6.

Sangat mudah sekali bukan? Selamat mencoba!

(blogspot) Background Yang berbeda Untuk Tiap Posting

2009-11-13T09:34:00.021+07:00

Saya menerapkan beberapa trik sederhana agar blog ini terkesan unik dan lain dari kebanyakan blog. Salah satunya adalah menggunakan background yang berbeda untuk tiap-tiap posting. Jika tertarik, langsung saja saya jelaskan triknya.

Caranya cukup sederhana, dengan menggunakan HTML dan CSS tanpa ada embel-embel JawaScript. Teorinya, background digantikan menggunakan div dengan width sebesar 100% dab height sebesar 100%, div tersebut diletakkan pada posisi dibawah content (z-index rendah). Untuk lebih mudahnya, copi & paste code HTML dibawah ini dan letakkan di dalam posting.

<div style="position: fixed; top: 0pt; left: 0pt; width: 100%; height:100%; background: url(http://URLgambarlatarmu/background.jpg); text-align: center; z-index: -5;">
</div>

Gantilah http://URLgambarlatarmu/background.jpg dengan alamat gambar yang dikehendaki. Jika tidak ingin menggunakan gambar sebagai background, dapat juga menggunakan warna.

Penting!
Cara di atas adalah murni sebuah trik yang telah berhasil saya terapkan pada blog ini. Sejauh ini, trik tersebut dapat berjalan dengan baik jika dikombinasikan dengan JavaScript readmore (karena script tersebut mematikan fungsi HTML tiap-tiap posting pada halaman utama). Jika anda mencoba trik ini tanpa mengkombinasikannya dengan script readmore tersebut, kemungkinan efeknya akan mengacaukan halaman utama.

Saran

Letakkanlah kode HTML tersebut pada bagian akhir posting.

Trik ini dapat berjalan di browser-browser terbaru. Saya telah mengujinya pada Firefox 3.x, Safari 4, Chrome 3, dan Opera 9. Akan tetapi tidak dapat berjalan bagus untuk IE 6.

Untuk demo, dapat dilihat pada blog ini.

Selamat mencoba..

(blogspot) Animasi jQuery Untuk Navbar

2009-11-06T13:50:00.021+07:00

Sepertinya kita (pengguna blogger) telah mengetahui hal tersebut. Blogger telah menambahkan 2 navbar yang bergaya transparan. Kebanyakan yang telah mereview fitur terbaru ini beranggapan bahwa blogger melakukan hal tersebut agar navbar yang disediakan menjadi lebih diminati karena dapat tampil lebih matching dengan template yang digunakan. Tetapi selama saya menyambangi blog-blog sahabat (pengguna blogspot) kebanyakan dari mereka memilih menghilangkan navbar termasuk saya sendiri.
Saat ini, banyak sekali blog yang membahas bagaimana memodifikasi navbar blogger agar menjadi lebih menarik misalnya navbar auto-hide agar navbar tidak mengganggu penampilan blog.

Kita dapat membuat semacam auto-hide pada navbar menggunakan jQuery. Metode ini memanfaatkan JavaScript untuk membuat efek transparansi pada navbar. Kita dapat mengatur transparansi navbar mulai dari 0% (normal) hingga 100% (tidak kelihatan) atau dengan kata lain Navbar akan kelihatan jika kita meletakkan pointer di atasnya.

Caranya sangat mudah yaitu tinggal copy & paste kode berikut ini dan letakkan sebelum tag </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function(){
$("#navbar").fadeTo("slow", 0.1);
$("#navbar").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.1);
});
});
</script>

Nah, pada kode JavaScript di atas, dapat kita lihat huruf yang berwarna merah (0.1) berarti transparansi navbar sebanyak 90%. Jika menginginkan navbar tidak tampak samasekali, gantilah nilai 0.1 menjadi 0.0.
Jika menginginkan navbar tetap transparan saat mouseover, ubahlah nilai pada angka yang berwarna biru (1.0) menjadi 0,75 (untuk transparansi 25%).

Sangat mudah sekali bukan, selamat mencoba...

§ Live Demo

Tipografi Untuk Blog

2009-10-30T14:20:00.075+07:00

aat ini banyak sekali website terutama blog yang mengandalkan tipografi sebagai desain utama. Hal ini dapat dijumpai pada blog-blog dengan template yang relatif sederhana yang sekarang lagi trend di era web2.0. Terdapat beberapa teori tentang penggunaan tipografi dalam dunia web desain mulai dari penggunaan font, ukuran font, warna font, spasi, dan lain-lain yang tujuannya antara lain agar pengunjung merasa nyaman saat membaca konten atau dengan kata lain menjadi lebih enak dibaca.

Mungkin selama ini kita kurang memperhatikan hal tersebut. Pengalaman saya sendiri, saat saya blogwalking di beberapa blog (yang umumnya menggunakan template buatan sendiri) masih kurang memperhatikan masalah tipografi ini. Coba kita bayangkan, membaca tulisan berwarna biru tua (#0000EE) dengan background berwarna hitam (#000) dengan font Tahoma berukuran 12 pixel, Kalau saya pribadi jelas malas membacanya karena membuat mata sakit.

Lorem Ipsum Dolar Sit Amet...

Coba bandingkan saat kita membaca tulisan dengan warna latar yang cukup kontras dengan warna font (biasanya latar berwarna cerah) dengan ukuran font antara 12-14 pixel, dengan letter space yang tidak terlalu renggang dan tidak terlalu rapat, pasti kita akan lebih betah membaca artikel dalam blog tersebut. Imbasnya, komentar ngawur bernada spam bisa berkurang.

Hal ini pula yang (menurut saya) template-template blog yang minimalis semacam Simpla, BlogTXT, white as milk, dll. bisa menjadi template yang terkenal dan terkesan professional. Kita tahu bahwa template-template tersebut tidak mengandalkan gambar-gambar dan hanya mengandalkan desain berbasis web tipografi.

Sekarang saatnya berbicara statistik, menurut smashingmagazine.com terdapat beberapa poin penting dalam web design typography antara lain adalah:

Font yang digunakan
Background yang digunakan dan warna font
Ukuran font
Spasi atar baris (line height)

Berikut ini adalah data statistik yang diperoleh yaitu:

1. Font yang digunakan

60% website menggunakan sans-serif (font tidak berkaki) untuk headline semacam Arial, Verdana, Lucida Grande, dan Helvetica.
Hanya 34% website menggunakan font tipe serif sebagai font konten
Font tipe serif yang paling populer untuk headline adalah georgia (28%) dan Baskerville (4%) (blog ini menggunakan Georgia)
Font tipe serif yang paling populer untuk konten adalah georgia (32%) dan Times New Roman (4%)
Font tipe sans-serif yang paling populer untuk headline adalah Arial (28%) Helvetica (20%) and Verdana (8%).
Font tipe sans-serif yang paling populer untuk konten adalah Arial (28%), Verdana (20%) and Lucida Grande (10%). (blog ini menggunakan Georgia)

2. Background yang digunakan
Kita dapat menggunakan backround berwarna terang atau gelap. Sebagian besar website dengan konten tulisan akan memilih warna terang dengan tulisan berwarna gelap. Beberapa website memilih backround gelap kemungkinan karena alasan konten yang ditampilkan. (misal: postsecret). Yang perlu diperhatikan adalah jangan sampai warna background menyebabkan tulisan susah untuk dibaca. Contohnya adalah menggunakan warna hitam(#000) untuk background dan warna abu-abau (#222) untuk font. Hal ini jelas membuat tulisan sukar dibaca. Selain itu hindarilah kontras yang berlebih. Misalnya font berwarna hitam aseli (#000) dipadu dengan background putih alami (#FFF) hal ini juga kurang baik. Banyak desainer yang memilih menurunkan kontras antara background dengan kontent. Misalnya menggunakan background putih (#FFF) dan font abu-abu (#222, #333, #444 dll).

3. Ukuran font rata-rata
Beberapa ukuran yang populer digunakan unutk headline berkisar antara 18 hingga 29 pixel, dengan 18-20px dan 24-26px adalah yang paling populer.
Ukuran yang sering digunakan untuk font konten berkisar antara 12-14 pixel. yang paling populer (38%) adalah ukuran 13px.
Terdapat beberapa studi yang menyebutkan bahwa perbandingan antara font hedline dan font body (konten) merupakan hal yang perlu diperhatikan. Perbandingan raa-rata yang baik untuk digunakan adalah antara ukuran headline dan konten adalah 1.96. Karena saya menggunakan pixel (bukan ems) dalam satuan ukuran, maka saya mengasumsikan perbandingannya adalah 2.

4. Spasi antar baris (line-height)

Perbandingan line height ÷ ukuran fon konten =1.48/1.5
line length (pixels) ÷ line height (pixels) = 27.8
Spasi anttar paragraf ÷ line height (pixels) = 0.754
space between paragraphs (pixels) ÷ line height (pixels) = 0.754

Kesimpulan
Begitulah kira-kira beberapa aturan yang biasa diterapkan dalam membuat desain web berbasis tipografi. Saya rasa informasi ini masih sangat terbatas dan saya sarankan anda untuk mencari lebih banyak informasi tentang tipografi dan desain web (blog) agar perkembangan dunia blog di Indonesia tidak tertinggal dengan negara lain. Sekedar masukan dari saya, perlu kita ingat bahwa blog adalah sesuatu yang unik yang (bisa dikatakan) merepresentasikan pemiliknya baik dari desain maupun konten yang terdapat di dalamnya. Kita mungkin dapat dengan mudah membedakan blog milik orang yang menyukai musik rock dan blog milik seorang penggila dangdut. Karena itu berkreasilah dengan bebas untuk mengekspresikan diri melalui blog. Saya menampilkan data di atas hanya sekedar ingin berbagi ilmu pengetahuan tentang dunia web desain dan tidak berarti saya menganggap blog yang bagus adalah yang mengikuti 'pakem' tersebut. Dan jika ada masukan yang membangun akan saya terima dengan senang hati.....