Tempatnya Belajar dan Berbagi

Written By Unknown on Jumat, 12 Juli 2013 | Jumat, Juli 12, 2013

Tempatnya Belajar dan Berbagi


Mengganti Pager Link Blogger Dengan Icon

Posted: 11 Jul 2013 04:45 AM PDT


Kembali lagi dengan modifikasi template blogger, kali ini saya akan berbagi ilmu dengan teman-teman semua tentang cara mengganti pager link dengan icon. Jadi untuk teman-teman yang tertarik untuk membuatnya anda bisa baca tutorial ini sampai finish. Pager link blogger adalah tulisan yang bisa anda temukan di bagian bawah posting homepage blog. Teks yang saya maksud adalah tulisan Posting Lama, Halaman Muka dan Posting Lebih Baru.

icon-pagerlink-newerolderposts2

Nah, tulisan yang saya tandai itulah yang akan diganti dengan icon. Barangkali anda sudah sering melihatnya bukan.

Mengganti Posting Lama, Posting Lebih Baru dengan Next dan Previous

  1. Login ke blogger dengan id anda
  2. Tuju ke menu Tata Letak
  3. Pada tab menu, pilih Edit HTML
  4. Backup template anda dengan mengklik Download Template Lengkap
  5. Centang kotak kecil Expand Template Widget
  6. Cari kode berikut :
    <span id=�blog-pager-newer-link�>
    <a class=�blog-pager-newer-link� expr:href=�data:newerPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-newer-link&quot;� expr:title=�data:newerPageTitle�><data:newerPageTitle/></a>
    </span>
    </b:if>

    <b:if cond=�data:olderPageUrl�>
    <span id=�blog-pager-older-link�>
    <a class=�blog-pager-older-link� expr:href=�data:olderPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-older-link&quot;� expr:title=�data:olderPageTitle�><data:olderPageTitle/></a>
    </span>
    </b:if>

    <b:if cond=�data:blog.homepageUrl != data:blog.url�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><data:homeMsg/></a>
    <b:else/>
    <b:if cond=�data:newerPageUrl�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><data:homeMsg/></a>
    </b:if>
    </b:if>
  7. Ganti tulisan <data:newerPageTitle/> dengan Next dan <data:olderPageTitle/> dengan Previous
  8. Sekarang klik tombol Simpan Template
  9. Selesai
Barangkali tidak terlalu ribet dan lumayan simple. Oke, silahkan mencoba.

Mengganti Pager Link Blogger Dengan Icon

Untuk mengganti teks Posting Lama dan Posting Lebih Baru dengan icon, anda harus sudah menyiapkan icon terlebih dahulu. Misalnya seperti icon di bawah ini.

newer-home-older

Kalau sudah punya icon, silahkan dihosting (upload) dulu ke tempat penyimpanan gambar anda. Misalnya di tinypic.com, photobucket.com atau yang lainnya. Kemudian catat alamat URL penyimpanan icon tersebut. Misalnya untuk icon yang sudah saya siapkan, alamat URLnya seperti ini :
  • Halaman Muka (Home)
    http://i38.tinypic.com/28ko7za.jpg
  • Posting Lebih Baru (Newer Post)
    http://i37.tinypic.com/2a6tcwo.jpg
  • Posting Lama (Older Post)
    http://i33.tinypic.com/mr7dqs.jpg
Silahkan diganti kalau memang kurang cocok. Sesuaikan icon dengan warna dan desain template blog anda. Nah, alamat URL icon inilah yang akan digunakan untuk mengganti teks Halaman Muka, Posting Lebih Baru dan Posting Lama. Untuk mengerjakannya hampir sama seperti langkah di atas.

Pertama :
Ganti alamat icon menjadi seperti ini

<img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/>
<img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/>
<img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/>
Kedua :
  1. Login ke blogger dengan id anda
  2. Tuju ke menu Tata Letak
  3. Pada tab menu, pilih Edit HTML
  4. Backup template anda dengan mengklik Download Template Lengkap
  5. Centang kotak kecil Expand Template Widget
  6. Cari kode berikut :
    <span id=�blog-pager-newer-link�>
    <a class=�blog-pager-newer-link� expr:href=�data:newerPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-newer-link&quot;� expr:title=�data:newerPageTitle�><data:newerPageTitle/></a>
    </span>
    </b:if>

    <b:if cond=�data:olderPageUrl�>
    <span id=�blog-pager-older-link�>
    <a class=�blog-pager-older-link� expr:href=�data:olderPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-older-link&quot;� expr:title=�data:olderPageTitle�><data:olderPageTitle/></a>
    </span>
    </b:if>

    <b:if cond=�data:blog.homepageUrl != data:blog.url�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><data:homeMsg/></a>
    <b:else/>
    <b:if cond=�data:newerPageUrl�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><data:homeMsg/></a>
    </b:if>
    </b:if>
  7. Perhatikan kode yang saya tebalkan berwarna hijau.
  8. Ganti tulisan <data:newerPageTitle/>, <data:olderPageTitle/> dan <data:homeMsg/> dengan alamat icon yang sudah disiapkan. Sehingga hasilnya menjadi seperti berikut :
    <span id=�blog-pager-newer-link�>
    <a class=�blog-pager-newer-link� expr:href=�data:newerPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-newer-link&quot;� expr:title=�data:newerPageTitle�><img alt='Next' border='0' src='http://i37.tinypic.com/2a6tcwo.jpg' title='Next'/></a>
    </span>
    </b:if>

    <b:if cond=�data:olderPageUrl�>
    <span id=�blog-pager-older-link�>
    <a class=�blog-pager-older-link� expr:href=�data:olderPageUrl� expr:id=�data:widget.instanceId + &quot;_blog-pager-older-link&quot;� expr:title=�data:olderPageTitle�><img alt='Previous' border='0' src='http://i33.tinypic.com/mr7dqs.jpg' title='Previous'/></a>
    </span>
    </b:if>

    <b:if cond=�data:blog.homepageUrl != data:blog.url�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><img alt='Home' border='0' src='http://i38.tinypic.com/28ko7za.jpg' title='Home'/></a>
    <b:else/>
    <b:if cond=�data:newerPageUrl�>
    <a class=�home-link� expr:href=�data:blog.homepageUrl�><data:homeMsg/></a>
    </b:if>
    </b:if>
  9. Sekarang klik tombol Simpan Template
  10. Selesai
Hasilnya akan seperti ini :
icon-pagerlink-newerolderposts1Tutorial diatas sudah selesai, dan kalau temen-temen menggunakan cara seperti diatas, pasti hasilnya akan sama dengan gambar itu. Saran saya hanya satu jangan terlalu banyak memasukkan kode HTML ke dalam template, nanti loadingnya menjadi berat seperti blog yang sudah lama saya buat (maklum masih dalam taraf belajar) sampai sekarang belum pernah saya buka lagi karena berat banget. 

Selamat mencoba dan semoga bermanfaat

Tutorial CSS Border Padding dan Margin

Posted: 11 Jul 2013 04:45 AM PDT


Sebenarnya artikel kali ini adalah tutorial yang sangat dasar untuk mengetahui beberapa istilah-istilah yang ada di template kita. Saya yakin di antara temen-temen semua sudah banyak yang tahu. Bagi temen-temen yang belum mengerti benar, kali ini saya akan berbagai ilmu bersama anda semua mengenai border, padding dan margin yang banyak sekali menghiasi halaman kode HTML yang ada di template kita. Saya pernah membuat postingan tentang membuat border dan background template blogger. Nah, postingan ini sangat erat kaitannya dengan postingan tersebut. Gambar di bawah ini dapat menjelaskan ketiga istilah Border-Padding-Margin secara mudah.
Nah, dari gambar di atas kita dapat menyimpulkan pengertiannya seperti berikut ini :
  • Margin : merupakan ukuran jarak bagian luar atau ukuran jarak sesudah Border
  • Border : merupakan garis tepi dari komponen
  • Padding : menentukan jarak komponen body content ke border atau ukuran jarak bagian dalam
Penulisan dan Penggunaan Kode CSS

Padding
Ditulis dengan CSS :
padding:5px 5px 5px 5px; urutan nilai angka adalah atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
padding-left:5px; untuk pengaturan padding bagian kiri
padding-right:5px; untuk pengaturan padding kanan
padding-top:5px; untuk pengaturan padding atas
padding-bottom:5px; untuk pengaturan padding bawah

Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan "px" yang bisa anda ganti dengan satuan lain yang masih sesuai.

Border
Ditulis dengan CSS :
border:1px dotted #000000; artinya ukuran tebal border, style border dan warna border.
Atau anda bisa menuliskannya seperti ini :
border-width:1px; adalah nilai tebal border
border-style:dotted; adalah jenis border dan bisa anda ganti dengan dashed, solid, double, groove, ridge, inset, outset dan lainya.
Atau anda bisa menuliskannya seperti ini :
border-color:#FFFFFF; adalah warna border dan anda bisa mengganti warnanya dengan kode warna saya.

Margin
Ditulis dengan CSS :
margin:5px 5px 5px 5px; urutan nilai angka untuk atas, kanan, bawah dan kiri.
Atau anda bisa menuliskannya seperti ini :
margin-left:5px; untuk pengaturan margin bagian kiri
margin-right:5px; untuk pengaturan margin bagian kanan
margin-top:5px; untuk pengaturan margin bagian atas
margin-bottom:5px; untuk pengaturan margin bagian bawah

Pada kode CSS tersebut, satuan yang digunakan adalah pixel disingkat dengan px yang bisa anda ganti dengan satuan lain yang masih sesuai.

Satuan Dalam CSS

Tadi sudah disinggung sedikit bahwa satuan kode CSS tersebut dapat disesuaikan dengan satuan lain. Nah, berikut satuan yang digunakan dalam kode CSS.

1.  Statik

  • in -- satuan inchi
  • cm -- satuan centimeter
  • mm -- satuan milimeter
  • pt -- satuan point (1point = 1/72 inchi)
  • pc -- satuan pica (1pica = 12 point)
  • px -- satuan pixel (satu titik gambar terkecil dalam layar monitor)
2.  Relatif
  • % -- satuan persen
  • em -- atau ems (1em = ukuran font yang tengah ada dalam elemen)
  • ex -- 1ex = x-height suatu font (x-height biasanya setengah ukuran font)

Style Border
Di bawah ini adalah model style border yang sering digunakan.

Dotted


Dashed


Solid


Double


Groove


Ridge


Inset


Outset


Penulisan border-padding-margin ini masih bisa dimodifikasi lagi dan penggunaannya pun bisa beragam. Apalagi kalau dipadukan dengan background. Gampang bukan? Temen-temen bisa modifikasi sesuai dengan keinginan, mau dikasih warna juga bagus dikasih background gambar apalagi.

Jika masih bingung pada penggunaannya ketika mengutak-atik template, temen-temen bisa isi itu kotak komentar yang letaknya di bawah. Selamat berkreasi dan semoga bermanfaat.

Membuat Border Dan Background Template Blogger

Posted: 11 Jul 2013 04:45 AM PDT


Jika temen-temen bosan dengan tampilan template blog, tutorial kali ini mungkin bisa sedikit membantu untuk memodifikasi blog anda agar lebih kelihatan hidup dan menarik. Setelah postingan saya membuat bingkai tulisan di blog, kali ini saya mencoba mengembangkan untuk modifikasi blog dengan membuat border dan background yang bisa anda gunakan untuk memperindah sidebar dan main-wrapper.Dalam bahasa Indonesia border dan background dikenal dengan istilah batas tepi dan latar belakang template blog. Dengan border dan background, maka blog akan semakin bagus dan tampak cantik, apalagi dipadukan dengan kombinasi warna yang sesuai. 

Border dan background berguna untuk memisahkan bagian-bagian dari blog. Juga dapat menunjukkan bagian yang penting seperti posting blog dan fitur-fitur yang ditambahkan pada bagian sidebar. Contohnya pada blog ini, terdapat batas tepi untuk bagian posting, header, sidebar dan footer sehingga setiap bagian dipisahkan oleh batas tepi kotak-kotak yang berbeda pula. Yang paling penting lagi, border dan background tidak mengharuskan anda untuk memiliki skil dan pengetahuan khusus untuk mengunakannya pada blog. Ada banyak cara untuk mengatur penggunaan border dan backgroud pada blog. Dalam tutorial ini saya hanya menjelaskan pengunaan dasar border dan background saja.

Jenis-Jenis dan Pengaturan Border

Cara termudah untuk menambahkan border pada setiap elemen di blog adalah menambahkan kode <b:skin> pada bagian template blog. Misalnya pada bagian #main-wrapper blogger yang mengacu pada tempat blog post, dapat ditambahkan kode border seperti ini
#main-wrapper
border: 3px solid #000000;
[kode lainnya di sini]
Kode border: 3px solid #000000; mengartikan adanya penambahan garis tepi batas dengan tebal garis 3 pixel berwarna hitam solid seperti di bawah ini:

A section with a solid black border, three pixels wide

Contoh di atas masih dapat dimodifikasi lagi sehingga menjadi seperti di bawah ini:

A section with a solid red border, five pixels wide

Border tidak harus selalu solid namun anda dapat mengubahnya dengan style border yang lain seperti dotted, dashed, double dan outset. Oke, contohnya dapat dilihat seperti di bawah ini :

Dotted border: 3px dotted #000;

Dashed border: 5px dashed green;

Double border-style: double; border-color: blue;

Outset border-style: outset; border-color: #404040;

Jenis-Jenis dan Pengaturan Backgroud

Backgroud dapat berupa paduan warna (didefinisikan sebagai nilai hex, seperti # 000000) atau berupa gambar (yang didefinisikan oleh URL dari gambar). Sangat mudah menggunakan flat warna sebagai backgroud blog hanya dengan menambahkan kode nilai hex warna pada template blog. Sebagai contoh, jika temen-temen ingin menambahkan warna latar belakang merah pada sidebar, anda bisa menambahkan kode warna merah pada bagian #sidebar-wrapper sehingga kode template menjadi seperti ini:
# sidebar-wrapper {
background: #DF0101;
[kode lainnya di sini]
}
Untuk menggunakan gambar sebagai background pada bagian template, maka anda harus menyimpan dulu gambar tersebut pada image hosting online. Setelah itu, ambil alamat url penyimpanan yang menghubungkan gambar. Jika sudah, padukan dengan kode di mana gambar ingin dijadikan backgroud. Contohnya seperti ini:
#sidebar-wrapper {
background: url(http://imagehost.com/yourimage.jpg);
[kode lainnya di sini]
}
Nah, warna dan gambar dapat dikombinasi menjadi background seperti kode di bawah ini:
#sidebar-wrapper {
background: #DF0101 url(http://imagehost.com/yourimage.jpg) no-repeat top left;
[kode lainnya di sini]
}
Contoh di atas akan menampilkan gambar di kiri atas sidebar, sementara ruang lainnya akan menjadi merah.

Kombinasi Border dan Background Properties

Pada bagian ini akan dijelaskan bagaimana kita dapat mengkombinasikan border dengan perintah-perintah untuk background untuk template blog. Misalnya seperti ini:

Mengkombinasikan ini

wide grey border

Dengan ini
paler grey background

Temen-temen bisa membuat efek seperti ini:
stylish section for your blog
border: 5px solid #666666;background: #333333;

Bahkan anda juga bisa menambahkan background image dan menambahkan garis pada seluruh bagian, seperti ini:
Another example, using images, border and background color
border: 3px outset #99cccc;
background: #99cccc url(http://imagehost.image.jpg);

Penempatan Border dan Background Styles pada Template Blogger
Bagian utama template blogger adalah header, main posts, sidebar dan footer. Nah, pada template blogger biasanya kode tersebut ditunjukkan seperti ini:
  • Header Section - #header-wrapper atau #header-wrap
  • Main Posts Section - #main-wrapper, #main-wrap atau #main
  • Sidebar - #sidebar-wrapper, #sidebar-wrap, #sidebar atau .sidebar
  • Footer Section - #footer-wrapper, #footer-wrap atau #footer
Jika anda meng-edit bagian-bagian tersebut pada <b:skin> template blog, disarankan untuk mengecek terlebih dulu apakah sudah ada penambahan kode border dan background. Jika sudah ada, maka anda hanya perlu meng-edit bagian itu saja daripada menambahkan kode yang baru. Patut diingat bahwa tiap template mungkin saja berbeda dan penggunaan border dan image background dapat disesuaikan karena apa pun bisa diganti-ganti pada bagian ini. Cobalah mennggunakan latar belakang warna yang berbeda-beda, membuat warna border dan background lebih kontras. Nggak apa-apa jika anda mencoba bereksperimen dengan berbagai jenis border dan image background serta warna-warna agar template blog semakin sesuai dengan keinginan. Untuk memudahkan pengaturan warna border dan background, gunakan kode warna ini. 

Itu tadi penjelasan singkatnya, temen-temen bisa ganti warna dengan gambar atau sesuaikan dengan selera masing-masing. Selamat berkreasi dan semoga bermanfaat.

Download ECO japan client SAGA 10 Data SAGA 17

Posted: 10 Jul 2013 07:20 PM PDT

Hay sobat blogger !!
Hay juga emilian ^^
Sesuai judul di atas,kali ini saya akan berbagi link download ECO saga 17 . ECO atau Emil Chronicle Online adalah game penyempurnaan dari semua game . Karena bulan lalu idECO sudah tutup,saya ingin migrasi ke jpECO . Tapi link download dari developernya udah di tutup kayaknya . Data dari link aslinya yang harusnya 3,29GB tersebut,,sekarang menjadi hanya 5,7MB .Kalau tidak percaya,silahkan download disini ECO_Setup.exe atau dari webnya langsung Client Download
Untuk downloadnya,silahkan ikuti petunjuk dibawah ini :
1. Buka Link berikut :  ECO - SkyDrive
2. Jika anda belum mempunyai akun Microsoft,silahkan daftar terebih dahulu
3. Jika anda sudah login / register ,maka tampilannya akan seperti ini

4. Pilih folder mana yang akan kalian download .Jika anda ingin download jpECO client,pilih folder ECP JP Client - Desember
5. Download data tersebut . Ini akan memakan waktu yang cukup lama
6. Extract part1 ,maka secara otomatis part2 akan terextract juga atau dengan kata lain bergabung menjadi satu dengan part 1
7. Install jpECO client tersebut .
Untuk cara bermainnya,silahkan kunjungi How to Play ECO JP . Atau anda juga bisa bermain pada Private server Atomix di forum gate00 atau di NetInfoKu
Sekian informasi untuk kali ini,semoga bermanfaat dan membantu .
Sekian dan terima kasih .

This posting includes an audio/video/photo media file: Download Now

0 komentar:

Posting Komentar