Membuat Tepi Gambar Bershadow Dengan CSS 3

CSS 3 adalah generasi CSS (Cascading Style Sheet) yang ke 3, banyak keunggulan CSS 3 dibandingkan generasi yang sebelumnya, dan sudah mulai digunakan browser-browser, yaitu diantaranya adalah Mozilla Firefox v 3.6 dan Safari V 3, semoga saja browser-browser lainya menyusul untuk mendukung CSS 3.

Nah sebenarnya topik kita kali ini adalah "Membuat image post blogger berbayang/shadow" dengan menggunakan CSS 3, terlihat seperti gambar di samping kiri. Nah bagaimana caranya? silahkan ikuti langkah-langkah dibawah ini dan buktikan kecanggihan CSS 3.

Setelah Log In ke blogger pada dashboard masuk pada bagian "Design" lalu ke "Edit HTML"

lalu cari code CSS dibawah ini

.post img {
- - -
- - -
}

Note :

1. Perhatikan saja code yang berwarna merah diatas, karena garis ( - - - ) yang berwarna hijau adalah definisi CSS yang berbeda-beda setiap template
2. Dan kadang code yang berwarna merah ada tambahanya sehingga seperti ini : .post img, table.tr-caption-container {

Nah kalau sudah ganti code CSS tadi dengan definisi seperti dibawah ini

.post img {
background:#FFFFFF;
border:1px solid $bordercolor;
padding: 7px;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
-goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

Nah yang diganti adalah code CSS yang berwarna hijau saja.

kalau sudah lalu SAVE deh, dan lihat hasilnya di browser Mozilla v 3.6, Safari V 3 dan Google Chrome.

Sekian semoga bermanfaat.

Top 1000 Website Versi Google

Google sebagai raja search engine mengeluarkan daftar 1000 web terbaik. Penilaian ini berdasarkan jumlah traffic dan page view dari web tersebut. Dan sampai tulisan ini saya buat, facebook dan yahoo masih menempati urutan pertama dan kedua (tidak termasuk google). Mau tau siapa saja yang masuk dalam daftar 1000 web terbaik versi google, yuk mari �

 

Gambar dibawah ini adalah review dari list tersebut, untuk melihatnya langsung saja tuju ke halaman Daftar 1000 Web Terbaik.

 

 

Bagaimana, ada tidak punya sobat dalam 1000 daftar web terbaik versi google? hhmm..ga mungkin ya.  

 

Semoga suatu saat kita semua bisa sukses seperti mereka, tidak perlu muluk-muluk untuk masuk dalam daftar 1000 web terbaik. Yang penting kita menulis yang terbaik dan mempunyai nilai fungsi buat pembacanya, dan jangan lupa tetap berusaha mencari peluang bisnis yang ada di dunia maya ini.

 

Semoga bisa menghibur !

Keyboard Shortcuts Untuk Posting Di Blogger

Keyboard shortcuts membuat pekerjaan dalam urusan posting di blogger menjadi lebih mudah. Yang paling populer mungkin dalam urusan text dalam postingan, seperti membuat tulisan bold dengan CTRL+B atau untuk tulisan italic dengan CTRL+I. Sama dengan yang biasa kita gunakan pada saat menulis di office word. Dibawah ini ada beberapa list keyboard shortcuts, semoga bermanfaat.

 

Keyboard shortcuts ini telah di uji pada browser Internet Explorer 6+ dan tidak semua bisa berfungsi pada browser Firefox, Chrome dan Opera.

 

 

Shotcut	Fungsi	Semua Browser ?
CTRL+B CTRL+I CTRL+U CTRL+L CTRL+Z CTRL+Y CTRL+SHIFT+A CTRL+SHIFT+P CTRL+D CTRL+P CTRL+S CTRL+G	Bold Text Italic Text Underline text Blockquote (hanya pada saat EDIT HTML) Undo last operation Redo last operation Insert Hyperlink Preview Post Save as Draft Publish Post Autosave Indic Transliteration	Ya Ya Ya Tidak Ya Ya Tidak Tidak Tidak Ya Ya Tidak

 

Selamat menggunakan dan semoga dapat mempermudah sobat dalam membuat setiap artikel.

Menampilkan Widget Di Halaman Tertentu

Hai sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada halaman tertentu" yang sering digunakan pada template megazine, misalnya anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya dihalaman post.

Nah langsung saja kita pelajari bersama-sama.

Langkah pertama yang harus Anda lakukan adalah masuk menu "Design" kemudian masuk ke bagian "Edit HTML" lalu centang kotak "Expand widget templates"

lalu cari code widgetnya seperti ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>

<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

</b:includable>
</b:widget>

Untuk mempermudah pencarian silahkan masukkan judul widget seperti "Pesan" kedalam kotak pencarian browser (ctrl + F)

Kemudian tambah code

<b:if cond='data:blog.url == data:blog.homepageUrl'>

dan ditutup dengan code </b:if> untuk menempatkan di hanya halaman depan saja

dan ditempatkan seperti dibawah ini

<b:widget id='HTML1' locked='false' title='Pesan' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Perhatikan penempatan code yang berwarna hijau !

kemudian save.

Dan dibawah ini adalah code yang bisa digunakan untuk penempatan lainya

Untuk menempatkan di halaman depan/index digunakan code

<b:if cond='data:blog.pageType == data:blog.homepageUrl'>

Untuk menempatkan di halaman Archive saja

<b:if cond='data:blog.pageType == "archive"'>

Untuk menempatkan dihalaman item/posting saja digunakan code

<b:if cond='data:blog.pageType == "item"'>

Dan untuk pada halaman pages atau static page blogger digunakan

<b:if cond='data:blog.pageType == "static_page"'>

Dan untuk tambahan, jika Anda ingin menempatkan di halaman tertentu dengan menggunakan URL gunakan code dibawah ini

<b:if cond='data:blog.url == "URL_HERE"'>

Ganti code URL_HERE dengan URL yang ingin anda tampilkan.

Dan untuk pengecualian, misalnya anda tidak menempatkan widget hanya di halaman depan saja dengan cara mengganti tanda = pertama dengan tanda !

Contoh

<b:if cond='data:blog.pageType != data:blog.homepageUrl'>

Nah tidak terlalu sulit kan? semoga bermanfaat bagi Anda.

Sekian silahkan berkomentar jika ada pertanyaa, :D

NB : Code diatas juga dapat di aplikasikan ke fungsi-fungsi blogger lainya yang akan saya bahas di waktu selanjutnya

Green Hurdico

 

Template Information

 

Name	Green Hurdico
Author	http://www.blog-zone.info
Designer	http://www.mybloggerthemes.com
Properties	2 Columns, Gray, White, Green, Elegant, Fixed Width, Right Sidebar
Descriptions	Green Hurdico is a simple blogger template with a combination of gradient border and soft colors, making Green Hurdico look elegant. Suitable for personal blog or web design.

• Live Demo
• Download Theme

Worika

 

Template Information

 

Name	Worika
Author	http://www.blog-zone.info
Designer	http://www.mybloggerthemes.com
Properties	2 Columns, Gray, White, Elegant, Fixed Width, Right Sidebar
Descriptions	Worika is a new styled Blogger template. Template is also very neat. With a mix of white and gray, avieri looks very elegant. Suitable for personal blog or web design.

• Live Demo
• Download Theme

Mencari Backlink Dari Situs PR Tinggi

Sudah bukan hal yang asing jika kita menyinggung kata backlink, apalagi jika backlink tersebut berasal dari blog dofollow dengan pagerank yang tinggi. Terkadang banyak blogger yang ingin mencari backlink sebanyak-banyaknya demi kepentingan bisnis online seperti paid review dan jualan link misalnya. Namun ada juga yang tidak tau mau diapakan blog mereka dengan pagerank yang tinggi, mungkin sekedar menunjukan jati diri blog ataukah hanya gengsi antar sesama blogger saja.

 

Daripada pusing mikirin kepentingan para blogger perihal pagerank blog, lebih baik kita cek beberapa situs dofollow dengan PR tinggi dibawah ini, mudah-mudahan bisa mendongkrak pagerank blog sobat.

 

• http://blogs.cisco.com/news/comments/cisco_at_voicecon_2010/
• http://www.grokdotcom.com/2010/03/05/credibility-yours-to-loose/
• http://weblogtoolscollection.com/archives/2010/03/12/wordpress-personas-for-firefox/
• http://www.currybet.net/cbet_blog/2010/01/with-professionals-of-this-qua.php
• http://blumenthals.com/blog/2010/02/05/google-places-adds-nearby-places-you-might-not-like/
• http://psdvibe.com/2009/12/30/logomyway-com-review/

 

Sampai tulisan ini saya buat, situs-situs diatas masih dofollow dan pagerank mereka masih diatas 4. Buruan berkomentar di situs-situs tersebut, mumpung pagerank mereka masih tinggi dan masih dofollow.

 

Mohon maaf jika saya hanya bisa memberikan 6 list saja.    Selamat berkomentar dan ingat, jangan spam ya, berilah komentar yang sopan dan secukupnya.

Tutorial Penggunaan Google Fonts

Google kembali memanjakan para blogger dengan menambahkan variasi fonts di blog. Semua font di google fonts directory berlisensi sehingga dapat digunakan pada web apapun, termasuk di blogspot yang penerapannya tergolong sangat mudah. Buat yang belum tahu, bisa sobat lihat pada contoh demo template dore zot pada bagian header dan avieri pada bagian header dan judul postingan.

 

Variasi hurufnya pun cukup banyak, tergantung kita memadu padankan dengan template yang kita gunakan. Dibawah ini ada beberapa fonts yang bisa sobat terapkan di blog sobat, dan cara penggunaannya.

 

<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=OFL+Sorts+Mill+Goudy+TT' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=IM+Fell+Great+Primer+SC' rel='stylesheet' type='text/css'/>

 

<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,bold' rel='stylesheet' type='text/css'/>

 

1. Masuk ke Rancangan
2. Kemudian tuju bagian Edit HTML
3. Copy salah satu kode huruf tersebut dan letakkan  diatas kode </head> pada template sobat.
4. Kemudian tambahkan font yang sobat gunakan pada bagian css, contohnya seperti berikut :

   #header h1 { font-family: 'IM Fell Great Primer SC', arial, serif; }

   atau lengkapnya kira-kira seperti dibawah ini :

    

   #header h1 {
   font-family:'IM Fell Great Primer SC',arial,serif;
   font-size:46px;
   font-weight:bold;
   letter-spacing:0em;
   line-height:1.2em;
   color:#aaa;
   text-shadow:1px 1px 2px #000;
   margin:0;
   padding:60px 480px 0px 0px;
   }

5. Simpan Template

 

Perhatikan saja kode yang saya tandai dengan warna merah, karena hanya kode tersebut yang ditambahkan kedalam css template. Sobat juga bisa menggunakannya pada judul postingan (h3) atau judul sidebar (h2). Baiklah, selamat mencoba dan semoga berhasil.

Avieri

Template Information

 

Name	Avieri
Author	Blog Zone
Designer	My Blogger Themes
Properties	2 Columns, Gray, White, Elegant, Fixed Width, Right Sidebar
Descriptions	Avieri is a new styled Blogger template. Template is also very neat. With a mix of white and gray, avieri looks very elegant. Suitable for personal blog or web design.

• Live Demo
• Download Theme