Cara Memasang Translate di 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/AVvXsEhQH2yxXjhhUARCScT0Ch2qDMT95nHFzr_a-hcjhw8RI_-YSORZtjjSlQSiRZcsGYLraROfkqpb9-TDMoAo7yfB2e0kChbP_AQGno9ZhjkPRn06_RYHi4a_EFQ9EhD3kekCjcQutX0-wPk/?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/AVvXsEi0VZwlLGeuit4fHGYMryKc_KEIpKOKUdKPYztXiSHVamYYzwBJ0o6nYKDLnd13Lax5zlA9j8NsUmblyAea8Wg2ZXL4KmJ_ve_DCiGJRffJrDj7nXFK4zp8WSrZUfgoS3e-CtVGADZjwlA/?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/AVvXsEi2uPvT5w3Od9n-WSGfMrAXraT24fMram_y7CRBC8PNn8tfykVyrGasGJuJ9OkllEAGqm8YlaPboGztUPNOUo56BVGUwQmyDyqZuUB_RuAfob9POvoYZ2MaINCRI444gYDZ3pIqy4S3Ro_8/?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/AVvXsEgYcOthDnReoJfWex-_qiem-mbtEmBDuEKyxLzl-ic02UIU5kWjhoeujWsGRv-dl26pLmp9XfPnt1oANTmFwEE0wCJJfD-kwDv2IrIkm_K6zpcqmbAWsimfl7asFd6iUDmtqV5ozPr8f43o/?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/AVvXsEgNpCWNm4HpImkgpUfnHRJd_AOAL1ImbqjkiyXXag39dGuEzj1jZmZ6RUa2WNvtZOEJtxjtVpdQlOSXm6QNzpYc8iiFYAeX7QYAdUtS4aJA0rKYQmgd25tSmwW6skcqkUZe9igO7GcQuPw/?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/AVvXsEhU-hN-LtAXP0eF97IDQbn4Ym9qIAA8YywGAIJRd_SHvD3FNw-ukG7fL_ae_dZvkJan80pJ6kd4p7QEphS4P6VwBwh2jkaGxJ8YDzHrYKBiARVo9M0P-ZPwrnhVQnWbLaGLzViH_V5b50U/?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/AVvXsEiMb0-XHUlhC5lD6rVumW7pg7_iu0o3xxrO_1bj4h0ZqC__Ls-P-32TmGDILUPqinfXhY7mx1uTWWyb43ejuPgifpsLUee2QUrFeeq9uCjG3AXSxzVuQpgoUW8BY3leW8_3yW9ouxIwYPw/?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/AVvXsEieVdI2oePVybgc0mnqBBR9-CkICInOqpmuN7acqYEVIh3rjR0FzBMO7-rrp3cw1y8XelG8LRBdUCEL2nKyUwI1E5qA3srYBdSWuXMpeaRim0VAu2Jv576OOa87D0utY-BHRl8Fu19GFy4/?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/AVvXsEhXQznD7I-AgImf0eNH_PDhc0gEs3sYpr1cK0NjhINBYVWSoXaqOkWrd964wk7lKXOw0wzmVI3HamucnkCIuEvQbc03ayGs7kD2e7yzB1rgKwCFXlaXUkV9m58aerBXMRro6A6mFY0TaYHl/?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/AVvXsEht8H2LzutafS0hyMsAsB4dMC1-ucni1wzvo60rik4K8PgoGQwnCgnPSnZ1MYSnThqpAIp2xIkzsO-lQv_torlpR2a1vMAT2kLdEv3omVurCPPDe_oPvQb5T4ljMN1bgYc1JIrw2oqqQe0/?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/AVvXsEgDKPMihk8MGp9Ur16ee7QVvCXm9K_yd_lU_v_bsmLqopZJx2Kt1x8jL08wSXMnmRKIpNtLJewp7Ir_Be2GvFi3Wc0a0B5FhRUAOob9VvYIZZpMJQG47-pN_cp40zN5oof2tHDBFP18lkM/?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/AVvXsEjsLD5fyrgzRbAJcrK2RCLaYuB1ahERhQRq2qL2YKZB46CHtUxpnT1FxyIfzZgIzenl4Fo8UXV0UFCbbCBNaRg9TC2SRjSuHziN2BDta050pV1lAMbKkJjt_R4rouiwYebnIyvam3qfWjg/?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 Mengganti Warna Kolom Sidebar

Cara Mengganti Warna Kolom Sidebar -  Postingan kali ini akan membahas warna kolom sidebar/mengganti baground sidebar. Sobat blogger kemarin ada yang tanya seputar sidebar blog, Bagaimana cara mengganti warna kolom sidebar blog? ternyata sidebar pada blog yang dimilikinya berwarna putih dan ingin didanti dengan warna yang lain.

Untuk mengganti baground sidebar blog sobat blogger harus edit html. mungkin ada yang bertanya, bagaimana cara edit html sedangkan saya belum bisa edit html?? Nah,, tenang saja untuk Mengganti Warna Kolom Sidebar saya akan kasih tutorial detail Cara Mengganti Warna Kolom Sidebar. sobat blogger simak tutorialnya dibawah ini sampai selesai:

1. Login ke akun blog sobat.

2. Pilih Menu Template >> klik edit HTML

3. Untuk antisipasi kesalahan disaat edit template, silahkan sobat Backup template terlebih dahulu.

4. Sobat cari kode #sidebar-wrapper untuk lebih mudah gunakan Ctrl+F). Kurang lebih seperti dibawah ini:

#sidebar-wrapper
background:#000000;
dan seterusnya.,.,,,.,.

Keterangan :
Silahkan sobar ganti kode warna yang berwarna biru dengan kode warna yang sobat inginkan. jika ingin merubahnya dengan bagroud gambar silahkan ganti dengan URL gambar sobat.

5. Save Template dan lihat hasilnya.

Sobat blogger bisa bereksperimen sesuai dengan kreasi sendiri untuk customisati warna blog.Terima kasih sudah berkunjung diblog software mania pc. Semoga Bermanfaat.

Cara Membuat Tombol Back to Top Keren 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 Menghilangkan Kode Verifikasi Kata / Captcha Komentar 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 Membuat Profil Blog Keren di Blogger

*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 Memasang Banner iklan 125x125 di Blog

*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 Membuat Blog Pribadi Gratis di Blogger

"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 Cek Kecepatan Loading Blog

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 Membuat Garis Bawah Judul Posting dan Sidebar

"Cara Membuat Garis Bawah Judul Posting dan Sidebar" - Semangat baru untuk selalu modifikasi blog, share kali ini tentang Cara Membuat Garis Bawah Judul Posting dan Sidebar. tentunya saya khususkan untuk para blogger pemula karena hal ini sangat mudah dilakukan apalagi para blogger senior. membuat garis bawah pada sidebar dan judul posting jika tidak didasari sebuah pengalaman atau ilmu maka semudah apapun pasti akan terasa sulit.

Salah satu trik meningkatkan traffik adalah dengan selalu update postingan, selain kita mofifikasi blog harus memperhatikan konten blog kita lebih-lebih kualitas pada blog juga selalu update dan memperbaiki link. nah,,, Garis Bawah Judul Posting dan Sidebar biasanya setiap template berbeda ada yang sudah memiliki garis bawah maupun belum ada, menurut saya sendiri jika dibawah judul postingan tidak ada garisnya terasa tidak sedap dipandang mata. mungkin juga dirasakan pengunjung blog kita agar tidak bosen kunjungi blog kita. untuk sobat yang belum memasang Garis Bawah Judul Posting dan Sidebar silahkan ikuti petunjuk dibawah ini:

Membuat Garis Bawah Judul Posting

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .post h3{ (cari berdasar kan .post h3)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.post h3{
border-bottom : 4px double #cadaef ; 
margin-bottom:7px;
.........
}

     6. Simpan dan Lihat Hasilnya

Membuat Garis Judul Sidebar

1. Login  ke akun blogger sobat
2. Klik Template
3. Pilih Edit HTML
4. Cari kode .sidebar h2{ (cari berdasar kan .sidebar h2{)
5. Kemudian tambahkan kode di bawah ini yang berwarna biru seperti contoh berikut:

.sidebar h2{
border-bottom : 4px double #cadaef ; 
margin-bottom:7px;
.......
}

     6. Simpan dan Lihat Hasilnya


Pilihan Garis Bawah:
sobat bisa ganti garis bawah sesuai keinginan sobat seperti kode dibawah ini:

1. border-bottom:1px dotted silver; 
2. border-bottom:1px solid black; 
3. border-bottom : 4px double #cadaef ; 

Penjelasan kode :
dotted adalah garis yang putus-putus
solid adalah garis yang tidak putus-putus
double adalah dua garis

Sampai disini dulu share Cara Membuat Garis Bawah Judul Posting dan Sidebar, sobat bisa modifikasi sesuai kebutuhan. selamat mencoba. Baca Juga Cara Merubah Warna Link Pada Blog .

Cara Membuat / Memasang Iklan Melayang di Bawah Blog

*Cara Membuat / Memasang Iklan Melayang di Bawah Blog* - Banyak cara untuk memasang jenis iklan, Seperti Memasang Iklan Melayang di Bawah blog, Cara Pasang Iklan Otomatis dibawah Postingan, Cara Memasang IKLAN dibawah Judul Postingan Blog, Cara Pasang/Membuat iklan Melayang di Tengah Blog, Dll. Namun kali ini lebih pada penempatan iklan melayang di bawah blog.

Cara pemasangan iklan melayang kali ini cukup mudah, sobat tidak susah payah edit HTML karena script satu ini akan dipasang pada HTML/Javascript, Cara Membuat / Memasang Iklan Melayang di Bawah Blog dengan setting scrip melayang di bawah blog jadi dimanapun sobat pasang script ini tetap saja akan tampil pada bawah blog.

Jika sobat tertarik dengan tips pasang iklan ini, silahkan sobat perhatikan langkah-langkah dibawah ini:

Cara Membuat / Memasang Iklan Melayang di Bawah Blog

1. Login ke Akun Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik tambah gadget >>>Pilih mode HTML/Javascript.
4. Masukan kode berikut di bawah ini, dan pastekan pada kotak HTML/Javascript.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'>
</script><br />
<script type='text/javascript'>
$(document).ready(function() {
$('img#closed').click(function(){
$('#btm_banner').hide(90);
});
});
</script>
<style type='text/css'>
div#btm_banner {
bottom: 0;
position: fixed;
width: 100%;
opacity: 0.9;
left: 0;
}
div#btm_banner img{
border:0;
cursor:pointer;
}
</style>
<div style='height: 0px;'></div>
<div align='center' id='btm_banner' style='height: 105px; z-index: 9999;'>
<div style='text-align: right; width: 728px; height: 15px;'>
<img id='closed' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfeiKPZ0CPe2mJlpoIZkbxd2h35KqAEM91lLWYDtHq9QHF6coCf9W3x1LbVsWeqPU1i6YBTArp7bhyaGD_puYCBz2uK3bVhP_JfgSOkaumj3D1UwqBnV8xT7HsURcZN17OzB33idVcYSHL/s1600/close3.png'/></div>
<div style='clear: both;'></div>
<p>
<p><center>

<a href="http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html" target="_blank" title="Pasang Iklan Disini"><img alt="Pasang Iklan Disini" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEga1UH_b-Yo4cEpWJ4dfAw6IR_4A7Cuz5NLlakPbPJ2_xz-udIY69Yrex0BW0J_NfWXT_YEEaGA2bN5kSFaNZmHieoL-KIeziyImevXniHipd1OSjb44Xx3zI6R1B6GJ7R3M54hLDa5RWk/s1600/pasang+iklan+728x90.gif" /></a>

</center></p>
</p>
</div>

5. Selesai dan lihat Hasilnya.

Keterangan Penting!!
Silahkan sobat Ganti tulisan warna biru dengan kode script iklan Sobat.

Sekian dulu Tutorial kali ini, Cara Membuat / Memasang Iklan Melayang di Bawah Blog . semoga bermanfaat. saya sarankan untuk membaca Kumpulan Tutorial Blog Lengkap.

Referensi: http://regibrader-free.blogspot.com/

Daftar Situs Social Bookmark Dofollow Indonesia (Terbaik)

Daftar Situs Social Bookmark Dofollow Indonesia (Terbaik) - Salah satu langkah untuk mempromosikan blog kita adalah dengan cara lewat social bookmark yang sudah pasti dapat membantu blog kita dalam urusan backlink. Sebelum lebih lanjut saya kasih pengertian dulu khusus sobat blogger yang belum kenal dengan social bookmark dofollow. Social Bookmark adalah salah satu bagian terpenting dari SEO kususnya backlink sebagai sarana untuk mempromosikan blog.

Backlink Memang masih merupakan bagian penting dalam Optimasi SEO. Karena Peran Backlink mampu menaikan Posisi pada halaman pencarian Google, khususnya backlink berkualitas / dofollow. biasanya yang banyak dilakukan para blogger untuk mendapatkan backlink dari blog dofollow dengan cara berkomentar, namun ini jauh lebih baik dengan menggunakan social bookmark, dengan berkomentar di blog dofollow memiliki resiko tinggi oleh google, maka disarankan untuk menggunakan social bookmark atau biasa disebut (Sosbok)

Seperti penjelasan diatas Social Bookmark adalah sarana paling mudah untuk mendapatkan backlink, jadi sobat tinggal submit artikel ke beberapa sosbok dofollow terbaik di Indonesia yang akan saya cantumkan karena selalu otomatis meng-Approve setiap Artikel yang kita submit. Namun sebelumnya saya ucapkan banyak terima kasih kepada Social Bookmark Dofollow Indonesia yang sudah mau membuat dan mempertahankan Social Bookmarknya untuk selalu eksis dan membantu blog atau para blogger Indonesia.

Berikut Daftar Situs Dofollow Sosial Bookmark Dofollow Indonesia :
  

1. http://lintas.me
2. http://infogue.com
3. http://populerkan.com
4. www.beritawan.com
5. www.beritapilihan.com
6. www.cepatnya.com
7. www.perdetik.com
8. www.klubberita.com
9. www.beritawoow.com
10. www.anepunya.com
11. www.wartawan.co
12. www.zeromodal.com
13. www.sumbawanew.com/situsku
14. www.kanalku.com
15.www.jaditerkenal.com 

Silahkan submit blog dan kontennya di situs-situs social bookmark di atas, asal gak nyepam and mengikuti ketentuan masing-masing situs. Sekian dulu Artikel saya yang berjudul Daftar Situs Social Bookmark Dofollow Indonesia (Terbaik), Tentuunya masih banyak Social Boorkmark Dofollow yang belum tercatat. oleh karena itu sobat bisa ikut serta untuk melengkapinya.

Cara Memasang Jumlah Postingan dan Komentar di Blog

Cara Memasang Jumlah Postingan dan Komentar di Blog - Menampilkan jumlah postingan dan komentar di blog ternyata mudah. sebenarnya widget satu ini sudah lama dikembangkan, namun sudah tentu jika yang melihat para blogger pemula pasti bingung dan bertanya-tanya bagaimana cara mudah menampilkan jumlah postingan dan komentar di blog? akhirnya saya posting buat sobat blogger semua yang ingin menampilkan jumlah postingan dan komentar pada sidebar blog atau pada blog.

Sobat bisa memasang jumlah postingan dan komentar pada sidebar, footer atau tempat yang lainnya dengan mudah, karena cukup dengan menambah kode jumlah postingan dan komentar. jika sobat tertarik bisa langsung simak tutorial dibawah ini:

Cara Mudah Memasang / Menampilkan  Jumlah Postingan dan Komentar di Blog

1. Login terlebih dahulu di blog sobat
2. Masuk ke menu Tata Letak >>>Tambah Gadget >>>pilh HTML atau JavaScript
3. Masukan kode dibawah ini dalam kotak HTML atau JavaScript

<script type="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script type="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://softwaremaniapc.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

4. Simpan

Keterangan:

Sobat ganti warna url BIRU diatas dengan alamat blog sobat.

Ok! sobat blogger,,, tutorial Cara Memasang Jumlah Postingan dan Komentar di Blog sampai disini dulu, bagaimana mudah kan?? tentunya sangat mudah, hehehe karena sudah saya coba dan berhasil, sekarang gantian sobat yang pasang di blog. hehe selamat mencoba.

Cara Mudah Memasang TV Online di Blog

Cara Memasang TV Online di Blog - Tips tutorial blog kali ini Cara Memasang TV Online di Blog, apakah blog sobat memiliki tv online? jika belum ada, sobat bisa langsung memasangnya, nah,, sebelum mesasang sobat harus perhatikan untuk memasang tv online di blog dengan tempat yang tepat,, saya sarankan taruhnya pada postingan aja,,, Bagaimana sudah jelas? 

Lo sudah jelas, mari kita simak tutorial Cara Memasang TV Online di Blog dibawah ini:

1.Masuk akun blog sobat.
2.Sobat Klik tata letak >>>>  Tambah widget html/javascript

3.Copas kodenya dibawah ini dan letakan pada kolom kosong javascriptnya untuk judul kosongkan saja.

 <!-- TV Online Buat Blog Copy Scriptnya Dari Sini -->
<div style="border: 10px solid #868e89; height: 558px; overflow: hidden; width: 450px;">
<div style="margin-left: -34px; margin-top: -227px; text-align: center;">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" height="860" width="100%"><param name="wmode" value="transparent" /><param name="src" value="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" /><param name="scale" value="noscale" /><param name="quality" value="high" /><param name="pluginspage" value="http://www.macromedia.com/go/getflashplayer" /><param name="menu" value="true" /><param name="devicefont" value="false" /><param name="allowscriptaccess" value="sameDomain" /><param name="allowfullscreen" value="true" /><param name="scroll" value="auto" /><a href="http://blogseo-tutorial.blogspot.com"></a><embed width="100%" height="860" type="application/x-shockwave-flash" src="http://id.imediabiz.com/MivoTV.swf?r=' + Math.round(Math.random() * 99999) + '" wmode="transparent" scale="noscale" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" menu="true" devicefont="false" allowscriptaccess="sameDomain" allowfullscreen="true" scroll="auto" /></object></div>
</div>
<!-- Sampai Sini -->

4.Aturlah width dan height dulu jika dirasa kurang cocok ukurannya dan sekarang lihat hasilnya dulu.
-width: 450px: panjang Lebar, bisa sobat ganti sesuai keinginan sobat.
-height: 558px: Tinggi kotak tv online, bisa sobat ganti sesuai kebutuhan

Peringatan !!!!
Seperti saran saya diatas, Sebaiknya di pasang pada post artikel caranya; sobat buka entri baru masuk pada mode html bukan compose lalu pasteukan script-nya. pratinjau dulu aturlah ukurannya oleh sobat jika masih dirasa kurang pas. 

Sekian Dulu sobat Tips Cara Mudah Memasang TV Online di Blog , semoga bermanfaat dan sobat bisa langsung mencobanya. Good Luck. Sumber

Cara Membuat Bismillah Otomatis Di awal Postingan Blog

Cara Membuat Bismillah Otomatis Di awal Postingan Blog - Tips dan trik kali ini buat blog sobat yang ingin memasang lafaldz bismillah di awal postingan, ini cocok banget buat sobat yang beragama islam untuk membuat widget satu ini yaitu bismillah di awal postingan blog, setelah sobat pasang bismillah di awal postingan blog, maka secara otomatis akan berada di awal postingan blog. sebenarnya sudah lama untuk dipublikasikan, tapi para pembuat blog baru setiap harinya membanjiri dunia maya. 

Nah,,, Jika sobat ingin menambah bismillah di awal postingan Blog, ikuti petunjuk dibawah ini: Cekidot !!!!

Cara Memasang Bismillah Di Awal Postingan
1. Buka blog anda
2. Pilih Template => Edit HTML

3. Cari kode <data:post.body/> jika sudah ketemu.

4. Lalu letakkan kode Bismillah dibawah ini, tepat diatasnya

<div style='text-align: center;'><span style='font-size: large;'><span style='font-family: Traditional Arabic;'>ب&#1616;س&#1618;م&#1616; الله&#1616; الر&#1617;&#1614;ح&#1618;من&#1616; الر&#1617;&#1614;ح&#1616;يم&#1616;</span></span> </div><br/>

Atau Sobat bisa juga memasang kode dibawah ini, Bedanya pada tampilan font :

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

Sekian dulu sobat Cara Membuat Bismillah Otomatis Di awal Postingan Blog tentunya sangat menarik buat blog sobat, hehehe Selamat Mencoba Widget Bismillah Di awal postingan Blog.

Cara Mudah Membuat Like Button Facebook di Blog

Cara Mudah Membuat Like Button Facebook di Blog - Kemarin Kang Zain sudah posting Cara Mudah Memasang Tombol Like di setiap Postingan, nah,, kali ini temanya masih sama yaitu like facebook pada blog atau postingan. namun ini beda dengan postingan saya yang kemarin, karena like facebook satu ini akan menyatu otomatis pada bawah postingan sobat. untuk lebih jelasnya seperti gambar Like Button Facebook di Blog dibawah ini: 

Bagaimana sudah jelas sobat? untuk Membuat Like Button Facebook di Blog cukup mudah, jika sobat ingin memasangnya ikuti tutorial dibawah ini :

Cara Mudah Membuat Like Button Facebook di Blog

1. loggin ke blogger
2. sobat pilih dashboard >>> template >>>edit html
3. lalu sobat cari kode  <data:post.body/>  ( gunakan ctrl+f  untuk mempermudah pencarian )
kalau kode seperti diatas terdapat lebih dari satu, cari kode lengkapnya seperti ini :

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

Keterangan :

Jika kode diatas tidak ada jangan menyerah, kode <data:post.body/> biasanya kode nomor 3 yang ditemukan lebih dari satu, gunakanlah satu persatu dalam langkah berikutnya ( saya pernah mencoba satu persatu dan akhirnya berhasil di salah satu kode yang ketemu lbih dari satu tadi )

4. Jika sudah ketemu, letakkan kode dibawah ini tepat dibawah kode <data:post.body/> atau <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:40px;'/>

5. Jangan lupa sobat SAVE jerih payah sobat.

6. Lihat hasilnya...

Sekian dulu Cara Mudah Membuat Like Button Facebook di Blog semoga bermanfaat. Good Luck

Selamat Mencoba

Cara Mudah Memasang Tombol Like di setiap Postingan

Cara Mudah Memasang Tombol Like di setiap Postingan - Kali ini kang zain share tentang tombol like di setiap postingan blog. Fungsi Tombol Like adalah blog kita langsung terhubung dengan jejaring sosial Facebook, sehingga apabila ada seseorang yang mengklik tombol like maka secara otomatis postingan diblog kita ajan tershare ke beranda orang tersebut. 

Dengan demikian Tombol Like adalah cara alternatif untuk mempromosikan blog kita ke khalayak ramai. bagaimana sudah jelas? nah,,, jika pada postingan sobat belum ada tombol like, bisa memasangnya sekarang juga. selengkapnya ikuti petunjuk dibawah ini:

Kurang lebihnya akan seperti dibawah ini :

Cara Mudah Memasang Tombol Like di setiap Postingan

- Cara Memasang Tombol Like di Setiap Postingan :
- Login Blogger

- Masuk ke Menu Template Kemudian Edit HTML

- Sobat Cari Kode Seperti dibawah ini (lebih mudah ctrl+F) :

    <data:post.body/>

- Letakan kode berikut tepat dibawah kode <data:post.body/>

<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=tahoma&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:310px; height:31px;'/>

- Simpan Template.

Keterangan:

Jika dalam pencarian kode <data:post.body/> sobat menemukan lebih dari 1 kode, maka pilih saja kode yang kedua.

Sekian sulu postingan Kang Zain tentang Cara Memasang Tombol Like di Setiap Postingan, semoga dapat bermanfaat bagi sobat :)

Selamat Mencoba

Cara Membuat like Facebook di Postingan Blog

Cara Membuat like Facebook di Postingan Blog - Banyak cara untuk meningkatkan traffic, salah satunya adalah dengan memasang like facebook di setiap postingan blog. Dengan memasang like Facebook di Postingan Blog adalah satu cara yang dapat digunakan untuk meningkatkan traffic blog dan mampu mempopulerkan blog di mata SERP. Karena belakangan ini Google mulai melirik blog-blog yang aktif dalam social media yang lagi trend saat ini.

Jika pengunjung menekan tombol like maka secara otomatis artikel dan link akan terkirim langsung ke wall facebooknya, manfaat yang sobat dapatkan yaitu: (pertama) link anda akan menyebar dan link itu akan menjadi sebuah backlink, (kedua) blog anda akan lebih dikenal orang.

Like Facebook yang saya share kali ini cukup simple, dengan memasang sedikit kode html maka secara otomatis setiap artikel dalam postingan sobat memiliki tombol like facebook. Nah,,, Jika sobat ingin memasangnya, Berikut tutorial Cara Membuat like Facebook di Postingan Blog:

1. Log in akun blog sobat

2. Masuk ke Dashboard.

3. lalu pilih Tata Letak.

4. Klik tab Edit HTML
Cari kode berikut ini (lebih mudah dengan ctrl+F):

<data:post.body/> atau <p><data:post.body/></p>

Copy Kode Dibawah Ini dan Paste/Pasang Kode Berikut Dibawahnya :

<!-- AddThis Button BEGIN -->
<DIV class='addthis_toolbox addthis_default_style'>
<A class='addthis_button_facebook_like' fb:like:layout='button_count' rel='nofollow'/>
</DIV>
<SCRIPT src='http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4cd416420e08d4aa' type='text/javascript'/>
<!-- AddThis Button END -->

Dengan menambahkan kode diatas, maka gambarnya seperti dibawah ini:

Keterangan :

Untuk Di pasang pada Widget Klik Aja Ad HTML/Text, dan masukkan kode diatas kedalam kotak HTML Java Scrip.

Cara Mudah Membuat Breaking News di Blog

Cara Mudah Membuat Breaking News di Blog - Apakah sobat sudah mengenal breaking news pada blog? breaking news artikel terbaru di blog memang nampaknya sekarang para blogger memilih untuk beralih ke widget seperti ini (Breaking news) karena hemat tempat dan juga tidak besar beban loading blognya jika dibandingkan dengan widget Entri terbaru di sidebar slider ke bawah yang bisa memakan 4-5 elemen.

Lebih jelasnya, Breaking news adalah widget yang dipasang dengan tujuan memperindah tampilan blog dan juga untuk  meningkatkan pageview blog seperti pada gambar diatas. Widget ini berupa judul artikel yang ditampilkan secara bergantian yang terkadang juga di sertai dengan tanggal posting artikel tersebut.

Pada Kesempatan Kali ini saya akan share Cara Membuat Breaking News Terbaru di Blog, karena desain yang ada sangat keren dan terbaru. jika sobat ingin memasangnya diblog, ikuti tutorial dibawah ini:

Cara Memasang Breaking News di Blog

1. Login Ke Blogger.
2. Pilih Template.
3. Sobat download full template terlebih dahulu (Tampilan Baru).
4. Klik "Edit HTML".
5. Setelah itu sobat cari kode ]]></b:skin> menggunakan f3 atau CTRL+F, lalu sobat letakkan kode di bawah ini persis di atas kode ]]></b:skin>.

/* News Ticker Wrapper
---------------------------------------------*/ 
.newspic {background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_WN-q5bhYh45v7uI1iR9gXSlmR7oXut9naixvsX2k-7-_NZ_VH0QA1e3oNlb5Pra0cGuRDYIC2JfA_7KUfehsJqUus8YVtFCBDIgd3Hj216jhfUNuGNYCW47QyRodUMwcL8WtBWHZlmM/s1600/news.gif) no-repeat top left;width:970px;margin:0 auto;padding:0 auto;height:32px;color:#fff;} 
.news {width: 970px;margin:0 auto;padding:0 auto;line-height: 1.4em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;} 
.news a:link, .news a:visited{color:#fff;text-decoration:none;} 
.news a:hover {color:#ddd;text-decoration:underline;} 

6. Masih dalam posisi Edit HTML, selanjutnya sobat cari kode </head>, dan letakkan kode di bawah ini persis di atas kode </head>.

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'></script>
<script type='text/javascript'>
//<![CDATA[
var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};
var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};
//]]>
</script>
<style type='text/css'>
.titlefield{ /*CSS for RSS title link in general*/
text-decoration: none;}
.labelfield{ /*CSS for label field in general*/
color:#aaa;font-size: 100%;}
.datefield{ /*CSS for date field in general*/
color:#aaa;font:normal 14px Arial;text-transform:none;}
#example1{ /*Demo 1 main container*/
width: 780px;
height: 14px;
border: 0px solid #aaa;
padding: 0px;
font:bold 16px Arial;
text-transform:none;
text-align:left;
background-color:transparent;}
code{ /*CSS for insructions*/
color: #fff;}
#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}
#example1 a:hover {color:#C8D3F2;text-decoration:none;}
</style>

7. Selanjutnya sobat cari kode Navigasi, seperti di bawah ini:

<div class='menu horizontal'>
...........................................
...........................................
</div>

8. Selanjutnya sobat letakkan kode di bawah ini di bawah kode navigasi yaitu setelah kode </div> sebagai penutup navigasi.

<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://softwaremaniapc.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

9. Jika di letakkan di bawah kode navigasi akan menjadi seperti ini:

 <li><a href='/'>Home</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/contact-me.html'>Contact Us</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/02/tukar-link.html'><blink>Tukar Link</blink></a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Tutorial%20Blog'>Tutorial Blog</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Software'>Software</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/search/label/Komputer'>Komputer</a></li>
<li><a href='http://softwaremaniapc.blogspot.com/2013/04/pasang-iklan-murah-ini-solusinya.html'><blink>Pasang Iklan</blink></a></li></ul>
<div class='navsearch'>
<div style='float:right;padding:1px px 0 0;'>
<form action='http://www.google.com/search' method='get' target='_blank'>
</form>
</div>
</div>
</div>
</div>
<div class='newspic'>
<div style='float:left;width:780px;padding:6px 0 6px 180px; position:relative; overflow:hidden;'>
<script type='text/javascript'>
var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)
cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://softwaremaniapc.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feed
cssfeed.displayoptions(&quot;date&quot;) //show the specified additional fields
cssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tag
cssfeed.filterfeed(10, &quot;date&quot;) //Show 10 entries, sort by date
cssfeed.entries_per_page(1)
cssfeed.init()
</script>
</div>
<div style='clear:both;'/>
</div>

10. Klik "Save template" dan selesai. Lihat Hasilnya.

Sekian dulu Cara Mudah Membuat Breaking News di Blog. semoga bermanfaat.....

Selamat Mencoba