MBEJI'Z EVIL

Cara Membuat Screenshoot Blog

Cara Membuat Screenshoot Blog. Apa itu screenshoot?, screenshoot adalah potongan gambar yang ditampilkan pada sebuah website atau blog. Biasanya blogger yang memiliki blog free templateatau gambar-gambar sangat membutuhkan hal satu ini. Bagaimana cara membuat screenshoot blog atau website?. Caranya sangat mudah...

Cara Membuat Screenshoot Blog

Contoh Screenshoot bisa kamu lihat di atas, cara membuatnya kita membutuhkan tambahan software di komputer kita. Saya hanya akan memberikan tips bagi pengguna mozilla.
Setelah menginstal, restart mozilla tadi, dan klik kanan untuk mendapatkan gambar, lalu pilih "save page as image". Selesai...

<img src="Link gambar sobat" />

oncontextmenu="return false;"

<img src="Link gambar sobat" oncontextmenu="return false;" />

Membuat gambar dengan efek bayangan

Membuat gambar dengan efek bayangan. Contoh hasil dari turorial ini bisa kamu lihat pada gambar di sebelah tulisan ini. Bagaimana cara Membuat gambar dengan efek bayangan?. Caranya sangat mudah. Gambar dengan efek bayangan ini tentu saja menambah nilai tersendiri pada gambar tersebut. Contohnya apabila kamu ingin mempromosikan sebuah produk atau ingin menjual sebuah ebook. Pengunjung yang melihat gambar dengan efek bayangan ini akan lebih tertarik untuk melakukan klik pada gambar tersebut.

Membuat gambar dengan efek bayangan :

1. Kunjungi Web Floor Maker. Kemudian upload image kamu.

2. Atur tampilan gambar. Apabila sudah klik generate.

3. Klik kanan pada hasil gambar. Kemudian pilih save image as.

Selesai. Selamat mencoba, salam tips blogger.

• whos.amung.us, disini Kode yang diberikan berupa javascript.
• daylogs.com, menggunakan kode html, jadi bisa di pasang buat Blogspot maupun Wordpress.com, di situ ada 3 pilihan, Map, Icon, dan Smallbutton.
• www.geovisite.com, Pada situs ini sebenarnya banyak terdapat widget yang lain, seperti Map, Jam, User, Counter, dll. Jika sobat ingin memasang Widget jumlah pengunjung yang Online pilih geoglobe, untuk kodenya ada Javascript dan Html.

1. Colour Background Style
   Pemberian warna pada suatu widget menggunakan sintaks background: #kodewarna; dan berikut selengkapnya:
   

   #side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 25px 0px 0px 0px;
width: 315px;
background: #ffffff;
}

   Tambahkan kode merah seperti di atas pada widget yang ingin anda tambahkan warna background. Untuk warna, anda bisa menggunakan kode warna  yang terdapat pada page menu di blog ini, atau Tool Online untuk mengetahui kode warna, dan jangan lupa menggunakan tanda pagar (#) sebelum kode.
2. Image Background Style
   Ini adalah teknik memberikan gambar sebagai background pada suatu widget pada blog anda. Perhatikan gambar berikut:
   Nah, untuk pemasangan style ini, ada beberapa perubahan pada sintaks. Berikut selengkapnya:
   

   .post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: #ffffff;
font-weight: normal;
line-height: 1.6em; 
text-decoration: none;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjA8CCFiQ68IbXBIZPdFD3eDLC7Srxk9ssNWaqcAaUF_r7FzvNDJF9ph1G3yMScrP5tw87SCMPf8DpHmlxknDmNxGhmj386MXeMNu1giWCFZTWqjAOMLYVyK3REsj3gFj55Pe4CTM-_Bx8/s1600/banner+demomaskolis.jpg"); 
background-color:#0092dd;
background-position:top right;
background-repeat:no-repeat;
border: 1px solid $postfooterBorderColor;
}

   Penjelasannya adalah:
   
   • Background Image diisi URL gambar.
   • Background Color diisi kode warna yang sesuai dengan gambar.
   • Background Position diisi dengan posisi penempatan gambar. Misal top-left, bottom-left, top-right, bottom-right, center-right, center-left.
   Background Repeat diisi ke sebelah mana gambar akan diulang. Untuk ke atas, gunakanrepeat-y menjadi: background-repeat: repeat-y; Untuk ke samping, gunakan repeat-x menjadi: background-repeat: repeat-x; Dan jika tidak ingin diulangm gunakan no-repeat seperti contoh awal.
3. Hover Image Background Style
   Style unik, seperti yang digunakan untuk sebuah link. yaitu berubah warna jika mouse mendekat, namanya HOVER STYLE. Teknik ini juga bisa menggunakan gambar. Untuk pemasangannya, pastikan kode .widget pada CSS yang akan diberi background. Untuk contoh adalah kode berikut ini:
   

   #main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

   Di atas adalah kode untuk main-widget, untuk sidebar biasanya menggunakan kode:
   

   #sidebar .widget {
margin: 0px;
padding: 0px;
}

   Pemberian efek ini sangat mudah. Copy-Paste seluruh kode widget dan taruh di bawahnya, lalu tambahkan :hover pada akhir kata widget dan beri style background di dalam kode tadi. Selengkapnya:
   

   #main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

#main .widget:hover {
background:#e3e3e3;
}

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to fade you any element inside a container in and out.

These elements could be anything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. 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>   :          
   #featuredSlider {background:#eee;float:left;margin:0; padding:0 0 10px; width:640px; position:relative;color:#666;border-bottom:1px solid #c3c3c3}
   #featuredSlider .featured-thumb {float:left; margin:10px; padding:0px;}
   #featuredSlider .container {height:226px; margin:0 10px 0 0;overflow:hidden; position:relative;}
   .featuredTitle{padding-top:10px;font:16px Oswald;text-shadow:1px 1px 1px #ccc;}
   .featuredTitle a{color:#f7441a}
   .featuredTitle a:hover{color:#000}
   .navigation {position:relative;bottom:23px;float:right;overflow:hidden;}
   ul.pagination {list-style-type:none; margin:0 auto; padding:0;}
   ul.pagination a { float:left; margin:0 5px; display:inline; }
   ul.pagination a { display:block;width:12px; padding-top:12px; height:0; overflow:hidden; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-L07nEWKoZ3izZJ_EowEMFV58aUvAWt7CLnN4wRuXvKDvmNbLREYryEalQz2ewFu9RaxNICwKq3qDDYAQyUfz5JaMMz3XgHFnA93vNWuaPsSUig2eRI68aTG4JDHHPprgNpGSrpIpSFc/s1600/slider+pagination.png); background-position:0 0; background-repeat:no-repeat; }
   ul.pagination a:hover { background-position:0 -12px; }
   ul.pagination a:hover { background-position:0 -12px; }
   ul.pagination a.activeSlide { background-position:0 -12px }
   a.readmore {float:left;border:1px solid #444;background:#585858 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF-xhVFBGcE26qMaNmDOuTG_S8ri1J6aEwm4L_c5PvUaXPbfmdgmG4cuylBFr9I43OZ66Yx6oUMOoz0-cBzDd5vtKuYK5s4RtMgWdybQl-HDT4Q4gRfUaGa-PwtbeCtHUZnbeXXbxYd8s/s1600/fade.png) repeat-x top;display:block;;font:bold 12px Arial;text-shadow: -1px -1px 0 #333;margin:10px 0 0 0;padding:4px 10px;color:#eee;-webkit-border-radius:3px;-moz-border-radius:3px;
   border-radius:3px;-webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.5);}
   a.readmore:hover {color:#ff0}
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. 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/221222113215/jquery.innerfade.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/122111125120/cycle.js' type='text/javascript'/>
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWXTf5iODj_Jr4-nRVtwflR3D8TbI30V7lJ2HJg0JiEAHJlE8davS3W5mA3e4uCBCRwu-8leBFTC6xjdwa-4JdRVjOhK9vrrHVG6nFVDofXaLicjD0W6xPtuBIygNXzvTrgtkgnNYxVtU/s1600/no+image.jpg";
   showRandomImg = true;
   aBold = true;
   summaryPost = 150;
   summaryTitle = 25;
   numposts  = 7;
   
   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();
       document.write('<div class="slides">')
   if (numposts <= json.feed.entry.length) {
   maxpost = numposts;
   }
   else
          {
      maxpost=json.feed.entry.length;
      }
      for (var i = 0; i < maxpost; 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 trtd = '<div><p class="featured-thumb"><a href="'+posturl+'"><img width="340" height="212" src="'+img[i]+'"/></a></p><div class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></div><p>'+removeHtmlTag(postcontent,summaryPost)+'... </p><a href="'+posturl+'" class="readmore">Read more &#187;</a></div>';
   document.write(trtd);
   
   
   j++;
   }
       document.write('</div>')
   }
   
   //]]>
   </script>
   
   

   
   
7. Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :        <b:if cond='data:blog.pageType != &quot;item&quot;'>

   <div id='featuredSlider'>

   <div class='container'>

   <script>

   document.write(&quot; &lt;script src=\&quot;/feeds/posts/default/-/sport?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>

   <div class='navigation'>

   <ul class='pagination'/>      <script>

   $(&#39;.slides&#39;).cycle({

    fx:     &#39;fade&#39;,

    speed:  &#39;slow&#39;,

    timeout: 3000,

    pager:  &#39;.pagination&#39;

    });

   </script>

   </div>  </div> <!--end .container-->

   </div>

   </b:if>

   Jika Anda ingin menampilkan slider per kategori atau label tinggal ditambahkan saja kode diatas :
   

   /feeds/posts/default?max-results

   Menjadi :
   

   /feeds/posts/default/-/your label?max-results

   Silahkan ganti "your label" dengan kategori yang ingin Anda tampilkan pada slider.
8. Terakhir, save templates dan lihat hasilnya.