JRTR site | Berbagi Tanpa Batas, Blogger Tips, Widget, Template

Berbagi informasi online, komputer, tutorial blogger, template untuk blogger, tips trik blogger.

Khamis, 13 September 2012

Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blg

Assalamualaikum..wr.wb ....Salamsejahtera dan sukses selalu buat sobat semua, ! Bakalan-Tlogorejo-City -Sekarang saya akan berbagi dan  membahas tentang Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog dan semoga artikel ini bermanfaat buat sobat yang mampir di blog ini, bila berkenan setelah membaca artikel ini sobat bisa meluangkan untuk meninggalkan jejak pada kotak komentar dan Insya Alloh saya akan berkunjung balik ke blog/web sobat sebagai tanda terima kasih saya atas kunjungannya.


Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog mungkin sudah tak asing lagi, namun berdasarkan pengalaman yang saya dapatkan setelah berselancar di google beberapa tutorial yang ada ternyata ada yang tidak bisa diterapkan alias gagal. Namun setelah sekian banyak blog/web yang menyediakan tutorial ini saya menemukan tutorial yang cocok dengan template blog saya, dan setelah di amati dan diperhatikan ternyata penyebab dari kegagalan tutorial sebelumnya itu ada pada kode Javascriptnya yang tidak ada. inilah Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog yang sudah lengkap dengan javascriptnya.


1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya : 


<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://my-project-favicon.googlecode.com/files/relatedposts.js.txt' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->


7. Lalu cari kode di bawah ini :

<div class='post-footer-line post-footer-line-1'>

-Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu salah satu kode tersebut, Copy paste kode berikut tepat dibawahnya

<!-- Marquee Serbablog Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
<h3><b>Related Posts</b></h3>
<marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=10;
var relatedpoststitle=&quot;&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script></marquee>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://bakalan-tlogorejo-city.blogspot.com/' style='display:none;'></a>
</b:if>
</b:if>
<!-- Marquee Serbablog Related Posts with Thumbnails Code End-->


Keterangan
Kita juga dapat menganti beberapa kode css, seperti berikut ini:
var maxresults=4; --> Berarti artikel terkait yang akan kita tampilkan adalah 4
Related Posts bisa anda rubah menjadi Artikel Terkait atau kata-kata yang anda inginkan

Sekian Dulu Tips Trick dan Cara Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog>>Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog>> Selamat mencoba!
Semoga artikel Cara Mudah Membuat Artikel Terkait Dengan Gambar Bergerak (Efek Marquee) di Blog Bermanfaat untuk sahabat blogger semua....?
JokoRowoTlogoRejo Beri Komentar
Bagikan kepada teman!
Garis
300 x 250

3 komentar:

  1. yes,akhirnya nemuin juga yang saya cari"
    makasih mz dah share info nya...
    mampir ke gubug saya mz bila berkenan,,^^
    tq b4

    BalasPadam

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB: Jangan menuliskan link aktif karena akan terhapus secara automatis.

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah

 
Design by JRTR Copyright © 2014 ~ 2015 Powered by Blogger
TOP