Desain Brosur Dengan Template Facebook

Setelah pada postingan sebelumnya saya telah membuat template blogger yang hampir mirip dengan template facebook, maka pada kali ini saya mau menampilkan desain brosur yang mirip dengan facebook, kenapa harus facebook lagiiiii? jawabanya sangat simpel(MENARIK,BEDA dan MEMBUAT PENASARAN YANG MEMBACA).Pada awalnya Desain Brosur ini Khusus dibuat pada momment pembagian Raport dibulan desember, tapi apa daya desain baru selesai tadi malam dan tim desain pun sudah membuat desain yang lain. Nah bagi cabang primagama yang ingin cetak Brosur dengan tampilan seperti facebook silahkan hubungi saya di 085693369463

Berikut ini Contoh Brosurnya:
Spesifikasi:

• Ukuran A4 (Satu Halaman)
• CorelDraw (11,12,X3 dan X4)

Klik kanan pada Gambar dan Open Link in New Tab untuk memperbesar gambar.



Jika rekan-rekan berminat silahkan download file CorelDraw dibawah ini:
Download Brosur

Brosur Youtube

Terima kasih atas kunjungannya Semoga bermanfaat....

Read More

Mengatasi Localhost Error

Setelah melalui proses Langkah Install Xampp 1.7.4 Pada Komputer Windows
tentunya ada beberapa dari sobat yang sedikit mengalami masalah ketika mengakses localhost. Nah postingan kali ini saya akan mencoba memberikan sedikit pencerahan mengenai masalah yang ditemui setelah menginstall xampp program atau bahasa kerennya adalah troubleshooting dalam menginstall xampp. Masalah menginstall XAMPP Untuk mengecek apakah XAMPP yang telah diinstall berjalan dengan baik maka coba buka browser kalian.Kemudian Ketik localhost pada bagian urlnya. lalu tekan tombol enter. Apabila XAMPP berjalan dengan benar maka layar kompie kalian akan seperti gambar pertama dibawah ini

Apabila tampilan browser kalian bukan seperti gambar diatas maka artinya ada masalah dalam menjalankan XAMPP. Saya akan mencoba menguraikan berdasarkan pengalaman.
Langkah pertama
Buka control panel XAMPP (pilih start->apache friends->xampp->xampp control panel). Tampilan XAMPP control panel, Maka akan tampil seperti gambar dibawah ini.

Jika Tampilannya seperti diatas, maka sampai kapanpun sobat tidak akan dapat mengakses localhost di PC Sobat, untuk menjalankannya maka sobat harus check box minimal pada Apache dan MySql supaya bisa di akses.Perhatikan Gambar berikut

Pastikan Apache dan MySQL berjalan (ditandai dengan kata Running disebelahnya). Apabila tidak coba kalian klik checkbox disebelah Apache dan MySql. Apabila kalian bingung check box mana yang harus diklik, kalian dapat melihat pada gambar di atas. Saya sudah memberikan tanda pada gambar dimana sobat harus melakukan klik. Cukup melakukan klik pada service yang tidak berjalan (ditandai dengan tidak munculnya status running disebelahnya).
Atau Perhatihan Video di Bawah ini:



Gimana....sudah bisa apa belum..???
Jika belum bisa isilah form komentar dibawah ini...!!

Read More

Langkah Install Xampp 1.7.4 Pada Komputer Windows

Melanjutan Postingan sebelumnya yaitu Pengertian/Pengenalan Tentang XAMPP Pada postingan kali ini saya akan kembali lagi berbagi sedikit ilmu tentang cara penginstalan dari software Xammp 1.7.4.Mudah-mudahan langkah di bawah ini dapat membantu sobat blogger. Berikut ini adalah langkah – langkah instalasinya :

1. Seperti biasaya langkah pertama yaitu buka terlebih dahulu master dari XAMPP seperti tampak dibawah ini
   
   
   
2. Setelah terbuka maka tampilan yang pertama kali muncul yaitu pemilihan bahasa (saran saya gunakan bahasa inggris). Klik “OK” untuk melanjutkan.
   
   
3. Setelah itu akan tampil seperti dibawah ini, Kemudian klik “Next” untuk melanjutkan.
   
   
4. Tampilan selanjutnya yaitu menunjukkan tempat penyimpanan hasil installasi software ini. (Saya sarankan hasilnya jangan di simpan di drive C), karena apabila windows mengalami masalah, server yang telah kita buat dapat mudah kita selamatkan. Klik “Next” untuk melanjutkan.
   
   
5. Kemudian kita diberi pilihan apa sajakah yang akan kita install. Pilih sesuai kebutuhan anda, kita juga dapat menambah icon pada desktop dan menambah installasi software ini di start menu. Klik “Install” untuk memulai proses Installasi.
   
   Berikut ini prosesnya....
   
   
6. Jika Sudah selesai klik yes ---> Finish
7. Untuk melihat bahwa XAMPP sudah dapat di gunakan caranya adalah:
   Buka Browser sobat (Mozilla, Google Crome, Internet Explorer atau Browser lain), ketik localhost atau bisa dengan 127.0.0.1 maka akan tampil seperti dibawah ini
   
   

Horeeeeeeeeeeeee.....Berhasil.... !!!!!!
Nah... jika sobat mengalami masalah maka sobat harus membaca terusan dari halaman ini.

Read More

Pengertian/Pengenalan Tentang XAMPP

AAa itu XAMPP...?
XAMPP adalah perangkat lunak bebas, yang mendukung banyak sistem operasi, merupakan kompilasi dari beberapa program.

Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah digunakan yang dapat melayani tampilan halaman web yang dinamis. Untuk mendapatkanya dapat mendownload langsung dari web resminya.

XAMPP adalah kepanjangan yang masing-masing hurufnya adalah :

X : Program ini dapat dijalankan dibanyak sistem operasi,seperti Windows, Linux, Mac OS, dan juga Solaris.

A : Apache, merupakan aplikasi web server. Tugas utama Apache adalah menghasilkan halaman web yang benar kepada user berdasarkan kode PHP yang dituliskan oleh pembuat web. jika diperlukan juga berdasarkan kode PHP yang dituliskan,maka dapat saja suatu database diakses terlebih dahulu (misalnya dalam MySQL) untuk mendukung halaman web yang dihasilkan

M : MySQL, merupakan aplikasi database server. Perkembangannya disebut SQL yang merupakan kepanjangan dari Structured Query Language. SQL merupakan bahasa terstruktur yang digunakan untuk mengolah database. MySQL dapat digunakan untuk membuat dan mengelola database beserta isinya. Kita dapat memanfaatkan MySQL untuk menambahkan, mengubah, dan menghapus data yang berada dalam database.

P : PHP, bahasa pemrograman web. Bahasa pemrograman PHP merupakan bahasa pemrograman untuk membuat web yang bersifat server-side scripting. PHP memungkinkan kita untuk membuat halaman web yang bersifat dinamis. Sistem manajemen basis data yang sering digunakan bersama PHP adalah MySQl. namun PHP juga mendukung sistem manajement database Oracle, Microsoft Access, Interbase, d-base, PostgreSQL, dan sebagainya.

P : Perl adalah bahasa pemrograman untuk segala keperluan, dikembangkan pertama kali oleh Larry Wall di mesin Unix. Perl dirilis pertama kali pada tanggal 18 Desember 1987 ditandai dengan keluarnya Perl 1. Pada versi-versi selanjutnya, Perl tersedia pula untuk berbagai sistem operasi varian Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC. Dukungan terhadap pemrograman berbasis obyek (object oriented programming/OOP) ditambahkan pada Perl 5, yang pertama kali dirilis pada tanggal 31 Juli 1993. Proyek pengembangan Perl 6 dimulai pada tahun 2000, dan masih berlangsung hingga kini tanpa tanggal yang jelas kapan mau dirilis. Ini dikatakan sendiri oleh Larry Wall dalam satu pidatonya yang dikenal dengan seri The State of the Onion. Dua di antara karakteristik utama Perl adalah penanganan teks dan berbagai jalan pintas untuk menyelesaiakn persoalan-persoalan umum. Perl sangat populer digunakan dalam program-program CGI (Common Gateway Interface) dan berbagai protokol Internet lainnya. Seperti diketahui, TCP/IP sebagai basis bagi semua protokol Internet yang dikenal sekarang ini menggunakan format teks dalam komunikasi data. Seperti juga bahasa populer lainnya, Perl menerima banyak kritikan. Meski banyak di antaranya hanya berupa mitos, atau berlebih-lebihan, tapi terdapat juga sejumlah kritikan yang valid. Salah satunya adalah, sintaksnya susah dibaca, karena banyak menggunakan simbol-simbol yang bukan huruf dan angka.

Selain itu XAMMP adalah 100% open source, tersedia bebas dan legal. Dibawah ini link download XAMPP versi terbaru:
XAMPP for Linux
XAMPP for Windows
XAMPP for Mac OS X
XAMPP for Solaris

Langkah-langkah yang perlu Anda lakukan untuk menginstal XAMPP di windows XP, silahkan baca Halaman Berikut ini cara Install XAMPP di Komputer Sobat.

Read More

Mudahnya Desain Cover dengan Quick 3D cover

Quick 3D cover adalah sebuah aplikasi 3D yang sangat simpel. Software ini mampu membuat ilustrasi profesional untuk e-book, kotak software, kotak DVD dan objek lainnya hanya dengan beberapa klik mouse. Software ini sangat cocok untuk Seorang Penulis, Developer, dan juga Desainer dan Saya rasa Software ini cocok untuk Bimbel yang ingin menjual program lewat Facebook, dengan kualitas gambar tinggi dengan sangat cepat dan sekaligus bisa menghemat waktu dan biaya. Dengan Quick 3D Cover, sebuah ilustrasi profesional bisa Anda buat kurang dari 1 menit.

Quick 3D cover tidak memerlukan 3d hardware accelerator. Anda tidak memerlukan pengetahuan teknologi 3D untuk menggunakan program ini. So, bagi anda yang akan membuat cover silakan gunakan software ini.

Contoh Desain Dengan Quick 3D cover :




Berikut ini saya bagikan Link untuk Download :

DOWNLOAD SOFTWARE

Setelah Proses Install selesai copy lah Crack dibawah ini pada folder
C:\Program Files\Quick 3D Cover

Download Crack

Password: mas-amien.blogspot.com

Read More

Cara Membuat Widget Random Image Pada Blogspot

Widget Random Image atau Gambar Acak merupakan widget yang berisi beberapa gambar yang akan ditampilkan secara bergantian/acak bila kita mereload halaman blog, seperti halnya dengan Random Post yang menampilkan title post secara acak.

Widget ini sangat ringan karena gambar yang ditampilkan bukan berupa gambar dari file flash, melainkan gambar berjenis file jpeg, gif dan png yang sudah kita upload sebelumnya. Dengan memasang widget ini kita bisa menampilkan koleksi foto atau gambar-gambar yang menarik secara bergantian.

Bila sobat blogger tertarik untuk menampilkan gambar secara acak dalam blog, sobat bisa memasang scriptnya dibawah ini :

<p align="center"><script language="JavaScript"><!--
//store the quotations in arrays
images = new Array(3);
images[0] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
images[1] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
images[2] = "<a > <img src='Alamat URL Gambar Anda' ></a>";
index = Math.floor(Math.random() * images.length);
document.write(images[index]);
//done
// --></script><br/></p>
<span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-widget-random-image-pada.html" target="_blank">Random Image</a></span>

Berikut ini cara pemasangannya :

• Masuk ke akun Blogger Sobat
• Masuk menu Design/Rancangan - Page Element/Eleman Laman
• Pilih Tambah gadget - HTML/Javascript
• Copy dan Paste script di atas
• Lalu Klik Save/Simpan

Note:
Bila sobat ingin menambahkan gambar lebih dari 3, sobat bisa merubah array 3 menjadi jumlah gambar yang dinginkan dan isilah Alamat URL Gambar Anda dengan url gambar kalian yang telah diupload sebelumnya, sesuaikan ukuran gambar dengan ruang yang akan dipakai (bila akan disimpan di bagian sidebar sesuaikan ukuran lebar sidebar dengan ukuran gambar yang akan ditampilkan).

Read More

Cara Membuat Widget Random Post Atau Artikel Acak Pada Blog

Dari judul diatas saya yakin kalau sobat blogger pasti sudah tahu maksudnya, sebuah widget untuk menampilkan title post/judul posting secara acak, baik itu artikel lama atau pun yang masih baru.

Penggunaan dari widget ini tentunya akan mempermudah para pengunjung blog untuk mengetahui artikel-artikel didalamnya, seperti halnya widget Popular Post yang menampilkan title-title yang sering dibaca pada waktu tertentu atau Recent Post yang hanya menampilkan judul yang paling baru. Untuk memasang widget random post, kalian bisa menggunakan script dibawah ini:

• Masuk akun blogger
• Pilih Design atau Rancangan - Tambah Gadget - HTML/javascript
• Kemudian Copy paste script dibawah ini
  

  <script type="text/javascript">
  var randarray = new Array();var l=0;var flag;
  var numofpost=10;function randomposts(json){
  var total = parseInt(json.feed.openSearch$totalResults.$t,10);
  for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;l=Math.floor(Math.random()*total);for(j in randarray){if(l==randarray[j]){ flag=1;}}
  if(flag==0&&l!=0){randarray[i++]=l;}}document.write('<ul>');
  for(n in randarray){ var p=randarray[n];var entry=json.feed.entry[p-1];
  for(k=0; k < entry.link.length; k++){if(entry.link[k].rel=='alternate'){var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";
  document.write(item);}}
  }document.write('</ul>');}
  </script>
  <script src="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&
  callback=randomposts" type="text/javascript"></script>
  <span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-widget-random-post-atau.html" target="_blank">Cara Membuat Random Post</a></span>

• Klik Simpan

NOTE : angka 10 yang diberi tanda warna merah, menunjukan jumlah post yang akan muncul dalam widget random post, Sobat Blogger bisa merubahnya sesuai dengan keinginan anda.

Mudah sekali Bukan....
Selamat Berkreasi...

Read More

Cara Membuat Auto Scroll Recent Post Blogger Plus Thumbnails

Salah satu widget utama dalam sebuah blog adalah widget Recent Post atau Posting Terbaru, dengan menampilkan daftar post terbaru, pengunjung yang masuk bukan dari halaman utama dapat mengetahui posting-posting terbaru secara langsung.

Selain sebagai navigasi suatu blog, recent post yang satu berbeda dengan recent post lainnya, selain memiliki tampilan yang menarik recent post yang satu ini mempunyai kelebihan Auto Scroll. Dengan adanya auto scroll pada recent post ini bila kalian memasangnya bisa menjadikan tampilan blog Sobat menjadi lebih apik dan menarik untuk dilihat oleh pengunjung, selain itu bisa mengundang pengunjung untuk mengetahui post-post lainnya dan alhasil jumlah pageview pun akan bertambah. Bila Sobat tertarik untuk memasangnya bisa ikuti cara dan scriptnya dibawah ini :

Langkah Pertama.

• Masuk ke Rancangan -> Elemen Laman -> Tambah Gadget
• Pilih HTML/Javascript - Copy Paste scripts dibawah ini
  

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <style type="text/css" media="screen">
  
  <!--
  
  #spylist {
  overflow:hidden;
  margin-top:5px;
  padding:0px 0px;
  height:345px;
  }
  #spylist ul{
  width:332px;
  overflow:hidden;
  list-style-type: none;
  padding: 0px 0px;
  margin:0px 0px;
  }
  #spylist li {
  width:290px;
  padding: 5px 5px;
  margin:0px 0px 5px 0px;
  list-style-type:none;
  float:none;
  height:70px;
  overflow: hidden;
  background:#FFC7AD repeat-x;
  border:1px solid #C33F00;
  }
  
  #spylist li a {
  text-decoration:none;
  color:#4B545B;
  font-size:11px;
  height:18px;
  overflow:hidden;
  margin:0px 0px;
  padding:0px 0px 2px 0px;
  }
  #spylist li img {
  float:left;
  margin-right:5px;
  background:#EFEFEF;
  border:0;
  }
  .spydate{
  overflow:hidden;
  font-size:10px;
  color:#0284C2;
  padding:2px 0px;
  margin:1px 0px 0px 0px;
  height:15px;
  font-family:Tahoma,Arial,verdana, sans-serif;
  }
  
  .spycomment{
  overflow:hidden;
  font-family:Tahoma,Arial,verdana, sans-serif;
  font-size:10px;
  color:#262B2F;
  padding:0px 0px;
  margin:0px 0px;
  }
  
  -->
  </style>
  
  <script language='javascript'>
  imgr = new Array();
  imgr[0] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[1] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[2] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[3] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  imgr[4] = "https://lh3.googleusercontent.com/-G2HvFsq-1z4/Tubq-TsHtDI/AAAAAAAAANo/Vx6FDiVk5Lo/s100/no%25252Bimage.jpg";
  showRandomImg = true;
  boxwidth = 300;
  cellspacing = 6;
  borderColor = "#232c35";
  bgTD = "#000000";
  thumbwidth = 60;
  thumbheight = 60;
  fntsize = 12;
  acolor = "#666";
  aBold = true;
  icon = " ";
  text = "comment";
  showPostDate = false;
  summaryPost = 40;
  summaryFontsize = 10;
  summaryColor = "#666";
  icon2 = " ";
  numposts = 10;
  home_page = "http://mas-amien.blogspot.com/";
  limitspy=5
  intervalspy=6000
  </script>
  
  <div id="spylist">
  <script type='text/javascript'>
  //<![CDATA[
  /*
  * mas-amien.blogspot.com
  */
  jQuery(function(){jQuery("ul.spy").simpleSpy(limitspy,intervalspy).bind("mouseenter",function(){jQuery(this).trigger("stop")}).bind("mouseleave",function(){jQuery(this).trigger("start")})});(function(e){e.fn.simpleSpy=function(f,g){f=f||4;g=g||5000;return this.each(function(){var l=e(this),k=true,i=[],m=f,o=0,h=l.find("> li:first").height();l.find("> li").each(function(){i.push("<li>"+e(this).html()+"</li>")});o=i.length;l.wrap('<div class="spyWrapper" />').parent().css({height:h*f});l.find("> li").filter(":gt("+(f-1)+")").remove();l.bind("stop",function(){k=false}).bind("start",function(){k=true});function n(){if(k){var p=e(i[m]).css({height:0,opacity:0,display:"none"}).prependTo(l);l.find("> li:last").animate({opacity:0},1000,function(){p.animate({height:h},1000).animate({opacity:1},1000);e(this).remove()});m++;if(m>=o){m=0}}setTimeout(n,g)}n()})}})(jQuery);function showrecentposts(z){document.write('<ul class="spy">');j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var o=0;o<numposts;o++){var w=z.feed.entry[o];var g=w.title.$t;var f;var p;if(o==z.feed.entry.length){break}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="alternate"){p=w.link[l].href;break}}for(var l=0;l<w.link.length;l++){if(w.link[l].rel=="replies"&&w.link[l].type=="text/html"){f=w.link[l].title.split(" ")[0];break}}if("content" in w){var r=w.content.$t}else{if("summary" in w){var r=w.summary.$t}else{var r=""}}postdate=w.published.$t;if(j>imgr.length-1){j=0}img[o]=imgr[j];s=r;a=s.indexOf("<img");b=s.indexOf('src="',a);c=s.indexOf('"',b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){img[o]=d}cmtext=(text!="no")?'<i><font color="'+acolor+'">('+f+" "+text+")</font></i>":"";var q=[1,2,3,4,5,6,7,8,9,10,11,12];var x=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var u=postdate.split("-")[2].substring(0,2);var h=postdate.split("-")[1];var t=postdate.split("-")[0];for(var e=0;e<q.length;e++){if(parseInt(h)==q[e]){h=x[e];break}}var n=(showPostDate)?'<i><font color="'+acolor+'"> ('+u+" "+h+" "+t+")</font></i>":"";g=(aBold)?"<b>"+g+"</b>":g;var v='<li><a href="'+p+'"><img src="'+img[o]+'" width="'+thumbwidth+'" height="'+thumbheight+'" class="recent-thumb"/></a><a href="'+p+'" class="recent-link">'+g+'</a><div class="spydate">'+n+'</div><div class="spycomment">'+cmtext+"</div>";document.write(v);j++}document.write("</ul>")}document.write('<script src="'+home_page+"feeds/posts/default?max-results="+numposts+'&orderby=published&alt=json-in-script&callback=showrecentposts"><\/script>');
  //]]>
  </script>
  </div>
  <br />
  <span class="Apple-style-span" style="color: black; font-family: arial, sans-serif; font-size: 10px;"><a href="http://mas-amien.blogspot.com/2011/12/cara-membuat-auto-scroll-recent-post.html" target="_blank">Recent Post</a></span>

• Kemudian Klik Simpan

NOTE :

• Ganti http://mas-amien.blogspot.com/ dengan alamat blog kalian dan pastikan ada tanda slash ( / ) di belakang alamat blog.
• boxwidth = 300 adalah lebar widget dalam pixel (px), sesuaikan dengan lebar sidebar blog kalian.
• text = "comment" adalah teks di belakang jumlah komentar, kalian bisa menggantinya dengan kalimat yang sesuai.
• numposts = 10; adalah jumlah posting terbaru yg akan muncul dalam widget
• limitspy=5 adalah jumlah posting terbaru dalam sekali tampilan, kalian bisa mengganti jumlahnya
• intervalspy=6000 adalah kecepatan scroll/spy dalam milisecond (ms), ganti nilainya untuk mengatur kecepatannya.

Selamat Mencoba....semoga bermanfaat

Read More

Cara Membuat Artikel Terkait di Bawah Posting

Membuat related post( Artikel Terkait ), baik yang ditaruh dibawah posting maupun yang berupa related post widget yang diletakkan pada sidebar bukan hanya sekedar pemanis belaka, tapi juga merupakan hal yang sangat bermanfaat. selain dapat meningkatkan page views, related post ini sangat membantu apabila ada beberapa posting lama kita yang belum terindeks oleh mesin pencari. Related Post adalah daftar link posting yang berhubungan. dihubungkan oleh kategori atau label yang sama.Pada tutorial kali ini, saya akan membagikan tutorial tentang bagaimana cara membuat artikel saling terkait dibawah posting pada blogspot.

Berikut ini adalah langkah-langkahnya:

• Login ke account blogger anda,
• Pada dashboard, pilih edit layout–> edit HTML
• Centang Expand widget template
• Cari kode seperti dibawah ini, untuk mempermudah tekan ctrl+F.
  

  <data:post.body/>

• Lalu sisipkan kode berikut persis dibawah kode <data:post.body/>
  

  <!-- Membuat Artikel Terkait -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <H2>Artikel Terkait:</H2>
  <DIV class='rbbox'>
  <DIV style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
  <DIV id='albri'/>
  <SCRIPT type='text/javascript'>
  var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
  var maxNumberOfPostsPerLabel = 4;
  var maxNumberOfLabels = 10;
  maxNumberOfPostsPerLabel = 100;
  maxNumberOfLabels = 3;
  function listEntries10(json) {
  var ul = document.createElement(&#39;ul&#39;);
  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
  json.feed.entry.length : maxNumberOfPostsPerLabel;
  for (var i = 0; i &lt; maxPosts; i++) {
  var entry = json.feed.entry[i];
  var alturl;
  for (var k = 0; k &lt; entry.link.length; k++) {
  if (entry.link[k].rel == &#39;alternate&#39;) {
  alturl = entry.link[k].href;
  break;
  }
  }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  a.href = alturl;
  if(a.href!=location.href) {
  var txt = document.createTextNode(entry.title.$t);
  a.appendChild(txt);
  li.appendChild(a);
  ul.appendChild(li);
  }
  }
  for (var l = 0; l &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
  var raw = json.feed.link[l].href;
  var label = raw.substr(homeUrl3.length+13);
  var k;
  for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
  var txt = document.createTextNode(label);
  var h = document.createElement(&#39;b&#39;);
  h.appendChild(txt);
  var div1 = document.createElement(&#39;div&#39;);
  div1.appendChild(h);
  div1.appendChild(ul);
  document.getElementById(&#39;albri&#39;).appendChild(div1);
  }
  }
  }
  function search10(query, label) {
  var script = document.createElement(&#39;script&#39;);
  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
  + label +
  &#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
  script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
  document.documentElement.firstChild.appendChild(script);
  }
  var labelArray = new Array();
  var numLabel = 0;
  <b:loop values='data:posts' var='post'>
  <b:loop values='data:post.labels' var='label'>
  textLabel = &quot;<data:label.name/>&quot;;
  var test = 0;
  for (var i = 0; i &lt; labelArray.length; i++)
  if (labelArray[i] == textLabel) test = 1;
  if (test == 0) {
  labelArray.push(textLabel);
  var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
  labelArray.length : maxNumberOfLabels;
  if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
  }
  }
  </b:loop>
  </b:loop>
  </SCRIPT>
  </DIV>
  <script type='text/javascript'>RelPost();</script>
  </DIV>
  </b:if>
  <!-- Akhir Membuat Artikel Terkait -->

• Lalu Simpan Template

Demikian Cara Membuat Artikel Terkait di Bawah Posting

Selamat Mencoba.....

Read More

Cara Daftarkan Blog ke Google Search Engine

Siapa seh yang tidak kenal dengan Google search engine...?

Pada posting kali ini saya ingin berbagi untuk para Blogger Pemula, gimana caranya supaya blog kita dapat masuk ke seacrh engine google. Kenapa musti ke google...??? karena Google lah satu-satuanya search engine yang paling top(Rajanya Search Engine).

Karena Google search engine lah yang paling banyak digunakan orang untuk mencari kata kunci atau keyword.Untuk saya sangat menyarankan agar sobat mendaftarkan blog sobat pertama kali di Google search engine.

Ok...mari kita praktekkan langsung.
Untuk cara mendaftarnya silahkan buka(ketik) ke http://www.google.com/addurl atau klik disini. Isikan alamat blog sobat, kemudian klik tombol Submit Request.
Contoh:


Silahkan dicoba, semoga blog sobat segera terindeks di Google search engine.

Read More

Cara Penggunaan Google Fonts

Seperti halnya yang telah sobat ketahui bahwa Google kembali memanjakan para blogger dengan menambahkan variasi fonts di blog. Semua font di google fonts directory berlisensi sehingga dapat digunakan pada web/blog apapun, termasuk di blogspot yang penerapannya tergolong sangat mudah sekali. Buat yang belum tahu, bisa sobat lihat pada contoh demo template ini pada bagian header dan avieri pada bagian header dan judul postingan.

Variasi hurufnya pun cukup banyak, tergantung kita menyesuaikan dengan template yang kita gunakan. Dibawah ini ada beberapa fonts yang bisa sobat terapkan di blog sobat, dan cara penggunaannya.

Berikut ini beberapa contoh fonts yang disediakan oleh Om Google:

<link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'/>

<link href='http://fonts.googleapis.com/css?family=Cardo' rel='stylesheet' type='text/css'/>

• Masuk ke Rancangan 
• Kemudian tuju bagian Edit HTML 
• Copy salah satu kode huruf tersebut dan letakkan diatas kode </head> pada template sobat.
• Kemudian tambahkan font yang sobat gunakan pada bagian css, contohnya seperti berikut :
  

  #header h1 { font-family: 'Cardo', arial, serif; }

  lebih lengkapnya kira-kira seperti dibawah ini :

  #header h1 {
  font-family:'Cardo',arial,serif;
  font-size:46px;
  font-weight:bold;
  letter-spacing:0em;
  line-height:1.2em;
  color:#aaa;
  text-shadow:1px 1px 2px #000;
  margin:0;
  padding:60px 480px 0px 0px;
  }

• Simpan Template

Perhatikan kode yang saya tandai dengan warna merah, karena hanya kode tersebut yang ditambahkan kedalam css template. Sobat juga bisa menggunakannya pada judul postingan (h3) atau judul sidebar (h2).

Baiklah, selamat mencoba dan semoga berhasil.

Read More

Cara Parse Html atau JavaScript

Dulu Saya sempat bingung sekali ketika akan memposting di blogger dengan menggunakan kode html atau javascript sebab kodenya tidak bisa terbaca. Sebab pada waktu itu saya tidak bisa menuliskannya secara langsung, karena biasanya script tersebut akan di eksekusi sebagaimana fungsi dari script itu sehingga kadang akan muncul pesan error atau malah tidak tampil sama sekali. Untuk itu, saya harus melakukan parse kode-kode / tag-tag html atau javascript tersebut agar terbaca saat dibuka.

Setelah cari disana sini akhirnya saya diarahkan oleh OOOMMM GOOGLE ke sebuah situs yang menyediakan tool ini tepatnya di Blogcrowds HTML Parser, dengan tool ini akhirnya saya bisa mengotak-atik html yang ada pada template blog ini.

Naaaaahhhhh bagaimana seh cara menggunakan tool ini....? yoooo...ikuti caranya seperti dibawah ini:

Langkah Pertama klik ke situs nya Blogcrowds HTML Parser lalu copy n paste HTML atau JavaSript nya misalnya kode berikut ini :

<span class='dleft'>Amin Susanto &#169; 2011 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a></span>
<span class='dright'>amiensusanto@gmail.com</span>

( lihat contoh gambar di bawah )


Klik PARSE maka Hasilnya seperti dibawah ini:


Selain digunakan untuk merubah template blog, Parse biasanya di pakai untuk pasang Adsense dll....
Bagaimana...??? Mudah sekali kan...!!! selamat mencoba

Read More

Facebook Blogger Templates

Berawal dari Browsing di OM GOOGLE, iseng mencari template buat Primagama Pomad kira-kira template yang cucok apa supaya menarik jika dilihat oleh para pengunjungnya khususnya buat siswa-siswa. JREEEEEEENG...Satu kata yang terucap....Sungguh luar biasa OM GOOGLE Benar-benar seperti orang tua kita, apa yang pengen kita mau benar-benar dikasih(ilmu pengetahuan tentunya) klo mintanya kebahagiaan dunia dan akhirat Pasti cuma satu Hanya Kepada Alloh SWT.

Kembali ke topik,disini saya menemukan sebuah template yang tampilannya hampir sama dengan facebook, jika para blogger melakukan search engine di google dengan kata kunci "facebook blogger templates" maka anda akan diarahkan oleh mesin pencari Google kesini blogtemplate4u.com lihatlah gamber dibawah ini:

Kenapa saya ambil template ini, alasannya sangat simple, facebook kini sedang digandrungi di hampir seluruh dunia (kata google,klo kata saya mah mung siji, yo bojoku sing tak gandrungi hehehehehe...). Dengan template ini besar kemungkinan para pengunjung akan sedikit tertarik karena tampilannya yang mirip facebook, sehingga tak sadar bahwa yang dikunjungi adalah blog.

Tidak cuma sampai disini dan langsung saya terapkan di blog PG Pomad, karena setelah saya cermati kok masih ada beberapa yang kurang. Setelah beberapa minggu akhirnya proses edit template ini selesai dan siap untuk launching.

Ok..saya tidak mau banyak nulis disini(ora iso mikir bro) langsung aja dibawah ini tampilannya :
Klik pada gambar untuk tampilan yang lebih besar..!!!

Atau Langsung ke blog Primagama Pomad

Bagi Cabang Primagama yang mau menggunakan template ini silahkan Hubungi Sang Empunya Blog disini:

Add Friend

Read More

Cara Menambahkan Text Area pada blog dengan memakai HighLight All

Kalau pada postingan sebelumnya kita membahasa tentang cara menambahkan textarea pada blog, nah pada postingan kali ini saya akan coba variasi lain yakni text area dengan menggunakan tombol highlight all. Tombol highlight all ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna tatkala text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy. Untuk membuat text area dengan menggunakan highlight ini silahkan anda perhatikandan copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 84px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Contoh text area dengan Highlight All. Belajar NgeBlog disini Bareng Mas Amien </textarea></p></div></form>

Hasilnya :

Contoh text area dengan Highlight All. Belajar NgeBlog disini Bareng Mas Amien

Nah....Kalau yang ditambahkan kode HTML bagaimana ?
Caranya sama tinggal anda ganti tulisan contoh text area dengan highlight dengan kode HTML contoh nya :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 84px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Contoh text area dengan Highlight All. Belajar NgeBlog disini Bareng Mas Amien </textarea></p></div></form>

Naaaaahhh....Selamat Mencoba, Semoga berhasil

Read More

Cara Membuat TextArea di Blog

Apa itu text area?

Untuk memudahkan anda memahami apa itu text area, silahkan alihkan perhatian anda ke kolom sebelah kanan layar, di bawah tulisan Mau tuker link, ada sebuah kotak yang di dalamnya berisi text kode-kode HTML, itulah yang di sebut text area. Nah dengan melihat contoh tadi, maka dapat kita katakan bahwa Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

<p align="center"><textarea name="code" rows="4" cols="30"> Belajar Membuat Blog di http://mas-amien.blogspot.com </textarea></p>

Hasilnya akan nampak seperti ini

Belajar Membuat Blog di http://mas-amien.blogspot.com

Keterangan :

• rows="4", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka "4" tadi dengan angka yang lebih tinggi nilainya.
• cols="30", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka "30" tadi dengan angka yang lebih tinggi nilainya.

Bagaimana...? Mudah sekali bukan..!!!

Read More

Memasang Tombol Facebook Like/Suka Di Blog

Pada postingan ini saya akan membahas tentang teknik lain untuk menyebarkan artikel blog anda di Facebook yaitu dengan memasang tombol like Facebook pada postingan blog anda.

Keuntungan memasang tombol like ini adalah pembaca dapat dengan mudah berbagi postingan yang mereka sukai kepada teman facebook mereka hanya dengan satu klik. Dan sebagai pemilik blog, anda juga mendapat keuntungan berupa tambahan trafik dari pembaca yang mengelink artikel anda di profil Facebook mereka.

Nah bagi anda yang tertarik memasang tombol like ini, silahkan ikuti langkah- langkah dibawah ini:

• Buka Blogger. Masuk ke menu Rancangan -> Edit HTML
• Beri centang pada "Expand Widget Templates"
• Cari kode <data:post.body/> 
• Jika anda menemukan dua kode <data:post.body/> maka pilih yang pertama
• Letakkan kode berikut ini dibawah <data:post.body/> jika kalian ingin memasang tombol like dibawah posting atau letakkan diatas <data:post.body/> jika kalian ingin memasang tombol like diatas posting.
  

  <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' height='30' scrolling='no' style='border:none; overflow:hidden; '/>

• Lalu Save template anda.

Hasilnya akan seperti ini


Kalau kalian ingin membuat tombol like dalam bentuk ini



maka ganti standard dengan button_count
Kalian juga dapat mengganti warna background tombol menjadi gelap dengan mengganti light menjadi dark

Selamat mencoba. Semoga bermanfaat...

Read More

Cara Membuat Group di Facebook

Bagaimana cara membuat group di facebook?
ini adalah salah satu keyword/kata kunci yang dicari oleh orang-orang yang mampir google.com. Facebook Group adalah sebuah fasilitas yang dimiliki facebook untuk para penggunanya (user) dalam membuat suatu komunitas atau kumpulan orang yang mempunyai hobi, aktivitas, atau berbagai persamaan lainnya. Dengan membuat group kita dapat membuat sebuah komunitas yang dapat berbagi informasi dan bahkan kopi darat jika memang diperlukan. Sayangnya, ada beberapa pihak yang menyalahgunakan fungsi dari group, misalnya menjadikan group sebagai ajang iklan kepada para membernya. Dan yang paling parahnya iklan itu tidak ada kaitannya dengan group tersebut.

Mari langsung menuju ke pembahasan cara membuat group di facebook :

• Pada halaman home facebook klik buat group/create a new group (sebelah kiri)
  
  
• Akan tampil sebuah kotak :
  
  
• Silakan isi....
  - Nama Grup/Group Namedengan nama yang Anda inginkan
  - Anggota/member adalah orang-orang yang akan anda undang menjadi bagian dalam group tersebut
  - Privasi/privacy grup facebook ada 3 jenis yaitu terbuka (open), tertutup (closed), dan rahasia (secret)
  
  Perbedaan dari 3 privasi grup adalah sebagai berikut :
  • Terbuka(open) = anggota dan isi dari konten group terbuka untuk umum dalam arti bisa dilihat semua orang termasuk non anggota
  • Tertutup (closed) = anggota untuk umum dan konten hanya untuk anggota
  • Rahasia (secret) = anggota dan isi konten tidak untuk umum.
  
  
• Terakhir silakan tekan buat (create)

Mudah Sekali Bukan....?
Selamat Mencoba dan Berkarya

Read More

Cara Merubah Username Facebook

Facebook username atau nama pengguna adalah sebuah link yang bisa anda pakai untuk mengingat halaman profil Facebook anda menjadi lebih mudah, tidak seperti link aslinya yang berupa angka yang banyak itu. Dalam waktu beberapa saat ketika pembuatan Facebook username dibuka sudah ada jutaan orang membuatnya, karena Facebook username adalah sebuah link unik yang hanya dapat dimiliki oleh satu orang. Bayangkan saja begitu banyak orang yang menggunakan Facebook dan bernama sama yang rata-rata ingin username facebooknya dengan namanya sendiri. Dengan kata lain mereka harus berlomba-lomba adu cepat untuk mendapatkan Facebook username tersebut.

Untuk mendapatkan Facebook usename silakan Ikuti Langkah-langkah berikut ini

• Login ke Facebook.com > klik disini
• Ikuti Langkah berikutnya
  Tekan Berikutnya.....
  Silakan masukan username yang diinginkan kemudian tekan cek availibality (Periksa Ketersediaan)
• 
  
• akan tampil seperti gambar dibawah ini
  
  
• Setelah proses diatas selesai maka akan ada pemberitahuan seperti dibawah ini
  
  Ternyata mudah kan membuat username facebook
  

Selamat Mencoba.....

Read More

Cara Mudah Mengganti Favicon Blogspot

Jika suatu ketika teman-teman berkunjung ke suatu blog, dan melihat ada yang aneh dengan blog tersebut, padahal membuat blognya menggunakan jasa blogger juga seperti teman-teman. Apa tuh keanehan yang dimaksud? anunya lho... icon yang ada di Address Bar-nya kok nggak berlogo Blogger[contoh gambar dibawah ini].

Icon tersebut adalah icon yang muncul di blonya teman-teman jika memang belum diotak-atik atau belum diganti. tapi disini teman-teman bisa mengganti icon Blogger tersebut dengan fotonya teman-teman ataupun gambar menarik lainnya.

Pada dasarnya tidak terlalu sulit jika teman-teman ingin mengganti sesuai keinginan kita....ada 2 cara untuk merubahnya
OK PERHATIKAN langkah-langkah berikut :
Pertama :

• Login ke Blogger.
• Klik Rancangan >> trus Klik Edit HTML
• Lalu cari kode </head>, dan letakkan kode berikut sebelum kode </head>
  

  <link href='https://lh5.googleusercontent.com/-6rUUPJ6uMT4/TpPQtv0_98I/AAAAAAAAAGU/XqHbXOmT0Ts/s20/icon.jpg' rel='SHORTCUT ICON'/>

Note:
Ganti https://lh5.googleusercontent.com/-6rUUPJ6uMT4/TpPQtv0_98I/AAAAAAAAAGU/XqHbXOmT0Ts/s20/icon.jpg dengan alamat URL gambarnya teman-teman.

Kedua :
Sebenarnya fitur yang satu ini sudah dikeluarkan oleh pihak blogger beberapa waktu yang lalu, hanya saja disini saya baru sempat share buat teman-teman blogger. khususnya buat pemula yang belum tau bagaimana caranya merubah favicon di blog.
perlu teman2 ketahui dengan fitur terbaru blogger ini kita tak perlu mengenal kode2 seperti pada trik yang diatas, akan tetapi cukup dengan klik, klik, dan klik.

• Login ke Blogger.
• Klik Rancangan
  

• yang perlu anda lakukan adalah mengklik edit, dan upload gambar favicon kesukaan anda, syarat ukuran gambarnya disesuaikan:
• Jika sudah berhasil, maka tampilan favicon blog blogger anda akan nampak seperti gambar berikut

Bagaimana..Gampang bukan...??

Selamat Mencoba

Read More

Cara Memasang BreadCrumbs

Jika Anda termasuk salah satu Blogger yang sedang bergelut dalam dunia SEO, maka tak ada salahnya kita menggunakan trik yang satu ini. Trik ini bernama "Breadcrumbs", dan biasanya nanti akan tampil di bagian atas postingan kita. Jika sobat penasaran seperti apa penampilannya? Silahkan untuk melihat pada bagian atas postingan blog ini, pasti akan ada tulisan seperti gambar dibawah ini.

Bagaimana cara memasang breadCrumbs agar blog lebih SEO Friendly ???
Naaaah...itulah yang akan saya bagi kepada anda.

Menurut beberapa ahli pakar SEO, trik ini benar-benar besar pengaruhnya untuk SEO blog kita, bagi sobat yang tertarik untuk memasang breadcrumbs di blognya, silahkan untuk menyimak langkah-langkah berikut:

• Login ke Blogger.com
• Klik Menu "Rancangan"
• Klik "Edit HTML"
• Jangan lupa untuk mencentang kotak "Expand Template Widget"
• Lalu Carilah kode tag ]]></b:skin> dan copy lalu paste kode berikut di atasnya
  

  .breadcrumbs{border-bottom:1px dotted #999;margin:2em 0 0.5em;padding:0 0 0.5em;font-size:10px}

• Terus cari kode <b:includable id='main' var='top'>
• Jika sudah, silahkan letakkan kode berikut di atas
  

  <b:includable id='breadcrumbs' var='post'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <p class='breadcrumbs'>
  <span class='post-labels'>
  <b:if cond='data:post.labels'>
  <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> &gt;
  <b:loop values='data:post.labels' var='label'>
  <b:if cond='data:label.isLast == &quot;true&quot;'>
  <a expr:href='data:label.url' rel='tag'> <data:label.name/></a>
  </b:if>
  </b:loop>
  <b:if cond='data:post.title'>
  &gt; <b><data:post.title/></b>
  </b:if>
  </b:if>
  </span>
  </p>
  </b:if>
  <!-- End of Breadcrums --Amin Susanto -->
  </b:includable>

• Selanjutnya carilah kode <b:loop values='data:posts' var='post'> maka nanti sobat akan menemukan dua atau tiga kode yang sama, maka pilihlah yang paling atas atau yang paling pertama kali sobat temukan. Jika sudah ketemu, silahkan letak kode berikut di bawahnya

  <b:include data='post' name='breadcrumbs'/>

• Klik Simpan, silahkan lihat tampilannya pada blog anda.

Bagaimana Mudah Bukan..???
OK...Selamat Berkreasi

Read More

Memasang Tombol Share Melayang pada Blog - Floating Share Button

Tombol share melayang sebenarnya tidak beda dengan tombol share lainnya, yaitu berfungsi untuk berbagi/share konten blog ke berbagai jejaring sosial yang ada di internet. Bedanya, tombol yang satu ini posisinya melayang di blog kita, jadi walau pengunjung melakukan scrolling, tombol share tersebut akan tetap kelihatan di samping blog kita. Tentu dengan posisinya yang melayang itu, kesempatan untuk diklik oleh para pengunjung dengan tujuan sharing/berbagi akan semakin besar. Dalam Tombol share tersebut mencakup tiga layanan, yaitu: Google plus, facebook dan twitter.

Bagi Anda yang tertarik untuk menampilkannya ke dalam blog anda silahkan gunakan kode berikut, caranya:

1. login ke blogger
2. Pilih Rancangan
3. Lalu "add gadget"
4. Pilih HTML/Javascript
5. isikan dengan kode berikut di dalamnya
   

   <!-- floating page sharers Start-->
   <style type="text/css">
   #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}
   #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
   .fb_share_count_top {width:48px !important;}
   .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
   .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
   .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
   </style>
   
   <div id='pageshare' title="Share to Your Friends">
   <div style="clear: both;font-size: 16px;text-align:center;">
   </div>
   <div class='sbutton' id='gplusone'>
   <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
   
   <g:plusone size="tall"></g:plusone>
   </div>
   <div class='sbutton' id='fb'>
   <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
   </div>
   <div class='sbutton' id='rt'>
   <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script>
   </div>
   <!-- floating page sharers End --></div>

6. Klik Simpan

Silahkan lihat hasilnya! Menarik bukan?

Read More

Pasang Icon Yahoo ! Messenger pada Blogger

Untuk menampilkan icon status online yahoo ! messenger, disini saya akan menampilkan 5 pilihan, yakni style id 1, style id 2, style id 3, style id 4, serta style id 5, Apa perbedaan dari style id ini? perbedaannya adalah ukuran dari icon itu sendiri, untuk melihat perbedaan style id, silahkan sobat perhatikan gambar berikut :

masing-masing gambar mempunyai URL adddress sendiri yaitu :

Untuk Style ID 1
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=1" border="0">

Untuk Style ID 2
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=2" border="0">
Untuk Style ID 2

Untuk Style ID 3
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=3" border="0">

Untuk Style ID 4
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=4" border="0">

Untuk Style ID 5
<img src="http://opi.yahoo.com/online?u=YahooID&m=g&t=5" border="0">

Ganti YahooID dengan id yahoo anda
Penambahan kode border="0", agar gambar yang di hasilkan terhindar dari adanya garis tepi atau bingkai. Tapi tentu saja kode diatas adalah hanya untuk menampilkan gambar icon YM nya dan belum bisa bereaksi walaupun sudah di klik oleh para pengunjung.

Read More

Menambahkan Author Box / Paraf di Bawah Postingan

Siapa seh yang menulis tulisan ini? Untuk itu kita bisa menambahkan Author Box, yaitu profil singkat si penulis atau juga bisa di ganti dengan tanda tangan si empunya blog ( seperti nampak pada gambar disamping) beserta photonya. Author box itu bisa menampilkan biografi singkat diri kita dan juga mungkin bisa menambahkan kontak kita atau terserah Anda akan di isi apa. Dengan menambahkan author box di bawah komentar akan membuat tulisan kita itu jelas. Selain itu bisa juga untuk membangun personal branding(Narsis hehehehe).

Cara Menambahkan Author Box di Bawah Postingan

• Login ke Blogger.
• Di halaman Dasbor, kita pilih Rancangan.
• Kemudian pilih Edit HTML
• Beri tanda centang pada Expand Template Widget
• Cari kode ]]></b:skin> dan taruh kode berikut di atasnya;
  

  .author-box {
  background: #f0f0f0;
  margin: 20px 0 40px 0;
  padding: 10px;
  overflow: auto;
  color:#888;
  font-family:verdana, sans-serif;
  }
  .author-box p {
  margin: 0;
  padding: 0;
  }
  .author-box a{
  color:#666;
  }
  .author-box img {
  background: #FFFFFF;
  float: left;
  margin: 0 10px 0 0;
  padding: 4px;
  }

• Cari kode <div class='post-footer-line post-footer-line-1'> dan taruh kode berikut ini di bawahnya;
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='author-box'>
  

  <p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://lh5.googleusercontent.com/-52kfBB7MjYA/TnmyYCDXJTI/AAAAAAAAAEg/ipz179fX6ls/parafku.png' width='70'/><b>Tentang Saya</b><br/>

  Sekilas tentang Profil Anda<br/></p>
  </div>
  </b:if>

• 
  
  Sebelum menyimpan, ganti https://lh5.googleusercontent.com/-52kfBB7MjYA/TnmyYCDXJTI/AAAAAAAAAEg/ipz179fX6ls/parafku.png dengan URL photo kita, dan tulis sekilas tentang diri kita. Dan juga bisa menganti judul about author. Dan juga mengubah kode css yang disesuaikan dengan tampilan blog kita.
• 
  Simpan jika sudah selesai.

Read More

Cara Menyembunyikan Navbar pada Blogger

Apakah Anda merasa terganggu atau tidak dengan navbar? Mungkin Anda salah satunya yang merasa terganggu, makanya disini saya akan berbagi info seputar bagaimana caranya menyembunyikan navbar.

Perlu Anda ketahui sebenarnya navbar itu juga ada manfaatnya, yaitu untuk login atau menuju dasbor. Bahkan ada juga fitur untuk berbaginya (share) ke sosial media seperti twitter, facebook, DLL. Ok langsung keTKP.

Cara Menyembunyikan Navbar Blog

• Login ke Blogger.
• Di halaman Dasbor, kita pilih Rancangan.
• Kemudian pilih Edit HTML
• Beri tanda centang pada Expand Template Widget
• Cari kode body {
• Jika sudah ketemu taruh kode berikut di atasnya:
  

  #navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
  #navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,
  FinishedOpacity=100)}

• Simpan Template jika sudah selesai.

Read More

Membuat Huruf Besar (Drop Cap) pada Awal Postingan

Apakah kalian tahu drop cap itu apa? drop caps adalah huruf besar yang ukurannya bisa 10 kali lipat dari huruf biasa yang posisinya di setiap awal artikel yang ada diblog ini.lihat gambar dibawah ini

Nah kalau memang kalian tertarik untuk membuatnya? baiklah saya akan berbagi tutorialnya. Sebenarnya membuat drop caps ini sangatlah mudah.

Naaaaaahhhh untuk lebih jelasnya silahkan ikuti langkah-langkah di berikut ini :

• Login ke blogger 
• Langsung ke Tata Letak (sekarang Rancangan) -->> Edit HTML
• Cari kode berikut ]]></b:skin>
• Masukkan kode di bawah ini, di atas ]]></b:skin>
  /* kode untuk huruf awal
  ----------------------------------------------- */
  .huruf {
  float:left;
  color:#000;
  line-height:60px;
  padding-right:5px;
  font-family:trebuchet ms,verdana;
  font-size:60px;
  }
• Klik Save Template / Simpan

Note:

Untuk menerapkan drop caps ini perlu kalian perhatikan, setiap posting anda harus menggunakan menu Edit HTML (bukan lewat edit HTML di template anda) Ketikkan kode ini dulu <span class="huruf">HURUF AWAL</span> Kata huruf awal, ganti dengan huruf pertamamu yang akan kamu posting. Misalnya : <span class="awal">A</span>pakah dan seterusnya......

Contoh pengetikannya :


Maka hasilnya akan nampak seperti diatas...

Selamat Mencoba.....

Read More

Membuat Daftar Isi Blog

Pada kesempatan ini saya akan mengulas bagaimana cara membuat daftar isi pada blog secara otomatis, yang dimaksud otomatis disini adalah jika kita melakukan postingan baru maka secara otomatis judul blog yang baru akan langsung masuk ke dalam daftar isi tanpa harus melakukan edit pada layout/template blog kita.

Dengan trick ini, kita hanya membutuhkan sedikit tempat di halaman blog kita, karena jika pengunjung ingin melihat daftar isi tersebut, maka akan terbuka jendela baru. Sehingga di halaman blog kita cukup dicantumkan dua kata yaitu : Daftar isi, dan bisa kita letakkan di tempat yang kita inginkan(sekarepe dhewe).

Caranya seperti langkah-langah berikut ini :

LANGKAH PERTAMA

• Masuk ke blogger 
• Klik Layout/Rancangan di dashboard menu
• Klik Edit HTML
• Beri Centang pada Expand Template Widget
• Cari kode dibawah ini.
  

  <b:include data='post' name='post'/>

• Ganti Kode diatas dengan kode dibawah ini.
  

  <b:if cond='data:blog.homepageUrl != data:blog.url'>
  <b:if cond='data:blog.pageType != &quot;item&quot;'>
  <a expr:href='data:post.url'>
  <div style='padding:6px 0 6px 5px;border-right:1px solid #ccc;border-bottom:1px solid #ccc;margin-bottom:2px;background:#EDEFF4;color:#012788;'>
  <data:post.title/></div></a>
  <b:else/>
  <b:include data='post' name='post'/>
  </b:if>
  <b:else/>
  <b:include data='post' name='post'/>
  </b:if>

LANGKAH KE DUA

• Masuk ke blogger 
• Klik Layout/Rancangan di dashboard menu
• Pilih Elemen Laman
• Tambah Gadget - Pilih HTML/JavaScript Tambah
• Copy dan Paste kode di bawah ini :
  

  <a href="http://NamaBlogAnda.blogspot.com/search?max-results=200">Daftar isi</a>

Note :

Ganti NamaBlogAnda.blogspot.com dengan alamat blog anda, Ganti results=200 dengan jumlah yang anda inginkan, angka 200 menunjukkan jumlah judul yang akan di tampilkan.

Jika sudah selesai hasilnya akan nampak seperti di blog ini


Selamat Mencoba....

Read More