Berkreasi membuat tulisan marquee keren dengan menambah css

                                            

Cara membuat efek marquee

Biasanya default efek marquee di buat dengan kode html berikut.
<marquee>SELAMAT DATANG DI BLOG ANDOELSEAN</marquee>,hasilnya seperti di bawah ini. SELAMAT DATANG DI BLOG ANDOELSEAN Namun pada postingan saya kali ini saya akan menambahkan kode css,untuk memperindah efek marquee,sehingga hasilnya akan menjadi seperti di bawah ini.

SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA

Code untuk membuat marquee seperti di atas adalah:

<div class="marqueeart2">
<marquee style="color: white; font-family: Times New Roman; font-size: 30px; text-shadow: 2px 2px 4px #000;">SELAMAT DATANG DI BLOG ANDOELSEAN,SILAHKAN BACA ARTIKEL MENARIK LAINYA</marquee></div>
<style>
.marqueeart2 {
border-radius:6px;
border:1px solid #1E90FF;
border-left:5px solid #1E90FF;
border-right:5px solid #1E90FF;
background-image: -ms-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -moz-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -o-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #00A3EF 100%);
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
}
</style>

Untuk menggunakan kode di atas,pada saat akan memasukan effect marque pada postingan beralih dulu dari mode Compose ke HTML,kalau belum mengerti lihat gambar dibawah ini. . ! !

Nah jika anda ingin mengedit kode marquee'nya,silahkan ganti kode yang berwarna sesuai yang anda inginkan. .

KETERANGAN:

• Kode yang berwarna ORANGE di atas adalah untuk kata-kata dalam marquee,silahkan ganti dengan kata-kata yang anda inginkan. 
• Border-radius:itu untuk sudut lengkung pada kotak marquee,nilai 6px bisa anda ganti dengan yang anda inginkan 
• Border:untuk garis tepi pada kotak marquee,silahkan disesuaikan nilai dan warnanya sesuai yang anda inginkan 
• Border-left:itu untuk border sebelah kiri silahkan atur ketebalan dan warnanya. 
• Border-right:Untuk border sebelah kanan 
• Dan kode yang berwarna MERAH,itu untuk css background gardient,silahkan anda ganti sesuai yang anda inginkan,kalau gak tau bagaimana caranya membuat css background gardient silahkan buat 

Nah saya rasa cukup sampai disini dulu tutorial tentang cara berkreasi membuat tulisan marquee dengan menambah css,selamat mencoba dan berksperimen.

Cara Membuat Related Post Thumbnail Marquee

 
Cara Membuat Related Post Thumbnail Marquee, cara ini sangat cocok bagi yang berjiwa dinamis. Karena gambar Related post ini bergerak atau marque yang pastinya sangat terasa hidup blognya. Sebenarnya kode javascriptnya tidak terlalu jauh berbeda dengan kode Cara Membuat Related Post Dengan Thumbnail, hanya sedikit tambahan kode marquee dan ada letak kode yang dipindah agar judul related postnya tidak ikut bergoyang ( ter marquee ). 

Postingan ini sekaligus pelengkap  tentang Widget Relates Post yang lainnya, Cara Membuat Related Post Dengan Marquee, Cara Membuat Related Post Dengan Scroll, Cara membuat Related Post Dengan Icon, Cara Membuat Related Post Dengan Thumbnail, Cara Membuat Related Post LinkWithin, Cara Membuat Related Post Di Sidebar.

  

Yuk langsung kita ikuti caranya membuat related post thumbnail marquee :

• Klik Desain
• Pilih Template 
• Klik EDIT HTML Jangan Lupa " Centang Expand Widget Template".
• Cari kode </head> . setelah ketemu copy kode di bawah ini tepat di atas kode </head>

<!-- Marquee Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == "item"'>
<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, Times New Roman , 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEigw6IoYPDvZadFAqzUGw0IGNcGD-iMscUahntAtEDhCMIRuqVt-C8IZ0ZoGXLI0vzSLsbxLyRx020M-azEayA1ObfuyIN_Awi2_K5EBvdG0VBkPLYuSalzbn0cjNfDvPRKM4WVNzSE6NE/s1600/Serpihan+waktu+Related+Post+Dengan+Thumbnail.png";
var splittercolor="#d4eaf2";
</script>
<script src='http://djangkarubumi.googlecode.com/files/SerpihanWaktuRelatedPostThumnail.js' type='text/javascript'/>
<!-- remove --></b:if>
<!-- Marquee Related Posts with thumbnails Scripts and Styles End-->

• Selanjutnya Cari kode <data:post.body/> . Setelah ketemu copy kode di bawah ini tepat di bawah kode <data:post.body/> . ( jika lebih dari satu silahkan mencoba satu-persatu ).

<!-- Marquee 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://djangkarubumi.blogspot.com/' style='display:none;'>Serpihan Waktu</a>
</b:if>
</b:if>
<!-- Marquee Related Posts with Thumbnails Code End-->

• Klik Simpan dan lihat hasilnya.

Tambahan :

• Warna merah bisa dirumbah sesuai yang dikehendaki.
• Selain dibawah Kode <data:post.body/> kode tersebut juga bisa diletakan dibawah <div class='post-footer-line post-footer-line-1'> atau yang semirip dengan kode tersebut , jika terdapat lebih dari satu silahkan coba satu-persatu, umumnya di kode pertama .

Sekian penjelasan dari saya semoga bisa memahami dan selamat mencoba.Dan semoga behasil.

Cara Mudah Membuat Widget Bergerak Di Blog

                              
Untuk Bergerak Bolak Balik

a. Kanan-Kiri

<marquee behavior='alternate' align='center' direction='right' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

b. Atas-Bawah

<marquee behavior='alternate' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

Untuk Bergerak Terus Menerus Satu Arah

a. Dari Kanan ke Kiri (arah bisa diganti menjadi right)
<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

b. Dari Bawah ke Atas (arah bisa diganti menjadi down)
<marquee behavior='scroll' align='center' direction='up' height='400px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script widget/gadget disini</marquee>

Sekian .. Semoga berguna dan bermanfaat.

Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

• Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
• Copy dan paste code berikut di HTML/Javascript :

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0,

pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Save/Simpan, dan lihat hasilnya.

Semoga manfaat ... - See more at: http://www.masasha.net/2012/03/cara-membuat-judul-blog-bergerak.html?showComment=1358349394890#sthash.1fouMLzs.dpuf

Judul/Title blog secara default, berada dalam keadaan statik. Namun, kita bisa memberikan efek pada judul blog kita dengan kode JavaScript, sehingga bisa bergerak dari kanan ke kiri.

 Mari kita buat :

• Dari dashboard >> Design >> Add a gadget >> Html/Javascript 
• Copy dan paste code berikut di HTML/Javascript :

<script language=javascript>
msg = "Test Blog ...Test Blog ...";

msg = "..." + msg;pos = 0;
function scrollMSG() {
document.title = msg.substring(pos, msg.length) + msg.substring(0,

pos);
pos++;
if (pos > msg.length) pos = 0
window.setTimeout("scrollMSG()",200);
}
scrollMSG();
</script>

Note: Ganti 'Test Blog ...Test Blog ...' dengan teks yang diinginkan.

• Save/Simpan, dan lihat hasilnya.

Semoga manfaat ... - See more at: http://www.masasha.net/2012/03/cara-membuat-judul-blog-bergerak.html?showComment=1358349394890#sthash.1fouMLzs.dpuf