Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Cara Memasang Kode Anti Copy / Paste



Cara memasang kode anti copy / paste atau biasa di sebut copas. Sebaiknya saya sarankan tidak usah di pasang anti copas karena nantinya akan merugikan anda, visitor nantinya akan berkurang dan bisa di sebut juga anda seseorang yang pelit.

Kode anti copas ini masih bisa di rusak caranya mematikan java script, jika anda masih ingin tertarik memasang kode anti copas silakan baca caranya :

1. Copas kode berikut ini:

<!-- START disable copy paste --><!-- http://seo-oke.blogspot.com --><script src='demo-to-prevent-copy-paste-on-blogger_files/googleapis.js'></script><script type='text/javascript'> if(typeof document.onselectstart!="undefined" ) {document.onselectstart=new Function ("return false" ); } else{document.onmousedown=new Function ("return false" );document.onmouseup=new Function ("return false"); } </script><!-- End disable copy paste -->
2. Buka Dasboard anda > Pilih Tata Letak atau Layout.

3. Tambahlan Sidebar > Pilih HTML/Java Script.

4. Masukkan kode yang di atas tadi yang sudah anda copas.

5. Simpan.

KETERANGAN :
Gantilah kode warna merah dengan nama blog kalian.

Cara Membuat Tab View Widget Kategori Oke Banget



Langsung saja pada cara membuatnya :
  1. Pertama Anda meesti login ke blogger dengan akun Anda
  2. Kedua pilih blog yang ingin anda tambahkan slider ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :

  • #tabber-wrapper{width:640px;float:left;word-wrap:break-word;overflow:hidden}
    ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:638px;margin:0;padding:0}
    ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0}
    ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px}
    html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee}
    .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:638px;background:#eee;margin-bottom:15px}
    .tabber{padding:10px 0}
    .tabber .column{float:left;display:inline;width:146px;margin:0 0 0 11px}
    .tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px}
    .tabber h2 a{color:#222}
    .tabber h2 a:hover{color:#026ab5}
    Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan.
    Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama.
  • Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
  • <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/013120251122/tabview.js' type='text/javascript'/>
    <script type='text/javascript'>
    //<![CDATA[
    imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtBwdPC3OMxYCx4fDOYDQxYxwnYlrCIfHMZ-VjFzrMSsO8c0RJzgAlH4ebNACn6_RFLt8XjUGQzWezTPJq3CwB2sCh7IpjQ8eH8lmIWScorvxryCaw2vz6d_J1XNiMUYUcejDkK_dL0vo/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Norah Jones";Title2="Diana Krall";Title3="Sting";Title4="Basia";Title5="Sade";Title6="Jamie Cullum";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 showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;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;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='<div class="column"><a href="'+posturl+'"><img width="146" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}}
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan.
  • Kemudian masukkan kode berikut sebelum kode </body> :
  • <script type='text/javascript'>
     //<![CDATA[
    jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})});
     //]]>
    </script>
  • Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini dibawahnya :

    1. <div id='tabber-wrapper'>
      <ul class='tab-view'>
      <li><a href='#tab1'><script>document.write(Title1);</script></a></li>
      <li><a href='#tab2'><script>document.write(Title2);</script></a></li>
      <li><a href='#tab3'><script>document.write(Title3);</script></a></li>
      <li><a href='#tab4'><script>document.write(Title4);</script></a></li>
      <li><a href='#tab5'><script>document.write(Title5);</script></a></li>
      <li><a href='#tab6'><script>document.write(Title6);</script></a></li>
      </ul><div class='clear'/>
      <div class='tab-wrapper'>
      <div class='tabber' id='tab1'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Norah Jones Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='tabber' id='tab2'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Diana Krall?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='tabber' id='tab3'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sting?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='tabber' id='tab4'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Basia?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='tabber' id='tab5'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Sade Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='tabber' id='tab6'>
      <script>
      document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/Jamie Cullum Lyrics?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
      </script></div>
      <div class='clear'/>
      </div></div>
      Tulisan warna merah pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :
      <!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>
      
      </div> <!-- end content-wrapper -->
    2. Terakhir, save templates dan lihat hasilnya. 
    Nah itu tadi tutorial membuat tab view widget yang banyak ditanyakan oleh teman-teman blogger pada artikel sebelumnya. Silahkan dicoba, jika masih ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.
    Baca juga artikel cara membuat sosial bookmark dengan efek samping seo responsive.

    Membuat Simple Slidet Otomatis Gambar Vertikal


    slider otomatis


    Kali ini saya akan memberikan satu lagi tutorial membuat slider otomatis untuk image atau gambar vertikal. Sebelumnya saya minta maaf belum bisa menjawab semua pertanyaan yang masuk karena banyak sekali kegiatan di luar yang harus saya kerjakan. Dan tentu saja saya juga belum bisa memenuhi permintaan teman-teman yang menginginkan sebuah template khusus atau modifikasi template yang sudah ada menjadi sebuah template yang SEO friendly dan valid HTML.

    Slider ini sangat sederhana, seperti juga slider-slider sebelumnya, slider inipun bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini saya letakkan di sidebar sebelah kanan dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika Anda pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :
    1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
    2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
    3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
    4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> :
  • /* Slider */
    .sompret-wrapper {float:right; position: relative;}
    .sompret { overflow: hidden; position: relative; width:300px; height:400px;}
    .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/AVvXsEj_L0wcnSED2LT8BtZKuQVrs65Vjuu6fVNxU7ovnGCkt6Etyl1bxX1d4rKEOcf6LKEXsQ6_eP359BUz0PN8m4UmhJwHnTf0FxLYonYEIaaw9JccMFksvd60yIZP4sK8LVxNbG8kVLcP3pA/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/AVvXsEjTI_YtWQ2a81YX3nFUGJ06M4tSgK8xA9KupZ9L9intEVyZ3lpARpRH_4jp3pIc1M6YCpoVsHbnhr8ulP4gZn4VugQ6GAZdpcrGunkkqO2K4FPFv-8U5Yl_sC3K0wLnGSaqUmjAu7aIVwA/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/AVvXsEgGkkMQ9UFvks6YNbFnpncA5JvTLH75bDLagzrPlf_rJU11m7zk6OiXd8gxMpuAtDnCuvtPMeWt3z7GuLmFfb5fQVzQKAagexgQW81lto5cVJajW1OfhBWEXjgx0Oset4zUAgrnfKoHPeYR/s1600/uj-opacity-40.png);padding:5px 10px;  }
    .crott a{color: #fff;font: 16px Oswald }
    .crott p{color: #fff;font: 12px Arial;}
    Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.
  • Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :
  • <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/AVvXsEhtBwdPC3OMxYCx4fDOYDQxYxwnYlrCIfHMZ-VjFzrMSsO8c0RJzgAlH4ebNACn6_RFLt8XjUGQzWezTPJq3CwB2sCh7IpjQ8eH8lmIWScorvxryCaw2vz6d_J1XNiMUYUcejDkK_dL0vo/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>
    Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider
  • Sekarang Anda tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :
    1. <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 dengan menggunakan kode diatas hanya terlihat pada postingan, jika Anda ingin slider terlihat di homepage hapus kode pertama dan terakhir yang berwarna biru muda. Slider diatas menampilkan postingan terbaru Anda, jika ingin merubah menjadi tampil per label anda tinggal menambahkan kode /-/your label antara kode default dan ?, jadinya seperti ini default/-/your label?max-results karena kode tersebut diatas ada dua, Anda harus ganti dua-duanya.
    2. Terakhir save, selesai.
    Slider diatas bisa Anda modifikasi sendiri, Anda juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebar yang ada pada tutorial ini atau menambahkan hiasan ribbon misalnya seperti terlihat pada demo ini, sehingga tampilannya menjadi lebih menarik. Itu tadi tutorial membuat slider sederhana kali ini, jika ada yang kurang jelas silahkan tinggalkan peasan pada kolom komentar di bawah.

    Dan untuk teman-teman yang sudah berpartisipasi dan meramaikan forum diskusi pada blog ini saya mengucapkan banyak terima kasih, silahkan berdiskusi dengan bebas dan sehat.

    Cara Membuat Sosial Bookmark Dengan Efek Samping Seo Responsive

    Cara membuat bookmark dengan efek samping seo responsive, widget itu akan mengikuti gerakan naik turun. Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). 

    floating social bookmark


    Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak. 4 jenis, untuk widget kali ini saya menambahkan sosial media Pinterest dan Youtube agar lebih lengkap. Berikut ini langkah-langkah pembuatannya :
    1. Login ke Blogger
    2. Masuk ke Template >> Edit HTML (centang expand widget templates)
    3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :
  • .social-buttons {
        position: fixed;
        top: 130px;
        width: 45px;
        z-index: 9999;
    }
    .button-left {
        left: 0;
    }
    .button-right {
        right: 0;
    }
    .social-buttons #twitter-btn .social-icon,
    .social-buttons #facebook-btn .social-icon,
    .social-buttons #google-btn .social-icon,
    .social-buttons #rss-btn .social-icon,
    .social-buttons #pinterest-btn .social-icon,
    .social-buttons #youtube-btn .social-icon {
        background-color: #33353B;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUNzCmkjOy8eyFhE2I0n6auwsXkMsUWpI96d3CT-qlPhG6jIdMmBckwZS7lO5aovhEaJ0qrGzGV7Z2xlyP7ztpKKRP7u5kE9Qlby92J6suSlRziIzbYB5Kn5IMK_LDRygQzPEH9q7jrUE/s1600/mas-icons.png);
    }
    .button-left #facebook-btn span {
        background-position: right 10px;
    }
    .button-left #twitter-btn span {
        background-position: right -35px;
    }
    .button-left #google-btn span {
        background-position: right -127px;
    }
    .button-left #rss-btn span {
        background-position: right -80px;
    }
    .button-left #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-left #youtube-btn span {
        background-position: 11px -223px;
    }
    .button-right #facebook-btn span {
        background-position: 12px 10px;
    }
    .button-right #twitter-btn span {
        background-position: 11px -35px;
    }
    .button-right #google-btn span {
        background-position: 10px -127px;
    }
    .button-right #rss-btn span {
        background-position: 11px -80px;
    }
    .button-right #pinterest-btn span {
        background-position: 11px -177px;
    }
    .button-right #youtube-btn span {
        background-position: 11px -223px;
    }
    .social-buttons #facebook-btn:hover .social-icon {
        background-color: #3B5998;
    }
    .social-buttons #twitter-btn:hover .social-icon {
        background-color: #62BDB2;
    }
    .social-buttons #google-btn:hover .social-icon {
        background-color: #DB4A39;
    }
    .social-buttons #rss-btn:hover .social-icon {
        background-color: #FF8B0F;
    }
    .social-buttons #pinterest-btn:hover .social-icon {
        background-color: #D43638;
    }
    .social-buttons #youtube-btn:hover .social-icon {
        background-color: #C4302B;
    }
    .social-buttons a:hover .social-text {
        display: block;
    }
    .button-left .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: left;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-left .social-text {
        display: none;
        float: right;
        font-size: 1em;
        font-weight: bold;
        margin: 11px 40px 11px 0px;
        white-space: nowrap;
    }
    .button-right .social-icon {
        -moz-transition: background-color 0.4s ease-in 0s;
        -webkit-transition: background-color 0.4s ease-in 0s;
        background-repeat: no-repeat;
        display: block;
        float: right;
        height: 43px;
        margin-bottom: 2px;
        width: 43px;
    }
    .button-right .social-text {
        display: none;
        float: left;
        font-size: 80%;
        font-weight: bold;
        margin: 11px 0 11px 40px;
        white-space: nowrap;
    }
    .social-buttons .social-text {
        color: #FFFFFF;
    }
  • Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
    <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
    <script>
        $(window).load(function(){
            $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
                $(this).stop();
                $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
            });
            $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
                $(this).stop();
                $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
            });
        });
    </script>
    Untuk jquery library warna biru diatas, jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.
  • Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
    1. <div class='social-buttons button-right hidden-phone hidden-tablet'>
      <a class='itemsocial' href='https://www.facebook.com/your FB' id='facebook-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Facebook</span></span></a>
      <a class='itemsocial' href='https://twitter.com/your twitter' id='twitter-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Twitter</span></span></a>
      <a class='itemsocial' href='https://plus.google.com/your G+' id='google-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Google</span></span></a>
      <a class='itemsocial' href='http://pinterest.com/your ID' id='pinterest-btn' target='_blank'><span class='social-icon'>
      <span class='social-text'>Follow via Pinterest</span></span></a>
      <a class='itemsocial' href='https://www.youtube.com/user/your ID' id='youtube-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via Youtube</span></span></a>
      <a class='itemsocial' href='http://feeds.feedburner.com/your feed' id='rss-btn' target='_blank'><span class='social-icon'><span class='social-text'>Follow via RSS</span></span></a>
      </div>
      Ganti tulisan warna biru diatas, dengan ID Anda masing-masing jangan sampai keliru dengan ID tetangga.
    2. Terakhir, Save Templates.

    Cara Memasang Lagu di Blog Yang di Putar Otomatis


    Cara memasang lagu di blog yang otomatis diputar sebenarnya sangat mudah. Lagu atau musik yang terpasang ini tentunya akan menjadi bentuk ekspresi dari sang blogger. Hanya saja perlu diperhatikan ukuran dari halaman blog anda. Jangan sampai halaman blog anda menjadi terlalu berat.

    Tapi sebelum anda melakukan itu sebaiknya buat pertimbangan juga apa itu tidak mengganggu pengunjung blog anda. Apakah anda tidak merasa terganggu dengan lagu yang sedang terputar saat ini? Jika ya, maka sebaiknya batalkan saja rencana anda memasang lagu pada blog anda.

    Tapi seandainya blog anda memang membahas masalah musik apalagi yang fanatik dengan genre tertentu maka tidak ada salahnya anda memasang satu lagu yang menurut anda keren.

    Situs yang menyediakan layanan pemasangan lagu yang langsung diputar adalah http://divine-music.info/. Situs ini mempunyai beberapa koleksi lagu yang bisa menjadi pilihan anda dari berbagai genre. Untuk memasang lagu anda bisa langsung menuju ke TKP di sini.

    MEMILIH LAGU DARI DIVINE MUSIC
    • Pada bagian homepage anda akan melihat bahwa di bagian header ada sebuah pilihan BROWSE ALL. Silahkan diklik
    • Pada bagian atas halaman BROWSE ALL anda akan melihat BROWSE ARTISTS ALPHABETICALLY, silahkan cari nama dari artis atau grup penyanyi berdasarkan huruf awal namanya.
    • Di halaman baru pilih nama artis yang anda cari dan silahkan diklik
    • Anda akan melihat sebuah kolom berisi kode. Jika anda ingin memberi kredit buat divine-music maka copy semua. Tapi jika anda hanya ingin mendapat musiknya saja, maka kode yang diapit oleh tag EMBED saja yang dipergunakan. Sebisa mungkin kode ini dipasang dibagian paling akhir dari blog anda. Ini tidak akan mempercepat loading blog, tapi setidaknya blog anda bisa dimuat seluruhnya sebelum musik dimulai.

      Contoh kode :
      <embed align="center" autostart="TRUE" height="1" loop="TRUE" src="http://divine-music.info/musicfiles/01 Harlem Shake.swf" type="application/x-shockwave-flash" width="1"></embed>

      Ubah nilai TRUE pada loop menjadi FALSE jika ingin lagu hanya sekali saja diputar ...
    MEMASANG LAGU PADA BLOG
    • Sekarang masuk ke akun blogger anda
    • Masuk ke menu TATA LETAK
    • Klik TAMBAH GADGET
    • Pilih HTML/JAVASCRIPT
    • Paste kode tadi di dalam jendela widget
    • Tidak perlu mengisi nama widget
    • Klik simpan
    • Atur posisi widget di bagian paling akhir halaman dan simpan perubahan templates
    Sekarang setiap kali orang mengakses blog anda, mereka akan mendengarkan lagu tersebut. Kalau anda bosan, silahkan ganti dengan yang lainnya, atau hapus saja widget yang tadi anda pasang, dan blog anda akan kembali silent mode.
     
    Support : Adi Nurdiansyah
    Copyright © 2016. INFORMASI ONLINE - All Rights Reserved
    Template Modify by Seo-Oke
    Proudly powered by Blogger