Cara Membuat Slide Gambar

1. Seperti biasa login dulu sob.

2. Pilih menu Tata letak > Add Gadget > HTML/Javascript.

3. Pastekan kode di bawah ini.(bisa juga sobat letakan dalam postingan pada bagian HTML)

<style>
#slider {
  position:absolute !important;
  top:50%;
  left:50%;
  width:650px;
  height:350px;
  margin-top:-175px;
  margin-left:-325px;
  -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
  box-shadow: 0px 0px 5px rgba(0,0,0,.5), 0px 0px 20px rgba(0,0,0,.2);
 }
  
 .nivoSlider img {
  position:absolute;
  top:0;
  left:0;
  display:none;
 }
  
 .nivoSlider a {
  border:0;
  display:block;
 }
  
 .nivo-slice {
  display:block;
  position:absolute;
  z-index:5;
  height:100%;
 }
  
 .nivo-box {
  display:block;
  position:absolute;
  z-index:5;
 }
  
 .nivo-caption {
  position:absolute;
  left:75px;
  bottom:29px;
  width:498px;
  padding-top:13px;
  padding-bottom:13px;
  z-index:8;
  border:1px solid #000;
  border-left-color:rgba(0,0,0,.5);
  border-right-color:rgba(0,0,0,.5);
  -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  box-shadow: inset 0px 1px 0px rgba(255,255,255,.15), 0px 1px 3px rgba(0,0,0,.7);
  background: -webkit-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -moz-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -o-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: -ms-linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  background: linear-gradient(top, rgba(72,73,76,0.9) 0%,rgba(57,58,60,0.9) 50%,rgba(50,51,53,0.9) 51%,rgba(38,39,40,0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e648494c', endColorstr='#e6262728',GradientType=0 );
  -webkit-border-radius:4px;
  -moz-border-radius:4px;
  border-radius:4px;
 }
  
 .nivo-caption p {
  margin:0;
  font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size:14px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  text-shadow:0px -1px 0px #000;
 }
  
 .nivo-caption a {
  display:inline !important;
  }
  
 .nivo-html-caption {
  display:none;
 }
  
 .nivo-directionNav a {
  position:absolute;
  bottom:30px;
  z-index:9;
  cursor:pointer;
  text-indent:-9999px;
  width:45px;
  height:39px;
  background-image:url(http://4.bp.blogspot.com/-nVH_wLuXb7c/UB62lKkUv1I/AAAAAAAABVM/_FjJIm1wIrM/s1600/
labstrike-arrows.png);
  background-repeat:no-repeat;
}
  
 .nivo-prevNav {
  left:75px;
  background-position:0 0;
  box-shadow: 1px 0px 0px rgba(255,255,255,.2), 2px 0px 0px rgba(0,0,0,.4);
 }
  
 .nivo-nextNav {
  right:77px;
  background-position:-45px 0px;
  box-shadow: -1px 0px 0px rgba(255,255,255,.2), -2px 0px 0px rgba(0,0,0,.4);
 }
  
</style>  
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/
jquery.min.js"></script>
<script src="http://www.code.helperblogger.com/jquery.nivo.
slider.js"></script>
<script type="text/javascript">
    $(window).load(function () {
        $('.nivoSlider').nivoSlider({
            effect: 'sliceDown',
            directionNavHide: false,
            captionOpacity: 1,
            controlNav: false
        });
    });
</script>
  
<div id="slider" class="nivoSlider">
    <img src="http://1.bp.blogspot.com/-21F_RkIo-DM/UB6wSDoVrtI/AAAAAAAABUc/zlWeqKG5XnA/s1600/labstrike-image1.png"
    alt="Slider Image 1" title="This Is An Example Of A Caption">
    <img src="http://2.bp.blogspot.com/-9vn5zCDd06Q/UB6weSSfN4I/
AAAAAAAABUk/jz9jB35Ejh4/s1600/labstrike-image2.png"
    alt="Slider Image 2" title="You Can Add  Anything Here">
    <img src="http://1.bp.blogspot.com/-W2bnzOGjGow/UB6wnRIq24I/AAAAAAAABUs/KehuTNwZcrQ/s1600/
labstrike-image3.png"
    alt="Slider Image 2" title="Like Image Description">
    <img src="http://2.bp.blogspot.com/-bpA0v0ayP4o/UB6wyezZ1XI/AAAAAAAABU0/i6u4Ci-JeY8/s1600/
labstrike-image4.png"
    alt="Slider Image 2" title="Your image Information">
    <img src="http://1.bp.blogspot.com/-m2os5MJOs8s/UB6w-NofxeI/AAAAAAAABU8/E2tMD9nLKYY/s1600/labstrike-image5.png"
    alt="Slider Image 2" title="Other opinion">
</div>

* untuk tulisan yang berwarna hijau menunjukan tinggi dan lebar,silahkan atur sendiri sesuai 
   selera anda.
* untuk tulisan yang berwarna merah menunjukan URL image,silahkan anda ganti dengan             URL anda.
* untuk tulisan yang berwarna biru menunjukan nama slider,silahkan anda ganti sesuai  
   selera4. Simpan dan Lihat Hasilnya..

Read More..

Cara Menampilkan Hanya Judul Post Saja

1. Langkah pertama seperti biasa login dulu ke akun blog sobat
2. Pilih menu Rancangan / Template,kemudian klik menu Edeit HTML.
3. Cari kode ]]></b:skin>,gunakan CTRL+F biara lebih mudah.
4. kemudian copy kode di bawah dan pastekan tepat di bawah kode ]]></b:skin>

<style type='text/css'>
     <b:if cond='data:blog.pageType != "item"'>
     <b:if cond='data:blog.pageType != "static_page"'>
     .post-body{display:none;}
     </b:if>
     </b:if>
     </style>

5. Simpan Dan Lihat hasilnya.

Read More..

Cara Membuat 2 Kolom widget

1. Login dulu ke akun blog kalian.
2. Pilih menu Template > Edit HTML
3. Cari kode ]]></b:skin>,lalu letakan kode di bawah tepat di atas kode ]]></b:skin>.

.bawahpost {{margin:5px 0px 10px 0px;padding:5px 0;clear:both;}}

.bawahkiri {float:left;width:305px;margin-right:5px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}
.bawahkanan {float:right;width:305px;border: 1px solid #EFF0F1; padding: 5px; background: #ffffff;-moz-border-radius:5px;}

4. Setelah itu cari kembali kode <data:post.body/> dan letakan kode di bawah sesudah kode <data:post.body/>.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='bawahpost'>
<div class='bawahkiri'>
Kode widget kiri</div>
<div class='bawahkanan'>
Kode widget kanan
</div>
</div>
</b:if>

Keterangan :
Untuk width atau tinggi yang berwarna Merah di atas bisa kalian atur dan sesuaikan dengan blog kalian.

5. Simpan dan Lihat hasilnya

Read More..

Cara Membuat Gambar Posting Berputar

1. Seperti biasa kalian login ke akun blog.

2. Pilih menu Template > Edit HTML ( centang expand widget templates ).

3. Cari kode ]]></b:skin> kemudian copy kode di bawah dan pastekan di atas kode tersebut.

a img, img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover, img:hover{border:2px solid; -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px; 
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

4. simpan dan Lihat hasilnya.

Read More..

Cara Membuat Link Berkedip

Cara Membuat Link Berkedip Bintang Saat Di Sentuh Mouse,memang tidak ada habisnya memodifikasi tampilan blog demi menciptakan blog yang lebih bagus namun banyak keluhannya dengan menampilkan berbagai macam efek akan berdampak pada loading blog,namun kalian tidak usah risau tampilan link berkedip ini cukup ringan jadi tidak akan berdampak pada loading blog berat.

Mempunyai keindahan tersendiri ketika mouse mendekati link maka percikan bintang akan keluar itulah yang akan kalian nikmati jika menerapkan kode link berkedip bintang yang telah saya siapkan,sebagai salah satu contoh bisa kalian lihat pada blog saya yang super hancur ini hehehehe,penasaran nih seperti apa sih bintang berkedip itu maka silahkan lihat tutorialnya di bawah ini.

1. Login dulu ke akun blog kalian.

2. Pilih menu Template > Edit HTML ( Centang Expand Widget Templates ).

3. Cari kode </head> kemudian copy kode di bawah dan pastkena tepat di atas kode </head>.

<style>
a:hover { text-decoration:blink;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN34QIDM9MyxL_-gUl-LheBLTvEQMwPpJ86gHXMM7xQngPkk3RWGTD7p0bPD14ZYSCqMSvQ8MEjpgpMx981F1TBnRPs41iSndmvCucGJb8wdUoIdwQ6Uxvgkq8pP0bxgpDtbT1xQhyjWU/s1600/hansmjlkcommunity.gif); }
</style>

4. Simpan Dan Lihat Hasilnya

Read More..

Membuat Link Download Pada Blog

Banyak situs yang menyediakan link untuk suatu alat download seperti mediafire ziddu dan banyak lagi yang lainnya,pada kesempatan ini saya akan berikan caranya yang lengkap buat kalian untuk membuat link download dalam hal ini kita akan gunakan situs yang gratis seperti ziddu yang akan saya bahas untuk mempersingkat waktu kita langsung menuju ke TKP.

1. Silahkan masuk ke situs www.ziddu.com untuk melakukan registrasi.
2. Setelah itu akan muncul gambar klik Register pada bagian pojok kanan atas.

3. Kemudian kalian akan di arahkan ke kotak pengisian Registrasi isi sesuai perintah.

4. setelah selesai pengisian kemudian centang kotak kecil I Agree Terms and Conditions kemudian klik Submit.

5. Akan muncul gambar seperti di bawah klik Go to my Account.

6. Selanjutnya akan nampak gambar untuk proses upload file.

7. Pilih file yang akan di upload dengan mengklik Choose file,setelah kalian memilih file yang akan di upload kemudian klik Upload ( Untuk tulisan Multiple Files Upload menunjukan banyaknya file yang akan kalain upload ).

8. Tunggu beberapa saat hingga proses upload selesai,jika proses upload selesai akan keluar gambar seperti di bawah.

9. Jika gambar di atas sudah keluar berarti proses upload selesai sekarang kalian cukup copy linknya yang di beri tanda panah merah.http://www.ziddu.com/download/22163044/hjsplit.zip.html.

Read More..

Cara Memodifikasi Kotak Komentar

1. Login ke blogger

2. Dashboard > Template > Edit HTML

3. Masukan kode CSS berikut diatas kode ]]></b:skin>

#threaded-comment-form p {
    position: relative;
    background: #2c3a5e;
    border: 3px solid #000066;
    padding: 10px;
    font-size: 11px;
    line-height: 1.6em;
    color: #fff;
    margin-top: 10px;
    font-size: 11px;border-radius:2px;
    }
#threaded-comment-form p::after, #threaded-comment-form p::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    }
#threaded-comment-form p::before {
    border-top-color: #000066;
    border-width: 15px;
    left: 10%;
    margin-left: -35px;
    }
#threaded-comment-form p::after {
    border-top-color: #2c3a5e;
    border-width: 10px;
    left: 10%;
    margin-left: -30px
    }

5. Simpan dan lihat hasilnya akan seperti ini...

Read More..

Cara Membuat About Author Box

1. Login ke blogger

2. Dashboard > Template > Edit HTML

3. Masukan kode CSS berikut diatas kode ]]></b:skin>

.profile-img{float:left;display:block;width:90px;height:90px;margin:10px 10px 0 0;background-size:cover;background-repeat:no-repeat;background-position:center center;border-radius:99em;border:3px solid #eee;box-shadow:0 3px 2px rgba(0,0,0,0.3)}
.profile-data{margin:0; letter-spacing:.1em; font-size:90%; font-weight:bold; line-height:1.4em}
.profile-datablock{margin:.5em 0 .5em .0em}
.profile-textblock{text-align:left; margin:0.0em; line-height:1.6em}
.profile-link{font-weight:bold}

4. Simpan Template
5. Pergi ke Tata Letak > Tambahkan Gadget dan masukan kode HTML berikut

<div class="profile-textblock">
<img alt="SulfiadiAsmar" class="profile-img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvHTl7aX1_ShbR7uzCKCaculHG_liVzQnwse97C9uEaCZ5txJ9jQupoYc4LPF3D1esYCwCN14BD2U5Bd21HYZe8uMmF9KL31wGdbXzbCptnS9FrFBrC5OeGMwJz1NCrrU8DQA3hF4oVM/s1600/3.png"title="Sulfiadi Asmar" width="100" height="100" />Saya (Sulfiadi Asmar) merupakan seorang blogger pemula yang ingin berbagi pengetahuan dengan semua melalui media web/blogger
Anda dapat menemukan saya di : <br/>
» <a href="https://www.facebook.com/uphy.poetrazhoppenk" title="Facebook" target="_blank">Facebook</a><br/>
» <a href="https://twitter.com/mestiqui" title="Twitter" target="_blank">Twitter</a><br/>
» <a href="https://plus.google.com/104262953568171240230" title="Google+" target="_blank">Google+</a>
</div>

Keterangan :

• Warna merah Anda ganti dengan nama Anda
• Warna biru Anda ganti dengan url foto Anda
• Warna pink Anda ganti dengan nama blog anda
• Warna orange Anda ganti dengan url social Anda

6. Simpan Widget dan lihat hasilnya akan seperti ini...

Read More..

Cara Memodifikasi Tampilan Search

1. Login ke blogger > template > edit html.

2. Cari kode ]]></b:skin> dan letakan kode berikut dibawah kode tadi.

.search-mestiquicom{float:right;width:296px;margin:5px 0 0 0;border:2px solid #393939;}.search-mestiquicom input{width:196px;height:26px;line-height:26px;padding:0 12px;float:left;font:normal 12px Arial,sans-serif;border:0;background:#eee;}.search-mestiquicom input:focus{outline:0;background:#fff;box-shadow:2px 2px 5px rgba(0,0,0,.8) inset}.search-mestiquicom button{overflow:visible;float:right;border:0;
padding:0;cursor:pointer;height:26px;width:76px;font-weight:bold;color:#fff;text-transform: uppercase;background:#393939;;text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);}.search-mestiquicom button:hover{background:#da290b}

3. Simpan template Anda.
4. Setelah itu masuk ke Tata Letak > Tambahkan Gadget > lalu masukan kode dibawah ini.

<form action='/search' class='search-mestiquicom' method='get'>
<input id='a' name='q' placeholder='Cari apa...' type='text'/>
<button type='submit'>SEARCH</button>
</form> 

5. Simpan gadget dan lihat hasilnya akan seperti ini...

Read More..

Memodifikasi Popular Post

1. Login ke blogger anda.

2. Klik Template > Edit HTML.

3. Anda cari kode ]]></b:skin> dan letakan kode di bawah tepat di atasnya.

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaDrKTE54IhmyE8Pj8kckHtigPgcAlX0ypWWQiw1v-rHxl_90z0fiIspIFCKtKQ2ppxozrT5bWVQLwEMA0KGqMClndL33t9C8tJVtck7DhtWW_r6Duj8Hjaetma7wiEFv9q09tBZ9dFLM/s1600/1.gif)  no-repeat scroll 5px 10px;
  list-style-type: none;
  margin:0 0 5px 0px;
  padding:5px 5px 5px 20px !important;
  border: 1px solid #ddd;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}
.popular-posts ul
  li:hover {
  border:2px solid #6BB5FF;
background:#000000;
}
.popular-posts ul
  li a:hover {
  text-decoration:none;
color:#FFF8DC;
}
.popular-posts .item-thumbnail 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);
}

4. simpan dan lihat hasilnya akan seperti ini.....

Read More..

Modifikasi Tampilan Label

1. Blogger > Dashboard > Template > Edit HTML
2. Taruh kode berikut di atas kode ]]></b:skin>

#Label1 .cloud-label-widget-content {text-align:center;font-weight: bold;padding: 5px 0}
#Label1 .cloud-label-widget-content span {display: inline-table; line-height: 1.2;}
#Label1 .cloud-label-widget-content span a {padding:4px 5px;color:#fff}
#Label1 .label-size {margin:4px 0;}
#Label1 .label-size span {background:#E95D0C;padding:4px 5px;color:#fff}
#Label1 .label-size-1 a {background:#ff8c00;font-size:11px;}
#Label1 .label-size-2 a {background:#556b2f;font-size:13px;}
#Label1 .label-size-3 a {background:#cd5c5c;font-size:14px;}
#Label1 .label-size-4 a {background:#B32A32;font-size:16px;}
#Label1 .label-size-5 a {background:#66CC00;font-size:18px;}
#Label1 .cloud-label-widget-content span a:hover {background:#B32A32;}

3. Simpan Template
4. Pergi ke Tata Letak > Tambahkan Gadget > Tambahkan Label dan atur tampilannya menjadi Cloud

5. Simpan

Dengan beberapa langkah diatas, Anda sudah sukses modifikasi label blog keren penuh warna, semoga dengan cara ini blog Anda akan tambah keren, semoga bermanfaat.

Read More..

Cara Membuat Read More Pada Blog

1. Tentunya Anda harus membuka akun blog kawan sendiri.
2. Bila sudah masuk blogger (dasbor) pilihlan elemen Template lalu klik Edit HTML lalu klik Lanjutkan.(klik disini bila belum paham tampilan blog)
3. Centang Expand Template Widget (ada tanda kotak disamping tulisan itu)
4. Lalu carilah kode </head> (gunakan Ctrl + F, untuk mempercepat pencarian) lalu salin/copylah Kode di bawah ini (klik Spoiler berikut) dan tempatkan pas diatas kode</head> tadi.

Klik Spoiler Berikut: 

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[

function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

5. Sudah ditempatkan kode di atas bukan. Selanjutnya cari kode <data:post.body/>  kemudian hapus kode <data:post.body/> tersebut dan gantikan kode scrip di bawah ini

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>

6. klik simpan dan lihat hasilnya akan seperti ini...

Kamis, 13 Maret 2014

Cara Sharing Printer Pada Windows 7

1. Klik start dan pilih devices and printers. 2. Kemudian akan muncul tampilan seperti gambar dibawah ini. Dan akan terlihat beberapa...

Read More

Read More..