Cara Membuat Tulisan Berjalan (Marquee)

Bagaimana cara membuat tulisan berjalan? Tulisan atau teks berjalan atau running text ini biasa juga kita sebut marquee, karena untuk membuatnya menggunakan kode marquee. Tulisan ini bisa membuat blog anda terlihat lebih menarik bagi pengunjung.

Untuk membuat tulisan berjalan atau Marquee ini sebenarnya sangat mudah. Kali ini kita akan mencoba membuat beberapa jenis marquee, agar lebih banyak variasi yang bisa anda pilih. Terlebih dulu kita akan belajar membuat kodenya, lalu belajar cara memasangnya pada blog....

Kode dasar untuk membuat marquee atau teks berjalan adalah....

 <marquee>TULISAN YANG AKAN BERGERAK</marquee>

Kode di atas akan terlihat seperti ini:
TULISAN YANG AKAN BERGERAK
 

Tapi selain kode di atas ada beberapa tambahan kode yang bisa anda berikan untuk membuat variasi dari marquee. Di bawah ini kita akan berikan kodenya dan sekaligus mempraktikkan marquee tersebut....

kode scrolldelay="angka" digunakan untuk mengatur jeda dalam milidetik, jadi untuk jeda 1 detik masukkan nilai 1000
Contoh kode marquee:

<marquee scrolldelay="500">RUNNING TEKS DELAY 0,5 DETIK</marquee>

Hasilnya akan terlihat seperti di bawah ini:
RUNNING TEKS DELAY 0,5 DETIK

kode loop="angka|-1|infinite" digunakan untuk mengatur pengulangan atau repetisi dari marquee
Contoh:

<marquee loop="3">MARQUEE BEROTASI 3 KALI SAJA</marquee>

Hasilnya akan terlihat seperti di bawah ini:
MARQUEE BEROTASI 3 KALI SAJA
Keterangan: Setelah 3 kali teks akan hilang.

kode width="lebar" digunakan untuk mengatur lebar media teks berjalan, bisa dalam satuan pixel atau persen dari bidang yang ada
Contoh kode:

<marquee width="50%">MARQUEE LEBAR 50 PERSEN</marquee>

Hasilnya akan terlihat seperti di bawah ini:
MARQUEE LEBAR 50 PERSEN

kode bgcolor="warna" digunakan untuk memberikan warna latar pada marquee jika diperlukan
Contoh kode marquee:

<marquee bgcolor="yellow">RUNNING TEXT LATAR KUNING</marquee>

Hasilnya akan terlihat seperti di bawah ini:
RUNNING TEXT LATAR KUNING


kode title="pesan" digunakan untuk memunculkan pesan jika kursor mouse diletakkan di jalur teks berjalan
Contoh kode:

<marquee title="BISA TERBACA PESANNYA">TEKS BERJALAN DENGAN PESAN</marquee>

Hasilnya akan terlihat seperti di bawah ini:
TEKS BERJALAN DENGAN PESAN
Keterangan: Taruh kursor mouse pada jalur dan bukan pada teks untuk membaca pesan

kode scrollamount="angka" digunakan untuk mengatur kecepatan pergerakan tulisan semakin besar angkanya semakin kencang
Contoh kode:

<marquee scrollamount="14">MARQUEE SPEED 14!!!</marquee>

Hasilnya akan terlihat seperti di bawah ini:
MARQUEE SPEED 14!!!

kode direction="left/right/up/down" digunakan untuk mengatur arah pergerakan running text
Contoh kode:

<marquee direction="right">MARQUEE BERGERAK KE KANAN</marquee>

Hasilnya akan terlihat seperti di bawah ini:
MARQUEE BERGERAK KE KANAN

kode behavior="scroll/slide/alternate" digunakan untuk mengatur type pergerakan
Scroll jika ingin teks bergerak terus ke suatu sisi dan muncul dari sisi lain
Slide jika ingin teks bergerak sekali kemudian berhenti dan diulangi lagi
Alternate jika ingin teks terlihat memantul/bouncing dari ujung kembali ke ujung.
Contoh kode:

<marquee behavior="alternate">MARQUEE BERGERAK BOLAK-BALIK</marquee>

Hasilnya akan terlihat seperti di bawah ini:
MARQUEE BERGERAK BOLAK-BALIK
Sekarang kita akan coba membuat variasi dari kode di atas. Kita akan membuat teks ini bergerak turun dan oleh karena itu kita perlu menambah kode height untuk membuat ruang pergerakan teks;
Contoh kode:

<marquee direction="down" height="100">MARQUEE BERGERAK KE BAWAH</marquee>

Hasilnya...
MARQUEE BERGERAK KE BAWAH

Lalu bagaimana caranya membuat tulisan ini berhenti jika dilintasi kursor mouse?
Mudah, silahkan tambahkan kode

onmouseover="this.stop()" onmouseout="this.start()"

Contoh kodenya seperti berikut:

<marquee behavior="alternate" onmouseover="this.stop()" onmouseout="this.start()">MARQUEE BERGERAK BOLAK-BALIK</marquee>

Tampilan akhir akan terlihat seperti berikut....
MARQUEE BERGERAK BOLAK-BALIK
Keterangan: Silahkan lintaskan kursor pada jalur ataupun teks untuk menghentikan pergerakan

Bisakah Marquee diberi link? 
Tentu saja, sebagai contoh lihat kode berikut:
<marquee direction="down" height="100" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4">
<a href="http://trikmudahseo.blogspot.com/2012/09/cara-membuat-tulisan-berjalan-marquee.html">CARA MEMBUAT TULISAN BERJALAN (MARQUEE)</a>
</marquee> 
Tampilan akhir akan terlihat seperti berikut....

CARA MEMBUAT TULISAN BERJALAN (MARQUEE)


Demikianlah berbagai ragam cara untuk membuat teks berjalan. Mudah-mudahan ini bisa menjadi alternatif bagi anda dalam menghias blog menjadi lebih menarik. Silahkan bereksperimen untuk meramu kode-kode di atas.

Mengubah Huruf, Warna dan Ukuran Huruf Teks Berjalan Marquee

Jenis huruf dan ukuran bisa diubah dengan menambahkan kode style="font-family: impact; font-size:24px; color: #cc0000;"

font-family: impact; adalah kode untuk mengubah jenis huruf. Jika anda tidak suka dengan font impact, silahkan diganti dengan Arial, Times New Roman, dan lain-lain

font-size:24px; adalah kode untuk mengatur ukuran huruf. Ubah nilai 24 sesuka hati anda. Semakin besar nilainya, maka semakin besar juga hurufnya.

color:#cc0000; adalah kode untuk mengatur warna huruf. Silahkan mengganti kode hex #cc0000 dengan nilai hex yang anda suka.

Contoh kodenya:
<marquee bgcolor="yellow" style="font-family: impact; font-size:24px; color:#cc0000;" >RUNNING TEXT LATAR KUNING</marquee>

Contoh tampilan:
RUNNING TEXT LATAR KUNING

Lalu bagaimana cara memasang kode-kode ini?
Saudara bisa memasang kode yang sudah dibuat pada dua tempat, yaitu widget dan artikel:
Untuk memasang pada widget silahkan ikuti langkah berikut:

• Buka menu Tata Letak / Layout
• Klik Tambah Gadget
• Pilih gadget HTML/JAVASCRIPT
• Masukkan kode yang sudah dibuat
• Simpan perubahan pada gadget

Untuk memasang pada artikel ikuti langkah berikut:

• Saat menulis artikel masuk ke mode HTML
• masukkan kode HTML marquee saat berada di mode ini
• Kembali ke mode Compose untuk melihat apakah posisi teks sudah benar
• Klik PRATINJAU untuk melihat versi web aktif

Ok, sekarang anda sudah tahu cara membuat dan memasangnya. Berarti saudara sudah bisa bereksperimen sendiri untuk menghias blog menjadi lebih menarik.... Jadi sekian dulu artikelnya, terima kasih sudah mampir...

Diposkan oleh Andi Lesmana 3:59 AM 0 komentar

Cara Cari Uang Di Internet Semakin Mudah Dengan SEO

Cara cari uang di Internet memang sangat beragam. Namun apapun metode yang anda pilih, SEO bisa membuat kegiatan mencari uang lebih mudah. Kenapa demikian? Karena SEO sangat efektif membawa orang-orang yang memang mencari produk yang anda tawarkan.

Cara mencari uang di Internet nanti akan dibahas di bawah. Terlebih dahulu kita akan membahas aspek SEO dari kegiatan mencari uang ini. Tentu anda sudah mengetahui bahwa tujuan dari SEO adalah untuk mendapatkan pengunjung dari search engine seperti Google.

Lalu kenapa kita harus mendapat pengunjung dari search engine? Kelebihan dari pengunjung yang berasal dari search engine adalah mereka memang sejak awal sudah mencari barang yang anda tawarkan.

Oleh karena pengunjung dari search engine sudah sejak awal mencari produk yang anda tawarkan, maka lebih mudah mengkonversi pengunjung menjadi pembeli. Lain halnya jika anda mendapat pengunjung dari hasil penawaran sana-sini (misalnya melalui beriklan di situs Iklan atau menggunakan layanan PPC).

Memanfaatkan layanan iklan baris ataupun PPC bisa mengkonversi 1% dari pengunjung menjadi pembeli. Bandingkan pengunjung dari Google yang mempunyai nilai konversi yang lebih baik. Nilai konversinya berkisar 10% sampai 20%. Jadi sangat disayangkan jika anda mengaku pebisnis online tapi mengabaikan SEO.

Adapun cara cari uang di Internet memang sangat beragam, tapi apapun metode yang anda pilih SEO tetap bisa digunakan. Lebih jauh mengenai penerapan SEO ini bisa kita lihat langsung pada 5 contoh metode yang dapat anda gunakan untuk mendapat penghasilan secara online.

1. Menawarkan Produk Sendiri

Anda bisa cari uang di Internet dengan menawarkan produk anda sendiri, baik itu baju, sepatu, suplemen kesehatan, gadget, dan lain-lain. Produk apapun itu bisa anda buatkan blog. Hanya saja blog tersebut harus diberi optimisasi onpage dan optimisasi offpage agar mendapatkan pengunjung dari Google. Langkah kritis yang harus anda perhatikan sebelum melakukan optimisasi adalah riset kata kunci terbaik untuk blog anda.

2. Cari Uang di Internet dengan Adsense

Ini adalah metode yang sangat bergantung pada jumlah pengunjung, dalam hal ini SEO hanya membantu menambah jumlah pengunjung anda. Jangan menjadikan SEO sebagai satu-satunya sumber traffic. Manfaatkan Sosial Network, Forum, dan apa saja untuk mendapat traffic. Belajarlah cara meningkatkan traffic blog dari sumber mana saja.

Tidak perlu membuka akun adsense jika pengunjung blog masih sangat minim. Cobalah membuka akun jika pengunjung blog sudah di atas 2000 orang per hari. Lain kasus jika anda tergabung dalam sindikat klik iklan bersama. Tapi jangan coba-coba dengan Google, karena Google menerapkan banyak parameter untuk melihat seberapa alami konversi dari pengunjung menjadi klik iklan.

3. Cari Uang di Internet dengan Situs Iklan Baris

Anda juga bisa membuat situs  iklan baris untuk mencari uang, tapi situs seperti ini juga butuh trafik untuk mulai memberikan penghasilan kepada anda. Penghasilan dari situs iklan baris akan mulai mengalir jika anda punya pengunjung di atas 1000 orang per harinya.

4. Ikut Program Affiliasi

Program Afiliasi adalah cara cari uang di Internet yang lebih menghasilkan daripada Adsense, tapi produk Afiliasi ini selain membutuhkan jumlah pengunjung yang banyak juga membutuhkan reputasi yang baik dari blog anda. Semakin baik reputasi blog anda, maka akan semakin mudah pengunjung mempercayai kualitas produk yang anda tawarkan.

5. Paid Review

Ini adalah cara cari uang di Internet yang tidak didukung oleh Google. Jika Google berhasil mendeteksi aktivitas review berbayar dari blog anda, maka SEO pun tidak akan sanggup menolong blog anda. Jika menggunakan jasa Paid Review, maka sebaiknya berusahalah mempelajari cara mendapatkan trafik dari luar Search Engine.

Kelima cara mencari uang di Internet yang dibahas di atas memang terlihat menyesakkan. Butuh waktu sebelum anda bisa menikmati penghasilan yang memadai. Habiskanlah satu atau dua tahun pertama untuk "menggemukkan" blog anda. Jika anda memulai usaha mencari uang di Internet ini dengan ambisi ingin berhasil dalam waktu singkat, mungkin anda akan sangat kecewa.

Mudah-mudahan artikel ini bisa membantu anda yang ingin mencari uang dari Internet, tentu saja ini hanya dari segi SEO saja. Jika butuh tips sukses yang lebih luas silahkan cari di blog-blog Bisnis Online. Anyway, thanks sudah mau singgah di blog ini.

Kalau anda sudah lama mempunyai suatu bisnis online tertentu, maka mungkin tertarik untuk membaca artikel Keuntungan cari Uang di Internet Semakin Besar dengan Google Analytic.

Diposkan oleh Andi Lesmana 3:58 AM 0 komentar

Download Template Blog Keren dan Gratisss

Download template blog gratis keren - Saat ini semakin banyak teman-teman blogger yang menjadikan blog sebagai sarana berekspresi akan kepribadian mereka. Oleh karena itulah situs-situs yang menyediakan template blog keren yang gratis menjadi semakin  populer. 

Bagi teman-teman blogger pemula yang lebih menyukai template blog keren yang gratis, maka ada beberapa situs yang bisa saya referensikan untuk teman-teman semua. Situs-situs ini tentunya menyediakan template yang dititikberatkan pada penampilan dan bukan merupakan template blog SEO friendly, jadi jangan terlalu menuntut kriteria template SEO friendly pada template blog yang ditawarkan.

Jadi silahkan cari template idaman anda pada situs-situs berikut ini dan download template blog keren yang tersedia:

Daftar Situs Download Template Blog Keren Yang Gratis

BTEMPLATES.COM

Situs btemplates menyediakan ribuan koleksi template blogspot yang sangat beragam untuk saudara download. Mulai dari yang keren sampai yang biasa-biasa saja. Semuanya bisa anda download secara gratis. Anda akan sangat dipermudah dengan begitu banyaknya filter template blog yang disediakan oleh situs ini. Anda bisa menggolongkan template menurut jumlah kolom, warna, gaya, dan posisi sidebar.

MASKOLIS.COM

This is one of the best Indonesian blog. Desain template blog yang dibuat maskolis bukan hanya diakui di Indonesia, tapi sudah dikenal dan dipakai banyak blogger di seluruh dunia. Dengan desain yang keren dan gratis, tentunya blog ini laris manis. Rasanya sudah banyak blogger Indonesia yang mengenal nama maskolis. Jadi silahkan browsing sendiri template incaran anda dengan mengklik link di atas dan download desain template blog yang anda rasa keren.

COPARTIDISIMO.COM

Ini adalah situs latin milik Karla. Di sini ada beberapa template yang didesain sendiri oleh Karla dan bisa menjadi pilihan anda. Hanya saja jumlah template yang ditawarkan memang tidak sebanyak yang ditawarkan di btemplates karena ini bukan situs terminal yang menerima sumbangan desain dari banyak orang. Jadi coba saja mengunjungi situs di atas....

LOEFA CEBOOK

Yang ini adalah blog yang dimiliki oleh blogger Indonesia bernama Abdil Latif. Blog ini menyediakan beberapa desain blog yang cukup beragam. Ada yang desainnya sederhana, ada yang keren, dan ada juga yang terlihat profesional. Hanya saja memang koleksinya belum terlalu banyak, tapi siapa tahu ada yang kena di hati anda. Jadi silahkan dicoba saja download dan pasang....

URANG KURAI

Yang satu ini juga adalah blogger Indonesia, yang desain templatenya bisa dikatakan sangat keren dengan "selera" yang mungkin patut anda pertimbangkan. Urang Kurai tidak menyediakan template yang biasa-biasa saja. Setiap template mempunyai ciri khas dan keunikan sendiri. Begitu anda mendarat ke blog urang kurai anda akan bisa menilai sendiri kemampuan script dari blogger Indonesia yang satu ini. Bagi yang suka template yang terkesan mekanis, silahkan download....

DZIGNINE.COM

Situs ini mempunyai koleksi yang belum terlalu banyak, tapi bolehlah untuk teman-teman blogger sekalian pertimbangkan. Selain template blog keren yang gratis Dzignine juga menyediakan yang premium, tapi saya yakin itu bukan ide yang populer buat blogger Indonesia. Kita suka yang gratisan.... benarkan?

54BLOGGER

Ini juga milik personal dari Fowzie, kelemahan dari blog ini adalah tidak menyediakan tampilan screen shot, jadi anda harus membuka setiap template dan mengunjungi halaman demo. Memang menyusahkan, jadi mungkin anda bisa menaruh situs ini di daftar akhir saja,....jika yang lain gagal.

Jadi anda bisa menggunakan ketujuh situs di atas untuk mencari template blog keren yang gratis, sebagai sarana mengeskpresikan diri anda. Tetapi perlu juga teman-teman blogger perhatikan penggunaan script pada template yang nanti di pilih. Jika script ternyata terlalu lama dimuat, maka ada baiknya untuk tidak menggunakan template tersebut, dan mencari style/desain yang lain.

Ok, sukses buat blog saudara.... ^_^

Diposkan oleh Andi Lesmana 3:55 AM 0 komentar

Floating Social Bookmark dengan Efek Easing

Jika Anda perhatikan dua template responsive yang saya bagikan kemarin, terdapat sosial bookmark yang menempel di sebelah kanan layar monitor, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu).

DEMO

Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. Pada template Johny Ribet atau Pakdhe Johny hanya terdapat 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :

1. Login ke Blogger
2. Masuk ke Template >> Edit HTML (centang expand widget templates)
3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
   
   .social-buttons {
       position: fixed;
       top: 130px;
       width: 45px;
       z-index: 9999;
   }
   .button-left {
       left: 0;
   }
   .button-right {
       right: 0;
   }
   .social-buttons #twitter-btn .social-icon,
   .social-buttons #facebook-btn .social-icon,
   .social-buttons #google-btn .social-icon,
   .social-buttons #rss-btn .social-icon,
   .social-buttons #pinterest-btn .social-icon,
   .social-buttons #youtube-btn .social-icon {
       background-color: #33353B;
       background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
   }
   .button-left #facebook-btn span {
       background-position: right 10px;
   }
   .button-left #twitter-btn span {
       background-position: right -35px;
   }
   .button-left #google-btn span {
       background-position: right -127px;
   }
   .button-left #rss-btn span {
       background-position: right -80px;
   }
   .button-left #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-left #youtube-btn span {
       background-position: 11px -223px;
   }
   .button-right #facebook-btn span {
       background-position: 12px 10px;
   }
   .button-right #twitter-btn span {
       background-position: 11px -35px;
   }
   .button-right #google-btn span {
       background-position: 10px -127px;
   }
   .button-right #rss-btn span {
       background-position: 11px -80px;
   }
   .button-right #pinterest-btn span {
       background-position: 11px -177px;
   }
   .button-right #youtube-btn span {
       background-position: 11px -223px;
   }
   .social-buttons #facebook-btn:hover .social-icon {
       background-color: #3B5998;
   }
   .social-buttons #twitter-btn:hover .social-icon {
       background-color: #62BDB2;
   }
   .social-buttons #google-btn:hover .social-icon {
       background-color: #DB4A39;
   }
   .social-buttons #rss-btn:hover .social-icon {
       background-color: #FF8B0F;
   }
   .social-buttons #pinterest-btn:hover .social-icon {
       background-color: #D43638;
   }
   .social-buttons #youtube-btn:hover .social-icon {
       background-color: #C4302B;
   }
   .social-buttons a:hover .social-text {
       display: block;
   }
   .button-left .social-icon {
       -moz-transition: background-color 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       background-repeat: no-repeat;
       display: block;
       float: left;
       height: 43px;
       margin-bottom: 2px;
       width: 43px;
   }
   .button-left .social-text {
       display: none;
       float: right;
       font-size: 1em;
       font-weight: bold;
       margin: 11px 40px 11px 0px;
       white-space: nowrap;
   }
   .button-right .social-icon {
       -moz-transition: background-color 0.4s ease-in 0s;
       -webkit-transition: background-color 0.4s ease-in 0s;
       background-repeat: no-repeat;
       display: block;
       float: right;
       height: 43px;
       margin-bottom: 2px;
       width: 43px;
   }
   .button-right .social-text {
       display: none;
       float: left;
       font-size: 80%;
       font-weight: bold;
       margin: 11px 0 11px 40px;
       white-space: nowrap;
   }
   .social-buttons .social-text {
       color: #FFFFFF;
   }
4. Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
   

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

   <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
   <script>
       $(window).load(function(){
           $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
               $(this).stop();
               $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
           });
           $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
               $(this).stop();
               $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
           });
       });
   </script>

   Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
5. Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
   
   <div class='social-buttons button-right hidden-phone hidden-tablet'>
   <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
   <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
   <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
   <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
   <span class='social-text'>Follow via Pinterest</span></span></a>
   <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
   <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
   </div>
   Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
6. Terakhir, Save Templates

Nah itu tadi tutorial membuat floating social bookmark dengan efek easing menjawab pertanyaaan Muhammad Farhan. Jika masih ada yang kurang jelas kebangeten.. eh silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Apapun bentuk komentar Anda akan saya hargai, but please do not spamming.

Sekian dan semoga ada manfaatnya

Diposkan oleh Andi Lesmana 3:23 AM 0 komentar

Modifikasi Popular Post untuk Template Gallery

aya akan mengulas satu persatu fitur yang ada pada template demo sebelum nanti saya bagikan, sehingga diharapkan Anda dapat menciptakan atau membuat template sendiri dengan modifikasi widget default yang yang sudah disediakan oleh blogger. Widget dari blogger yang saya modifikasi kali ini adalah Popular Post, sebuah widget yang berfungsi untuk menampilkan postingan atau artikel mana yang paling banyak diminati para pengunjung. Secara default widget Popular Post ini sudah menarik karena sudah ada fitur thumbnail dan summary. Tapi menurut saya sih kondisional, widget itu bisa langsung dipasang pada blog yang lebih banyak menggunakan artikel daripada gambar, jika widget default itu dipasang pada blog yang bertipe gallery sepertinya kurang cocok.

DEMO

Nah, kali ini saya mencoba untuk memodifikasi widget tersebut agar cocok dipasang pada blog yang mempunyai konten gallery. Gambarnya seperti diatas, hanya menampilkan thumbnail dan judul dengan posisi horisontal. Jika anda tertarik, berikut ini cara membuatnya :

1. Login ke Blogger dengan akun Anda
2. Setelah itu masuk ke template >> klik Edit HTML jangan lupa centang Expand Widget Templates.
3. Lalu masukkan kode berikut ini diatas ]]></b:skin> :
   

   .PopularPosts .widget-content ul li {background:none repeat scroll 0 0 transparent;float:left;list-style:none outside none;margin:0 !important;padding: 0 !important;border-bottom:none}

   .PopularPosts ul{padding:5px 0}

   .PopularPosts .item-thumbnail img{width:110px;height:110px;padding:11px;margin:0}

   .PopularPosts .item-content{position:relative;float:left;margin:0}

   .PopularPosts .item-title a{font-size:11px;color:#fff;display:block;padding:0 5px;float:left;width:122px}

   .PopularPosts .item-title:hover{opacity:1;-moz-opacity:1;filter:alpha(opacity=100)}

   .PopularPosts .item-thumbnail{float:left;margin:3px 1px 7px 10px;border:1px solid #ccc;overflow: hidden}

   .PopularPosts .item-title{background:#000;position:absolute;bottom:8px;right:2px;opacity:.6;-moz-opacity:.6;filter:alpha(opacity=6)}

   Kode warna merah diatas adalah panjang dan lebar gambar thumbnail, Anda bisa ganti dan sesuaikan dengan lebar sidebar pada template, seperti yang terlihat pada sidebar blog ini.
4. Kemudian masuk ke layout >> add a gadget pilih Popular Post pada baris kelima.
5. Setelah muncul halaman Popular Post, setting seperti pada gambar dibawah ini :
   
   
   
   
   
   Yang perlu diperhatikan adalah centang hanya thumbnail, biarkan kotak snippet kosong tidak perlu dicentang. Judul dan jumlah post yang ingin ditampilkan terserah Anda.
6. Setelah langkah diatas, masuk lagi ke Edit HTML (centang Expand Widget Templates), cari kode berikut :
   <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-thumbnail-only'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
7. Setelah ketemu, ganti dengan kode berikut ini :
   
   <b:widget id='PopularPosts1' locked='false' title='Most Product View' type='PopularPosts'>
   <b:includable id='main'>
     <b:if cond='data:title'><h2><data:title/></h2></b:if>
     <div class='widget-content popular-posts'>
       <ul>
         <b:loop values='data:posts' var='post'>
         <li>
           <b:if cond='data:showThumbnails == &quot;false&quot;'>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (1) No snippet/thumbnail -->
               <a expr:href='data:post.href'><data:post.title/></a>
             <b:else/>
               <!-- (2) Show only snippets -->
               <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               <div class='item-snippet'><data:post.snippet/></div>
             </b:if>
           <b:else/>
             <b:if cond='data:showSnippets == &quot;false&quot;'>
               <!-- (3) Show only thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
               </div>
               <div style='clear: both;'/>
             <b:else/>
               <!-- (4) Show snippets and thumbnails -->
               <div class='item-content'>
                 <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                     <a expr:href='data:post.href' target='_blank'>
                       <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                     </a>
                   </div>
                 </b:if>
                 <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                 <div class='item-snippet'><data:post.snippet/></div>
               </div>
               <div style='clear: both;'/>
             </b:if>
           </b:if>
         </li>
         </b:loop>
       </ul>
       <b:include name='quickedit'/>
     </div>
   </b:includable>
   </b:widget>
8. Terakhir, save templates lihat hasilnya.

Modifikasi widget Popular Post dari blogger ini tidak hanya untuk blog gallery saja, Anda juga bisa memakainya pada blog yang bukan gallery seperti yang terlihat di sidebar pada blog ini. Demikian tadi tutorial memodifikasi tampilan Popular Post untuk template Gallery jika masih ada yang kurang paham silahkan tinggalkan pesan di kotak komentar maaf kalau sudah ada tutorial seperti ini sebelumnya, selamat mencoba dan semoga bermanfaat

Diposkan oleh Andi Lesmana 3:23 AM 0 komentar

Cara Daftar di Technorati

Pertama jangan kasih komentar untuk artikel ini ya, ini hanya artikel agar diterima di Technorati dengan menyertakan claim token dari situs itu dan kalau sudah keterima lagi paling juga saya hapus post ini. Daripada nanti isinya cuma kode claim token aja mending saya repost tulisan ini. Dulu waktu blog ini beralamat http://www.maskolis.co.cc sudah keterima di Technorati, sekarang setelah domain co.cc didepak saya kembalikan blog ini ke blogspot, jadi Technoratinya juga ikut ilang.

Ngomong-ngomong apa Anda sudah mengenal tentang Technorati ? Bagi yang belum mengenalnya, saya akan kasih penjelasan singkat tentang Technorati, Technorati adalah sebuah direktori terbesar saat ini dan memiliki fasilitas/fungsi yang cukup besar yaitu sebagai BlogSearch, Tags Aggregator dan Online Bookmarks. Dengan mendaftar di Technorati, akan meningkatkan traffic pengunjung ke blog kita, dan blog/website yang kita kelola lebih dapat dikenal oleh blogger lain, dan ini pun bisa disebut sebagai salah satu strategi SEO untuk blog/website kita.

Dengan mendaftarkan blog kita di Technorati, kita juga bisa mengetahui situs atau blog mana saja yang memasang link ke blog kita. Untuk mempersingkat waktu, ikuti langkah-langkah di bawah ini untuk mendaftar di Technorati :

• Masuklah ke alamat Technorati.com
• lalu Klik menu Join (seperti gambar dibawah ini :

• Isilah data secara lengkap lalu klik join
• Setelah itu, akan muncul sebuah confirmation code. Lalu cek email anda yang telah didaftarkan di technorati tadi, lalu klik link yang telah diberikan melalui email anda.
• Setelah itu masukan url blog Anda (seperti gambar dibawah ini), dan kemudian klik Begin Claim.

• Setelah itu, Anda tinggal menunggu Proses Claim, dan lakukan Complete Claim seperti gambar dibawah ini :

• Anda akan dihadapkan pada Form seperti ini :

• Salin kode berikut dan publikasikannya dalam sebuah posting di blog Anda. Technorati harus dapat menemukan kode klaim dalam blog Anda via feed (RSS atau Atom). Caranya adalah dengan menerbitkan posting baru dan menyisipkan kode klaim di dalamnya.
• Untuk Kode Klaim Blog/Website ini adalah : 3S6YXY4VKCDR
• Dan sesudah itu, Anda tinggal klik Complete Claim
• Berikutnya, Anda tinggal menunggu Kode Klaim yang sudah di masukkan dalam Postingan Anda di periksa oleh Technorati, untuk memastikan bahwa memang benar alamat URL yang diberikan, benar-benar milik Anda.
• Dan yang terakhir (karena blog inipun belum terdaftar di Technorati), anda buat satu link dengan kode seperti dibawah ini, dan tampilkan di blog anda.

<a href=”http://technorati.com/faves?sub=addfavbtn&add=http://url blog anda”><img alt=”3S6YXY4VKCDR” src=”http://static.technorati.com/pix/fave/btn-fave2.png”/></a>

• Gantilah kode url blog anda diatas dengan kode URL anda.

Itu tadi sedikit informasi mengenai Cara Mendaftar di Technorati, semoga bermanfaat bagi Anda semua. Terimakasih.

Diposkan oleh Andi Lesmana 3:19 AM 0 komentar

Membuat Slider Otomatis Sporty Magazine 2 Template

Pada tutorial kali ini menjawab pertanyaan dari Mr. Copas pada artikel membuat Image Slider Otomatis, yang menginginkan slider pada template Sporty Magazine 2 made in Borneo Templates yang dipakainya menjadi otomatis. Ketika saya berselancar atau bahasa kerennya surfing di internet, beberapa kali menemukan banyak sekali pengguna template ini baik dari dalam maupun dari luar negeri. Template ini memang fenomenal dan banyak sekali peminatnya, dengan tampilan dasar mirip nbcsports.msnbc.com, template ini menjadi salah satu template blogger dengan pengguna paling banyak.

Pada kesempatan kali ini saya akan mencoba untuk membuat slider bawaan dari template tersebut yang masih mengisikan URL dan keterangan slider satu persatu, menjadi otomatis. Tinggal memasukkan beberapa kode ke kotak HTML/Javascript dengan merubah label tertentu, maka slider pada template ini menjadi otomatis, Sehingga setiap postingan baru dengan label yang diletakkan pada slider, secara otomatis akan muncul.

DEMO

Langsung saja pada langkah pembuatannya :

1. Masuk ke Blogger dengan akun anda
2. Di dashboard pilih blog, kemudian pilih template >> Edit HTML. Jangan lupa untuk mencentang kotak Expand Widget Templates.
3. Setelah itu letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #featured{width:640px;height:250px;position:relative;margin:0;padding:0}
   #featured ul.ui-tabs-nav{position:absolute;top:0;right:0;list-style:none;width:240px;height:250px;margin:0;padding:0}
   #featured ul.ui-tabs-nav li{position:relative;line-height:1.3em;padding:0}
   #featured ul.ui-tabs-nav li span{font:bold 12px Arial;line-height:1.3em;color:#000;margin:0;padding:0}
   #featured .ui-tabs-panel{width:400px;height:250px;background:#ddd;position:relative;overflow:hidden}
   #featured .ui-tabs-panel img{width:400px;height:250px}
   #featured .ui-tabs-hide{display:none}
   #featured li.ui-tabs-nav-item a{display:block;width:215px;height:57px;color:#000;overflow:hidden;background:#ddd;border-left:10px solid #999;line-height:1.4em;outline:none;margin:0 0 2px;padding:2px 10px 2px 5px}
   #featured li.ui-tabs-nav-item a:hover{border-left:10px solid #555;background:#ccc}
   #featured li.ui-tabs-selected{position:absolute}
   #featured ul.ui-tabs-nav li.ui-tabs-selected a{background:#aaa;display:block;border-left:10px solid #444}
   #featured ul.ui-tabs-nav li img{width:75px;height:48px;float:left;background:#333;border:none;margin:4px 7px 4px 0;padding:0}
   #featured .ui-tabs-panel .info{position:absolute;top:179px;left:0;height:71px;width:400px;background:#000;opacity:0.80;filter:alpha(opacity=80)}
   #featured .info a{text-decoration:none;color:#eee}
   #featured .info a:hover{color:#FE9A2E;text-decoration:underline}
   #featured .info h2{font-size:15px;font-family:Arial, serif;color:#fff;overflow:hidden;margin:0;padding:5px}
   #featured .info p{font-family:Arial;font-size:11px;line-height:15px;color:#f0f0f0;margin:0 5px}
   Catatan :
   
   Bagi pengguna template Sporty Magazine 2 langkah itu tidak perlu dilakukan karena kode ini sudah ada. Untuk pengguna template lain, silahkan ukurannya disesuaikan.
4. Masih dalam posisi Edit HTML, letakkan kode berikut diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/511211242172/jquery-ui.min.js' type='text/javascript'/>
   
   <script type='text/javascript'>
       $(document).ready(function(){
           $(&quot;#featured &gt; ul&quot;).tabs({fx:{opacity: &quot;toggle&quot;}}).tabs(&quot;rotate&quot;, 4000, true);
       });
   </script>
   
   <script type='text/javascript'>
   //<![CDATA[
      imgr = new Array();
   
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAs0yw8xeDuhLDCksl2wnXM-QUpRj4f7tapy1JTmfbQ2sa3qsRtQmBGlDrtSJdgTkaJAWzFgq9J8PpVNeAFez1LP03XfnKB77nBGD4CE7X3Y2Eig1QQy_RFd69goOwfxgNt5H2E_skWCg/s1600/no+image.jpg";
   
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 70;
   summaryTitle = 20;
   
   numposts1 = 4;
   
   function removeHtmlTag(strx,chop){
       var s = strx.split("<");
       for(var i=0;i<s.length;i++){
           if(s[i].indexOf(">")!=-1){
               s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
           }
       }
       s =  s.join("");
       s = s.substring(0,chop-1);
       return s;
   }
   
   function showrecentposts4(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts1; i++) {
           var entry = json.feed.entry[i];
           var posttitle = entry.title.$t;
           var pcm;
           var posturl;
           if (i == json.feed.entry.length) break;
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'alternate') {
                   posturl = entry.link[k].href;
                   break;
                 }
           }
          
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                   pcm = entry.link[k].title.split(" ")[0];
                   break;
                 }
           }
          
           if ("content" in entry) {
                 var postcontent = entry.content.$t;}
           else
           if ("summary" in entry) {
                 var postcontent = entry.summary.$t;}
           else var postcontent = "";
          
           postdate = entry.published.$t;
      
       if(j>imgr.length-1) j=0;
       img[i] = imgr[j];
      
       s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
       if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       var day = postdate.split("-")[2].substring(0,2);
       var m = postdate.split("-")[1];
       var y = postdate.split("-")[0];
   
       for(var u2=0;u2<month.length;u2++){
           if(parseInt(m)==month[u2]) {
               m = month2[u2] ; break;
           }
       }
   
      
       //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
   
   
       var trtd = '<div class="ui-tabs-panel ui-tabs-hide" id="post-'+i+'"><a href="'+posturl+'"><img width="400" height="246" src="'+img[i]+'"/></a><div class="info"><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...<a href="'+posturl+'"></a></p></div></div>';
   
       document.write(trtd);
   
       j++;
   }
   
   }
   
   function showrecentposts5(json) {
       j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
       img  = new Array();
   
         for (var i = 0; i < numposts1; i++) {
           var entry = json.feed.entry[i];
           var posttitle = entry.title.$t;
           var pcm;
           var posturl;
           if (i == json.feed.entry.length) break;
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'alternate') {
                   posturl = entry.link[k].href;
                   break;
                 }
           }
          
           for (var k = 0; k < entry.link.length; k++) {
                 if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
                   pcm = entry.link[k].title.split(" ")[0];
                   break;
                 }
           }
          
           if ("content" in entry) {
                 var postcontent = entry.content.$t;}
           else
           if ("summary" in entry) {
                 var postcontent = entry.summary.$t;}
           else var postcontent = "";
          
           postdate = entry.published.$t;
      
       if(j>imgr.length-1) j=0;
       img[i] = imgr[j];
      
       s = postcontent    ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   
       if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   
       //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   
   
       var month = [1,2,3,4,5,6,7,8,9,10,11,12];
       var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   
       var day = postdate.split("-")[2].substring(0,2);
       var m = postdate.split("-")[1];
       var y = postdate.split("-")[0];
   
       for(var u2=0;u2<month.length;u2++){
           if(parseInt(m)==month[u2]) {
               m = month2[u2] ; break;
           }
       }
   
      
       //var daystr = (showPostDate) ? '<i><font color="'+acolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
   
   
       var trtd = '<li id="nav-post-'+i+'" class="ui-tabs-nav-item"><a href="#post-'+i+'"><img width="80" height="50" src="'+img[i]+'"/><span>'+posttitle+'</span></a></li>';
   
       document.write(trtd);
   
       j++;
   }
   
   }
   
    //]]>
   </script>
   Catatan :
   
   Untuk pengguna template Sporty Magazine 2, hapus dulu kode script bawaan slider, kemudian baru letakkan kode diatas.
5. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :
   <div id='featured'>
   <ul class="ui-tabs-nav">
   <script>
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts5\"><\/script>");
   </script>
   </ul>
   <script>
   document.write("<script src=\"/feeds/posts/default/-/misteri?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
   </script>
   </div>
   Keterangan :
   
   Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan.
6. Untuk pengguna template Sporty Magazine 2, tinggal memasukkan kode diatas pada kolom kosong diatas blog post (kalau tidak salah... hehehe). Dan untuk pengguna lain mesti buat dulu satu kolom diatas blog post. Langsung saja letakkan kode berikut di atas kode ]]></b:skin>
   view plainprint?

   1. /* Slide Content 
   2. ----------------------------------------------- */  
   3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left;  
   4. word-wrap: break-word; overflow: hidden;}   
   5. .slide {color: #666666;line-height: 1.3em;}  
   6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
   7. .slide li {margin:0;padding-top:0;  
   8. padding-right:0;padding-bottom:.25em;  
   9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
   10. .slide .widget {margin:0px 0px 6px 0px;}  
7. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
   view plainprint?

   1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
   2.       <div id='slide-wrapper'>  
   3. <b:section class='slide' id='slide' preferred='yes'/>  
   4.       </div>  
   5. </b:if>   
   

Selamat mencoba dan semoga bermanfaat.

Diposkan oleh Andi Lesmana 3:17 AM 0 komentar