Cara Membuat Social Share Button Warna Warni

Cara Membuat Social Share Button Warna Warni - Social Share Button atau yang sering kita kenal dengan tombol untuk berbagi adalah widget yang bertujuan untuk memudahkan pengunjung dalam merefrensikan maupun merekomendasikan konten-konten bermanfaat di blog kita, dengan hanya satu klik saja mereka (pengunjung) sudah dapat membagikan artikel tersebut secara otomatis tanpa harus repot-repot lagi meng-copy permalink dari artikel di blog kita.



Sebenarnya jika kita sering berkunjung ke blog rekan-rekan blogger, tentunya banyak sekali variasi dan modifikasi yang mereka lakukan guna mempercantik tombol sharing mereka, seperti yang sudah saya bahas juga sebelumnya tentang membuat tombol sharing di bawah postingan dengan icon, namun pada kesempatan kali ini saya akan sedikit membahas tentang sharing button yang saat ini saya gunakan, widget tersebut di refrensikan oleh teman saya kompi ajaib dan dibuat oleh mas sugeng, tetapi ada beberapa script yang saya tambahkan agar lebih lengkap.

Tak jauh berbeda dengan tombol share icon yang sebelumnya pernah saya publikasikan, sekarang ini saya akan sedikit meringkas kode dari css dasarnya agar dapat berjalan walaupun tidak menggunakan javascript, atau script yang sudah di modified, pasalnya penggunaan javascript yang terlalu banyak juga akan berpengaruh pada loading blog yang akhirnya akan berdampak pula pada rating dan seo blog kita.

Secara kasat mata, widget share button ini juga tidak kalah kok bagusnya dengan widget original dari developer social media yang belum di modifikasi. Selain itu, kita juga dapat menyesuaikan warna latar belakang dari tombolnya agar lebih kontras dengan warna tema blog kita, atau kita juga bisa memberikan warna tombol sesuai dengan social medianya, misalnya Facebook warna biru, Google+ warna merah, dan Twitter warna biru muda.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML

4. Klik tanda panah hitam disebelah ]]></b:skin> (antarmuka Edit HTML yang baru), lalu akan muncul semua kode css-nya.

5. Cari kode <data:post.body/> (gunakan CTRL+F), jika anda sudah memasang read more otomatis di blog, maka pilihlah <data:post.body/> yang ke-2 atau sesuaikan dengan kode yang menunjukkan letak dari konten atau tempat artikel anda berada.

6. Letakkan kode di bawah ini tepat dibawah-nya (dibawah artikel) atau di atas-nya (diatas artikel).

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='border-top:3px dotted #ccc;border-bottom:1px solid #b8b8b8;width:100%;height:25px;text-align:left;font:normal 11px Arial;color:#333;margin:10px 0;padding:10px 0 5px'>
<div style='float:left;padding:1px 0;margin-right:15px;font:bold 13px Arial;color:#777'>
<strong>Share this article</strong> :
</div>
<a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' style='color: #fff; background: #3b5998; text-decoration: none; border: 1px solid #313c7d; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Facebook'>Share on FB</a>
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url' style='color: #fff; background: #808080; text-decoration: none; border: 1px solid #000000; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Submit to Digg'>Submit to Digg</a>
<a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='color: #fff; background: #4099FF; text-decoration: none; border: 1px solid #3a8be8; padding: 3px; border-radius: 3px; font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Twitter'>Tweet</a>
<a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='color: #fff; background: #c0361a; text-decoration: none; border: 1px solid #9c2c15; padding: 3px; border-radius: 3px;font-family: arial, verdana, sans-serif; font-size: 13px; line-height: 20px;' target='_blank' title='Share to Google+'>Share on G+</a>
</div></b:if>

Keterangan: (kode warna : disini)

• 3b5998 = kode warna HTML background tombol facebook
• 313c7d = kode warna HTML border tombol facebook
• 808080 = kode warna HTML background tombol digg
• 000000 = kode warna HTML border tombol digg
• 4099FF = kode warna HTML background tombol twitter
• 3a8be8 = kode warna HTML border tombol twitter
• c0361a = kode warna HTML background tombol google+
• 9c2c15 = kode warna HTML border tombol google+

7. Klik "Save Template", dan selesai,

Demikian informasi seputar tutorial blog tentang cara membuat social share button warna warni, semoga bermanfaat, dan selamat mencoba. Adorable Choice, Good Result...

Cara Membuat Efek Shadow pada Outer/Tepi Blog

Cara Membuat Efek Shadow pada Outer/Tepi Blog - Mungkin outer atau yang disebut dengan tepi blog sudah seringkali kita lihat pada blog-blog rekan seperjuangan, banyak sekali variasi-variasi dari yang mereka gunakana, ada yang menggunakan border, ada juga yang menerapkan background outer blog berbeda dengan background blog, atau seperti blog saya ini yang menggunakan efek shadow. Efek shadow adalah efek yang akan meberi bayangan pada outer atau tepi blog tanpa diberi border maupun garis tepi blog. Sebenarnya penggunaan feature ini tak lain dan tak bukan hanyalah untuk membatasi antara luar dan dalam outer blog dan mungkin juga dapat mempercantik blog kita dalam faktor berpenampilan.

Bisa kita lihat pada gambar diatas, atau bisa juga langsung lihat ke outer atau tepi blog ini, itu adalah contoh dari efek shadow atau bayangan yang akan kita buat nanti, saya sarankan untuk pemasangan box shadow ini anda jangan memberikan border pada garis tepinya, karena diberikan shadow saja sudah cukup dan tampak lebih bagus. Disini anda dapat memperlebar efek shadow atau glownya sesuka hati anda, misalnya blog ini menggunakan padding 10 px, mungkin saja jika anda menginginkan bayangan yang lebih jauh lagi, anda bisa menambahkanya menjadi 15 bahkan 20px, tinggal disesuaikan dengan kebutuhan dan keperluan blog kita. Oh iya sobat satu lagi, saya sarankan untuk blog anda yang bertema terang lebih baik gunakanlah shadow #ffffff atau warna putih untuk hasil yang nampak bagus dan clean.

Selain itu, ternyata pemasangan feature ini juga sangat mudah dan praktis sekali, anda hanya perlu menambahkan beberapa kode script pada Edit HTML, tanpa menggunakan JavaScript. Well, bagi anda yang berminat untuk memasang efek shadow di blog anda, silahkan disimak yang berikut ini.

1. Login ke Blogger.

2. Pilih Template.

3. Klik Cadangkan/Pulihkan.

4. Klik Unduh Template Lengkap.

5. Setelah templatenya terunduh, klik kanan pada file tersebut, pilih "Open With" lalu buka dengan wordpad/notepad.

6. Cari salah satu kode di bawah ini (gunakan CTRL+F), karena pada umumnya kode setiap template sedikit berbeda.

content-outer

atau

content-wrapper

atau

wrap

atau

outer-wrapper 

Keterangan: jika semua kode diatas tidak ada, carilah kode yang menunjukan outer wrapper atau tepi pada blog anda.

7. Lalu, letakkan kode di bawah ini tepat dibawah salah satu kode pada langkah ke-6 tadi.

border:2px solid #0000ff;
border-color:#9ecaed;
box-shadow:0 0 10px #666}

Keterangan:

• 2px = ketebalan border outer (jika tidak perlu, berikan saja 0px)
• #0000ff = warna border outer
• 10px = ketebalan efek shadow outer blog
• #666 = warna shadow outer blog

Demikian informasi tentang cara membuat efek shadow pada outer/tepi blog, baca juga artikel lainya seputar tutorial blog tentang cara membuat bismillah pada postingan blog, semoga bermanfaat, dan selamat mencoba. Smart Choice, Right Way...

Cara Membuat Bismillah pada Postingan Blog

Cara Membuat Bismillah pada Postingan Blog - Bagi anda blogger yang beragama muslim, tentunya widget ini sangat wajib untuk berada di blog anda, karena selain dapat menampilkan simbol keindahan Agama Islam, widget atau hand writing ini juga dapat memberikan pesan dan kesan kepada pengunjung agar selalu mengingat dan beribadah kepada Allah SWT. Jika blog anda bertemakan konten-konten islami seperti RBT islam, hadis-hadis nabi, dan ayat-ayat Al-quran, sudah sepatutnya anda menerapkan kaligrafi bismillah yang cantik ini di blog anda, entah itu di atas postingan, di header, di sidebar, maupun di akhir postingan.

Sebelumnya saya juga sempat membahas tentang cara membuat widget hanya tampil pada homepage, kenapa saya refrensikan artikel ini? karena mungkin saja anda tidak tertarik untuk memasang kaligrafi Bismillah ini pada postingan, melainkan pada halaman awal atau yang sering di sebut homepage. Tanpa panjang lebar lagi, kita akan segera masuk ke inti dari pada pembahasan kita kali ini, silahkan disimak baik-baik ya.

Cara ini menyesuaikan dengan tampilan Edit HTML baru Blogger

1. Login ke Blogger.

2. Pilih Template.

3. Klik "Cadangkan/Pulihkan".

4. Klik "Unduh Template Lengkap".

5. Setelah template blog kita telah ter-download, klik kanan pada file tersebut (.xml), lalu klik "open with" dan pilih wordpad/notepad (salah satu saja).

6. Jika anda ingin meletakkanya diatas artikel atau diatas postingan, maka anda cari kode <data:post.body/> (gunakan CTRL+F), lalu anda akan menemukan beberapa kode seperti itu, jika anda sudah memasang read more otomatis, maka pilihlah kode <data:post.body/> yang kedua.

7. Letakkan kode di bawah ini tepat diatas-nya.

<b:if cond='data:blog.pageType == "item"'>
<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>
</b:if>

Keterangan: Kode diatas bisa anda letakkan dimana saja (tidak harus diatas <data:post.body/>), sesuaikan dengan minat dan kebutuhan anda. Cara diatas ini memakai cara otomatis, jadi nantinya akan selalu muncul pada setiap awal artikel, namun jika anda menginginkan agar lafaz Bismillah tidak selalu muncul dalam setiap postingan, maka anda bisa meletakkan kode di bawah ini sebelum anda menulis artikel (manual), tapi Ingat! taruhnya jangan di HTML, namun di Compose.

<div style='text-align: center;'><span style='font-size: medium;'><span class='messageBody' data-ft='{&quot;type&quot;:3}'><span dir='rtl'>ب&#1616;س&#1618;ــــــــــــــــم&#1616; اﷲ&#1616;الر&#1614;&#1617;ح&#1618;م&#1614;ن&#1616; اار&#1614;&#1617;ح&#1616;يم</span></span></span></div><br/>

8. Klik "Save".

9. Terakhir, Upload lagi filenya ke blogger.

Preview & Live Demo Kaligrafi Bismillah

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Demikian informasi seputar tutorial blog tentang cara membuat bismillah pada postingan blog, semoga bermanfaat, dan selamat mencoba. "Genius is 1% talent and 99% hard work" - Thomas Alfa Edison.

Cara Membuat Link Warna Warni di Blog

Cara Membuat Link Warna Warni di Blog - Link dengan warna-warni mungkin bisa jadi salah satu sarana bagi anda untuk mempercantik blog, selain variasi warnanya yang beragam, link dengan efek berkedip warna warni ini juga dapat menambah sisi kreativitas blog kita, karena kalau biasanya ketika kita mengarahkan kursor mouse ke link yang muncul hanyalah tulisan yang berubah warna, namun kini kita bisa sedikit mengkreasikanya agar terlihat lebih akrab dengan para pengunjung.

Sebelumnya juga kita telah membahas tentang membuat efek banjir di blog, tidak jauh berbeda dengan postingan kali ini, yaitu cara membuat efek banjir yang menenggelamkan blog dengan javascript. Selain keuntungan menarik yang sudah saya paparkan tadi diatas, membuat link warna warni seperti ini juga tidak terlalu menambah berat loading blog, jadi rekan-rekan blogger tidak usah khawatir akan javascript yang "sepertinya" akan menambah beban loading, namun saya sarankan juga untuk tidak memakai terlalu banyak efek dengan javascript, karena sesuatu yang berlebihan itu tidak baik, hehe.

Dapat dilihat pada gambar diatas, itu adalah contoh dari screenshot yang saya ambil dari recent post blog ini, jadi nantinya setiap ada cursor mouse yang didekatkan ke link, maka link akan berubah dengan memunculkan efek warna-warni berkedip secara bergantian. Selain itu, cara memasang widget ini juga sangat praktis, anda tidak perlu repot-repot meng-edit kode HTML, namun anda hanya membutuhkan add gadget pada Tata Letak (layout). Well, bagi anda yang berminat dengan efek ini, Check it Out!

1. Login ke Blogger

2. Pilih Tata Letak.

3. Klik Add Gadget.

4. Pilih HTML/JavaScript.

5. Letakkan kode di bawah ini ke dalam box "konten".

<script src='https://farhanshare-blogspot-com.googlecode.com/files/link%20warna%20warni.js'/></script>

6. Klik "save", dan selesai.

Demikian informasi seputar tutorial blog tentang cara membuat link warna warni di blog, semoga bermanfaat, dan selamat mencoba. Blogging Is Our Creativity...

Cara Membuat Slider Otomatis Gambar Vertikal

Cara Membuat Slider Otomatis Gambar Vertikal - Slider Feature atau yang sering kita pahami sebagai slideshow artikel adalah sebuah widget yang menampilkan thumbnail artikel secara slideshow dan di sertai dengan judul beserta sedikit deskripsi tentang artikel tersebut. jika kita lihat pada website-website portal berita seperti kompas.com dan antaranews.com, tentunya kita akan melihat slider artikel yang terletak pada homepage, karena selain untuk memberikan kesan minimalis dan simple, feature ini juga akan lebih "menonjolkan" sisi proffesionalitas pada blog kita, karena biasanya blog yang menggunakan slider pada homepage-nya adalah blog-blog yang rutin dan "rajin" update, seperti misalnya blog yang berisikan seputar berita aktual dan informasi terbaru.

Berbeda dengan slider yang ditampilkan oleh kompas.com dan antaranews.com, widget slider kali ini nantinya berbentuk vertikal atau memanjang, jadi widget ini akan lebih "cocok" jika diletakkan di sidebar blog anda, karena ukuranya tadi yang sudah saya terangkan yaitu memanjang, jadi lebih baik width atau lebarnya jangan ditambahkan terlalu banyak karena ini adalah slider vertikal, tapi semua keputusan itu ada di tangan anda, jika anda ingin memodifikasinya menjadi slider horizontal (seperti kompas.com) malah lebih baik (kreatif), tinggal disesuaikan dengan kebutuhan dan minat anda.

Bisa dilihat pada gambar diatas, gambar tersebut adalah contoh screenshot yang saya ambil dari salah satu blog kerabat saya maskolis yang mana pula slider ini adalah karya beliau, jika kita memperhatikan slider pada gambar diatas, rasanya widget ini sangat cocok sekali untuk berada di blog anda yang bertemakan minimalistic, tapi tergantung selera anda juga sih, hehe. Well, bagi anda yang berminat, Check itu Out!

1. Login ke Blogger.

2. Pilih Template.

3. Klik Edit HTML > Lanjutkan.

4. Centang box "Expand Template Widget".

5. Cari kode ]]></b:skin> (gunakan CTRL+F) lalu letakkan kode di berikut ini tepat diatasnya.

/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:450px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHW6cK-G3zJfLMKJsefFY-eZiGntR4sK3oTr5Gmr97U86dHUeHvv8lddqWRELoSn0fDbxtdxAgg47ZED5yW6H-pWYI0kM6PQwpREryH7GcVZVeHWn0fVEoala9Xf6v3d1ypH0Q_zpOvzI/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjanm0jL81lwe4WQ1Qou8rHqzdbbB3D6_hJ5-rbiF2Zbpkfyx9FVGnT7nxCXWw6LFzNGOXpQ8HP1wx1fxqBWcbCDrdcy3xtXWYgUgI6oZr4670oMDbOmKOl3p6kpSlr-2JG1LwbOqXLxjc/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMWGmALOVFRR3B7C0kop6wDBl-_pbO-C1M-Fn3uVGpHLhiGGpfW_KF2L6ODMVddEBc-WC0wlhrfn1MRYcUe4jEWKH2W46vcPFr7SMZb-a5Ei19CXGDjNwTO5JENFyK8D64JXCq7UX1n4n6/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Keterangan:

• Kode Merah : Lebar Slider artikel
• Kode Biru : Tinggi Slider artikel

6. Masih di Edit HTML, cari kode </head>, lalu letakkan kode berikut ini tepat diatasnya.

<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
 //Set Default State of each portfolio piece
 $(".paging").show();
 $(".paging a:first").addClass("active");
 //Get size of images, how many there are, then determin the size of the image reel.
 var imageWidth = $(".sompret").width();
 var imageSum = $(".image_reel img").size();
 var imageReelWidth = imageWidth * imageSum;

 //Adjust the image reel to its new size
 $(".image_reel").css({'width' : imageReelWidth});
 //Paging + Slider Function
 rotate = function(){
     var triggerID = $active.attr("rel") - 1; //Get number of times to slide
     var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

     $(".paging a").removeClass('active'); //Remove all active class
     $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
  $(".crott").stop(true,true).slideUp('slow');

  $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

     //Slider Animation
     $(".image_reel").animate({
         left: -image_reelPosition
     }, 500 );


 };
 //Rotation + Timing Event
 rotateSwitch = function(){
 $(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
     play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
         $active = $('.paging a.active').next();
         if ( $active.length === 0) { //If paging reaches the end...
             $active = $('.paging a:first'); //go back to first
         }
         rotate(); //Trigger the paging and slider function
     }, 10000); //Timer speed in milliseconds (3 seconds)

 };

 rotateSwitch(); //Run function on launch
 //On Click
    $(".paging a").click(function() {
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });
});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6cNOCKLHMfS2uAcJMp9wjUD23AxDtqviPizeABYMhQhoGUhiVOBvfaxJNUE_BVMiM_d1XrQZaJ5FC9cUJ-OQQ8D6_dmATPXmZMowNm_QNbxY9yXAIbXo1xJXGlAhqbPYMnm4wIECLZ0A/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;
function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}
function showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
 
   for (var i = 0; i < numposts1; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
   
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; 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[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = m+ ' ' + day + ' ' + y ;

 var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';  
  document.write(trtd);  
 
     j++;
 }

}
function showrecentposts2(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

   for (var i = 0; i < numposts1 ; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }

  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     }

     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
   
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; 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[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = day+ ' ' + m + ' ' + y ;

 var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
  document.write(trtd);  
 
     j++;
 }

}
 //]]>
</script>

Keterangan:

• Jika pada template anda sudah ada kode seperti yang bercetak tebal diatas, maka kode yang bercetak tebal diatas dihapus saja.

6. Terakhir, Cari kode <div id='sidebar-wrapper'>, lalu letakkan kode berikut ini tepat diatasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>      
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>

Keterangan:  

• Tampilan slider diatas ini hanya akan muncul pada halaman postingan atau artikel, bila anda menginginkanya untuk muncul pada homepage atau halaman awal, anda bisa menghapus kode yang berwarna biru pada kode diatas.

Untuk Live Demo dari slider yang barusan kita bahas, bisa anda lihat disini. Demikian tutorial blog tentang cara membuat slider otomatis gambar vertikal, semoga bermanfaat, dan selamat mencoba. Blogging Is My Addiction...