Cara Membuat Neon Text pada posting blog

Kali ini Diaz share artikel tentang Membuat Neon Text pada posting blog, atau widget. Mungkin ada yang belum tau ya. Langsung aja ikuti tutor seperti contoh dibawah ini:

Scriptnya sebagai berikut:

<h2> <script language="JavaScript1.2"> /* Neon Lights Text By JavaScript Kit (http://javascriptkit.com) Over 400+ free scripts here! */ var message="diaz-box.blogspot.com - by Agustine Diaz" var neonbasecolor="blue" var neontextcolor="red" var flashspeed=70 //in milliseconds ///No need to edit below this line///// var n=0 if (document.all||document.getElementById){ document.write('') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> </h2> </div> <div align="center"> </div>

Ket :

- var message="diaz-box.blogspot.com-by Agustine Diaz"

( Ganti Text Berwarna merah dengan text anda )

- var neonbasecolor="blue"

( Ganti text berwarna biru dengan warna kesukaanmu )

- var neontextcolor="red"

( Ganti text berwarna biru dengan warna kesukaanmu )

- var flashspeed=70  //in milliseconds

( Ganti Text berwarna kuning dengan angka keinginan anda dari 1 - 1000 )

Semoga artikel Diaz ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di TUTORIAL BLOGSPOT  berikutnya.

Read more »

Cara Membuat Related Post Dengan Gambar Di Blog [UPDATE]

Cara Membuat Related Post Dengan Gambar Di Blog

1.       Login ke dashboard blogger anda, pilih Rancangan > Edit HTML, centang Expand widget template.

2.       Cari kode </head> 

3.       Letakkan kode HTML/JavaScript dibawah ini diatas kode </head>.

<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts {float:center;height:100%;min-height:100%;padding-top:5px;padding-left:5px;} #related-posts h2{font-size: 1.6em;font-weight: bold;color:#000;font-family:Arial, Georgia;margin-bottom:0.75em;margin-top: 0em;padding-top: 0em;} #related-posts a{-webkit-transition: background 1s ease, color 1s ease;-moz-transition: background 1s ease, color 1s ease;-o-transition: background 1s ease, color 1s ease;} #related-posts a:hover{background-color:#d4eaf2;-webkit-transition: background 1s ease, color 1s ease;-moz-transition:background 1s ease, color 1s ease;-o-transition:background 1s ease, color 1s ease;-webkit-border-radius: 5px;-moz-border-radius:5px;border-radius:5px;-o-border-radius:5px;} .tooltip{width: 115px; color:#000;font:lighter 12px/1.3 Arial,sans-serif;text-decoration:none;text-align:left} .tooltip span.top{padding:20px 5px 0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRaIkRtCgF6FLeLwL1SwGVeQfCKXY-WkPbe2Z45gm0XntUwblV_tlGh41Evw6yIg89x1O_y3YEQivzEuWDUHCEVZkPPJ3Ew3-VGFFTAaauB9ZyRXwr_TLgr9GKaTEhOCIpiHa9MwGGNEo/s1600/bt.png) no-repeat top;} .tooltip b.bottom{padding:2px 5px 6px;color:#548912;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRaIkRtCgF6FLeLwL1SwGVeQfCKXY-WkPbe2Z45gm0XntUwblV_tlGh41Evw6yIg89x1O_y3YEQivzEuWDUHCEVZkPPJ3Ew3-VGFFTAaauB9ZyRXwr_TLgr9GKaTEhOCIpiHa9MwGGNEo/s1600/bt.png) no-repeat bottom;} </style> <script type='text/javascript'>window.onload=function(){enableTooltips("calcList")};imgBT=new Image();imgBT.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTu8jidRss9Ga7pBjva9NrF_kJV-M8IDH4n7dm13A7tKs_Bh5iam_VLMi-Pkof2fCDsNXLufecE0PnYpkCAJd_z7WE77hmwDdq8UAWUs576I3UinWl_BIO95H-wwTnpCVxGWkSL4-rWNA/s1600/noimage.jpg';</script> <script src='http://dvslabs.googlecode.com/files/rp-bubbled-thumbnails.js' type='text/javascript'></script> </b:if>

4. Kemudian cari kode <div class='post-footer-line post-footer-line-1'> . Letakkan kode HTML/JavaScript dibawah ini dibawah kode <div class='post-footer-line post-footer-line-1'>. Jika template anda kodenya ada 2, maka letakkan kode HTML dibawah kode <div class='post-footer-line post-footer-line-1'>  yang pertama.

<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=12"' type='text/javascript'/></b:if></b:loop> <h3> Related Posts</h3> <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'> <script type='text/javascript'> var currentposturl="<data:post.url/>"; var maxresults=10; var relatedpoststitle=""; removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(); </script></marquee> </div> <div style='clear:both'/> </b:if>

5.       Preview/Pertinjau dulu untuk melihat tampilan hasilnya.

6.      Jumlah maksimum posting yang ditayangkan adalah 20. Silahkan ganti angka 10 yang saya tandai    merah jika anda ingin merubahnya.

7.       Save/Simpan.

Semoga artikel Diaz ini bisa bermanfaat untuk sobat-sobat blogger sekalian.Jika sobat mempunyai pertanyaan,kritik ataupun saran,silahkan tulis di kolom komentar yang berada di bawah postingan.Sampai jumpa di TUTORIAL BLOGSPOT  berikutnya.

Read more »