Tempatnya Belajar dan Berbagi

Written By Unknown on Sabtu, 20 Juli 2013 | Sabtu, Juli 20, 2013

Tempatnya Belajar dan Berbagi

Memasang Alert Message di Blog

Posted: 19 Jul 2013 07:24 AM PDT


Tutorial kali ini saya akan membahas tentang cara memasang alert message di blog. Tapi temen-temen sudah tahu belum apa itu alert message ? Kalau belum tahu saya akan menjelaskan apa itu alert message. Alert message adalah sebuah pesan yang akan muncul apabila kita membuka suatu link, dimana anda harus mengklik tombol OK atau klik tombol Close untuk bisa mengakses blog tersebut. anda bisa melihat gambarnya di bawah ini:
alert message box maskolisSesuai dengan namanya, maka kotak ini berfungsi untuk menampilkan pesan-pesan penting atau peringatan kepada pengunjung.  Terus terang menurut saya, kotak ini sangat mengganggu aktivitas pengunjung. Di samping itu dengan adanya alert message juga akan sedikit memperlambat loading blog anda. Tetapi bagi anda yang iseng ingin mencobanya atau mempunyai pesan-pesan tertentu yang ingin disampaikan kepada pengunjung blog anda. Maka tidak ada salahnya untuk menggunakan cara ini. Karena setiap pengunjung yang datang ke blog anda akan membaca pesan pada kotak alert tersebut terlebih dahulu sebelum dapat akses ke blog anda.

Baiklah saya rasa cukup penjelasannya. Bagi temen-temen yang ingin mencobanya, caranya sangat mudah, berikut langkah-langkahnya :
  1. Buka Blogger. Klik Design -> Edit HTML 
  2. Cari kode <head> lalu letakkan script berikut dibawahnya
    3. <script language='JavaScript'>alert(&quot;Welcome To My Blog&quot;);</script>
  3. Kalau masih bingung, letakkan saja scriptnya diantara <head> dan <b:skin>.
  4. Teks yang berwarna merah bold diatas merupakan teks yang akan muncul dalam kotak alert. Silahkan ganti dengan teks yang ingin anda sampaikan.
  5. Kalau sudah, klik Save Template.
  6. Selesai. Silahkan klik View Blog untuk melihat hasilnya
Artikel ini sebenarnya saya tulis hanya untuk iseng-iseng daripada nggak nulis sama sekali. Tapi nggak apa-apa untuk sekedar informasi buat teman-teman. Oke, selamat mencoba dan semoga bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.

Mengganti Read More Dengan Icon di Blog

Posted: 19 Jul 2013 07:25 AM PDT


Temen-temen semua pasti sudah mengenal readmore bukan? Hampir semua yang punya blog pasti taulah dengan kata "read more". Biasanya secara default kata-kata read more di blog akan disetting sesuai template yang dipakai, misalnya  continue reading� , read more� ,  baca selanjutnya� , dan sebagainya.  Meskipun blogger telah menambahkan fitur read more ini, namun tetap saja masih ada yang ingin me-modifikasi read more agar pas dan sesuai dengan selera hati. Saya pernah menuliskannya di cara membuat read more 1 dan membuat read more versi 2 . Sekarang akan saya lengkapi dengan modifikasi read more yang lain. Apa saja itu?
Berhubung karena read more telah disediakan blogger maka anda dapat melihat kode read more seperti di bawah ini:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</b:if>
Inilah kode dasar yang akan dimodifikasi untuk tampilan "read more" yang lebih dinamis. Ok, mari bergerak menuju blog anda .
  1. Login ke blogger dengan ID anda.
  2. Klik Tata Letak.
  3. Klik tab Edit HTML.
  4. Centang kotak kecil di samping tulisan " Expand Template Widget "
  5. Cari kode seperti ini :
    <div class='post-body entry-content'>
    <data:post.body/>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
  6. Ganti kode di atas dengan beberapa pilihan modifikasi "read more" yang saya uraikan di bawah ini atau dengan "read more" kreasi anda.
  7. Klik tombol SIMPAN TEMPLATE
  8. Selesai.
Berikut adalah beberapa modifikasi "Read more" yang bisa menjadi pilihan anda. Seperti yang saya katakan di atas, anda pun bisa membuat kreasi "read more" sendiri. Ga apa-apa koq mencoba dikit-dikit. Jangan takut salah karena semuanya masih bisa diperbaiki.

 Read More berada di sebelah kanan
Secara default biasanya read more akan berada di sebelah kiri. Nah, kita bisa membuatnya berada di sebelah kanan dengan menambahkan kode berikut :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div style='float:right;padding:10px 0px 5px 0px'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Pilihan lainnya adalah dengan memasang kode CSS berikut di atas ]]></b:skin>
.readmore { float:right;padding: 10px 0px 5px 0px; }
Lalu pada pada bagian "body" pasang kode berikut
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<div class='readmore'>
<a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a>
</div>
</div>
</b:if>
Read more tampil dengan huruf tebal
Agar "Read more ��" atau "Read more..." bisa tampil dengan huruf tebal, anda cukup menambahkan kode <strong>Read more ��</strong> atau <b>Read more...</b>. Contoh :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<strong><a expr:href='data:post.url + &quot;#more&quot;'><data:post.jumpText/></a> </strong>
</div>
</b:if>
Read more digantikan dengan icon
Mungkin anda merasa tampilan read more dengan huruf kurang menarik. Nah, pilihan lainnya adalah anda bisa mengganti tulisan read more dengan banner. Misalnya seperti di bawah ini:

readmore

Untuk menggantinya, maka kode CSS yang perlu diperhatikan seperti berikut
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'><img src='URLgambarAnda' alt='read more dengan icon'/&gt;</a>
</div>
</b:if>
Sesuaikan dengan alamat penyimpanan gambar anda. Contohnya seperti ini :
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw70_w3HWrktd1eQN-nlOU2xCxI_h2OAL7q1HxGkKw1-6MLNjTg5N9JTl2Qn2nBY_vH8Kf52PwRfwqCFg2Uf-1AVgLi0n765hnksMrnuDu4KQSxP25PhT_1PUOVC26IAQVtK00SD7zLRI/s1600/readmore+button.png' alt='read more'/></a>
</div>
</b:if>
Mudah bukan, temen-temen bisa mengganti icon readmore sesuai keinginan. JIka masih kesulitan anda bisa tanya ke kotak komentar yang ada di bawah. Selamat berkreasi dan semoga berhasil.
jangan lupa untuk berlangganan dan follow blog ini.

Memasang Bookmark AddThis Di Blog

Posted: 19 Jul 2013 07:24 AM PDT


Social bookmarking sangat berguna sekali untuk sebuah blog, salah satunya adalah dapat meningkatkan trafik blog kita. Salah satu situs social bookmark yang banyak dipakai oleh para blogger adalah AddThis. Sebenarnya banyak situs yang menyediakan jasa bookmark dan sharing gratis. Diantaranya adalah AddThis.com, AddToAny.com, ShareThis.com, AddInto.com, dan masih banyak lagi. Anda tinggal pilih untuk menggunakan salah satu diantaranya. Karena saya menggunakan jasa AddThis.com maka saya bahas yang ini saja. Untuk yang lainnya tidak jauh berbeda, pada dasarnya cara pasang tombol bookmark di setiap posting sama saja. Bahkan anda bisa memasangnya di sidebar dan tidak perlu di akhir postingan.

Pasang Bookmark Di Setiap Posting
Perbedaan antara meletakkan tombol bookmark di sidebar dan akhir posting adalah, jika anda letakkan tombol di sidebar maka bookmark akan mengambil feed pada halaman utama blog anda. Sedangkan jika diletakkan di akhir setiap posting, maka bookmark akan mengambil feed dari setiap judul posting yang dipilih. Nah, untuk memasang di akhir posting akan saya bagi menjadi dua tahap yaitu tahap pendaftaran atau registrasi dan tahap pemasangan kode script pada template blog.

Tahap Pertama
  1. Kunjungi situs AddThis untuk mendaftar..
  2. Pada halaman Create your button, akan ada pilihan dimana anda akan meletakkan tombol. Misalnya seperti di website, blogspot, wordpress. Kalau saya pilih yang blogspot. Di bagian bawah, silahkan pilih model tombol yang anda rasa cocok.

    maskolis create your button
  3. Setelah itu klik tombol Get the code yang berada di bawahnya.

    maskolis get the code
  4. Pada halaman berikutnya anda akan diberikan dua pilihan. Apakah anda ingin menambahkan tombol addthis di sidebar atau di akhir setiap posting. Anda bisa memilih dua-duanya secara bertahap. Nah, untuk menambahkan tombol addthis pada setiap posting maka pilihlah yang bagian bawah. Disana ada kode script addthis yang bisa anda copy dulu ke teks editor. Caranya dengan mengklik tombol Copy Code.

    maskolis blog post button

Tahap kedua
  1. Login ke blogger dengan ID anda
  2. Klik Layout
  3. Pada tab menu pilih Edit HTML
  4. Centang kotak Expand Template Widget
  5. Cari kode <div class='post-footer'>
  6. Paste kode script AddThis anda di bawah kode <div class='post-footer'>
  7. Klik tombol Save Template
Sekarang coba perhatikan pada salah satu posting blog anda. Tombol addthis sudah berada di bawahnya dan di setiap akhir postingan yang lain. Jika tidak ada masalah, maka hasilnya akan seperti gambar ini :

addthis maskolis
Nah, langkah-langkah di atas akan mirip jika anda menggunakan jasa situs lainnya. Yang penting, anda mendapatkan script bookmark dan tinggal menempatkannya akhir setiap posting. Tombol bookmark tadi masih bisa ditempatkan selain di bawah <div class='post-footer'> pada template, termasuk di sidebar blog. Artinya, tidak semua template sama namun pada dasarnya mirip. Dicoba-coba saja dulu terus lihat preview blog anda. 

Demikian tadi tutorial singkat memasang bookmark addthis di blog, selamat mencoba dan semoga berhasil.
jangan lupa untuk berlangganan dan follow blog ini.

Menghilangkan Icon Quick Edit di Blog

Posted: 19 Jul 2013 07:24 AM PDT


Jika temen-temen sedang login ke account blogger, pasti melihat tanda tang dan obeng pada widget-widget yang terpasang pada blog kita. Ini merupakan sebuah tool yang berfungsi untuk mengedit widget secara langsung pada halaman blog. Sebenarnya tool ini, hanya akan muncul jika kita login ke akun blogger. Jadi jika kita masuk ke blog kita tanpa login ke blogger maka icon ini tidak akan muncul begitu juga pengunjung yang mengunjungi blog kita.

maskolis

Tapi bagi Anda yang merasa kurang nyaman dengan tool ini anda bisa menghilangkannya. Ada dua cara untuk menghilangkan icon tersebut, bagi anda yang tertarik ikuti langkah-langkah di bawah ini:

Cara menghilangkan icon yang pertama 
  1. Login ke Blogger. Klik Design -> Edit HTML.
  2. Lalu backup template dengan cara klik pada Download Full Template 
  3. Jika sudah, beri centang pada "Expand Widgets Templates"
  4. Tekan Ctrl+F untuk membuka kotak Find, kemudian ketik kode <b:include name='quickedit'/> kedalam kotak lalu klik Next 
  5. Jika sudah ketemu, hapus kode tersebut. Setiap kode <b:include name='quickedit'/> mewakili satu icon tang dan obeng jadi jika template Anda terdapat lebih dari satu icon tang dan obeng. Gunakan Ctrl+F untuk mencarinya.
  6. Kalau sudah menghapus semuanya. Klik Save Template lalu klik View Blog untuk melihat hasilnya. Sekarang semua icon quick edit yang berbentuk tang dan obeng sudah tidak ada lagi. Jika masih ada, mungkin masih ada kode <b:include name='q;uickedit'/> yang belum terhapus. Coba cari kembali dengan cara diatas.
Catatan:
Cara diatas akan menghapus icon tang dan obeng secara permanen. Jadi jika Anda ingin menampilkan kembali iconnya. Upload kembali template yang sudah diback-up sebelumnya.

Cara menghilangkan icon yang kedua 

Cara ini dapat anda pakai jika malas untuk mencari kode <b:include name='quickedit'/> satu persatu, dan menurut saya cara ini lebih sederhana
  1. Login ke blogger dengan ID anda tentunya.
  2. Klik  Tata Letak.
  3. Klik tab Edit HTML.
  4. Cari kode ]]></b:skin>
  5. Copy paste kode berikut persis di atas kode yang tadi :
     .quickedit{
    display:none;
    }
  6. Klik tombol Simpan template.
  7. Selesai.
Nah, jika anda sudah menghilangkan icon quick edt tersebut, maka jika anda ingin mengedit sidebar ya harus masuk ke page element dulu. Pilih mana? Sampai disini tutorial singkat ini semoga dapat bermanfaat.
jangan lupa untuk berlangganan dan follow blog ini.
di Sabtu, Juli 20, 2013

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)