Kamis, 05 Juli 2012

Cara Menampilkan Judul Posting Saja Pada Label

Tampilan label/category yang mempunyai posting banyak, apabila diklik terkadang membuat tampilan loading lama dan terlalu banyak posting yang ditampilkan (jika posting sobat sudah banyak). Kali ini blogatap akan sedikit memberi tips agar tampilan blog jadi lebih rapi dan simple dengan menampilkan judul posting saja pada halaman label ketika diklik.

Berikut langkah-langkahnya jika sobat blogger penasaran ingin mencoba :
  1. Login blogger Anda 
  2. Pilih Template > Edit HTML > klik Expand Template Widget 
  3. Cari kode <b:include data='post' name='post'> (gunakan Ctrl + F untuk memudahkan pencarian) 
  4. Ganti kode <b:include data='post' name='post'> dengan kode dibawah ini :
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if> 
  5. Simpan Template
Mudah bukan, silahkan cek dulu hasilnya dengan mengeklik salah satu label blog.

Rabu, 04 Juli 2012

Cara Memasang Tombol Share Facebook, Twitter, dan G+ di Blog

Pernahkan Anda menjumpai artikel web/blog terdapat tombol share facebook, twtter diatasnya (termasuk punya saya). Widget atau tombol share berguna untuk membagikan sebuah halaman situs ke profil jejaring sosial. Kalau kalian tertarik dengan tombol share, langsung saja kita pelajari cara memasang tombol share dalam setiap postingan blog.

Berikut langkah-langkahnya:
  1. Buka blogger. 
  2. Masuk ke menu Design ---> Edit HTML 
  3. Beri centang pada 'Expand widget templates' 
  4. Cari kode <data:post.body/>, kalau anda menemukan dua kode <data:post.body/> maka pilih yang pertama 
  5. Letakkan salah satu kode tombol facebook share berikut ini dibawah kode <data:post.body/> jika anda ingin memasang tombol share dibawah postingan atau letakkan diatas <data:post.body/> jika anda ingin memasang diatas postingan.
    <b:if cond='data:blog.pageType == "item"'>
    <div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
    <div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
    Share on :
    </div>
    <div style='float:left;padding-left:10px;'>
    <a name='fb_share' type='button_count'/>
    <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
    type='text/javascript'>
    </script></div>
    <div style='float:left;padding-left:10px;'>
    <a class='twitter-share-button' data-count='horizontal'
    data-via='User Name'
    href='http://twitter.com/share'>Tweet</a><script
    src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
    </div>
    <div style='float:left;padding-left:10px;'>
    <!-- Place this tag where you want the +1 button to render -->
    <g:plusone size="medium"></g:plusone>
    <!-- Place this render call where appropriate -->
    <script type="text/javascript">
    (function() {
    var po = document.createElement('script'); po.type =
    'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(po, s);
    })();
    </script>
    </div>
    </div>
    </b:if>
  6. Jika sudah simpan template anda dan lihat hasilnya.
Cukup mudah bukan, selamat mencoba.

Selasa, 03 Juli 2012

Download Game Who Wants to be a Millionaire Indonesia

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
Assalamu'alaikum,
Oke gan, ketemu lagi sama aku "Rendy Wira Adi" (seorang pelajar yang cita-citanya jadi IT). Kali ini aku mau ngasih Game mengasah otak ni. Langsung aja, tanpa banyak omong,karena aku takut mulut ini disolatipin sama agan-agan. hehe Langsung ke TKP =====>
Who Wants to be a Millionaire

Download Game ini Disini

Senin, 02 Juli 2012

Cara Membuat Gambar Berputar di Posting

Pernahkan sobat menjumpai gambar posting berputar ketika disorot oleh kursor. Ini digunakan agar tampilan blog sedikit lebih menarik. Kalau sobat blogger tertarik dan penasaran gimana cara membuatnya? Silahkan ikuti langkah – langkah cara membuatnya berikut ini :
  1. Login blogger Anda 
  2. Pilih Template > Edit HTML > klik Expand Template Widget 
  3. Cari kode ]]></b:skin> (seperti biasa gunakan Ctrl + F) 
  4. Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin>
    .blogatap img{-moz-transition:all .8s ease-in-out;-ms-transition:all .8s ease-in-out;-o-transition:all .8s ease-in-out;-webkit-transition:all .8s ease-in-out;transition:all .8s ease-in-out}
    .blogatap img:hover{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}
  5. Kemudian Klik Simpan
Kemudian penulisan kode gambar entri atau posting seperti berikut (penulisan di HTML bukan Compose)

<div class="blogatap"><img src="http://link-gambar-anda.jpg" /></div>

Tapi kalau ingin mengatur ukuran gambar, kita bisa menambahkan kode height dan weight, dan nantinya akan menjadi seperti ini :

<div class="blogatap"><img src="http://link-gambar-anda.jpg" height="ukuran-tinggi" width="ukuran-lebar" /></a></div>

Selamat mencoba dan semoga bermanfaat.

Membuat Fans Page Facebook Di Blog

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ
Assalamu'alaikum,
Oke gan, ketemu lagi sama aku "Rendy Wira Adi" (seorang pelajar yang cita-citanya jadi IT). Kali ini aku mau ngasih Artikel tentang Cara Membuat Fans Page Facebook di Blog. Langsung aja, tanpa banyak omong,karena aku takut mulut ini disolatipin sama agan-agan. hehe Langsung ke TKP =====>
  1. Login di Blogger.com
  2. Setelah masuk dasbor, pilih Template
  3. Klik Edit HTML
  4. Pilih Lanjutkan
  5. Cari kode </head>
    "untuk mempermudah pencarian, bisa menggunakan Ctrl + F."
  6. Copy Script dibawah ini tepat diatas kode </head>
  7. Simpan
Eits, belum selesai gan, selanjutnya adalah :
  • Klik Tata Letak
  • Kemudian Tambah Gadget
  • Pilih HTML/JavaScript
  • Cari kode </head>
  • Copy script berikut ini tepat dibawah kode </head>
     
  • Keterangan: URL yang dicetak tebal, kamu ganti dengan URL Halaman yang kamu kelola.
  • Paste script diatas di HTML/JavaScript
  • Simpan 
Oke, Semoga artikel ini bermanfaat bagi kalian. Terima kasih telah berkunjung di Ilmu Teknologi 

=>*Selamat Mencoba*<=
 

Minggu, 01 Juli 2012

Liga Futsal Kampus 2012

Setelah melewati beberapa pertandingan dan babak penyisihan, akhirnya team futsal putra Liga Futsal Kampus 2012 dimenangkan oleh team dari Fakultas Ekonomi Manajemen setelah melawan team dari Fakultas Teknik Informatika dengan kedudukan 1 : 0 di partai Final. Ini merupakan kali pertama team dari Fakultas Ekonomi Manajemen menjuarai event bergengsi yang diadakan setiap tahunnya oleh UKM - BOLA UNMUH Ponorogo.

Sebelum partai final team futsal putra, secara bersamaan juga diselenggarakan pertandingan final team futsal putri antara Fakultas Ilmu Pendidikan dan Fakultas Keperawatan.

Team futsal dari Fakultas Ilmu Pendidikan lebih diunggulkan karena beberapa kali menjuarai lomba futsal kampus. Namun, pada kompetisi ini Fakultas Ilmu Pendidikan tidak mampu mengalahkan permainan dari team futsal putri Fakultas Keperawatan dan pertandingan final team futsal putri akhirnya dimenangkan oleh team dari Fakultas Keperawatan dengan skor fantastik 4 : 0

Cara Membuat Kotak Script di Posting

Sobat blogger pasti pernah melihat sebuah kotak script pada postingan, ini seringkali digunakan untuk membedakan antara script dan tulisan artikel pada postingan agar terlihat rapi. Kalau sobat blogger masih bingung silahkan lihat gambar dibawah ini :

Bagaimana cara membuat kotak script di posting, berikut langsung saja kita masuk ke langkah - langkah pembuatannya :
  1. Login akun blogger 
  2. Anda Pilih Template > Edit HTML > klik Expand Template Widget 
  3. Cari kode ]]></b:skin> 
  4. Copy kode dibawah ini dan Paste tepat diatas kode ]]></b:skin>
    /* http://blogatap.blogspot.com/
    ----------------------------------------------- */
    .alert {margin: 10px 10px 10px 10px;
    padding: 10px 15px 10px 15px;
    line-height: 1.6em;color: #000000;
    background: #e0ffff;
    border: 1px solid #000000;
    border-left: 15px solid #000000}
    Keterangan : Silahkan ubah tulisan warna hijau sesuai template blog 
  5. Kemudian Simpan Template 
  6. Selanjutnya sebelum kita menulis script pada posting, tambahkan kode berikut :
    <p class="alert">
    Tulis Script Disini
    </p>
Selamat mencoba dan Semoga bermanfaat.