• Home
  • Only 1 Post Archived on 2019
Cara Bikin Blog

Cara Bikin Blog

By ,

Berikut adalah Codenya : 

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>
<script>
var i=0;
$(document).ready(function () {
 $('.slidertitle, #slider img').hide();
 showNextImage();
  setInterval('showNextImage()', 3000);
    });
    function showNextImage() {
  i++;
              $('#sliderImage' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
     $('#title' + i).appendTo('#slider').fadeIn(1100).delay(1100).fadeOut(1100);
  if(i==3){
   i=0;
  }
    };
</script>
<style type="text/css">
#slider {
 padding:10px 0 10px;
 position:relative;
 width:630px;
 height:310px;
}
#slider img{
 width:630px;
 height:300px;
 position:absolute;
 -webkit-border-radius:5px 5px 5px 5px;
 border-radius:5px;
 -moz-border-radius:5px 5px 5px 5px;
}
.slidertitle{
 width:630px;
 margin-top:265px;
 text-align:center;
 position:absolute;
 padding:10px;
 -webkit-border-radius:0px 0px 5px 5px;
 border-radius:0px 0px 5px 5px;
 -moz-border-radius:5px 5px 5px 5px;
 color:#FFF;
 background-color:rgba(12, 22, 23, 0.50);
}
</style>
<div id="slider">
  
<img id="sliderImage1" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOQ4AF3baGAeQkN-5lIQSnPFva-tuNP76xsYvOsko3Y5bdBhpVXvDZH2opqggYGpi7Zd6VdhfwbEOiQj0hcB4t-sT4ctSThhMAXOiRDpU619oYGWHNkOt7kZU0WTrniOsW7AEXZTlZNg/s1600/Screenshot+(36).png'>
        <div class="slidertitle" id="title1">Sublime Text 3</div>
   
<img id="sliderImage2" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM6oHzBvnd46IdF5VwTWictSjt8dUItwWSxJlWemyTQneqr3Jwbl0SqryxqqxIahbWlXSqKAgxiHD-wQFfpoXD8_rvsJ9FG5RQF3DW8huhmhQebpl8rRE1plIDjLRYkErA98YZc_uFEg/s1600/Screenshot+(35).png'>
        <div class="slidertitle" id="title2">Zebra Tabel</div>
   
<img id="sliderImage3" 
src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCSsfmtc17PwcyO43fV8xjXTu3EwTZndpHFJnCuCjnBDpiNow2T2GVtuS9X1jfLI6fBOqjS-8fSi8yt5172oHAHSs1b0Gz_Zlad4aLIVnonNefcKB3fekqojw56OwFpPmFsVK3iiVQGg/s1600/2.png'>
        <div class="slidertitle" id="title3">phpmyadmin</div>
</div>
Dan Beginilah Hasilnya : 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>SyntaxHighlighter - JavaScript example</title>
 
   <!-- SyntaxHighlighter core library -->
  <script type="text/javascript" src="../scripts/shCore.js"></script>
 
  <!-- Library highlights the javascript code -->
  <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
 

  <!-- Using default Style -->
  <link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"/>
 
</head>
<body>

<h2>Highlight JavaScript Code - Default Style</h2>
 
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
  return "hi!";
}
</pre>

 
<!-- Highlight all -->    
<script type="text/javascript">
  SyntaxHighlighter.all();
</script>    
 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>SyntaxHighlighter - JavaScript + Java example</title>
   
 
   <!-- SyntaxHighlighter core library -->
   <script type="text/javascript" src="../scripts/shCore.js"></script>
   
 
   <!-- Library highlights the javascript code -->
   <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
   

   <!-- Library highlights the Java code -->
   <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
   

   <!-- Using default Style -->
   <link type="text/css" rel="stylesheet" href="../styles/shCoreDefault.css"/>    
   
   
</head>
<body>

<h2>Highlight Java, JavaScript Code - Default style</h2>
   
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
   return "hi!";
}
</pre>

<h3>Java Code:</h3>    
<pre class="brush: java;">
public class JavaClass  {
   public static void main(String[] args)  {
       System.out.println("Hello World!");
   }
}
</pre>

   
<!-- Highlight all -->  
<script type="text/javascript">
   SyntaxHighlighter.all();
</script>    
   
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>SyntaxHighlighter - JavaScript + Java example</title>
    
   
    <!-- SyntaxHighlighter core library -->
    <script type="text/javascript" src="../scripts/shCore.js"></script>
    
 
    <!-- Library highlights the javascript -->
    <script type="text/javascript" src="../scripts/shBrushJScript.js"></script>
    
 
    <!-- Library highlights the Java -->
    <script type="text/javascript" src="../scripts/shBrushJava.js"></script>    
    
 
    <!-- Using eclipse style -->
    <link type="text/css" rel="stylesheet" href="../styles/shCoreEclipse.css"/>    
    
    
</head>
<body>

<h2>Highlight Java, JavaScript Code - Eclipse style</h2>
    
<h3>JavaScript Code:</h3>    
<pre class="brush: js;">
function helloSyntaxHighlighter()
{
    return "hi!";
}
</pre>

<h3>Java Code:</h3>    
<pre class="brush: java;">
public class JavaClass  {
    public static void main(String[] args)  {
        System.out.println("Hello World!");
    }
}
</pre>

    
  
<!-- Highlight all -->
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>     
    
</body>
</html>
Read more »