^SMK_PESAT^_*Bogor*

 

Salam sahabat blogger, alhamdulillah dapat menyapa anda kembali, semoga dimanapun anda berada selalu dalam penjagaan-Nya. Setelah beberapa waktu sempat fakum, request tutorial yang disampaikan lewat komentar atau emailpun akhirnya menumpuk. Mohon maaf juga untuk pertanyaan-pertanyaan yang belum sempat terjawab satu persatu. Hari ini dan kedepan insyaAllah saya ingin mencicil request sahabat blogger, tapi mohon jangan ditambah dulu sebelum PR yang satu ini selesai! Baiklah tutorial kali ini saya ingin mengetengahkan cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog.
Hampir setiap muslim pasti mengenal kalimat basmalah dan hamdalah. Kalimat pendek sarat makna ini biasanya dipakai ketika akan memulai suatu pekerjaan dan usai mengerjakannya. Karena bacaannya yang pendek ini pula, banyak yang menyepelekan kalimat basmalah dan hamdalah. Padahal jika dikaji lebih mendalam, di samping sebagai sarana meraih cinta Allah, ternyata kedua kalimat ini mengandung kekuatan luar biasa dalam meraih kesuksesan dan keberkahan hidup. Tidaklah mengherankan jika para Nabi, Rasul, dan orang-orang sukses selalu membaca basmalah setiap memulai aktivitasnya dan mengakhiri dengan hamdalah sebagai ungkapan syukur.
Tapi tak menambahkan kedua kalimat ini dalam artikel yang anda tulis, dan mencukupkannya dilisan sendiri saja tentu juga sudah cukup dan baik karena menambahkan keduanya dipostingan bukanlah kewajiban.
Baiklah cukup untuk pengantar, berikut cara menambahkan basmalah dan hamdalah diawal dan akhir posting blog

• Setelah login ke akun blogger anda
• Pada dasbor >> klik  tab template >> Edit HTML
• Klik tab drop down Lompat ke widget >> Blog1 >> Klik tanda panah kecil disamping kode dengan id Blog1
• Klik tanda panah kecil disamping kode <b:includable id='post' var='post'>
• Click Ctrl+F >> cari kode <data:post.body/>

Untuk menambahkan basmalah diawal posting tambahkan kode berikut diatas <data:post.body/>

<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/>

Untuk menambahkan hamdalah diakhir postingan tambahkan kode berikut dibawah <data:post.body/>

<div align='center'><span style='font-size: medium;'>ٱل&#1618;ح&#1614;م&#1618;د&#1615; ل&#1616;ل&#1614;&#1617;ه&#1616; ر&#1614;ب&#1616;&#1617;
ٱل&#1618;ع&#1614;&#1648;ل&#1614;م&#1616;ين</span></div>

• Simpan template dan lihat hasilnya di blog anda.

Demikian tutorial kali ini, cara menambahkan basmalah dan hamdalah diawal dan akhir artikel blog. Semoga bermanfaat dan berkah.
Terimakasih.

 

Sebelumnya saya sudah pernah mengetengahkan tutorial membuat widget top komentator, kali ini masih masih akan mengetengahkan cara menambahkan widget yang sama namun sedikit perbedaan pada style. Widget top komentator sebelumnya hanya menampilkan nama dari komentator sedangkan widget kali ini menampilkan pula avatar dari komentator. Style tentunya bisa anda modifikasi lagi sesuai dengan keinginan anda, menambahkan efek howover pada avatar atau nama, menampilkan jumlah komentar atau pada jenis dan size link komentator.
Adapun kegunaan dari widget ini, bisa anda maknai sebagai apresiasi untuk pengunjung setia anda atau undangan untuk menarik perhatian dan keinginannya agar lebih giat berkomentar diblog anda.
Jika anda tertarik untuk menambahkan widget top komentator menarik dengan avatar ini, silahkan ikuti tutorial berikut:

• Pada dasbor –> Menu Tata Letak –> Tambah gadget HTML/JavaScript
• Beri title/judul yang anda inginkan dan Pada kolom konten masukkan kode berikut:  

<style type="text/css">
.top-commenter-line img {
-webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; -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-left:5px;margin-right:5px;
}
.top-commenter-line {margin: 5px 0;border-bottom:1px solid #eee;padding:3px 5px 6px 0px;}
.top-commenter-line .profile-name-link {padding-left:0;font-weight:bold;}
.top-commenter-avatar {vertical-align:middle;width:30px;height:30px;
}
</style>
<script type="text/javascript">
//
// Top Commentators gadget with avatars, by MS-potilas 2012.
// Gets a list of top commentators from all comments, or specified number of days in the past.
// See http://yabtb.blogspot.com/2012/05/top-commenters-gadget-with-avatars.html
//
// CONFIG:
var maxTopCommenters = 5;   // how big a list of top commentators
var minComments = 1;        // how many comments must top commentator have at least
var numDays = 0;            // from how many days (ex. 30), or 0 from "all the time"
var excludeMe = true;       // true: exclude my own comments
var excludeUsers = ["Anonymous", "Nama Admin"];     // exclude these usernames
var maxUserNameLength = 42; // 0: don't cut, >4: cut usernames
//
var txtTopLine = '<b>[#].</b> [image] [user] ([count])';
var txtNoTopCommenters = 'No top commentators at this time.';
var txtAnonymous = '';      // empty, or Anonymous user name localized if you want to localize
//
var sizeAvatar = 56;
var cropAvatar = true;
//
var urlNoAvatar = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8OjyM7CfNor6IfFtGByO61FQMHU0h5jrzoGiFa21nauebH435I-wN-b1OSUFkJONA6CGMVp6nRWhfcU6uM5tMQrVi7Hr041QtusH_d50TGITQ7scJ1yfVcKzHGUt44wHO5fUGg7rCsAE/"+sizeAvatar+"/avatar_blue_m_96.png"; // http://www.blogger.com/img/avatar_blue_m_96.png resizeable
var urlAnoAvatar = 'http://www.gravatar.com/avatar/00000000000000000000000000000000?d=mm&s=' + sizeAvatar;
var urlMyProfile = ''; // set if you have no profile gadget on page
var urlMyAvatar = '';  // can be empty (then it is fetched) or url to image
// config end
// for old IEs & IE modes:
if(!Array.indexOf) {
 Array.prototype.indexOf=function(obj) {
  for(var i=0;i<this.length;i++) if(this[i]==obj) return i;
  return -1;
}}
function replaceTopCmtVars(text, item, position)
{
  if(!item || !item.author) return text;
  var author = item.author; 

  var authorUri = "";
  if(author.uri && author.uri.$t != "")
    authorUri = author.uri.$t; 

  var avaimg = urlAnoAvatar;
  var bloggerprofile = "http://www.blogger.com/profile/";
  if(author.gd$image && author.gd$image.src && authorUri.substr(0,bloggerprofile.length) == bloggerprofile)
    avaimg = author.gd$image.src;
  else {
    var parseurl = document.createElement('a');
    if(authorUri != "") {
      parseurl.href = authorUri;
      avaimg = 'http://www.google.com/s2/favicons?domain=' + parseurl.hostname;
    }
  }
  if(urlMyProfile != "" && authorUri == urlMyProfile && urlMyAvatar != "")
    avaimg = urlMyAvatar;
  if(avaimg == "http://img2.blogblog.com/img/b16-rounded.gif" && urlNoAvatar != "")
    avaimg = urlNoAvatar;
  var newsize="s"+sizeAvatar;
  avaimg = avaimg.replace(/\/s\d\d+-c\//, "/"+newsize+"-c/");
  if(cropAvatar) newsize+="-c";
  avaimg = avaimg.replace(/\/s\d\d+(-c){0,1}\//, "/"+newsize+"/"); 

  var authorName = author.name.$t;
  if(authorName == 'Anonymous' && txtAnonymous != '' && avaimg == urlAnoAvatar)
    authorName = txtAnonymous;
  var imgcode = '<img class="top-commenter-avatar" height="'+sizeAvatar+'" width="'+sizeAvatar+'" title="'+authorName+'" src="'+avaimg+'" />';
  if(authorUri!="") imgcode = '<a href="'+authorUri+'">'+imgcode+'</a>'; 

  if(maxUserNameLength > 3 && authorName.length > maxUserNameLength)
    authorName = authorName.substr(0, maxUserNameLength-3) + "...";
  var authorcode = authorName;
  if(authorUri!="") authorcode = '<a class="profile-name-link" href="'+authorUri+'">'+authorcode+'</a>'; 

  text = text.replace('[user]', authorcode);
  text = text.replace('[image]', imgcode);
  text = text.replace('[#]', position);
  text = text.replace('[count]', item.count);
  return text;
} 

var topcommenters = {};
var ndxbase = 1;
function showTopCommenters(json) {
  var one_day=1000*60*60*24;
  var today = new Date(); 

  if(urlMyProfile == "") {
    var elements = document.getElementsByTagName("*");
    var expr = /(^| )profile-link( |$)/;
    for(var i=0 ; i<elements.length ; i++)
      if(expr.test(elements[i].className)) {
        urlMyProfile = elements[i].href;
        break;
      }
  } 

  for(var i = 0 ; i < json.feed.entry.length ; i++ ) {
    var entry = json.feed.entry[i];
    if(numDays > 0) {
      var datePart = entry.published.$t.match(/\d+/g); // assume ISO 8601
      var cmtDate = new Date(datePart[0],datePart[1]-1,datePart[2],datePart[3],datePart[4],datePart[5]); 

      //Calculate difference btw the two dates, and convert to days
      var days = Math.ceil((today.getTime()-cmtDate.getTime())/(one_day));
      if(days > numDays) break;
    }
    var authorUri = "";
    if(entry.author[0].uri && entry.author[0].uri.$t != "")
      authorUri = entry.author[0].uri.$t; 

    if(excludeMe && authorUri != "" && authorUri == urlMyProfile)
      continue;
    var authorName = entry.author[0].name.$t;
    if(excludeUsers.indexOf(authorName) != -1)
      continue; 

    var hash=entry.author[0].name.$t + "-" + authorUri;
    if(topcommenters[hash])
      topcommenters[hash].count++;
    else {
      var commenter = new Object();
      commenter.author = entry.author[0];
      commenter.count = 1;
      topcommenters[hash] = commenter;
    }
  }
  if(json.feed.entry.length == 200) {
    ndxbase += 200;
    document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&start-index='+ndxbase+'&alt=json-in-script&callback=showTopCommenters"></'+'script>');
    return;
  } 

  // convert object to array of tuples
  var tuplear = [];
  for(var key in topcommenters) tuplear.push([key, topcommenters[key]]); 

  tuplear.sort(function(a, b) {
    if(b[1].count-a[1].count)
        return b[1].count-a[1].count;
    return (a[1].author.name.$t.toLowerCase() < b[1].author.name.$t.toLowerCase()) ? -1 : 1;
  }); 

  // list top topcommenters:
  var realcount = 0;
  for(var i = 0; i < maxTopCommenters && i < tuplear.length ; i++) {
    var item = tuplear[i][1];
    if(item.count < minComments)
        break;
    document.write('<di'+'v class="top-commenter-line">');
    document.write(replaceTopCmtVars(txtTopLine, item, realcount+1));
    document.write('</d'+'iv>');
    realcount++;
  }
  if(!realcount)
    document.write(txtNoTopCommenters);
} 
document.write('<script type="text/javascript" src="http://'+window.location.hostname+'/feeds/comments/default?redirect=false&max-results=200&alt=json-in-script&callback=showTopCommenters"></'+'script>');
</script>

• Silahkan konfigurasikan widget sesuai keinginan anda.

Tulisan berwarna merah dan bercetak tebal diatas (Nama Admin), silahkan diganti dengan nama anda jika anda tidak menginginkan masuk dalam lists top komentator

• Simpan dan lihat hasilnya di blog anda.

Demikian tutorial menambahkan widget top komentator di blog. Semoga bermanfaat.

 

Dalam tutorial ini, kita akan membahas cara kedua, yaitu untuk membuat desain website dasar yang responsif terhadap browser layar.
Pertama, tentu saja adalah untuk membuat dokumen html.
Berikut html dasar untuk tata letak situs web:

<div id="wrapper">
<div id="header-wrapper">
<h1>RESPONSIVE WEBSITE DESIGN</h1>
</div>
<div id="navigation">
<h2>HOME ABOUT CONTACT</h2>
</div>
<div id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</div>
<div id="sidebar-wrapper">
<p>Sidebar</p>
</div>
<div id="footer-wrapper">
<p>Footer</p>
</div>
</div>

#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}

/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}

/* for 700px or less */
@media screen and (max-width: 700px) {

 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }

}

Jika kita telah mengatur lebar layout website maka jangan lupa untuk mengatur ukuran font. Jangan lupa ketika ukuran font
menjadi lebih kecil jika dilihat melalui mobile. 1 em = 16 px -> untuk ukuran font pada paragraph (p)
1,5 em = 24 px -> untuk h1
1.25 em = 20 px -> untuk h2
dll
Jadi kode css untuk huruf yang digunakan dalam desain website responsif adalah:

h1 {
font-size:2em;
}
h2 {
font-size:1.5em;
}
p {
font-size:1em;
}

Secara keseluruhan, berikut ini adalah html dan css kode untuk membuat desain website / blog responsif.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Easy Ways To Create And Build A Responsive Website Design </title>
<style>
#wrapper {
width:1300px;
margin:auto;
}
#header-wrapper {
width:1300px;
background:#90C;
border:solid #555;
}
#navigation {
width:1300px;
background:#36F;
border:solid #555;
margin-top:5px;
}
#content-wrapper{
width:775px;
float:left;
background:#900;
border:solid #555;
margin-top:5px;
}
#sidebar-wrapper{
margin-left:5px;
width:500px;
background:#0F6;
border:solid #555;
float:left;
margin-top:5px;
}
#footer-wrapper{
width:1300px;
border:solid #555;
float:left;
background:#F60;
margin-top:5px;
}
h1 a{
font-size:1.5em;
text-decoration:none;
}
h2 {
font-size:1.25em;
text-decoration:none;
}
p {
font-size:1em;
}
/* for 1024px or less */
@media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
background:#90C;
border:solid #555;
}
#navigation {
width:100%;
font-size:0.7em;
background:#30F;
border:solid #555;
}
#content-wrapper{
width:63.8%;
float:left;
background:#900;
border:solid #555;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
background:#0F6;
border:solid #555;
float:left;
}
#footer-wrapper{
width:100%;
border:solid #555;
float:left;
}
}
/* for 700px or less */
@media screen and (max-width: 700px) {

 #content-wrapper {
  width: auto;
  float: none;
 }
 #sidebar-wrapper {
  width: auto;
  float: none;
 }

}
</style>
</head>
<body>
<div id="wrapper">
<header id="header-wrapper">
<h1><a href="#"> Easy Ways To Create And Build A Responsive Website Design </a></h1>
</header>
<nav id="navigation">
<h2>HOME  ABOUT  CONTACT</h2>
</nav>
<aside id="content-wrapper">
<p> Easy Ways To Create And Build A Responsive Website Design </p>
<p> Actually there are two ways how to create a website we have a responsive design. The first way is to create 2 versions of the design, which is for the desktop and mobile versions separately so that when a mobile user comes to visit, the display will be redirected to the mobile version of course much lighter and simpler. As for the second way is to create a special design with adjust the size of font and mobile screen so that the website becomes easier to access and reading.</p>
</aside>
<aside id="sidebar-wrapper">
<p>Sidebar</p>
</aside>
<footer id="footer-wrapper">
<p>Footer</p>
</footer>
</div>
</body>
</html>

 

Featured post yang pada umumnya diletakkan pada halaman beranda bermacam-macan model atau tampilannya. Diantaranya ada yang berbentuk carausel dan slideshow. Nah kali ini saya akan memberikan script untuk menampilkan featured post/slider yang responsive menggunakan Elasticslideshow.

Elasticslideshow ini dibuat oleh louis_remi pada tahun 2011 dengan nama smartresize dan merupakan script slider dengan menggunakan jQuery. Sehingga setidaknya blog anda sudah terdapat jQuery librarynya agar dapat berfungsi.

Baik langsung saja dengan cara penerapannya.

1. Silahkan login ke blog Sobat > Template > Edit HTML

Kemudian salin dan pastekan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>

/* CSS Responsive Slider Recent Post */
#featuredpost {margin:15px auto;}
#slides *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
#slides ul,#slides li{padding:0;margin:0;list-style:none;position:relative}
#slides ul{height:320px}
#slides li{width:50%;height:100%;position:absolute;display:none}
#slides li:nth-child(1), #slides li:nth-child(2), #slides li:nth-child(3), #slides li:nth-child(4), #slides li:nth-child(5){display:block}
#slides li:nth-child(1){left:0;top:0}
#slides li:nth-child(2){left:50%;width:25%;height:50%}
#slides li:nth-child(3){left:75%;width:25%;height:50%}
#slides li:nth-child(4){left:50%;top:50%;width:25%;height:50%}
#slides li:nth-child(5){left:75%;top:50%;width:25%;height:50%}
#slides li:nth-child(1) h4 {overflow:hidden;font-size:25px;bottom:0;color:#fafafa;width:100%;
padding:10px 10px 10px 90px;text-align:left;text-transform:uppercase;background:rgba(0,0,0,0.3);
height:90px;font-family:'Oswald';text-shadow:2px 2px 0 rgba(0,0,0,0.2);line-height:32px;left:0;}
#slides li:nth-child(1) .label_text {font-size:30px;display:block;bottom:10px;left:10px;
padding:0;font-family:'Oswald';box-shadow:5px 3px 0 rgba(0,0,0,0.2);}
#slides li:nth-child(1) span.dd {display:block;font-size:30px;padding:12px 15px;
background:#ff6553;margin:0;}
#slides li:nth-child(1) span.dm {display:block;font-size:14px;background:#333;color:#fff;
padding:5px 21px;text-transform:uppercase;margin:0;}
#slides li:nth-child(1) span.dy, #slides li:nth-child(1) span.autname{display:none;}
#slides a{display:block;width:100%;height:100%;overflow:hidden}
#slides img{display:block;width:100%;height:auto;border:0;padding:0;background-color:#333;-moz-transform:scale(1.0) rotate(0);-webkit-transform:scale(1.0) rotate(0);-ms-transform:scale(1.0) rotate(0);transform:scale(1.0) rotate(0);transition:all 0.6s linear;}
#slides li a:hover img {-moz-transform:scale(1.1) rotate(1deg);-webkit-transform:scale(1.1) rotate(1deg);-ms-transform:scale(1.1) rotate(1deg);transform:scale(1.1) rotate(1deg);transition:all 0.3s linear;}
#slides .overlayx{width:100%;height:100%;position:absolute;z-index:2;background-image:url(http://2.bp.blogspot.com/-0haO2Mfkjjk/VDgZww2tfEI/AAAAAAAAHAk/zhu3INYSkHA/s1600/fade.png);background-position:50% 40%;background-repeat:repeat-x;}
#slides h4{position:absolute;bottom:40px;margin:0;font-size:13px;font-family:'Oswald';
left:10px;padding:5px 10px;color:#f9f9f9;z-index:3;line-height:20px;font-weight:normal;
background:rgba(41,41,41,0.7);text-align:left;text-transform:uppercase;margin-right:10px;}
#slides .label_text{font-size:12px;color:#fff;bottom:10px;z-index:3;left:10px;
position:absolute;background:rgba(255,101,83,0.8);padding:3px 6px;font-family:'Oswald';
text-transform:uppercase;}
#slides li:nth-child(2) .autname,#slides li:nth-child(3) .autname,#slides li:nth-child(4) .autname,#slides li:nth-child(5) .autname{display:none;}
#slides .overlayx,#slides li{transition:all .4s ease-in-out}
#slides li:nth-child(1) .overlayx{display:none;}
#slides li:hover .overlayx{opacity:0.1}

@media only screen and (max-width:800px){
#slides li:nth-child(1) h4 {font-size:18px;line-height:24px;}}

@media only screen and (max-width:600px){
  #slides ul{height:600px}
  #slides li:nth-child(1){width:100%;height:50%}
  #slides li:nth-child(2){top:50%;height:25%;left:0;width:50%}
  #slides li:nth-child(3){left:50%;top:50%;width:50%;height:25%}
  #slides li:nth-child(4){left:0;top:75%;height:25%;width:100%}
  #slides li:nth-child(5){display:none;}}

@media only screen and (max-width:480px){
#slides li:nth-child(1) h4 {font-size:13px;line-height:16px;}}

Pada CSS di atas saya menggunakan font Oswald, silahkan ganti dan sesuaikan dengan tema blog anda.

2. Salin dan pastekan kode di bawah ini tepat di atas </body>

<script type="text/javascript" src="https://arlina-design.googlecode.com/svn/slider-post.js"></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
FeaturedPost({
blogURL:"URL-BLOG-SOBAT",
MaxPost:8,
idcontaint:"#featuredpost",
ImageSize:500,
interval:10000,
autoplay:true,
tagName:false
});
});
//]]>
</script>

Ganti Tulisan URL-BLOG-SOBAT dengan URL Blog sobat.


3. Salin dan pastekan kode di bawah ini dimana saja bebas. Bisa sebelum content-wrapper atau di bawah menu-wrapper

<div id="featuredpost"></div>

4. Terakhir simpan template dan lihat hasilnya.

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="featuredpost"></div>
</b:if>

 

Beberapa waktu lalu komputer adik saya terkena virus yang cukup menjengkelkan. Antivirus yang terpasang tidak mampu mendeteksi, update pun gagal sampai install ulang Antivirus juga tidak berhasil. Akhirnya saya mencoba mematikan virus secara manual dengan bantuan program Autoruns.
Bagi yang belum punya program ini bisa download (Autoruns.zip) (576 KB), yang bisa dianggap program “wajib” bagi saya.
Cara berikut mungkin hanya salah satu dari berbagai metode yang ada dan yang biasa saya gunakan. Secara garis besar, saya membagi cara mematikan sumber virus secara manual tanpa antivirus ini kedalam dua langkah, yaitu : Mendeteksi sumber virus atau file yang mencurigakan (dianggap virus) dan Cara Mematikannya.

Langkah Pertama, Mendeteksi Virus
Sebagian besar komputer yang terinfeksi, bisa diketahui sumber virus yang aktif di komputer dengan program seperti Autoruns. Jalankan program autoruns.exe. Jika program tidak berjalan, coba rename file autoruns.exe dengan nama lainnya. Jika tetap gagal, bisa menggunakan program sejenis lainnya.
Setelah Autoruns dibuka, bagian yang terpenting disini dan akan digunakan adalah tab Logon, karena disinilah ditampilkan berbagai program (aplikasi) yang berjalan otomatis ketika kita menjalankan windows.



Adanya tanya cek menunjukkan bahwa program tersebut aktif dan otomatis dijalankan ketika Start Up Windows (Windows dijalankan). Jika tidak ada tanda cek, menunjukkan bahwa program tersebut sebenarnya ada dalam daftar start up, tetapi tidak otomatis berjalan ketika Start Up Windows.

Program Windows yang HARUS AKTIF
Ada beberapa program penting Windows di daftar Autorun yang harus aktif, jangan sampai tanda cek-nya dihilangkan atau bahkan dihapus. Biasanya letaknya ada di bagian paling atas, yaitu :



Untuk memastikannya, yang perlu diperhatikan adalah “Autorun Entry” dan “Image Path”, terkadang virus menyerupakan dengan nama tersebut. Image Path adalah lokasi file-nya, jika namanya seperti diatas, tetapi lokasinya di folder lain, maka perlu di waspadai.

Mencari Sumber Virus
Berikut beberapa point yang bisa dilakukan untuk mencari sumber virus atau file mencurigakan yang dianggap sebagai virus :

1. Periksa akan adanya Autorun Entry (daftar program) yang kita merasa tidak pernah menginstallnya. Misalnya saya pernah melihat ada yang namanya ffdshow.exe dengan lokasi (Image Path) C:\Program Files\K-Lite Codec Pack\, padahal di komputer tersebut tidak pernah di install program K-Lite Codec Pack. Maka kemungkinan itu salah satu sumber virus. Hal ini sering terjadi, misalnya ada aplikasi dengan folder Corel Draw, tetapi kita tidak pernah menginstall Corel Draw.
2. Hilangkan tanda cek dari Autorun Entry yang mencurigakan, kemudian klik icon Refresh (F5). Jika tanda cek tersebut kembali aktif atau muncul daftar entry baru yang sama dan disertai tanda cek, kemungkinan itu adalah sumber virus. Cara ini terkadang harus ditunggu beberapa saat, atau aplikasi Autoruns di tutup dulu, kemudian setelah beberapa lama dibuka lagi untuk memeriksanya.
3. Dari daftar Program Windows yang HARUS AKTIF sebelumnya, periksa akan adanya program lainnya di ketiga tempat yang saya beri garis merah. Pada Windows XP, seharusnya hanya ada 3 file diatas, yaitu rdpclip, userinit.exe dan explorer.exe dengan lokasi persis seperti Image Path diatas. Adanya tambahan lainnya menunjukkan kemungkinan sumber virus. Cek dengan point ke-2
4. Sumber virus biasanya tidak hanya satu, sehingga perlu dicari daftar Autorun lainnya yang mencurigakan, baik dengan cara seperti point 1 atau 2. Misalnya di lokasi :

* HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\Run
* C:\Documents and Settings\All Users\Start Menu\Programs\Startup
* HKCU\Software\Microsoft\Windows\CurrentVersion\Run
* Dan lainnya, yang berada di bawah dari daftar Program Windows yang HARUS AKTIF di atas.

Setelah diperoleh daftar-daftar file yang mencurigakan atau tidak dikenal, tulis nama dan lokasi filenya yang bisa dilihat dari keterangan Image Path (program Autoruns) di kertas atau file text (misalnya dengan Notepad). Bagi yang belum terbiasa mungkin dafarnya akan banyak sekali. Tetapi hal ini tidak masalah
Menghapus daftar dari Autoruns tersebut hanya menghapus referensinya saja, jadi filenya (lokasinya disebutkan di bagian “Image Path”) tidak akan terhapus
Mematikan Sumber Virus

Setelah didapat daftar file-file yang mencurigakan, langkah selanjutnya adalah me-rename ekstensi file tersebut (jangan dihapus terlebih dahulu). Me-rename dari windows biasanya tidak akan berhasil, atau kadang kita tidak tahu ekstensi file tersebut dan tidak bisa ditampilkan
Cara yang biasanya selalu berhasil adalah melalui media lain. Misalnya menjalankan sistem Operasi langsung dari CD,DVD, atau Flashdisk. Misalnya CD Linux, CD Windows MiniPE, UBCD4Win dan lainnya. Atau bisa juga kita melepas Hardisk kita dan dipasang di komputer lainnya (yang bebeas virus) sebagai Hardisk kedua (secondary). Intinya agar kita bisa mengakses (membuka) file dan folder dari daftar yang kita tulis tanpa mengaktifkan Windows yang ada di hardisk, sehingga virus tidak bisa aktif.
Setelah kita bisa booting komputer dari media lain atau memasang hardisk di komputer lainnya, selanjutnya kita mencari file-file dari daftar yang telah kita buat. Sebelumnya aktifkan opsi untuk menampilkan semua ekstensi file jika belum kelihatan. Setelah itu, rename semua ekstensi file yang kita dapatkan. Misalnya nama_file.exe menjadi nama_file.exe.vir, viruz.dll menjadi viruz.dll.vir.
Setelah selesai semua, saatnya dicoba komputer tersebut ( kembali mengaktifkan windows). Periksa lagi dengan program Autoruns. Jika daftar yang kita tulis kembali muncul dan disertai tanda cek, atau masih muncul tanda-tanda komputer terinfeksi virus, mungkin ada beberapa program lain yang terlewatkan. Kadang kita harus mencoba beberapa kali. Jika komputer tidak berjalan, kemungkinan ada dafar file yang salah yang kita sertakan. Coba rename kembali file tersebut ke asalnya (hilangkan ekstensi *.vir)
Setelah berhasil dan tidak ada tanda-tanda virus berjalan, perlu diingat bahwa kita hanya mematikan sumber-sumber virus dan kemungkinan masih banyak virus di komputer. Langkah selanjutnya bisa dilakukan dengan melakukan scan dengan antivirus + update terbaru untuk mencari virus-virus yang masih ada di komputer. Dan ini mungkin harus menunggu sampai antivirus mampu mendeteksi virus tersebut.
Cara diatas biasa saya gunakan ketika antivirus tidak mampu mendeteksi adanya virus dan biasanya berhasil. Dan pengalaman juga ikut membantu keberhasilan menemukan sumber virus ini. Jika masih bingung atau belum yakin dari daftar autorun yang ada, silahkan di tuliskan dalam komentar, sehingga kita bisa saling membantu dan melengkapi.

 

Halo para sobat blogger yang bae-bae dihari minggu yang cerah ini akhirnya kang fatur meluangkan waktu untuk berbagi ilmu kepada sobat koe yang bae, kali ini kang fatur hanya untuk mengambulkan permintaan dari para sobat yang meminta "Supaya Blog Transparan"

O.K sesuai janji kang fatur untuk memposting cara membuat blog transparan, ini tipsnya. Bagi yang memerlukan silahkan di coba. Walaupun ini adalah tip's yang tergolong mudah tapi siapa tahu sobat memerlukannya....

O.K kita langsung aja ikuti langkah-langkah berikut ini :

1. Seperti biasa login ke blog sobat
2. Dashboard/dasbor
3. Layout/tataletak
4. Edit HTML, centang "EXPAND TEMPLATE WIDGET" dan download lengkap template buat berjaga-jaga jika terjadi kesalahan.

Terus cari setiap kata :

background

contoh :

background: #000000;

Lalu ganti kode warnanya (teks yang tercetak merah) menjadi transparent, atau kurang lebi seperti ini

background: transparent;

atau sobat bisa juga melakukan dengan cara kedua yaitu buang saja value warna merah yang ada sehingga menjadi seperti ini :

background: ;

Cari di setiap posisi dimana sobat ingin posisi tsb terlihat bening/Transparan.
Contoh bagian Header, body, side bar, post footer, lower dll.
Nah mudah bukan ? setelah itu klik Save/simpan perubahan, dan lihat hasilnya....
Semoga tip's ringan ini bermanfaat bagi para sobat semua !!

Selamat mencoba ......,

 

Halo para sobat bloger khususnya kang fatur dateng lagi nie mao bagi bagi dengan sobat tercinta, pernah ada sobat yang meminta pada kang fatur tolong kang katanya saya ajarin cara membuat Background berbeda-beda seperti Backgrounnya kang fatur!!. Demi permintaan sobat akhirnya kang fatur bikin postingin yang berjudul "Bikin background yang berbeda untuk setiap halaman blog". Lumayan dech buat tampil agak lain dari yang lain. Narsis gitu ..., dan pengunjung ngga bakalan bosan menjelajah blog kita karena bisa tampil dengan background yang berbeda-beda di setiap halamannya O.K.

O.K. Jangan banyak banyol bentar lagi hari semakin malam, duduk udah pegal, kopi udah abis, rokok tinggal sebatang, perut udah laper, sebaiknya kita lanjutkan aja O.K.

Persiapan :

Memasang background utama :

Background utama yang kumaksud di sini adalah script backgroud yang terpasang langsung di Template blogmu, alias terpasang pada struktrur htmlnya. Ok kita lanjut yach.

1. Kopi kode di bawah ini, lalu edit dengan menggunakan worpad atau document txt.

body {background-image: url("http://alamat-gambar-sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed;
color:$textcolor;
font: x-small "Trebuchet MS", Trebuchet, Verdana, Sans-serif;
font-size/* */:/**/small;
font-size: /**/small;
}

2. Gantilah http://alamat-gambar-sobat yang berwarna merah dengan url gambar sobat.

3. Kode center no-repeat; (hijau) bisa sobat ganti dengan left atau right. Ini adalah kode yang mengatur tata letak gambar pada blog sobat, apakah mau di taruh di tengah, di kanan atau di kiri.

4. Kode no-repeat; boleh sobat hapus bila akan menggunakan gambar yang kecil dan memerlukan pengulangan agar gambarnya menjadi penuh.

5. Kalau sudah selesai ngeditnya , balik lagi ke blog sobat. Cari kode seperti di bawah ini :

body {
background:$bgcolor;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
}

5. Hapus seluruh kode di atas, lalu gantikan dengan kode hasil editan sobat tadi.

6. Jika udah beres, klik SAVE

Nah sampai pada tahap ini, sobat sudah bisa melihat perubahan background blog sobat, klik aja View Blog.

Memasang background untuk halaman depan :

Halaman depan adalah halaman atau tampilan utama blog sobat. Di halaman ini sobat menempatkan berbagai widget/aksesoris yang wajib ada di halaman depan, diantaranya semisal tab menu, link para sobat kita, label, buku tamu atau widget-widget lain yang kita anggap perlu demi memudahkan pengunjug menjelajah isi blog kita.

Kerja kita kali ini agak sedikit praktis, karena css background dipasang seperti layaknya kita menambah widget/aksesoris ke sidebar blog.

Langkah pertama :

a. Copy script di bawah ini :

body {background-image: url("
<style type="text/css">
body {background-image: url("http://alamat-gambar sobat"); background-position: left; background-repeat: no-repeat; background-attachment: fixed; }.bkgspc {margin-top:10px;color:#909090;font-size:10px;font-family:Arial;}.bkgspc a {color:#909090;}</style><div class="bkgspc" align="center">
Visit InfoServe for <a href="http://ade-tea.blogspot.com/" target="_blank">Blog Kang Fatur</a>.</div>

b. Edit dengan menggunakan wordpad atau document.txt.

c. Ganti http://alamat-gambar-sobat (kode yang berwarna merah ) dengan url gambar sobat

d. Ganti kode (yang berwarna biru) dengan left atau right, kode ini merupakan kode yang mengatur letak gambar sobat itu nantinya.

e. Kode no-repeat; bloeh sobat hapus kalo memakai gambar dengan ukiran kecil atau berupa motif yang memerlukan pengulangan untuk bisa tampil penuh pada seluruh halaman

Langkah ke-dua :

Sekarang kita memasuki tahap kedua dimana kita akan memasang kode hasil editan tadi ke sidebar blog. pasti udah pada bisa dech. Namun ngga ada salahnya kalau kang fatur uraikan kembali di sini. yuuuu ...

Seperti biasa :

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Add a Gadget.
5. Pilih HTML/JavaScript.
6. Beri nama CSS1 pada kolom titel atau kolom judul, ini hanya penamaan saja. Terserah terserah sobat dikasih nama apa. Yang jelas, nama ini untuk mempermudah kita mencari widget ini nanti di ruang edit html.
7. Pastekan kode hasil editan kita tadi ke ruang conten.
8. Terus Save.

Langkah ke-tiga :

Sekarang kita masuk pada langkah ke_tiga, dimana kita akan mengatur kode css backround yang kita pasang dengan nama CSS1 pada sidebar tadi supaya tampil pada halaman depan dan akan menghilang bila kita bergerak ke halaman selanjutnya. Udah siap??? let's go ...

1. Login ke blogspot.
2, Klik Customize.
3. Klik Layout.
4. Klik Edit HTML
5. Conteng kotak Expand Widget Templates
6. Cari kode seperti di bawah ini : Kode yang berwarna biru merupakan kode tambahan yang membuat css background hasil editan kita tadi tampil di halaman utama atau front page.

<b:widget id='HTML20' locked='false' title='CSS1' type='HTML'>
<b:includable id='main'>
<b:if cond="data:blog.url == data:blog.homepageUrl">
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:if>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

7. Klik save, lantas klik view blog untuk melihat hasilnya.

Ok, kita sekarang sudah punya 2 buah backround berbeda, istirahat dulu. Besok baru diteruskan lagi. Tapi kalo mau dilanjutkan ... yuuuuuk ...

Memasang background untuk halaman Selanjutnya :

Halaman selanjutnya adalah halaman yang akan tapil bila kita bergerak (misalnya ) dengan mengklik readmore atau menglik judul posting. Kalo kita ingin membuat backroundnya, maka langkah kita semakin ringan . Kan tadi sobat udah punya kode script yang dikasi nama CSS1 ? ingat kan. Nah kode tersebut sobat ganti namanya menjadi CSS2, ini umpamanya. Untuk memudahkan pencarian kode ini nantinya.

Namun biar lebih jelas, baiknya kang fatur uraikan sedikit di bawah ini. ok coy ...

1. Ikuti langkah pertama seperti pada saat kita membuat backround untuk halaman pertama tadi, dari point a sampai d. Yaitu mengedit kodenya dengan worpad atau document txt.

2. setelah selesai di edit, pasang ke side bar seperti biasa dan beri nama widget kita ini dengan nana CSS2.

3. Ikuti langkah ke-tiga dengan penempatan kode berwarna biru yang sedikit berbeda seperti tampak pada kode di bawah ini ; perhatikan baik-baik perbedaannya.

<b:widget id='HTML21' locked='false' title='CSS2' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:if>
</b:includable>
</b:widget>

4. Save dan view blog untuk melihat hasilnya.

Selamat mencoba semoga sukses dan bermanfaat di hati sobat

 

Untuk menepati janji saya pada postingan sebelumnya dengan tema Menambah 3 Kolom/Elemen Halaman di Atas Footer, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer sesuai dengan janji saya pada postingan sebelumnya.

Elemen Halaman selain memprcantik dan menambah berbagai asesoris di blog kita, juga merupakan fasilitas untuk memperkaya wawasan dan penampilan blog itu sendiri. seperti pemasangan label, arsip, shoubox, daftar link, photo, video dan lain-lain.

Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:



1. Seperti biasa Login ke blogger dengan id Sobat
2. Tuju menu Tata Letak
3. Pada tab menu, klik Edit HTML
4. Backup template anda, klik Download Template Lengkap
5. Selanjutnya tambahkan kode CCS berikut di atas ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Kang Fatur --- */
#lower {
border-top:10px solid #F781F3;
margin:0 0 10px 0;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
}

#lower-wrapper {
margin:auto;
padding: 0px 0px 20px 0px;
width: 960px;
background: #FBEFF5;
-moz-border-radius-bottomleft:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}

#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 10px 0px 0px 0px;
width: 25%;
text-align: justify;
font-size:100%;
color:#333;
line-height: 1.6em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.lowerbar {
margin: 0;
padding: 0;
}

.lowerbar .widget {
margin: 0;
padding: 10px 20px 0px 20px;
}

.lowerbar h2 {
background:#F781F3;
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
margin: -10px 0px 10px 0px;
padding: 3px 0px 3px 0px;
text-align: center;
color:#fff;
font-size:16px;
font-weight:bold;
text-transform:lowercase;
}

.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none;
}

.lowerbar li {
margin: 0px 0px 2px 0px;
padding: 0px 0px 1px 0px;
border-bottom:1px dotted #DF0101;
}

.lowerbar a {
color: #FA58F4;
text-decoration: none;
}

.lowerbar a:hover {
text-decoration: underline;
color: #F7BE81;
}

.lowerbar a:visited {
text-decoration: none;
color: #5858FA;
}
/* ---Modefied: http://www.coretan-guru-komputer.co.cc--*/
/* --- End Lower--- */

6. Selanjutnya cari kode berikut <div id='footer-wrapper'>
7. Kemudian Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'>
</b:section>
</div>

<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

8. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.

PENTING Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.

Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.

Untuk mengganti kode warna silahkan lihat tabel kode warna disini.

Selamat mencoba semoga berhasil dan bermanfaat. Amiin.