DOWNLOAD GAMES AND SOFTWARE: tutorial blog

Halaman

    Social Items

Home / tutorial blog
Memasang Translate di Blog ternyata sangat perlu untuk dipasang pada blog kita, karena mungkin saja ada pengunjung dari negara asing yang kebetulan berkunjung diblog anda, disisi lain mungkin keyword yang digunakan sesuai dengan ini postingan namun jika bahasa yang digunakan pada blog tidak sesuai sudah pasti visitor tidak akan lama mengunjungi blog anda.

Kali ini saya akan menjelaskan bagaimana cara memasang Widget Google Translate Standar dan Widget Google Translate Dengan Flag pada blog. widget satu ini terkesan keren dan unik untuk dipasang karena terlihat beberapa bendera negara asing. untuk lebih jelasnya hasilnya seperti pada gambar dibawah ini:
Untuk Memasang Translate di Blog ikuti langkah-langkah dibawah ini:

1. Login ke Blogger anda.
2. Masuk ke Tata Letak » Add Gadget » Tambah HTML/Javascript.
3. Masukkan kode di bawah ini pada kolom HTML/Javascript.

 <style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTibqSwgjw6fcqmQL2wPjdeacrUqKF2qxPZYBdI63eR3_iDPBGFfpteJSvpEbIi2Z_ggRHMojE4TRhW8iqtyM2kPqWhg4CvH6g1SvJyCpwlf4CWaHcsNbq0MMEUobK4S2Wvb6bx7ReJY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-Z-5iofBDNQ5v7z_557aKtTziKFQe18QZPvH00Rqx_CB9k2EuoP-HbaoH4c2RX_HmFY037Q-1ZN7o1dR4YAn4MDJfKPJBQIF8r5kT6iw5kNL9PLbLnKs9WfO5F_H87Fef2C3CXS_2oM/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjkdD5LwKg5TBnKB4LDtkSSZruuW7OzVRuzbi8B3Rl3cqUQ3ScwaVyCDnFdZt83UcR3wcv-lHJvTJoXbNdCc1SssRrc32My_F03QvzjaBeh6fPZFO4IkLFlOAZwsR2kOnB9Nq1ID1eD3M4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_vRe_xx643kE7XoXMemkSfQ3sfzXiajKi4apD2OFJCEN41HG49trYAGZL3orVpUgVvTvYXUPLC1cb2FWg4yr7YDem1Y7JJ_JK5b8okNEKnbWclVHkXs07NtXf-XrbHE_EOpR7FVH0wIff/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgunDx2M3DWmg_3vCvLg2LvzeqliuZs7BGbICLpNsYaY8omhmNDcWyoP-od1_Zd6701lazDP10RdrngqY6AsZrU81tguRcwHWuWlSKrYsZ7ECVQ7LF3kFGcroLwwzFII3AE60aDdha1yc0/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOjLQu9zncMqPJw9KcKPDVOutXHoE137pAPEIDhpwq5jA_xbu687-I6W_8vLQodJXWN7LxRGe8ogP4nrscwliprKPTAPUZbHZqXF5ArkV0IYHfIMizCVjWPX1k3H97A34WjK2vJrhT4rc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<br /><br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuaSbRJbHeeIU3XvldS13zgPu1DXMhr3hDYLA11_qVMbx7rbJAWwtZqmtjQaui1sXLXweSxFktkgRh813yt_IQLv98edU5NWT5BZEmvYAcXsiVaWVjPFxHzwNVNXRXC1txGLikchQSQOA/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit-sOx1XUTTjQHChGZp8toB09kjsa8hU_bf0EcDUAD7kNXnYXzeGr2XzjDQjC21IqR8OjuDgD7Kw1PtoQzkDpWOoNXkZkDCuEyRYpioSqF1WkS0eqXaectrotIvS4B3mDGWyZ22a98Pfc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyV3fGY75elsReoo-ayW3da2mox_gVboIxMfTArlM5YbGnKZtk2I78YwmHeLWJ2puQ8DbypJzvOCSSQop2nUdV6pXPb3cJ-QtUmBFpcoLwTDaHM1hEnw5V4EbTDVjtCbOQZmb5oloIILWW/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJdMevpop5EuIRfFVYJHXfFFiIfe1W5EpRQtiuM4jCzJkSJi33eq-ohCDrRO9uOmcP2vyK_6rDxLa7dIpuN7uGsLn5bEjPSkLxn7hL-NHheBF3W4yHmzBWDDrNRBK9izSzyv4jRVOcIP8/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwQN49w6r2SwoT8I6M85O45o9B-uwQGI6O-oaHxAUHa1JkCAOEF_FhyHJIIL304Ew-JxoFiq_uKigqCK57M8x0cP7HChaeaqBaFx7qmqV-DljqD_07vCCl78OGpRfD32-RhKjeKKbd9Qc/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY1nnz2nSSmZHPaLHjmGuaNovw3YQqtN63EdVfhNfUOrHKMsWu0V3V6EMtnMFKXt9hLszUnJe_dKlhD2ucQbjJbkROu9KOkn55ZHeR_x0_NofAafjkQ9yw2wFb6y-NWGT2D_DcYR9hg0A/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.softwaremaniapc.com/2013/09/cara-memasang-translate-di-blog.html" target="_blank" title="Google Translate">Get This Widget</a></div>
4. Selesai dan simpan, silahkan lihat hasilnya.

Terima kasih sudah berkunjung di blog sederhana ini, semoga postingan diatas dapat bermanfaat, silahkan mencoba

Cara Memasang Translate di Blog

Cara Membuat Tombol Back to Top Keren di Blog -  Banyak desain back to top yang bisa kita pasang pada blog, namun kali ini saya akan share Smooth Back to Top dengan jQuery. adapun fungsi dari Tombol Back/Scroll to Top Dengan Efek Fading & Smooth untuk Blogger adalah cara pintas untuk kembali ke halaman atas. Dengan Tombol Back to Top maka untuk kembali keatas sangat mudah, kita tidak perti pake scroll karena tinggal klik tombol langsung otomatis kembali keatas.

Cara Membuat Tombol Back to Top Keren di Blogger tentunya sangat membuat nyaman pengunjung, ini sebagai alternatif yang sangat cepat untuk membaca artikel yang ada dalam blog. apa lagi yang pakai laptop yang gak pake mouse ini tentunya sangat bermanfaat. untuk membuatnya juga sangat mudah untuk dipraktekkan. 

Untuk penempatan Tombol Back to Top / Kembali ke atas yang akan saya share kali ini ada dua cara yaitu berada di bawah samping kanan dan bawah berada di tengah. Sobat blogger juga bisa menyesuaikan warna yang tepat untuk template blog agar terlihat lebih menarik dan keren. 

Nah,,, untuk memasangnya sobat ikuti Tutorial dibawah ini, yuk simak bareng!!!!
1. Login akun Blogger sobat.
2. Pada Dashboard pilih Template » Klik Edit HTML
3. Sekarang sobat cari kode ]]></b:skin>, jika sudah ketemu Letakkan kode berikut ini dibawah kode ]]></b:skin>
<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#1E90FF;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:45px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 30px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-4px;left:15px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
</style> 
Kode diatas hasilnya Tombol Back to Top berada di bawah samping kanan, Berikut screenshootnya:

 Atau dengan kode dibawah ini:

<style>
#backtop{cursor:pointer;position:fixed!important;position:absolute;bottom:-70px;z-index:99;background-color:#1E90FF;border:2px solid #333;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #333;width:35px;height:45px;overflow:hidden;text-indent:-999px;-webkit-border-top-left-radius: 30px;
-moz-border-radius-topleft: 30px;
border-top-left-radius: 10px;}
#backtop::after{content:&quot;&quot;;position:absolute;top:-5px;left:10px;width:0;height:0;border-width:18px 7px;border-style:solid;border-color:transparent transparent #f7f7f7 transparent;}
#backtop{left:50%;}
</style>
Kode diatas hasilnya Tombol Back to Top berada di bawah dan tepat di tengah, Berikut screenshootnya:


4.Setelah sobat pilih salah satu kode diatas, Selanjutnya letakkan kode berikut ini diatas kode </body>
div id='backtop'>Back to Top</div>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(){if($(this).scrollTop()>100){$("#backtop").removeAttr("href");$("#backtop").stop().animate({bottom:"-3",right:"0"},{duration:800,queue:false})}else{$("#backtop").stop().animate({bottom:"-50",right:"0"},{duration:1000,queue:false})}});$(function(){$("#backtop").click(function(){$("html, body").animate({scrollTop:0},"slow");return false})});
//]]>
</script> 
5. Simpan Template dan Lihat hasilnya.

Sekian dulu share kali ini Cara Membuat Tombol Back to Top Keren di Blog, semoga dapat bermanfaat. Silahkan sobat berkreasi untuk merubahnya sesuai dengan keinginan. Selamat Mencoba. Sobat juga bisa baca : Cara Membuat Tombol Back to Top Keren dengan gambar sendiri di Blog.

Cara Membuat Tombol Back to Top Keren di Blog

Cara Menghilangkan Kode Verifikasi Kata / Captcha Komentar Blog - Verifikasi Kata atau dalam bahasa gaulnya CAPTCHA (Completely Automated Public Turing Test To Tell Computers and Humans Apart). Captcha adalah suatu bentuk uji tantangan-tanggapan (challange-response test) yang digunakan dalam sebelum post komentar untuk memastikan bahwa komentar itu ditulis oleh manusia bukan robot. Kode captcha biasanya kombinasi antara angka dan huruf.

Kalo bahasa yang saya gunakan paling mudah untuk mengingatnya biasa dengan sebutan Verivikasi kata komentar blogger. Kode Verifikasi Kata / Captcha Komentar di Blog biasa kita jumpai disaat ingin berkomentar di blog tetangga, hal ini kadang sangat menjengkelkan disaat ketik kodenya / Verifikasi Kata namun selalu gagal akhirnya males untuk berkomentar. kurang lebihnya seperti gambar dibawah ini:

Nah,, salah satu hal yang membuat pengunjung malas berkomentar adalah Kode Verifikasi Kata / Captcha Komentar Blog karena menyulitkan pengunjung untuk berkomentar. Jika sobat blogger ingin menghilangkannya, silahkan ikuti tutorial dibawah ini:

1. Login ke akun blog sobat.
2. Sobat klik panah kecil dan pilih setelan seperti dibawah ini:

3. Jika sudah seperti diatas, sekarang pilih pos dan komentar seperti gambar dibawah ini:

4. Pada tampilkan verifikasi kata yang semula ya sobat ganti tidak.
5. Terakhir sobat klik simpan pada pojok kanan atas. nih gambarnya:


Selesai, sekian dulu share kali ini Cara Menghilangkan Kode Verifikasi Kata / Captcha Komentar Blog semoga dapat bermanfaat, terima kasih sudah berkunjung di blog sederhana ini. Selamat mencoba.

Cara Menghilangkan Kode Verifikasi Kata / Captcha Komentar Blog

*Cara Membuat Profil Blog Keren di Blogger* - Kali ini kita akan belajar bareng Cara Membuat Widget Profil Blog Keren di Blogger, tips trik ini saya dapatkan di blog zainelhasany.com widget profil defaul blogger biasanya cukup simple dan tidak bisa dikasih sepucuk kata-kata mengenai profil admin. oleh karena itu kali ini saya akan share agar Profil Blogger kelihatan keren.

Screenshot:

Defaul Blogger
Menggunakan Css

Nah,,, Jika sobat tertarik untuk memasangnya agar widget profil sobat keren, yuk simak tutorial Cara Membuat Widget Profil Blogger Keren di Blog dibawah ini:

1. Login akun blogger Sobat.
2. Pilih Tata Letak » Tambah Gadget » HTML/JavaScript
3. Masukkan kode berikut ini kedalam kotak HTML/JavaScript

<style>
#aboutme {
  background-color:#fff;
  -moz-box-shadow:0 0 3px #e0e0e0;
  -webkit-box-shadow:0 0 3px #e0e0e0;
  box-shadow:0 0 3px #e0e0e0;
  border:1px solid #666;
  padding:3px;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  margin:0 auto;
  margin-top:15px;
  padding:10px;
  width:270px;
  height:auto;
}
.name-author {
  margin:0 0 7px;
  display:block;
  width:100%;
}
.name-author h3 {
  position:relative;
  display:inline;
  background-color:#0097BD;
  color:#FFF;
  font-family:Segoe UI;
  font-size:15px;
  font-weight:bold;
  margin:0 0 0 -3px;
  padding:3px 5px 3px 10px;
  width:100%;
  -moz-text-shadow:0 1px 0 black;
  -webkit-text-shadow:0 1px 0 black;
  text-shadow:0 1px 0 black;
}
.name-author h3:after {
  content:" ";
  width:0;
  height:0;
  position:absolute;
  left:100%;
  top:0;
  border-width:13px;
  border-style:solid;
  border-color:transparent transparent transparent #0097BD;
}
@-webkit-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-moz-keyframes name-author {
  0% {color:white}
  20% {color:Orange}
  40% {color:pink}
  60% {color:Orchid}
  80% {color:gold}
  100% {color:white}
}
@-keyframes name-author {
  0% {color:white}
 20% {color:Orange}
 40% {color:pink}
 60% {color:Orchid}
 80% {color:gold}
 100% {color:white}
}
/* Penerapan efek pada element yang akan diberi efek*/
.name-author h3 {
/* Waktu 10 detik */
  animation:10s infinite name-author linear;
  -webkit-animation:10s infinite name-author linear;
}
.aboutme-text {
  font-size:12px;
  text-align:left;
  margin:0;
}
.aboutme-image-container {
  float:left;
  width:70px;
  height:70px;
  margin-right:75px;
        z-index:1;
}
.aboutme-image-container {
  margin:-20px 0 5px 0;
  padding:9px;
  position:relative;
  -webkit-border-bottom-right-radius:10px;
  -webkit-border-bottom-left-radius:100%;
  -moz-border-radius-bottomright:100%;
  -moz-border-radius-bottomleft:100%;
  border-bottom-right-radius:100%;
  border-bottom-left-radius:100%;
  -webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  -moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;
  background-color:#59B52E;
}
.aboutme-image-container:before {
  content:' ';
  position:absolute;
  top:0;
  left:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:0 0 10px 10px;
  border-color:transparent transparent #333 transparent;
}
.aboutme-image-container:after {
  content:' ';
  position:absolute;
  top:0;
  right:-10px;
  width:0;
  height:0;
  border-style:solid;
  border-width:10px 0 0 10px;
  border-color:transparent transparent transparent #333;
}
.aboutme-image-container img {
  width:100%;
  height:100%;
  border:2px solid yellow;
  border-radius:100%;
  -webkit-transition:all 0.3s ease;
  -moz-transition:all 0.3s ease;
  transition:all 0.3s ease;
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
.aboutme-image-container img:hover {
  border:2px solid GOld;
  cursor:pointer;
  margin-left:0;
  -moz-transform:scale(1.2) rotate(360deg);
  -webkit-transform:scale(1.2) rotate(360deg);
  -o-transform:scale(1.2) rotate(360deg);
  -ms-transform:scale(1) rotate(-360deg);
  transform:scale(1.2) rotate(360deg);
  -moz-box-shadow:1px 1px 4px #000;
  -webkit-box-shadow:1px 1px 4px #000;
  box-shadow:1px 1px 4px #000;
}
</style><div id='aboutme'>
<div class='aboutme-image-container'>
<img src="http://i1261.photobucket.com/albums/ii585/zainelhasany/9894d29b.jpg" />
</div>
<div class='name-author'>
<h3>Zain Elhasany</h3></div>
<div class='aboutme-text'>Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. <a href="YOUR LINK BLOGGER PROFIL" style="color: #666;">...Read More</a>
</div></div>

Keterangan:

#fff; adalah Baground kotak widget profil sobat.
270px; adalah Lebar kotak widget Profil sobat.
http://i1261.photobucket.com/albums/ii585/zainelhasany/9894d29b.jpg adalah URL gambar/foto sobat.
Zain Elhasany adalah nama profil sobat.
Belajar ngeblog jangan setengah-setengah, nanti hasilnya juga setenagh-setengah. ada kalanya kita mencoba berekspresi dengan CSS keren seperti ini untuk merespon otak agar tetap bisa berkarya. hehe. adalah kalimat buat profil sobat.
YOUR LINK BLOGGER PROFIL adalah URL profil sobat bisa About Us atau profil Google+

4. Save dan lihat hasilnya. sobat bisa merubah bentuknya sesuaiketerangan diatas.

Sekian dulu share Cara Membuat Widget Profil Blog Keren di Blogger, semoga dapat bermanfaat. Selamat mencoba. Good Luck

Sumber: http://www.zainelhasany.com/2013/07/cara-membuat-widget-profil-blogger.html

Cara Membuat Profil Blog Keren di Blogger

*Cara Memasang Banner iklan 125x125 di Blog* - Memasang Kotak Iklan Ukuran 125x125 keren di blog dengan tambahan kode css akan menjadi daya tarik tersendiri buat calon pemasang iklan di blog kita. dengan dsain yang menarik menjadi pandangan terarahkan pada banner iklan tersebut. Nah,,, ini yang  harus sobat blogger lakukan disaat promo banner iklan di blog atau blogspot. 

Untuk pemasangan kotak iklan ukuran 125x125 biasanya dipasang di sidebar bagian atas agar kelihatan visitor. Cara memasangnya cukup mudah kok,,, sobat blogger pasti bisa karena cukup mudah. untuk melihat hasilnya seperti pada sidebar blog ini kurang lebihnya seperti gambar dibawah ini:

Screenshot:

Jika sobat tertarik dengan Cara Memasang Banner iklan 125x125 di Blog seperti gambar diatas, silahkan ikuti tutorial dibawah ini, ada dua cara yang akan saya share kali ini yaitu efek yang keren dengan Css dan pasang Banner biasa.:

Cara Membuat Kotak Iklan 125x125 4 Kolom Di Blog Dengan Css

1. Masuk ke Akun Blog sobat.
2. Klik Template Lalu klik Edit HTML
3. Sobat cari kode masukkan kode ]]></b:skin> lebih mudah dengan Ctrl+F, Lalu letakkan kode dibawah ini tepat di atas kode ]]></b:skin>
/*Kotak Iklan 125x125*/
#kotak-iklan-125x125 {
margin: 0px;
padding: 1px;
text-align: center; }
#kotak-iklan-125x125 img {
margin: 3px 3px 6px 6px;
padding: 1px;
text-align: center;
border: 3px dotted #000;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:10px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}
#kotak-iklan-125x125 img:hover {
margin: 3px 3px 6px 6px;
padding: 3px;
text-align: center;
border: 3px solid #ff0000;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:10px;
}
4. Simpan terlebih dahulu
5. Setelah sobat simpan, sekarang Klik Tata Letak >>Tambahkan Gadget >> HTML/Javascript.
Masukkan kode dibawah ini dalam kotak HTML/Javascript.

<center><div id="kotak-iklan-125x125">
<a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a>
<a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a>
<a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a>
<a target="_blank" href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html"><img alt="banner ads" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" border="0"/></a>
</div></center>

Keterangan:
Kode yang berwarna Merah Silahkan sobat ganti dengan URL Banner sobat.
Kode yang berwarna Biru Silahkan ganti dengan URL gambar banner iklan sobat.

6. Selesai, Sobat simpan dan lihat hasilnya.

Cara Memasang Banner iklan 125x125 di Blog 4 Kolom

1. Masuk ke Akun Blog sobat.
2. Sekarang Klik Tata Letak >>Tambahkan Gadget >> HTML/Javascript. Masukkan kode dibawah ini dalam kotak HTML/Javascript.

<div align="center">
 </p>
<p>
<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#000000"> </p>
<p>
<tbody>
<tr> </p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" height="125"/></a></center>
</td></p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" height="125"/></a></center>
</td> </p>
<p>
</tr>
</p>
<p>
<tr></p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" height="125"/></a></center>
</td> </p>
<p>
<td><center>
<a href="URL/Alamat Iklan Sobat" rel="nofollow"><img border="0" alt="cara membuat banner iklan kotak 125x125 di blog" width="125" src="http://i1261.photobucket.com/albums/ii585/zainelhasany/banner125x125_zps642e2780.png" height="125"/></a></center>
</td></p>
<p>
</tr>
</p>
<p>
</tbody></table>
</p>
</div>

Keterangan:
Kode warna MERAH adalah alamat iklan sobat
Kode warna BIRU adalah Alamat Gambar iklan sobat.

3. Simpan dan lihat hasilnya.

Sekian dulu share Cara Memasang Banner iklan 125x125 di Blog, semoga dapat bermanfaat dan selamat mencoba.

Cara Memasang Banner iklan 125x125 di Blog

"Cara Membuat Blog Pribadi Gratis di Blogger"  -  Kali ini Kang Zain akan share buat para pecinta dunia maya dengan judul Cara Membuat Blog Pribadi Gratis di Blogger . tips kali ini akan saya arahkan untuk membuat blog pribadi gratis melalui blogspot.com. menurut saya pribadi untuk membuat blog paling mudah menggunakan Blogger blogspot.com disisi lain untuk variasi sangat memuaskan. Sebenarnya banyak layanan untuk membuat blog gratis diantaranya adalah:

  1. Blogger.com
  2. WordPress.com
  3. Blogdetik.com
  4. Blog-roll.info
  5. Wordblog.pl

Selain layanan diatas, masih banyak lagi. namun untuk kali ini ita akan belajar Membuat Blog Pribadi Gratis di Blogger.com.
.
Blog adalah sebagai sarana untuk menyalurkan ide kreatif kita yang akan dipublikasikan lewat dunia maya, ada juga yang mengatakan blog adalah catatan online. semuanya benar semua, ada beberapa manfaat dari memiliki blog  diantaranya: Kita bisa terkenal, menambah pengalaman atau pengetahuan, memunculkan ide kreatif lewat tulisan, berbagi pengetahuan dan bisa juga digunakan untuk peluang bisnis misalnya bisnis perkantoran, pertokoan atau usaha kecil-kecilan. untuk yang memiliki konten bagus dan traffik tinggi sudah pasti dilirik banyak sponsor yang ingin pasang iklan pada blog kita.

Blog merupakan sebuah kebutuhan khusus untuk sobat yang ingin memulai bisnis onlinenya dengan cara promosi dengan blog. bisa juga karena memang sudah hobi dalam hal tulis menulis, sehingga ingin mencurahkan ide maupun gagasannya  agar bisa diketahui oleh orang di seluruh dunia, mungkin juga bisa hanya sekedar untuk mencari penghasilan lewat blog. tergantung dari mana niat awal sobat membuat blog

Untuk mulai menulis di dunia maya terlebih dahulu kita Membuat Blog Pribadi Gratis di Blogger yang bisa sobat isi konten apapun, edit kapanpun juga modifikasi sesuka hati. namun perlu diingat untuk para pemula blogger harus mengetahui dasar-dasar blog agar nantinya tidak tersesat, hehe 

Yang perlu diperhatikan dan dijalankan untuk blogger pemula:
1. Membuat blog (menentukan alamat URL dan Judul Blog).
2. Memilih tema untuk Blog
3. Membuat Postingan yang benar dan seo
4. Menentukan Judul Postingan dan keyword konten.
5. Mengganti template.
6. Belajar Seo Untuk Pemula.

Cara diatas mungkin bisa membantu sobat blogger pemula, setelah diatas menguasai sobat bisa melanjutkan untuk belajar ngeblog lebih dalam.

Nah,,, untuk awal memulai penggunaan kita daftar dulu di blogger.com, kita akan simak bareng untuk membuat blog prubadi gratis di blogger: cekidot!!!! 

"Sobat Blogger Wajib memiliki Email untuk bisa membuat blog, saya sarankan untuk menggunakan Gmail.com dari google karena blogger.com dan gmail.com adalah satu produk google jadi nantinya lebih mudah.""

Langkah Membuat Blog Gratis :

  1. Arahkan ke www. Blogger.com menggunakan web browser pilihan Anda.

  2. Masuk menggunakan Akun Google Anda untuk memulai.

  3. Jika Anda tidak memiliki Akun Google, klik "Get Started" untuk membuat satu.

  4. Masukkan "Nama Tampilan" yang akan digunakan untuk menandai posting blog Anda dan klik "Lanjutkan".

  5. Klik "Buat Blog Anda Sekarang"
  6. Pilih "Judul Blog" dan URL yang tersedia untuk blog Anda. Anda dapat memeriksa jika URL Anda mempertimbangkan tersedia dengan mengklik "Periksa Ketersediaan".

  7. Masukkan verifikasi kata dan klik lanjutkan.

  8. Pilih template pemula, yang akan bertindak sebagai desain dasar / layout blog Anda.

  9. Klik "Mulai Blogging"
  10. Anda dapat membuat posting blog baru, mengedit posting, dan mengedit halaman dari bawah "Posting" tab.

  11. Judul posting Anda berjalan dalam kotak teks di samping "Judul".

  12. Anda akan mendapatkan masuk ke dalam "Compose" editor teks, di mana Anda juga akan dapat mengakses fungsi editor teks dasar seperti ukuran font, warna teks, kemampuan untuk menyisipkan link.

  13. Anda juga dapat menggunakan "Edit HTML" tab untuk memasukkan posting Anda dalam format HTML, jika Anda inginkan.

  14. The "Post Options" bagian yang terletak di bawah "Compose" editor teks akan memungkinkan Anda untuk mengaktifkan komentar pembaca, pengaturan HTML, dan posting waktu dan tanggal.

  15. Anda dapat sekarang baik pilih "Simpan Sekarang" untuk menyimpan posting Anda, "Preview" untuk melihat posting Anda sebelum penerbitan ke blog Anda, atau "Publish Post" untuk mempublikasikan posting Anda langsung ke blog yang baru dibuat.

  16. Jika Anda ingin mengubah desain blog Anda dari template yang Anda pilih pemula ketika pada awalnya membuat blog Anda, Anda dapat melakukannya di bawah "Design" tab.

  17. Dari dalam "Desain Tab" Anda akan dapat mengedit Elemen Halaman, HTML, dan mengubah template Anda dengan Temple Designer.

  18. Jika Anda ingin menyesuaikan pengaturan lainnya seperti yang mampu melihat, berkontribusi, atau komentar di blog dll Anda, klik tombol "Settings" tab.

  19. Anda dapat menyesuaikan penerbitan, komentar, pengarsipan, perizinan, dan semua pengaturan lainnya dari dalam sub-tab yang terletak di bawah utama "Settings" tab.
  20. Anda dapat menambahkan penulis baru yang mampu berkontribusi dan mengedit blog Anda dengan mengklik "Pengaturan" tab> "Permissions" sub-tab, dan memilih "Tambah Penulis".
Sekian dulu Sobat Cara Membuat Blog Pribadi Gratis di Blogger  semoga dapat membantu sobat yang ingin membuat blog pribadi. kalau ada pertanyaan silahkan tinggalkan komentar. Salam Blogger

Referensi:  http://www.sowanlor.com/

Cara Membuat Blog Pribadi Gratis di Blogger

Cara Cek Kecepatan Loading Blog - Bagaimana Cara Cek Kecepatan Loading Blog?? itu yang sering ditanyakan teman-teman disaat edit blog untuk mempercepat loading. banyak hal yang membuat loading blog lemot alias lambat yaitu dengan memasang beberapa animasi di blog. sobat blogger harus pandai-pandai memasang animasi yang nantinya dari efek itu dapat memberatkan loading blog.

Jika berat loading blog kita bisa diminimalisir untuk secepat mungkin, kenapa tidak?? mungkin tampilan blog lebih simple dan sedikit gambar untuk menjadi pilihannya. Ada beberapa cara untuk mengukur kecepatan loading blog untuk dioptimasi diantaranya trik yang akan saya share kali ini dalam mengecek loading blog menggunakan website tool kecepatan loading yaitu:

1. PageSpeed Insight From Google Klik DISINI 
2. Website Speed and Performance Optimization by GTmetrix Klik DISINI
3. Pingdom Tools by Pingdom Klik DISINI

Keterangan:

1. PageSpeed Insight From Google
Ini adalah tool besutan google yang dapat mengukur seberapa besar performa blog kita. Dengan tool ini kita bisa meneliti masalah-masalah apa saja yang mempengaruhi performa kecepatan blog kita, mulai dari High Priority sampai Low Priority, selain itu tool ini juga menyediakan fitur Experimental Rules yaitu kamu akan diberikan masukan-masukkan yang berguna untuk meningkatkan kecepatan loading blog kamu
2. Website Speed and Performance Optimization by GTmetrix
Ini tool dari GTmetrix, fungsinya sama saja seperti PageSpeed Insight, melalui tool ini kita bisa melihat lamanya waktu blog kita untuk dimuat 100%, ukuran halaman blog kita (dalam kb), serta total request ketika blog kita diakses. Situs ini juga memberi masukan / saran untuk meningkatkan performa blog kita, tapi sayangnya kalau sobat tidak mendaftar menjadi pro member maka akan diberi batasan dalam menggunakan situs ini, yaitu hanya boleh 20 kali test dalam sehari.
3. Pingdom Tools by Pingdom
Tool ini fungsinya sama saja seperti GTmetrix, hanya saja di pingdom kita tidak diberi batasan mengetest speed blog dalam satu harinya tidak seperti di GTmetrix yang hanya boleh 20 kali dalam sehari. Dan fitur khusus pingdom ini kita bisa memilih mau mengetest menggunakan server Amsterdam, Dallas, atau New York.

Silahkan sobat coba untuk deteksi kecepatan loading blog dengan tool diatas, sekian dulu Cara Cek Kecepatan Loading Blog. semoga dapat bermanfaat.

Cara Cek Kecepatan Loading Blog

Langganan: Postingan (Atom)