Dummy Blog

Hal yang paling sulit adalah tentang bagaimana caranya menyisipkan URL posting ke dalam Imageflow, karena saat gambar diklik, yang terakses bukannya URL halaman, melainkan URL gambar itu sendiri. Meskipun Saya telah berhasil memanipulasinya menggunakan JQuery, yaitu dengan cara menyimpan URL posting ke dalam atribut rel pada gambar, sehingga Saya bisa mengakses URL tersebut dan menyisipkannya ke dalam perintah window.open() seperti ini:

onclick = function() {
    window.open($(this).attr('rel'));
}

document.write('<img src="' + img[o] + '" alt="&lt;a href=&#39;' + posturl + '&#39;&gt;' + postitle + '&lt;/a&gt;">');

Dan berhasil!

Tahap 1: Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

@charset "utf-8";

/*
Auto Content 4 Imageflow 1.3.0 by Taufik Nurrohman
URL: https://plus.google.com/108949996304093815163/about
*/

@media screen, projection {
  .imageflow {
    width:100%;
    overflow:hidden;
    position:relative;
    text-align:left;
    visibility:hidden;
    margin:0 auto;
    font:normal normal 12px/1.4 Verdana,Tahoma,Arial,Sans-Serif;
  }
  .imageflow img {
    border:none;
    padding:0;
    margin:0;
    background:transparent;
    position:absolute;
    top:0;
    visibility:hidden;
    /* Enables bicubic image resampling for the IE7 */
    -ms-interpolation-mode:bicubic;
    /* Uncomment this declaration to enable shadow around images
    -webkit-box-shadow:0 1px 10px black;
    -moz-box-shadow:0 1px 10px black;
    box-shadow:0 1px 10px black;
    */
  }
  .imageflow p {
    margin:0 auto;
    text-align:center;
  }
  .imageflow .loading {
    border:1px solid white;
    height:15px;
    left:50%;
	margin-top:4px;
    margin-left:-106px;
    padding:5px;
    position:relative;
    visibility:visible;
    width:200px;
  }
  .imageflow .loading_bar {
    background:#fff;
    height:15px;
    visibility:visible;
    width:1%;
  }
  .imageflow .navigation {
    z-index:10000;
    margin-top:160px;
  }
  .imageflow .caption {
    font-weight:bold;
    position:relative;
    text-align:center;
    z-index:10001;
    text-shadow:0 1px 3px black;
  }
  .imageflow .caption a {
    text-decoration:none;
    color:white;
  }
  .imageflow .caption a:hover {
    text-decoration:underline;
    color:#8CD0D3;
  }
  .imageflow .scrollbar {
    border-bottom:1px solid #b3b3b3;
    position:relative;
    visibility:hidden;
    z-index:10002;
    height:1px;
  }
  .imageflow .slider {
    background:transparent url('http://1.bp.blogspot.com/-4lzSM34zaOA/T01-W0Mb1kI/AAAAAAAACQU/5w3WsezYvRY/s1600/slider.png') no-repeat 50% 50%;
    height:14px;
    margin:-6px 0 0 -7px;
    position:absolute;
    width:14px;
    z-index:10003;
  }
  .imageflow .slideshow {
    cursor:pointer;
    height:14px;
    margin:20px 0 0 20px;
    position:absolute;
    width:14px;
    z-index:10003;
  }
  .imageflow .slideshow.pause {background:transparent url('http://2.bp.blogspot.com/-yt4eRgtDd6I/T01wsFn-e4I/AAAAAAAACPM/pdr8ljnrM9o/s1600/button_pause.png') no-repeat 50% 50%}
  .imageflow .slideshow.play {background:transparent url('http://3.bp.blogspot.com/-H5F2nAmaVBA/T01wx0hM8oI/AAAAAAAACPc/OpMSLH-WaO8/s1600/button_play.png') no-repeat 50% 50%}
  .imageflow .images {
    overflow:hidden;
    white-space:nowrap;
  }
  .imageflow .button {
    cursor:pointer;
    height:17px;
    position:relative;
    width:17px;
  }
  .imageflow .previous {
    background:transparent url('http://4.bp.blogspot.com/-Eq4y210bsdE/T01wpORgybI/AAAAAAAACPE/AwOmlS5OrpU/s1600/button_left.png') no-repeat 0 0;
    float:left;
    margin:-7px 0 0 -30px;
  }
  .imageflow .next {
    background:transparent url('http://2.bp.blogspot.com/-VwvDUzRpSOo/T01wuzhWf-I/AAAAAAAACPU/K4NQIxxIm7U/s1600/button_right.png') no-repeat 0 0;
    float:right;
    margin:-7px -30px 0 30px;
  }
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script type='text/javascript'>
//<![CDATA[
var loadingText       = "Memuat gambar",
    animationSpeed    = 50,
    aspectRatio       = 1.964,
    circular          = true,
    imageCursor       = 'default',
    opacity           = false,
    opacityArray      = [10,8,5,3],
    imagesHeight      = 0.5,
    imageScaling      = true,
    percentLandscape  = 200,
    percentOther      = 100,
    preloadImages     = true,
    slider            = true,
    sliderCursor      = 'e-resize',
    sliderWidth       = 14,
    scrollbarP        = 0.7,
    onClick           = function() {},
    startID           = 1,
    slideshow         = true,
    slideshowSpeed    = 1500,
    slideshowAutoplay = false,
    startAnimation    = false,
    xStep             = 200;
//]]>
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/imageflow-custom.js' type='text/javascript'></script>

Klik Simpan Template.

Tahap 2: Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-RdWht36FTLI/TrsqFbSraFI/AAAAAAAABO4/rTjPm97uO34/s1600/dte-darkblue.png",
    text            = "Komentar",
    numposts_g      = 10,
    home_page       = "http://nama_blog.blogspot.com";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4Imageflow.1.3.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Konfigurasi JSON & Imageflow 1.3.0

Pengaturan slideshow ini dibagi menjadi dua, yaitu pengaturan JSON Blogger dan pengaturan opsi dalam Imageflow itu sendiri.

Contoh Penerapan: circular:false, opacity:true

//<![CDATA[
    ...
    ...
    circular          = false,
    opacity           = true,
    opacityArray      = [10,8,5,3],
    ...
    ...
//]]>

button_right_dark.png
button_play_dark.png
button_pause_dark.png
button_left_dark.png
slider_dark.png

Label: Gambar, JavaScript, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 29, 2012 0 comments

A letter from Arhan Tubar:

Hello
I like very much the automatic slideshow tutorial and I was wondering if you can help me with something.

I would like to make the slideshow from this link:

http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/

...to be automatic like in your tutorials.

Can you help me with this request?

Thank you in advance.

My answer is, “Yes, why not. This is just about inserting images into 3D Gallery markup. A special post for you. Sorry about my bad English” :p

Step 1: Edit Your Template

First go to the Template menu and then click Edit HTML and click Continue/Proceed:

Find this code:

]]></b:skin>

Copy the code below and paste it above ]]></b:skin>:

/*
 * Auto Content 4 3D Gallery by Taufik Nurrohman
 * Visit: http://hompimpaalaihumgambreng.blogspot.com
 */

.dg-container {
  width:100%;
  height:450px;
  position:relative;
  margin:0 auto;
}

.dg-wrapper {
  width:370px;
  height:300px;
  margin:0 auto;
  position:relative;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  -o-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  -ms-perspective:1000px;
  -o-perspective:1000px;
  perspective:1000px;
}

.dg-wrapper a {
  width:370px;
  height:auto;
  display:block;
  position:absolute;
  left:0;
  bottom:0;
  text-decoration:none;
  -webkit-box-shadow:0 10px 20px rgba(0,0,0,.3);
  -moz-box-shadow:0 10px 20px rgba(0,0,0,.3);
  box-shadow:0 10px 20px rgba(0,0,0,.3);
}

.dg-wrapper a.dg-transition {
  -webkit-transition:all 1s ease-in-out;
  -moz-transition:all 1s ease-in-out;
  -ms-transition:all 1s ease-in-out;
  -o-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
}

.dg-wrapper a img {
  width:100%;
  height:auto;
  border:none;
  outline:none;
  background-color:white;
  padding:0 0;
  margin:0 0;
  display:block;
}

.dg-wrapper a div {
  font-style:italic;
  text-align:center;
  line-height:50px;
  text-shadow:1px 1px 1px rgba(255,255,255,.5);
  color:#333;
  font-size:16px;
  width:100%;
  bottom:-55px;
  display:none;
  position:absolute;
}

.dg-wrapper a.dg-center div {
  display:block;
  font:normal normal 14px/1.4 "Times New Roman",Times,Serif;
  font-style:italic;
}

.dg-wrapper div a {text-decoration:none}

.dg-container nav {
  width:58px;
  position:absolute;
  z-index:1000;
  bottom:40px;
  left:50%;
  margin-left:-43px;
  padding:10px 15px;
}

.dg-container nav span {
  text-indent:-9000px;
  float:left;
  cursor:pointer;
  width:24px;
  height:25px;
  opacity:.8;
  background:transparent url('http://4.bp.blogspot.com/-qV9_Htfqexw/T02JMiWMUSI/AAAAAAAACQs/E5yAia_KzCo/s1600/arrows.png') no-repeat top left;
}

.dg-container nav span:hover {opacity:1}

.dg-container nav span.dg-next {
  background-position:top right;
  margin-left:10px;
}

/* End 3D Gallery */

Then find this code:

</head>

Copy the code below and paste it above:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/modernizr.custom.53451.js'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.gallery.js'></script>
<script type='text/javascript'>
$(window).bind("load", function() {
    $('#dg-container').gallery({autoplay:false});
});
</script>

Save your template.

Step 2: Put the Slideshow

Go to the Layout menu, then add a new HTML/JavaScript page element that placed above the posts:

Copy the code below and paste it on the form:

<script type="text/javascript">
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = false,
    slidebyLabels   = false,
    slideLabelName  = "Your Specific Post Label",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Comments",
    numposts_g      = 4,
    home_page       = "http://your_blog.blogspot.com";
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent43DGallery.js"></script>

Replace the URL http://your_blog.blogspot.com with your blog URL.

Configuring the Slideshow

We have to set two opstions: JSON and JQuery .gallery()

JSON Configuration - Auto Content Slider

Option	Keterangan
showPostDate_g	If true, the post date will appear. If false, the post date will not appear.
slideOpenNewTab	If true, every link will automatically open in new tab/new window.
idMode	If true, the post date format will turn into Indonesian. If false, the post date format will turn into English.
slidebyLabels	Change to true if you want to sort the posts by a specific label. Then, set the name of your specific label to the slideLabelName.
slideLabelName	Used to determine the specific label names after changing the slidebyLabels value to true.
pBlank	A "no image" image.
text	Used to determine the comments label (e.g: 7 Comments).
numposts_g	Used to set the number of slides.
home_page	Your blog URL.

3D Gallery Configuration

Just two options: true or false. If true, the slideshow will move automatically, if false, the slideshow will move by it's navigation:

$(window).bind("load", function() {
    $('#dg-container').gallery({
        autoplay:false // true or false
    });
});

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 28, 2012 1 comments

Tahap 1: Mengedit Template

/*
============================================================================
    AnythingSlider v1.7+ Default (base) theme
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/
    With some awesome touches by Taufik Nurrohman
    to create a very very very very very cool shiny effect :)
============================================================================
*/

#any-slider {
  width:645px; /* Atau bisa juga ditentukan sendiri */
  height:390px;
  list-style:none;
  overflow-y:auto;
  overflow-x:hidden;
  font:normal 12px Georgia,Serif;
  color:#666;
  position:relative;
  text-align:left;
}

#any-slider ul,
#any-slider li {
  list-style:none !important;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  border:none;
  outline:none;
}

.anythingBase {max-width:32766px;}

div.anythingSlider .anythingWindow {
  border-top:3px solid #7C9127;
  border-bottom:3px solid #7C9127;
}

div.anythingSlider .anythingControls ul a.cur,
div.anythingSlider .anythingControls ul a {
  background:#777;
  color:#000;
}

div.anythingSlider.activeSlider .anythingControls ul a.cur,
div.anythingSlider.activeSlider .anythingControls ul a {
  background-color:#7C9127;
}

div.anythingSlider {
  display:block;
  margin:0 auto;
  overflow:visible !important;
  position:relative;
  padding:0 45px 7px 45px;
  background-color:white;
}

div.anythingSlider .anythingWindow {
  overflow:hidden;
  position:relative;
  width:100%;
  height:100%;
}

.anythingBase {
  background:transparent;
  list-style:none !important;
  position:absolute;
  overflow:visible !important;
  top:0;
  left:0;
  margin:0 0 0 0;
  padding:0 0 0 0;
}

.anythingBase .panel {
  background:transparent;
  display:block;
  overflow:hidden;
  float:left;
  padding:0;
  margin:0;
  position:relative;
}

.anythingBase .panel.vertical {
  float:none;
}

div.anythingSlider .arrow {
  top:48%;
  position:absolute;
  display:block;
}

div.anythingSlider .arrow a {
  display:block;
  height:140px;
  margin:-70px 0 0 0;
  width:45px;
  text-align:center;
  outline:0;
  background:transparent url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png') no-repeat;
}

div.anythingSlider .arrow a span {display:block;text-indent:-9999px;}

div.anythingSlider .back             {left:0;}
div.anythingSlider .back a           {background-position:left top;}
div.anythingSlider .back a:hover,
div.anythingSlider .back a.hover     {background-position:left -140px;}
div.anythingSlider .back.disabled    {display:none;}

div.anythingSlider .forward          {right:0;}
div.anythingSlider .forward a        {background-position:right top;}
div.anythingSlider .forward a:hover,
div.anythingSlider .forward a.hover  {background-position:right -140px;}
div.anythingSlider .forward.disabled {display:none;}


div.anythingSlider .anythingControls {outline:0;display:none;}

div.anythingSlider .anythingControls ul {
  margin:-4px 0px 0px 0px;
  padding:0;
  position:absolute;
  top:100%;
  left:45px;
}

div.anythingSlider .anythingControls ul li {
  display:inline;
  list-style:none;
  margin:0 0 0 0;
  padding:0 0 0 0;
  border:none;
}

div.anythingSlider .anythingControls ul a {
  width:30px;
  font:normal 10px Georgia,Serif;
  display:inline-block;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(255,255,255,0.2);
  padding:3px 0px 4px;
  margin:0px 2px 0px 0px;
  text-align:center;
  color:#222;
  outline:0;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  background-color:#7C9127;
  -webkit-border-radius:0px 0px 5px 5px;
  -moz-border-radius:0px 0px 5px 5px;
  border-radius:0px 0px 5px 5px;
}

div.anythingSlider .anythingControls ul a:hover {
  background-color:#677621;
}

div.anythingSlider .anythingControls .anythingNavWindow {overflow:hidden;float:left;}

/* Orientasi Right to Left - Biasanya untuk tema Arab */
div.anythingSlider.rtl .anythingControls ul a {float:right;}
div.anythingSlider.rtl .anythingControls ul {float:left;}
div.anythingSlider.rtl .anythingWindow {
  direction:ltr;
  unicode-bidi:bidi-override;
}

div.anythingSlider .start-stop {
  font:normal 10px Georgia,Serif;
  background-color:#3B740F;
  background-image:url('http://4.bp.blogspot.com/-EWKg7vqmSzo/T0xn-3WMxLI/AAAAAAAACOk/BwxTXwA53M8/s1600/default.png');
  background-position:center -288px;
  padding:3px 5px;
  width:60px;
  text-align:center;
  text-decoration:none;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
  color:white;
  float:right;
  z-index:100;
  outline:0;
  -webkit-border-radius:0 0 5px 5px;
  -moz-border-radius:0 0 5px 5px;
  border-radius:0 0 5px 5px;
}

div.anythingSlider .start-stop.playing {
  background-color:#800;
}

div.anythingSlider,
div.anythingSlider .anythingWindow,
div.anythingSlider .anythingControls ul a,
div.anythingSlider .arrow a,
div.anythingSlider .start-stop {
  -webkit-transition-duration:0;
  -moz-transition-duration:0;
  -ms-transition-duration:0;
  -o-transition-duration:0;
  transition-duration:0;
}

div.anythingSlider .container {
  font:normal 11px Arial,Sans-Serif;
  font-style:italic;
  color:#666;
  margin:10px 15px;
  padding:0 0;
  border:none;
}

div.anythingSlider h2, div.anythingSlider h2 a {
  margin:0px 0px;
  padding:0px 0px;
  font:bold italic 16px Georgia,Serif;
  color:#666;
  text-decoration:none;
}

div.anythingSlider h2 {margin-bottom:10px;}

div.anythingSlider .container img {
  display:block;
  width:47% !important;
  height:auto !important;
  float:right;
  margin:0px 0px 5px 10px;
  border:1px solid #dcdcdc;
  background-color:#fafafa;
  padding:4px;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

div.anythingSlider .container span {
  display:block !important;
  margin-top:10px;
  border-top:1px dotted #ccc;
  padding:10px 0px 0px;
  font:bold 12px Georgia,Serif;
  color:green;
  overflow:hidden;
}

div.anythingSlider .container span a {
  float:right;
  background-color:#768927;
  font:bold italic 11px Arial,Sans-Serif;
  color:white;
  text-decoration:none;
  padding:2px 7px 3px;
  border:2px solid #eee;
  -webkit-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:inset 0px 1px 2px rgba(0,0,0,0.4);
  -webkit-border-radius:15px;
  -moz-border-radius:15px;
  border-radius:15px;
}

div.anythingSlider .container span a:hover {
  background-color:#626415;
}

.clear {clear:both;}

/*
=======================================================================
    End AnythingSlider Horray!
=======================================================================
*/

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript' src='http://reader-download.googlecode.com/svn/trunk/jquery.anythingslider.min.js'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "swing",

            buildArrows     : true,
            buildNavigation : true,
            buildStartStop  : true,

            toggleArrows    : false,
            toggleControls  : false,

            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,

            startPanel      : 1,
            hashTags        : true,
            infiniteSlides  : true,

            autoPlay        : false,
            pauseOnHover    : true,
            stopAtEnd       : false,
            playRtl         : false,

            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>
</script>

<div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='2' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='Life is Be U to Full (Header)' type='Header'/>
    </b:section>
</div>

<script type="text/javascript">
//<![CDATA[
var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 12,
    numchars_g      = 600,
    rmore           = "Selengkapnya",
    home_page       = "http://latitudu.blogspot.com/";
//]]>
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/autoContent4anythingSlider.js"></script>

    <div id='wrap-main'>
      <div class='helvetica' id='main'>
        <b:section class='left-09col' id='primary' role='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
<b:widget id='Feed1' locked='false' title='Blogger Templates' type='Feed'/>
</b:section>
...
...

Konfigurasi Slideshow - JSON & AnythingSlider

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

Contoh Penerapan Slideshow Orientasi Vertikal

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : true,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true,
            autoPlay        : false,
            pauseOnHover    : true,
            playRtl         : false,
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Contoh Penerapan Efek Animasi dengan Easing

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            easing          : "easeInOutBack",
            startText       : "Mulai",
            stopText        : "Berhenti",
            delay           : 3000,
            animationTime   : 600
        });

    });
//]]>

Autohide Navigasi

//<![CDATA[
    $(function() {

        $('#any-slider').anythingSlider({
            resizeContents  : false,
            expand          : false,
            vertical        : false,
            easing          : "easeInOutExpo",
            toggleArrows    : true,
            toggleControls  : false,
            startText       : "Mulai",
            stopText        : "Berhenti",
            enableKeyboard  : true
        });

    });
//]]>

toggleArrows : true,
toggleControls : true

var showPostDate_g  = true,
    showComm_g      = true,
    slideOpenNewTab = true,
    idMode          = false,
    slidebyLabels   = true,
    slideLabelName  = "Mengenai",
    pBlank          = "blank.jpg",
    text            = "Komentar",
    numposts_g      = 12,
    numchars_g      = 600,
    rmore           = "Selengkapnya",
    home_page       = "http://yourblog.blogspot.com/";

function showgal(z) {

    document.write('<ul id="any-slider">');

    var imgr = 0,
        j = 0,
        img = new Array();
    for (var o = 0; o < numposts_g; o++) {
        var w = z.feed.entry[o];
        var g = w.title.$t;
        var f;
        var p;
        if (o == z.feed.entry.length) {
            break
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "alternate") {
                p = w.link[l].href;
                break
            }
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "replies" && w.link[l].type == "text/html") {
                f = w.link[l].title.split(" ")[0];
                break
            }
        }
        if ("content" in w) {
            var r = w.content.$t
        } else {
            if ("summary" in w) {
                var r = w.summary.$t
            } else {
                var r = ""
            }
        }

        postdate = w.published.$t;
        if (j > imgr.length - 1) {
            j = 0
        }
        img[o] = imgr[j];
        s = r;
        a = s.indexOf('<img');
        b = s.indexOf('src="', a);
        c = s.indexOf('"', b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            img[o] = d
        } else {
            img[o] = pBlank
        }

        var re = /<\S[^>]*>/g;
        r = r.replace(re, "");
        if (r.length > numchars_g) {
            r = r.substring(0, numchars_g) + '...';
        }

        var cmtext = (showComm_g) ? f + ' ' + text : '';
        var q = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (idMode) {
            var x = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"];
        } else {
            var x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        }
        var u = postdate.split("-")[2].substring(0, 2);
        var h = postdate.split("-")[1];
        var t = postdate.split("-")[0];
        for (var e = 0; e < q.length; e++) {
            if (parseInt(h) == q[e]) {
                h = x[e];
                break
            }
        }
        var n = (showPostDate_g) ? u + ' ' + h + ' ' + t + ' - ' : '';
        if (slideOpenNewTab) {
            document.write('<li><div class="container"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '" target="_blank">' + rmore + '</a></span></div></li>');
        } else {
            document.write('<li><div class="container"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><h2><a href="' + p + '" class="recent-link">' + g + '</a></h2>' + r + '<div class="clear"></div><span>' + n + cmtext + '<a href="' + p + '">' + rmore + '</a></span></div></li>');
        }
        j++
    }

    document.write('</ul>');
}

if (slidebyLabels) {
    document.write('<script src="' + home_page + 'feeds/posts/default/-/' + slideLabelName + '?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
} else {
    document.write('<script src="' + home_page + 'feeds/posts/default?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
}

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 28, 2012 0 comments

Tahap 1: Mengedit Template

/*
 * Slides, A Slideshow Plugin for jQuery
 * Intructions: http://slidesjs.com
 * By: Nathan Searles, http://nathansearles.com
 * Version: 1.1.9
 * Updated: September 5th, 2011
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
*/

#slides-outer {
  width:570px;
  height:270px;
  position:relative;
  margin:30px auto 0px;
  background-color:#efefef;
}

/* Netralisasi gambar */
#slides-outer img {
  margin:0px 0px;
  padding:0px 0px !important;
  background:transparent !important;
  border:none !important;
  outline:none !important;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}
#ribbon,
#frame,
#slides .next,
#slides .prev {opacity:1 !important;}
/* Stop di sini */

#ribbon {
  position:absolute;
  top:-3px;
  left:-15px;
  z-index:500;
}

#frame {
  position:absolute;
  z-index:0;
  width:739px;
  height:341px;
  top:-3px;
  left:-80px;
}

#slides {
  position:absolute;
  top:15px;
  left:4px;
  z-index:100;
  font:normal 12px Arial,Sans-Serif;
}

.slides_container {
  width:570px;
  overflow:hidden;
  position:relative;
  display:none;
}

.slides_container div.slide, .slides_container div.slide img {
  width:570px;
  height:270px;
  display:block;
  overflow:hidden;
}

.slides_container div.slide img {height:auto !important;}

#slides .next,
#slides .prev {
  position:absolute;
  top:107px;
  left:-39px;
  width:24px;
  height:43px;
  display:block;
  z-index:101;
}

#slides .next {
  left:585px;
}

.pagination {
  margin:26px auto 0;
  padding:0px 0px;
  width:auto;
  text-align:center;
}

.pagination li {
  display:inline-block;
  *display:inline;
  margin:0px 1px;
  padding:0px 0px;
  list-style:none;
}

.pagination li a {
  display:block;
  width:12px;
  height:0px;
  padding-top:12px;
  background-image:url('http://1.bp.blogspot.com/-kBxWiSmnR0U/T0pmXN_FqHI/AAAAAAAACOE/HgB4YfcCvgE/s1600/pagination.png');
  background-position:0 0;
  overflow:hidden;
}

.pagination li.current a {
  background-position:0 -12px;
}

#slides .caption {
  z-index:500;
  position:absolute;
  bottom:-35px;
  left:0;
  height:30px;
  padding:5px 20px 0 20px;
  background-color:#000;
  background-color:rgba(0,0,0,0.5);
  width:540px;
  font:normal 13px Helvetica,Arial,sans-serif;
  color:white;
  border-top:1px solid #000;
  text-shadow:none;
}

#slides .caption a {
text-decoration:none;
color:white;
}
#slides .caption a:hover {
text-decoration:underline;
}

/* End SLIDES */

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/svn/trunk/slides.min.jquery.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $(function() {
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            slideSpeed         : 350,
            slideEasing        : '',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>
</script>

Tahap 2: Meletakkan Slideshow

<script type="text/javascript">
var showPostDate_g  = false,
    showComm_g      = false,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 4,
    home_page       = "http://latitudu.blogspot.com/";
</script>
<div id="slides-outer">
    <img src="http://4.bp.blogspot.com/-NYp6Cx-vy6A/T0plh0PkkdI/AAAAAAAACNs/NFkZdqeP8hY/s1600/example-frame.png" width="739" height="341" alt="Example Frame" id="frame" />
    <img src="http://4.bp.blogspot.com/-T1K0fQGXHn8/T0pmUCTEjEI/AAAAAAAACN8/zJ1CEvvEzLo/s1600/new-ribbon.png" width="112" height="112" alt="New Ribbon" id="ribbon" />
    <div id="slides">
        <script src="http://reader-download.googlecode.com/svn/trunk/autoContent4SLIDES.js" type="text/javascript"></script>
        <a href="#" class="prev">
            <img src="http://4.bp.blogspot.com/-YBh6RVIP6rM/T0plXL_Z94I/AAAAAAAACNc/JYe-5VPD4Bs/s1600/arrow-prev.png" width="24" height="43" alt="Arrow Prev">
        </a>
        <a href="#" class="next">
            <img src="http://2.bp.blogspot.com/-bJqPep9dJZU/T0plVM2OuBI/AAAAAAAACNU/at-rT9KkcYw/s1600/arrow-next.png" width="24" height="43" alt="Arrow Next">
        </a>
    </div>
</div>

Konfigurasi Slideshow

Pengaturan JSON - Auto Content Slider

Pengaturan Plugin

Contoh Penerapan Efek Fade

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'fade',
            fadeSpeed          : 350,
            fadeEasing         : '',
            crossfade          : true,
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

Contoh Penerapan Easing

//<![CDATA[
    $(function(){
        $('#slides').slides({
            generatePagination : true,
            preload            : true,
            preloadImage       : 'http://reader-download.googlecode.com/svn/trunk/images/slides-loader.gif',
            play               : 5000,
            pause              : 2500,
            hoverPause         : true,
            effect             : 'slide',
            slideSpeed         : 700,
            slideEasing        : 'easeInOutBack',
            // Kustomisasi fungsi untuk menyisipkan caption
            animationStart: function(current) {
                $('div.caption').animate({bottom:-35}, 100);
            },
            animationComplete: function(current) {
                $('div.caption').animate({bottom:0}, 200);
            },
            slidesLoaded: function() {
                $('div.caption').animate({bottom:0}, 200);
            }
        });
    });
//]]>

var showPostDate_g = true,
    showComm_g = true,
    slideOpenNewTab = false,
    idMode = true,
    slidebyLabels = true,
    slideLabelName = "Mengenai",
    pBlank = "blank.jpg",
    text = "Komentar",
    numposts_g = 4,
    home_page = "http://yourblog.blogspot.com/";

function showgal(z) {
    var imgr = 0,
        j = 0,
        img = new Array();
    for (var o = 0; o < numposts_g; o++) {
        var w = z.feed.entry[o];
        var g = w.title.$t;
        var f;
        var p;
        if (o == z.feed.entry.length) {
            break
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "alternate") {
                p = w.link[l].href;
                break
            }
        }
        for (var l = 0; l < w.link.length; l++) {
            if (w.link[l].rel == "replies" && w.link[l].type == "text/html") {
                f = w.link[l].title.split(" ")[0];
                break
            }
        }
        if ("content" in w) {
            var r = w.content.$t
        } else {
            if ("summary" in w) {
                var r = w.summary.$t
            } else {
                var r = ""
            }
        }
        postdate = w.published.$t;
        if (j > imgr.length - 1) {
            j = 0
        }
        img[o] = imgr[j];
        s = r;
        a = s.indexOf('<img');
        b = s.indexOf('src="', a);
        c = s.indexOf('"', b + 5);
        d = s.substr(b + 5, c - b - 5);
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
            img[o] = d
        } else {
            img[o] = pBlank
        }
        var cmtext = (showComm_g) ? f + ' ' + text : '';
        var q = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        if (idMode) {
            var x = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Agt", "Sep", "Okt", "Nov", "Des"];
        } else {
            var x = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
        }
        var u = postdate.split("-")[2].substring(0, 2);
        var h = postdate.split("-")[1];
        var t = postdate.split("-")[0];
        for (var e = 0; e < q.length; e++) {
            if (parseInt(h) == q[e]) {
                h = x[e];
                break
            }
        }
        var n = (showPostDate_g) ? ' - ' + u + ' ' + h + ' ' + t + ' - ' : '';
        if (slideOpenNewTab) {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '" target="_blank"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link" target="_blank">' + g + '</a>' + n + cmtext + '</div></div></div>');
        } else {
            document.write('<div class="slides_container"><div class="slide"><a href="' + p + '"><img src="' + img[o] + '" alt="" class="recent-thumb"/></a><div class="caption" style="bottom:0px;"><a href="' + p + '" class="recent-link">' + g + '</a>' + n + cmtext + '</div></div></div>');
        }
        j++
    }
}

if (slidebyLabels) {
    document.write('<script src="' + home_page + 'feeds/posts/default/-/' + slideLabelName + '?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
} else {
    document.write('<script src="' + home_page + 'feeds/posts/default?max-results=' + numposts_g + '&orderby=published&alt=json-in-script&callback=showgal"><\/script>');
}

Label: Gambar, JQuery, Slideshow, Tingkat Lanjut, Widget

# posted by Taufik Nurrohman @ Februari 26, 2012 0 comments

S3Slider, sebuah slideshow sederhana namun selalu memiliki kesan tegas dan kuat bagi Saya. Itulah yang dulu membuat Saya memilih ini sebagai slideshow pertama yang Saya terapkan di blog ini. Sampai pada akhirnya Saya memutuskan berpindah ke Nivo.

Kali ini Saya akan mengintegrasikan S3Slider dengan JSON Blogger untuk memuat setiap slide secara otomatis berdasarkan artikel/posting terbaru yang diterbitkan:

Mengedit Template

Untuk membuatnya, pertama-tama masuklah ke menu Template kemudian klik Edit HTML dan klik Lanjutkan:

Temukan kode ini:

]]></b:skin>

Salin kode di bawah ini, kemudian letakkan di atasnya:

#slider,
#sliderContent,
#slider img {
  width:420px; /* Tentukan lebar slideshow */
  height:270px; /* Tentukan tinggi slideshow */
}

#slider {
  margin:0 auto 10px;
  border:2px solid white;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/nivo-loading.gif') no-repeat 50% 50%;
  position:relative;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4),0 7px 10px -3px rgba(0,0,0,.4);
  overflow:hidden;
}

#sliderContent {
  position:absolute;
  top:0;
  left:0;
  margin:0 0;
  padding:0 0;
  overflow:hidden;
}

#slider img {
  border:none;
  padding:0 0;
  margin:0 0;
  width:100%;
  height:auto;
  outline:none;
}

.sliderImage {
  list-style:none;
  margin:0 0;
  padding:0 0;
  width:100%;
  display:none;
}

.sliderImage span {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:auto;
  font:normal 11px Arial,Sans-Serif;
  color:white;
  background-color:black;
  opacity:.8;
  filter:alpha(opacity=80);
  padding:7px 10px 12px;
  display:none;
}

.sliderImage span a {
  font-size:12px;
  font-weight:bold;
  color:white;
  text-decoration:none;
}

Kemudian temukan kode ini:

</head>

Salin kode di bawah ini kemudian letakkan di atasnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<script src='http://reader-download.googlecode.com/svn/trunk/s3Slider.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(window).bind('load', function() {
    $('#slider').css('background-image', 'none').s3Slider({
        timeOut:3000
    });
});
//]]>
</script>

Klik Simpan Template.

#slider,
#sliderContent,
#slider img {
  width:420px;  /* Tentukan lebar slideshow  */
  height:270px; /* Tentukan tinggi slideshow */
}

Meletakkan Slideshow

Masuklah ke menu Tata Letak kemudian tambahkan sebuah elemen halaman HTML/JavaScript yang terletak di bagian atas posting. Karena di situlah letak ideal untuk menampilkan slideshow:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script type="text/javascript">
var showPostDate_g  = true,
    slideOpenNewTab = false,
    idMode          = true,
    slidebyLabels   = false,
    slideLabelName  = "Mengenai",
	thumbWidth      = 420,
    pBlank          = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    text            = "Komentar",
    numposts_g      = 10,
    home_page       = "http://nama_blog.blogspot.com/";
</script>
<script src="http://reader-download.googlecode.com/svn/trunk/autoContent4s3Slider.js" type="text/javascript"></script>

Ganti URL http://nama_blog.blogspot.com/ dengan alamat blog Anda lalu simpan.

Pengaturan

Karena ini adalah slideshow yang sederhana, opsi pengaturan tidak perlu terlalu banyak:

Klik Simpan Perubahan dan lihat hasilnya.

Label: Gambar, JQuery, Slideshow, Widget

# posted by Taufik Nurrohman @ Februari 26, 2012 0 comments

Widget yang tampak berwarna hijau di atas adalah widget recent post/posting terbaru dengan begitu banyak pilihan. Anda bisa menyembunyikan gambar, komentar, bulan terbit dan ringkasan atau sebaliknya, menampilkannya. Menentukan apakah widget ini akan dianimasikan atau tidak juga bisa dilakukan. Cukup ikuti langkah-langkah di bawah ini dan pelajari tabel konfigurasinya:

Pertama-tama masuklah ke halaman tata letak dengan mengeklik menu Tata Letak:

Tambahkan sebuah elemen halaman HTML/JavaScript, kemudian salin semua kode ini dan letakkan di dalam formulirnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style type="text/css" scoped="scoped">
.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.4);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.4);
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  margin:0 auto;
}

.spy-outer h2 {
  margin:0 0;
  padding:5px 10px;
  background-color:#008800;
  background-image:-webkit-linear-gradient(top,#008800,#037103);
  background-image:-moz-linear-gradient(top,#008800,#037103);
  background-image:-ms-linear-gradient(top,#008800,#037103);
  background-image:-o-linear-gradient(top,#008800,#037103);
  background-image:linear-gradient(top,#008800,#037103);
  color:white;
  font:normal bold 12px Arial,Sans-Serif;
  text-transform:none;
  text-shadow:0 1px 2px black;
}

ul.spy {
  margin:0 0;
  padding:0 0;
  font:normal normal 10px/12px Arial,Sans-Serif;
  color:#333;
  overflow:hidden;
}

ul.spy li {
  list-style:none;
  text-align:left;
  margin:0 0;
  padding:5px 7px;
  background-color:#AABD30;
  background-image:-webkit-linear-gradient(top,#AABD30,#9BB009);
  background-image:-moz-linear-gradient(top,#AABD30,#9BB009);
  background-image:-ms-linear-gradient(top,#AABD30,#9BB009);
  background-image:-o-linear-gradient(top,#AABD30,#9BB009);
  background-image:linear-gradient(top,#AABD30,#9BB009);
  border-top:1px solid #A7D101;
  border-bottom:1px solid #899D00;
  word-wrap:break-word;
  overflow:hidden;
}

ul.spy a {text-decoration:none}

ul.spy li em {
  font-weight:bold;
  color:#409540;
}

ul.spy a.header {
  font:normal bold 12px/14px 'Trebuchet MS',Trebuchet,Geneva,Arial,Sans-Serif;
  display:block;
  color:yellow;
  text-shadow:0 1px 0 rgba(0,0,0,.2);
}

ul.spy a.header:hover {
  color:white;
  text-decoration:underline;
}

ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}

ul.spy li .imgwrap,
ul.spy li img {
  float:right;
  margin:0 0 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #899D00;
  background:white url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0 0;
}

ul.spy li .imgwrap {
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.7);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.7);
  box-shadow:0 0 2px rgba(0,0,0,.7);
}

ul.spy li img {
  border:none !important;
  float:none;
  margin:0 0;
  padding:0 0;
  display:none;
}
</style>
<script type='text/javascript'>
var spyTitle           = "Artikel Terbaru",
    numposts           = 7,
    numchars           = 127,
    komentar           = "Komentar",
    pBlank             = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s72-c/images.jpeg",
    modeID             = true,
    showSummaries      = true,
    openNewTab         = false,
    showPostDate       = true,
    showComment        = true,
    showThumbnails     = true,
    animatedRecentPost = true,
    limitspy           = 4,
    intervalspy        = 4000,
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/rp-spy-whatever-v1.js"></script>
<script src="http://nama_blog.blogspot.com/feeds/posts/summary?orderby=published&alt=json-in-script&callback=rp"></script>

Ganti URL http://nama_blog.blogspot.com dengan alamat blog Anda lalu simpan.

Pilihan

Label: JQuery, Posting, Widget

# posted by Taufik Nurrohman @ Februari 24, 2012 0 comments

Kali ini Saya akan memeprkenalkan widget daftar isi akordion berdasarkan label setelah sebelumnya Saya pernah menuliskan tentang widget daftar isi akordion berdasarkan bulan terbit:

Buat widget daftar isi ini dengan mengikuti langkah-langkah berikut:

Pertama-tama klik menu Laman pada sidebar. Kemudian, pada menu Laman Baru pilihlah Laman Kosong:

Setelah itu Anda akan melihat formulir halaman statis seperti ini. Klik mode HTML:

Salin kode di bawah ini kemudian letakkan di dalam formulirnya:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" media="screen" href="http://reader-download.googlecode.com/svn/trunk/acc-toc-labelsort-default.css" type="text/css" />
<script type="text/javascript">
var showNew    = true,
    accToc     = true,
    openNewTab = true, 
    maxNew     = 10,
    baru       = "Baru!",
    sDownSpeed = 600,
    sUpSpeed   = 600;
</script>
<script type="text/javascript" src="http://reader-download.googlecode.com/svn/trunk/hompishive-labels-v1.js"></script>
<script src="http://latitudu.blogspot.com/feeds/posts/summary?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Ganti URL http://latitudu.blogspot.com dengan alamat blog Anda, lalu Simpan dan Terbitkan.

Lebih Banyak Pilihan

Label: Posting, Widget

# posted by Taufik Nurrohman @ Februari 23, 2012 0 comments