Tampilkan postingan dengan label Tips and Trick. Tampilkan semua postingan

+



Tips-tricks Blogger kembali lagi dengan urusan coding.nih, bermain-main lagi dengan b if cond, b else dan b include. 
Terkadang akan sangat lama dan menjemukan apabila kita membuka halaman label atau arsip blog yang jumlah postingnya sudah banyak. Bahkan, semakin tidak efisien lagi jikamembuka halaman lain untuk melihat daftar/list posting yang lebih lama. So, menampilkan judul posting saja pada bagian label dan arsip dapat membuat loading halaman lebih cepat dan visitor dapat lebih cepat melihat daftar semua judul posting yang ingin dibaca. Contohnya kaya gini:
show only post titles

Siap mengubah tampilan halaman label dan arsip blog anda dengan cara tersebut?
Oke, kalo begitu lanjuuut ke cara menampilkan judul posting saja di label dan arsip Blogspot:
1. Masuk ke dashboard > Design/Rancangan > Klik 'expand widget template'.
2. Cari kode: <b:include data='post' name='post'/> (Ctrl+F)
3. Ganti dengan script ini:
<!--Judul post saja di label dan arsip-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--Buka-rahasia.blogspot.com-->
4. Save template HTML.
5. Done! (done itu artinya Yang terjadi maka Terjadilah! olret..)
6. Coba dicek hasilnya pada halaman label dan archive blog.

Update (04-05-11):  
Kemarin ada yang bertanya lewat Contact Form: "Gimana cara menampilkan judul di label saja atau di arsip saja? Thanks."
Oke, saya jawab sekaligus update disini sekalian:

*Jika ingin menampilkan judul posting saja khusus di label, ambil perintah pada b if cond label dan b include posting saja:
<!--Judul posting saja di label-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
 <!--Buka-rahasia.blogspot.com-->
*Jika ingin menampilkan judul posting saja khusus di arsip, ambil perintah pada b if cond archive dan b include posting saja:
 <!--Judul posting saja di arsip-->
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<!--Buka-rahasia.blogspot.com-->
-Cara memasukkan scriptnya sama dengan cara yang telah disebutkan di atas.

Jika ada permasalahan atau ada hal yang ingin ditanyakan tentang "merias" tampilan judul tersebut (CSS styling), bapak ibu sekalian bisa sampaikan melalui komentar, karena setiap template blog tidak sama aturan dasar pada tampilan, font, link, margin, dan lain-lain. Feel free to use the comment form, I will be ready to help and do the best I can. 
Cheers!

Cara Menampilkan Judul Posting Saja Pada Label dan Arsip Blog

Posted by Fitrah pujangga
0 Comments
Kamis, 20 Februari 2014
+

Gambar di dalam posting blog memiliki arti penting. Gambar/image (photo or picture) bukan hanya sebagai penghias semata. Jika dipilih secara matang, gambar dapat menjadi ilustrasi isi posting blog, memperkuat nuansa, serta memberikan kesan dan dramatisasi atas tema yg diusung di dalam artikel. Selain itu, gambar juga dibutuhkan bagi halaman web/blog sebagai petunjuk/indikator navigasi, background, header, dan masih banyak lagi. Oleh karenanya, gambar tidak bisa disepelekan begitu saja oleh blogger.
Memproduksi gambar sendiri sesuai keinginan bagi kebanyakan blogger bukanlah hal mudah. Apalagi bagi blogger yg tidak menekuni bidang desain grafis atau memiliki stock gambar pribadi yg banyak. Solusinya adalah dengan mencari gambar melalui internet. Tapi tahukah bahwa tidak semua gambar dapat secara bebas dipakai? Ada beberapa kasus yg menyebutkan penuntutan/pelanggaran hak cipta atas blog yg memuat gambar tanpa credit atau seijin pemilik asli. Tentu ini bukan hal yg kita kehendaki. Sebagian besar blogger memang lebih sering mencari gambar melalui Google Image Search yg lebih praktis sesuai dengan keyword yg diinginkan. Tapi hal ini berbahaya.

Posting ini sekaligus juga menjadi tanggapan saya dalam komentar di posting pencurian konten yg menyatakan bahwa gambar yg saya gunakan dipertanyakan. Sebenarnya tidak demikian. Saya selalu menggunakan gambar-gambar free license, bahkan gambar-gambar tersebut juga memiliki lisensi gratis untuk diedit ulang bagi keperluan desain blog/web, komersil, dan desain grafis. Apakah benar ada situs download gambar gratis demikian? Ada banyak! Ratusan! Kualitas gambar-gambarnya pun tidak perlu dipertanyakan lagi. Very high quality images for free! Mulai dari photo, vector, ordinary images, icons, sampai very artistic images are ready for free use, sodara-sodara! Dengan menggunakan gambar-gambar demikian, kualitas posting dan originalitasnya pun semakin tinggi. So, lebih baik hentikan pencarian gambar dari Google; gunakan/download gambar sebebas-bebasnya dari situs-situs berikut (short url digunakan semata-mata untuk menghindari link juice):
Situs hosting dan penyedia gambar terbesar. Ratusan foto/gambar berkualitas diupload setiap detiknya. Untuk memudahkan pencarian gambar sesuai tema, Photobucket menyediakan fitur search yg punya akurasi tinggi. Jika ingin melakukan hosting sekaligus, buat akun gratis. Bahkan foto yg diupload pun bisa dibuat private, sehingga tidak muncul di pencarian. Tempat favorit saya untuk berburu gambar bertema apapun!
Ratusan ribu icon web/blog atau komputer siap digunakan untuk memperindah blog. Icon set dapat memperkuat themes/templates blog karena memiliki keselarasan desain dan warna. Iconarchive juga menghosting gmabar-gambar icon tersebut. Jadi jika malas download dan upload lagi, langsung saja gunakan diret url gambarnya!
Foto-foto berkualitas dan beresolusi tinggi serta memiliki kekuatan artistik disediakan oleh situs ini. Salah satu situs favorit saya untuk mendapatkan gambar sebagai penguat tema artikel. Fngsi search nya dapat digunakan untuk mencari gambar lintas situs penyedia gambar gratis.
Situs pecinta foto dengan komunitas besar. Menyediakan banyak foto artistik yg siap dipakai untuk background maupun ilustrasi artikel. Situs ini kini di-handle penuh oleh Getty Images, sebuah perusahaan besar yg me-manage banyak situs image/gambar berkualitas.
5. Flickr
Situs gambar gratis milik Yahoo! yg menjadi favorit para blogger dan interneter untuk mencari gambar-gambar gratis berkualitas tinggi. Sebagian memiliki lisensi. khusus. Namun cukup banyak gambar yg dapat dipakai secara bebas tanpa batasan.
Ribuan foto yg dapat digunakan sebagai inspirasi dan referensi desain grafis. Dapat digunakan secara bebas untuk keperluan desain, baik yg pribadi maumpun komersial.
Freepixels menawarkan banyak foto beresolusi tinggi baik untuk keperluan personal maupun bisnis (komersial). Memiliki kategori yg sangat banyak untuk memudahkan naviugasi serta terdapat fungsi search untuk langsung mencari foto dengan tema tertentu.
Situs penyedia foto/gambar gratis dengan koleksi yg sangat banyak; sekitar 9 juta gambar/foto siap didownload dan digunakan. Terdapat dua jenis foto sebenarnya, yg gratis dan dijual. Url di atas langsung saya arahkan untuk gambar gratis.
Salah satu situs besar favorit saya. Situs ini adalah tempat berkumpul para artis desain grafis dan fotografer untuk bertukar ide dan gambar karya mereka. Gambar/foto yg menjadi koleksi luar biasa besar jumlah, kualitas, resolusi, serta nilai artistiknya. Download gambar tanpa perlu registratis terlebih dahulu. Link di atas langsung saya arahkan ke bagian resources stock image.
10. Picfndr
Yg terakhir ini sebenarnya buka(n) situs penyedia image gratis. Namun situs untuk mencari gambar gratis yg bebas license, baik untuk keperluan pribadi atau komersil. So, ga perlu lagi Google Image Search yg riskan itu! Pencarian dilakukan berdasarkan setting tertentu; terdapat menu setting di sebelah kiri untuk mendapatkan akurasi pencarian, baik setting keyword, jenis lisensi, pembatasan untuk gambar yg butuh atribusi (credits) atau tidak, dll. Gambar-gambar yg dimunculkan di hasil pencarian berasal dari ratusan situs penyedia gambar gratis yg terjamin lisensi gratisnya. Situs ini yg paling sering saya gunakan untuk mencari gambar ilustrasi posting. 
Masih ada banyak lagi situs-situs semacam di atas. Sebagian lain memiliki koleksi yg tidak begitu banyak meskipun tidak kalah kualitas gambarnya. Dalam kesempatan lain, bila memungkinkan, akan ditambah situs-situs lain untuk memperkaya resource kita untuk mendapatkan gambar gratis berkualitas tinggi bagi blog/web, desain, maupun kepentingan lain.
Have a nice blogging, mates!

10 Situs Download Gambar Gratis Buat Blog/Web & Desain

Posted by Fitrah pujangga
0 Comments
+



social profil widget keren Alhamdulillah setelah sebelumnya saya posting tutorial membuat modifikasi pada widget profil blogger, kali ini saya ingin mengetengahkan cara membuat widget profil sosial networking menarik dengan colored style. Widget ini dinamai Metro UI oleh designernya Vinay Prajapati.

Fitur

  • Meliputi 7 jejaring social yang paling sering digunakan
  • Efek hover dan desain yang elegan,
  • Sangat rapi dan bersih
  • Tidak ada JavaScript, No Jquery, murni dengan CSS

Cara menambahkan widget ini ke blog

Untuk menginstal widget ini ke blog sangat mudah, baik blog anda dengan flatfrom blogger, wordpress atau layanan blogging lainnya dimana style CSS dan HTML diterima pada widget atau template. Anda hanya perlu menambahkan kode gadget/widget pada bagian HTML/JavaScript.
Step by step for blogger
  • Pada dasbor >> Masuk menu Tata Letak >> Tambah Gadget >> Pilih HTML/JavaScript
  • Copy dan paste kode berikut pada kolom konten: 
<div class='metro-social'>
<li><a class="fb" href=http://www.facebook.com/amatullah.syukur rel="nofollow"></a></li>
<li><a class="tw" href=http://twitter.com/amatullahsyukur></a></li>
<li><a class="gp" href="https://plus.google.com/116382152511220195182"></a></li>
<li><a class="pi" href=http://pinterest.com/amatullahsyukur rel="nofollow"></a></li>
<li><a class="in" href=https://www.linkedin.com/in/amatullahsyukur rel="nofollow"></a></li>
<li><a class="yt" href=http://www.youtube.com/amatullahsyukur></a></li>
<li><a class="fd" href=http://feeds.feedburner.com/amatullahsyukur rel="nofollow"></a></li>
</div>
<style>
.metro-social{width:285px}
.metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
.metro-social .fb,.tw,.gp,.pi,.in,.yt,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
.metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
.metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:68px;height:70px}
.metro-social .gp{width:69px;height:70px;background:url(//goo.gl/oT0kF) no-repeat center center #da4a38}
.metro-social .pi{background:url(//goo.gl/7olxx) no-repeat center center #d73532;width:68px;height:69px}
.metro-social .in{background:url(//goo.gl/PhFhj) no-repeat center center #0097bd;width:69px;height:69px}
.metro-social .yt{background:url(//goo.gl/zcwjB) no-repeat center center #e64a41;width:140px;height:69px}
.metro-social .fd{background:url(//goo.gl/lhBP1) no-repeat center center #e9a01c;width:140px;height:69px}
.metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
.metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
.metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
.metro-social li:hover .pi{background:url(//goo.gl/IORvy) no-repeat center center #d73532}
.metro-social li:hover .in{background:url(//goo.gl/2zHrm) no-repeat center center #0097bd}
.metro-social li:hover .yt{background:url(//goo.gl/I1c4a) no-repeat center center #e64a41}
.metro-social li:hover .fd{background:url(//goo.gl/CjzDP) no-repeat center center #e9a01c}
</style>

Kustomisasi: Ganti link profil saya dengan link profil milik anda.
  • Simpan dan lihat hasilnya diblog anda.
Demikian tutorial kali ini, cara membuat social profile widget pada blog. Semoga bermanfaat.

Membuat Social Profile Widget Keren: Metro UI

Posted by Fitrah pujangga
0 Comments
Selasa, 14 Januari 2014

Like This OK !

- Copyright © 2013 RYUDARKNESS -Sao v2- Powered by Blogger - Designed by Johanes Djogan -