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