Cara Bikin Blog
Berikut adalah Codenya :
Read more »
<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>