Home All posts

Sabtu, 18 Mei 2013

Cara Membuat Widget 3 in 1 Melayang (Blogger, Twitter, Facebook)

✔ Anonim Comment

Asalamualaikum.Wr.Wb. - Setelah saya Update tentang Free Download Template SEO Friendly Terbaru 2012 dan template itu sangat menarik karena sama seperti tempate Kertas Kecil Kita ini. Kali ini saya akan share lagi tentang Widget 3 in 1 Floating yang sangat menarik dan Efektif ini kepada kalian semua. Widget 3 in 1 floating yang menurut saya merupakan salah satu widget blogger terbaik di tahun 2012 ini. 3 buah widget melayang yang digabung dalam 1 gadget. Demo penerapan widget melayang (floating widget) ini bisa sobat lihat disamping sidebar kanan blog ini. Seperti apa Cara membuat widget Follower Blogger, status Twitter dan Facebook Like, sekarang waktunya kita bedah bersama sama Widget ini dalam Tips dan Trik NgeBlog Kertas Kecil Kita ini.
Cara Membuat Widget Melayang Google Friend Connect, Twitter dan Facebook Like Box :
1.   Login ke dashboard blogger anda, pilih Rancangan > Elemen Laman > Add gadget (HTML/Javascript).

2.       Copy script master widget dibawah ini dan paste pada gadget.
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVGXeI9fzCg3YB5ltL1oqs9xu-iz8F6M7jLtdZgwKo-QiTAVxGiSaTwKFgE0_fTidRUuED3_VjHrKAX3beX6A0Zr9p5rhkVBo8KIrF-BEjSLchow-gQNWkFJ0RH3FufQJWM0KTHp5w_d8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RHfqmN1doSkGjrvjD-XbeMgmSHmoi0vDQ1y_RnltqFTRC34ZuWTYIy2oDQ5jc6-KNNtiWPtS3YSDMpcRCYM6qjBdhGZE4HWzVeetKS9Ukv3GEkohH8la8SNsvwkXFY1StguWpwdSrwxz/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiSFvM04sobDp8m0HCDA3o0d_3In34O52gnA5SFyYtQIkc_mSN-x61sdtEcgZI880rQm7-un8Jolj1ZRnMJwOQdiU25PM4soqEyK5v1Ys7aAIwngkyEK4D3iKu8gGCWXPFaV6Px4cOl6U/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOflWbmb0aWlHoHt_HIBZBjxoIeVd5iL__-GrJhedofa08Xm7hFccQ-uJ5B-JW3poKjr8pO7OLKnFubhcae7KDb7W_Zblq2YzZq6ykk4otFzmdvCo1sVuZiA5IIlbJqWyMmkJPtQovT8z/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5B90Y48o3IWNJeEw36RmTyIxq4VwwxfAur8-pb2_HKrzp1lzg0XIm-iBXYLkIz1vIyCiSrkVQJp0E3YWgZllrkPris_zNWps_keWbhBH1fh6b6wNC2eMzQCxmITHUK1d75uCTBEs1e3s/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFg7_GIWRAc3PXRqoUyoOU6mWcBxhmBoieCCdGtk0tgC0_8MeJKzYsrMM2B3dzMKT4hyphenhyphenYvLOxJkmOAkvk7Q0mFb61N30t-cgJzSfp810g26eCUSixPyj6a3KEFy3YDTn5FdVu7Bzs8hvD/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
CONTENT BLOGGER HERE
</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
CONTENT TWITTER HERE
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">
CONTENT FACEBOOK HERE
</div>
</div>
3.       Kustomisasi widget :
  • Ganti tulisan CONTENT BLOGGER HERE dengan kode HTML Google Friend Connect anda.
  • Ganti tulisan CONTENT TWITTER HERE dengan kode HTML widget status Twitter anda.
  • Ganti tulisan CONTENT FACEBOOK HERE dengan kode HTML Facebook Like Box anda.
4.      Bentuk akhir dari kode script ini ( Final Code ) akan menjadi seperti script widget milik saya dibawah ini :
<style type="text/css">
.barrightblogger{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOVGXeI9fzCg3YB5ltL1oqs9xu-iz8F6M7jLtdZgwKo-QiTAVxGiSaTwKFgE0_fTidRUuED3_VjHrKAX3beX6A0Zr9p5rhkVBo8KIrF-BEjSLchow-gQNWkFJ0RH3FufQJWM0KTHp5w_d8/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:50px; z-index:1000;}
.barrightbloggerc{ background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-RHfqmN1doSkGjrvjD-XbeMgmSHmoi0vDQ1y_RnltqFTRC34ZuWTYIy2oDQ5jc6-KNNtiWPtS3YSDMpcRCYM6qjBdhGZE4HWzVeetKS9Ukv3GEkohH8la8SNsvwkXFY1StguWpwdSrwxz/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:50px; z-index:1100;}
.barconteblogger{margin:5px 0 0 47px}
.barrighttwitter{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNiSFvM04sobDp8m0HCDA3o0d_3In34O52gnA5SFyYtQIkc_mSN-x61sdtEcgZI880rQm7-un8Jolj1ZRnMJwOQdiU25PM4soqEyK5v1Ys7aAIwngkyEK4D3iKu8gGCWXPFaV6Px4cOl6U/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:210px;z-index:1000;}
.barrighttwitterc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAOflWbmb0aWlHoHt_HIBZBjxoIeVd5iL__-GrJhedofa08Xm7hFccQ-uJ5B-JW3poKjr8pO7OLKnFubhcae7KDb7W_Zblq2YzZq6ykk4otFzmdvCo1sVuZiA5IIlbJqWyMmkJPtQovT8z/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:120px; z-index:1100;}
.barcontetwitter{margin:5px 0 0 47px}
.barrightfacebook{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv5B90Y48o3IWNJeEw36RmTyIxq4VwwxfAur8-pb2_HKrzp1lzg0XIm-iBXYLkIz1vIyCiSrkVQJp0E3YWgZllrkPris_zNWps_keWbhBH1fh6b6wNC2eMzQCxmITHUK1d75uCTBEs1e3s/');background-repeat:no-repeat;width:39px;height:159px;position:fixed;right:0px;top:370px; z-index:1000;}
.barrightfacebookc{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFg7_GIWRAc3PXRqoUyoOU6mWcBxhmBoieCCdGtk0tgC0_8MeJKzYsrMM2B3dzMKT4hyphenhyphenYvLOxJkmOAkvk7Q0mFb61N30t-cgJzSfp810g26eCUSixPyj6a3KEFy3YDTn5FdVu7Bzs8hvD/');background-repeat:no-repeat;width:288px;height:345px;position:fixed;right:0px;top:185px; z-index:1100;}
.barcontefacebook{margin:5px 0 0 47px}
</style>
<div class="barrightblogger" onmouseover="this.className='barrightbloggerc'" onmouseout="this.className='barrightblogger'">
<div class="barconteblogger">
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-3587425820990824703" style="width:250px;border:1px solid #ff0000;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['BORDER_COLOR'] = '#ff0000';
skin['ENDCAP_BG_COLOR'] = '#ffffff';
skin['ENDCAP_TEXT_COLOR'] = '#ff0000';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#000000';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#ffffff';
skin['CONTENT_HEADLINE_COLOR'] = '#ff0000';
skin['NUMBER_ROWS'] = '5';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
 { id: 'div-3587425820990824703',
   site: '12625880981379543615' },
  skin);
</script>

</div>
</div>
<div class="barrighttwitter" onmouseover="this.className='barrighttwitterc'" onmouseout="this.className='barrighttwitter'">
<div class="barcontetwitter">
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 30000,
  width: 250,
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    behavior: 'all'
  }
}).render().setUser('KertasKecilKita').start();
</script>
</div>
</div>
<div class="barrightfacebook" onmouseover="this.className='barrightfacebookc'" onmouseout="this.className='barrightfacebook'">
<div class="barcontefacebook">


<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FKertas-Kecil-Kita%2F252332308146760&amp;width=250&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=286045748116584" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:290px;" allowtransparency="true"></iframe>

</div>
</div>
5.      Jika sudah selesai melakukan kustomisasi, Save / Simpan gadget dan lihat hasilnya.

Jumat, 17 Mei 2013

Live Demo Cool Button

✔ Anonim Comment
KLIK SALAH SATU TOMBOL DI BAWAH UNTUK MELIHAT EFEKYA...!!!


Lihat Bagaimana Cara Membuat Tombol di atas, klik DISINI untuk info lebih lanjut...!!!

Cara Memperkecil Ukuran CSS Untuk Mempercepat Loading Blogger

✔ Anonim Comment
Selain jenis dan mutu artikel, Salah satu alasan mengapa trafik pengunjung blog bisa meningkat atau menurun yakni kecepatan loading atau kecepatan memuat blog. Blog yang mempunyai kecepatan loading diatas rata-rata akan mampu menarik pengunjung dan hal ini juga ditegaskan oleh mesin pencari google bahwa "Website/Blog Harus Cepat".

Salah satu cara yang bisa dilakukan untuk mempercepat waktu load blog adalah dengan mengkompress CSS atau mengurangi pemakaian javascript yang tidak penting atau hosting Javascript di Google Code dan sesuai dengan judul artikel kali ini, maka saya akan menjelaskan bagaimana cara memperkecil ukuran CSS blog agar mampu mendongkrak kecepatan waktu load pada saat pengunjung melakukan request.
mempercepat loading blog
Penting...!!!
Sebelum mengkompress CSS template blog, saya sarankan untuk membackup full template, hal ini untuk menghindari kesalahan dalam melakukan kompress CSS.
  • Buka situs www.cssdrive.com atau www.csscompressor.com
  • Copy kode CSS template anda dan pastekan di dalam form csscompressor. Ingat CSS yang harus dicopy dan dicompress yakni di antara tag <b:skin><![CDATA[ dan ]]></b:skin>. Lihat Contohnya :
<b:skin><![CDATA[
#header-wrapper{width:960px;margin:0 auto}
#header-inner{background-position:center;margin-left:auto;margin-right:auto}
#header{float:left;width:525px;text-align:left;color:#666;margin:0}
#header2{float:right;width:428px;margin-right:0px;text-align:left;color:#555}
]]></b:skin>
Keterangan : Warna biru adalah CSS yang akan dicompress.
Kompres CSS Untuk Mempercepat Loading Blog
  • Jika kode CSS sudah dimasukkan, tekan "Compress-it!". Maka hasilnya akan seperti ini.
Kompres CSS Untuk Mempercepat Loading Blog
  • Selanjutnya, ganti kode CSS template anda sebelumnya dengan kode CSS yang sudah di kompress tadi. Simpan dan lihat hasilnya... 
Note :
Untuk mengkompres kode CSS, saya sarankan agar mengkompress kode CSS per-bagian. Hal ini bertujuan untuk memudahkan anda dalam mengedit kode CSS template.
Semoga Bermanfaat...!!!

Kode Struktur dasar XML/HTML Template Blog/Website

✔ Anonim Comment
Bagi para pemula blogger, mengenal dan memahami Kode Struktur dasar XML/HTML Template Blog/Website merupakan hal mutlak yang harus diketahui dan dipahami. Mengapa? karena dengan mengenal struktur dasar xml/html template blog akan bisa mempermudah dalam mengedit dan memodifikasi template. Contohnya seperti menambahkan header, kolom widget, footer dan lain sebagainya. 
Struktur dasar XML/XHTML template blogger terdiri dari beberapa bagian, diantaranya header, body outer, main, post body, sidebar dan footer. Semua element ini dibungkus oleh beberapa tag, mulai dari yang terluar sampai yang paling dalam. Untuk lebih jelasnya, perhatikan gambar dibawah ini.

Mengenal Struktur dasar XML/HTML Template Blogspot

Mengenal Struktur Dasar Kode XML/HTML Template Blogspot

<html>
<head>
Tempat untuk font script dan meta content
<b:skin><![CDATA[
Tempat CSS / Skin
]]></b:skin>
</head>
<body>
Tempat untuk content header, body, main, sidebar dan footer
</body>
</html>

Penjelasan Tags !

1. Tag HTML

    Tag pembuka <html> dan tag penutup </html> merupakan desain awal (standard) untuk membentuk atau menciptakan suatu template atau design website yang didalamnya berisi semua element xml/html

2. Tag Head

    Diantara tag pembuka <head> dan penutup </head> terdapat tag title, skin/css dan script. Isi tag head ini merupakan bagian penting untuk membangun blog atau website seperti peletakan font, script, meta content dan css/skin. Posisi peletakan font dan meta content, biasanya di letakkan tepat di bawah tag pembuka <head> sedangkan untuk CSS/Skin diletakkan di antara tag pembuka <b:skin><![CDATA[ dan tag penutup ]]></b:skin>.

3. Tag Body

    Tag body ini merupakan tempat untuk menampilkan atau memvisualisasikan semua aktifitas blog, dan biasanya terbagi dalam 4 element utama, header (menu navigation), main-wrapper (post body), side-wrapper (widgets) dan footer (copyright atau credits)
Untuk menguraikan secara keseluruhan dan menggabungkannya menjadi template yang utuh, berikut kerangkanya.
<html>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[
body {..............}
#header-wrapper {..............}
#content-wrapper {..............}
.post {..............}
.left-sidebar-wrapper  {..............}
.right-sidebar-wrapper  {..............}
#footer {..............}
]]></b:skin>

</head>

<body>
<div id='outer-wrapper'><div id='wrap2'>
<!-- start content-wrapper -->

<div id='header-wrapper'>
<!-- widget header, description blogger-->
</div>

<div id='content-wrapper'>
      <div class='sidebar' id='left-sidebar-wrapper'>
       <!-- widget Sidebar Left-->
       </div>     

       <div class='post-wrapper' id='main-wrapper'>
       <!-- widget main-wrapper, post, comment and content-->
        </div>    
       <div class='sidebar' id='right-sidebar-wrapper'>
       <!-- widget Sidebar Right-->
       </div>

<div class='clear'>&#160;</div>  <!-- do not remove -->
</div>

<!-- end content-wrapper -->

<!-- start footer-wrapper -->

<div id='footer-wrapper'>
<!-- content footer-->
</div>

<!-- end footer-wrapper -->

</div>

</body>
</html>
Demikianlan penjelasan singkat mengenai struktur dasar kode XML/HTML template blogspot, semoga dengan adanya penjelasan tersebut diatas, bisa menambah pengetahuan anda. Terima kasih !

Cara Membuat Tombol Efek Unik Untuk Blogger

✔ Anonim Comment
Membuat salah satu tombol atau button pada blog adalah sebuah hal yang tidak jarang sahabat bloggers lakukan. Hal ini disebabkan oleh karena adanya beberapa kebutuhan para blogger untuk membuat sebuah postingan terlihat menarik dengan menggunakan sebuah tombol, baik itu tombol download, live demo, next, home, previous atau yang lainnya.
Cara Membuat Tombol Keren [Cool Button] untuk Blogger

Cara Pemasangan !

  • Langkah pertama, login ke Blogger
  • Pilih Template » Edit HTML » Proceed
  • Copy kode CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>
.ls-button{
background-color:#0404B4;
font-family: 'Verdana', sans-serif;
font-size:12px;
text-decoration:none;
color:#fff;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%);
border-radius: 5px;
box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999;
}
.ls-button:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%);
box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999;
}
.ls-button:before {
background-color:#FF0000;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3C7KPk-pJT4PlxCjJEutm7c9fjynJASh_V7iAf5sX5v9ohpQi9Tl4cRi5luJqUmqV6Dd_N7CSsvs75eWonxQLukMUiC8KHAUJINIdmnihztY6NdBo8XI6ri1B8hsK0TPmOWgQVYaZdHBH/s1600/lostsector-right-arrow.png);
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
border-radius: 50%;
box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066;
}
.ls-button:active::before {
top:50%;
margin-top:-12px;
box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29;
}
  • Simpan template

Cara Penggunaan !

Sekarang untuk memasangnya pada setiap postingan blog, masukkan kode berikut ke dalam HTML postingan.
<a class="ls-button" href="Masukkan link disini">Teks anda disini</a>
Pilih Publikasikan atau Pratinjau untuk melihat hasilnya.

Free Download WinRAR 32bit dan 64bit Bahasa Indonesia

✔ Anonim Comment
Free Download WinRAR (32-bit) Terbaru – Pada postingan kali ini saya akan share software gratisan yang banyak digunakan oleh orang sehari-hari, salah satunya adalah winrar. software WinRAR merupakan salah satu program yang memiliki banyak fungsi yang cukup populer dibidang pengompresan data. software atau data yang sudah dikompres akan menjadi kecil ukurannya tergantung kehendak kita. setelah itu file yang sudah dikompres bisa ditransfer dalam ukuran yang lebih kecil dari ukuran semula. winrar juga dapat membantu kita mengamankan sebuah file. contoh kita punya software yang kita rahasiakan di pc kita, supaya orang tidak bisa mengaksesnya cukup kompres file tersebut dan beri password untuk memproteksi file tersebut.

Pertama install terlebih dahulu software winrarnya. silahkan download dibawah :

☺ Download Winrar 32Bit (Indonesia):
DOWNLOAD

☺ Download Winrar 64Bit (Indonesia):
DOWNLOAD


 Berikut cara memproteksi file anda dengan winrar:

☻Sediakan file yang akan anda proteksi
klik kanan pada file
pilih add to archieve..
winrar Free Download WinRAR (32 bit) Terbaru

☻pilih tab advance >> klik set password >> isikan password anda 2 kali >> ok
winrar password Free Download WinRAR (32 bit) Terbaru

☻kembali ke tab general klik >> ok
winrar 2 Free Download WinRAR (32 bit) Terbaru


selesai deh..
coba buka file archive yang baru saja anda buat.. pasti akan ada permintaan password untuk membuka file tersebut.

sekian postingan Free Download WinRAR (32-bit) Terbaru semoga bermanfaat.  ♪♪♪

Kamis, 16 Mei 2013

Cara Cepat Mencari Kode HTML

✔ Anonim Comment
Hai semuanya apa kabar???pasti baikkan???pernah gak nyari kode HTML?!?seperti di blog atau dimana gitu. mungkin di blog kita bingungnya ketika kita mencari kode HTML ketika ingin memasang aplikasi atau yang lainnya. dalam postingan kali ini saya akan memberi tau dan berbagi ilmu dengan teman-teman semua tentang bagaimana cara mencari kode HTML dengan mudah.
Nah caranya cukup simpel kok. jika anda ingin mencari kode HTML dengan mudah anda cukup menekan:
Ctrl + F atau F3 pada keyboard anda,ingat nekannya di keyboard pc anda ya bukan di mesin ketik,hehehe........
contoh gambar


 

gimana,mudahkan???

Cara Membuat dan Memasang Like Box Facebook di Blog

✔ Anonim Comment
Like Box,like box merupakan salah satu aplikasi facebook yang bisa kita pasang di blog kita....
dengan menggunakan aplikasi ini blog kita akan bertambah keren,aplikasi ini  hanya untuk facebook fans page....
bagaimana cara membuat dan memasang like box facebook di blog???sebenarnya sih cukup mudah....tapi terkadangpun saya pun lupa cara membuatnya ketika box like saya terhapus,makanya postingan ini saya buat agar saya tinggal melihat postingan saya ketika saya lupa cara membuatnya kembali dan sekaligus agar bisa membantu teman-teman untuk mulai membuat atau memasang like box facebook di blog,ataupun membantu teman-teman yang lupa agar ingat kembali ketika melihatnya...!!!
Okelah kalau begitu sekarang kita akan membahas cara membuat dan memasang like book facebook di blog,ikuti step by step . . .

1.langkah pertama silahkan anda klick link url berikut.
http://developers.facebook.com/docs/reference/plugins/like-box/
maka akan muncul halaman seperti ini(lihet gambar)






2.Rubah dan isi form.
selanjutnya silahkan anda isi form,seperti berikut.(lihat gambar)
a.ganti facebook page url dengan url facebook fans page anda,contoh saya mengganti http://www.facebook.com/platform dengan http://www.facebook.com/dekrif
b.width/lebar:292(ukuran standart) --- height/tinggi:292(ukuran standart).anda dapat merubahnya sendiri bila anda tidak suka dengan ukuran standart atau agar pas dengan blog anda.
c.Dark Scheme adalah warna tema like bok
d.Show Faces silah anda centang
e. silahkan anda isi denga tulisan,contoh:red(ini untuk memberi warna garis samping pada like book,kosongkan bila anda tidak ingin memberi warna.
f.Show stream,hilangkan centang.
g.cukup.............selanjutnya silahkan anda klick Get Code untuk mendapat kodenya.



3.Get Code.
setelah menekan get code maka akan muncul halaman tab kecil seperti ini.
klick kode,lalu copi.




4.Pasang ke Blog.
selanjutnya silahkan  masuk blog anda pilih rancangan-elemen laman-lalu klick tambah gadget(lihat gambar)



5.HTML/Java Script.
setelah anda klick tambah gadget maka akan muncul jendela kecil seperti berikut(gambar)pilih HTML/Java Script.




6.Paste.
sekarang pastekan kode yang telah di copy tadi disini,lalu kick simpan(lihat gambar)




7.Perubahan berhasil disaimpan.
selanjutnya lihat blog anda,gmana keren bukan



8.Pemberitahuan
Kadang kode ini berfungsi kadang tidak.
teman-teman blogger ada yang menngunakan kode yang atas atau yang bawah.
yang paling ampuh adalah bila kita menggabungkan keduanya,contoh: 1. saya letakkan di bagian atas dan 2. saya letakkan di bawah.

Cara Cepat Membuat Halaman Fans Page di Facebook

✔ Anonim Comment
Halo teman-teman gimana kabarnya???pasti baikkan???
nah di postingan saya kali ini saya akan membahas cara cepat membuat halaman fans page di facebook.
pasti teman-teman udah pada taukan fans page itu apa?bagi yang kurang tau fans page itu adalah halaman untuk fans penggemar,contoh:kita mencari penggemar untuk kita atau band kita dsb...
lihat aja tu para bintang luar dan dalam negeri,pasti kebanyakan memiliki fans page...sekali lagi fans penggemar kita di facebook...kalo kita punya band walaupun blum terkenal mendingan kitan membuat fans page terlebih dahulu,sapa tau nanti kalo kita terkenal kita gak usah bikin facebook fans page lagi...
ok dah lansung aja kalo gitu untuk cara cepat membuat fans page di facebook,teman-teman bisa ngikuti step by step berikut:

1.Buka facebook anda,masuk.
anda sebelunya harus masuk dulu di facebook.com,setelah itu lihat di bagian bawah beranda atau profil dan lain-lainya deh,pokoknya halaman facebook.
contoh;saya masuk ke profil dan mengklick buat halaman(lihat gambar)




2.Pilih Halaman.
anda harus memilih salah satu dari halaman berikut.
contoh:saya memilih artis band atau tokoh masyarakat,dan isikan kolom,jangan lupa untuk mencentang persetujuan halaman.lalu klick lanjutkan...


3.Pilih Foto.
anda dapat mengunggah foto sekarang atau klick lanjutkan atau lewati untuk mempercepat proses.



4.Undang teman.
sekarang anda dapat mengundang teman amda agar teman anda bergabung di halaman yang anda buat,atau klick lewati atau lanjutkan untuk mempercepat pembuatan.


 



5 .Finish.
halaman anda sudah jadi
a.untuk menggunggah foto anda
b.pemberitahuan bila ada teman atau siapapun di facebook yang like ke halaman anda.
c.untuk mengundang teman anda yang ada di pertemana facebook anda.




"Nah segitu dulu ya teman-teman,semoga bermanfaat........"

Cara Buat Link Di Blog Membesar Jika Di sorot Mouse

✔ Anonim Comment
Banyak hal yang dapat dilakukan dalam memodifikasi tampilan link atau tautan pada blog. Salah satunya adalah dengan membuat link membesar saat disorot oleh mouse. Cara untuk membuat link membesar saat di sorot mouse dapat disimak langkah-langkahnya di bawah ini.

  1. Masuk ke akun Blogger Anda.
  2. Klik Rancangan >> Edit HTML.
  3. Carilah kode yang mirip-mirip dengan kode di bawah ini.

a:hover {
color:#5588AA;
text-decoration:underline;
}
     4.  Kemudian tambah kode font-size:20px; sehingga kodenya akan menjadi seperti di bawah ini.
a:hover {
color:#5588AA;
text-decoration:underline;
font-size:20px;
}
20px merupakan ukuran huruf link saat mouse menyorot link tersebut, silakan diganti sesuai dengan keinginan Anda.
   5. Klik tombol SIMPAN TEMPLATE.

Java Script Image Slider Di Blog

✔ Anonim Comment
H ari ini saya akan berbagi slider keren yang bekerja dengan JavaScript dan jQuery  dan flash slider needed. Java Script Image Slider ini berisi pita di sudut kiri atas slider dan itu disebut sebagai "What's Hot", juga mengandung efek slice irisan gambar indah yang menjadi 12 bagian, fitur utama peningkatan keindahan fitur besar slider. Slider ini sangat disesuaikan sehingga untuk mengeditnya sesuai keinginan dan yang sempurna akan sesuai untuk slider blog. Slider ini dibuat oleh menucool.com  dan Saya telah menciptakan sebuah versi Template slider pada kerja yang sempurna dengan blogger blog. Untuk melihat demo Java Script Image Slider silahkan klick tombol di bawah ini.


Cara membuat/memasang Java Script Image Slider

Untuk membuat Java Script Image Slider ini juga sangat mudah, ikuti instruksi berikut untuk mulai menerapkannya pada blog Anda.

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak ➨ Tambah Gadget.

3. Pilih elemen HTML/Java Script.

4. Lalu copy kode berikut dan letakkan di dalam  elemen HTML/Java Script tadi.

<style type="text/css">
 /* JavaScript Image Slider By http://www.www.blooger.co.id/ */
#mcis {
 display: none;
}
#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}
#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi30879xGVOcpfQk4cmBGTnkNCwGPf_ZHGxEHClldeAd8aPLN2kFcSjX4QZswYaNXxz1uszasOm2lTIs4EuKtp85zuQUu_Xpv4D4eRcvwVlD5mbzZKCs-_-WOYai8Hcd5C7IBIx9ioXtA/s1600/otowebsite.blogspot.com--ribbon.png) no-repeat;
 z-index: 7;
}
#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglXMzY6LHVSr8h-hxgV41Jt6EIJDfMjS3XDZ7sSWYOKtWR9nQPr1UNv2bFoswZPN_A7T9IUJ82nrFTP8M_9KrZsEt9_zDdf-0Aj6WC867iyaDFBHFg5xkhAWzqrYuChEszUZgBS6n_ZQ/s1600/otowebsite.blogspot.com--loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}
#slider img {
 position: absolute;
 border: none;
 display: none;
}
#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}
div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}
div.mc-caption-bg {
 background-color: black;
}
div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}
div.mc-caption a {
 color: #FB0;
}
div.mc-caption a:hover {
 color: #DA0;
}
div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}
div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSqrr_7JOzKXBDgZTFMaOLRw8Sxb7-R4JYH9W4DgpRgJug4UWBEjUElMGy3x6W0Lie-oE068BDFBRK0CHL8Ie0zfs69ydfMF6t-ack_O5MaAq2WK4FPWHNS-ZrinToUc5Ieo4_HDNFvA/s1600/otowebsite.blogspot.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}
div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}
#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>
<script src="https://otowebsite-blogspot.googlecode.com/svn/trunk/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame">
     <div id="ribbon"></div>
            <div id="slider">
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmi3XubwKTlkJwZEaLgr6KPPmJnD6Am-lYps-qErM1NJHnw6B3icX-AoLh8LpNXNVumHkeM1kL-8Q6-m8_e6UO8_vxyPRat8607BqvqsvzTdFvTwtDePwONoZGuWtkg448IefDKiuTpQ/s1600/otowebsite.blogspot.com-1.jpg" alt="Image Slider By otowebsite.blogspot.com"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirK4Ck6rZAPJz7Jc6wzwxEXAEXeP-3_dgMZD7wZcAwEQvDBipmpcN8zKlvL2q6iX3pCRC1TFhC11yMgUdZKdS1HdSVJFAYk87MNTvzzbSY6BgkNdwEWb1l5_zdjO7pev_OgO1S0lNrFg/s1600/otowebsite.blogspot.com-2.jpg" alt="Oto Website"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpUb56MqrGdj8ZGbsy0WI6Ha3RVfzqXADQ-78WwYhbdLOq7jrOXFK_L_Bk64WhsuLVdjEL_oG6iovwsmkxlkSoBOIQkzd1a7MsBMpKN4frWMFtFufKZESp6RWF-9NGGtpsdwwCnsB6Ng/s1600/otowebsite.blogspot.com-3.jpg" alt="The slide is a linking image"/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgidLqua6G2zm0GqsqHWCv6meLcrYxTWrOshOugflVdtTQlAO73-xSTKSe35AlqtSiYMoHelprSQiJTjUcn59718c1OHQbCdkae0BxEQYVBb4UDL9_pH8GWZumkfD4XFCZVbeHPXguarg/s1600/otowebsite.blogspot.com-4.jpg" alt="Pure Javascript. No jQuery. No flash."/></a>
<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAs0NgRMOhZvNWdCuQMnUoAyfsoPXI3PDpxvoH0UG77EzIf7dfh3SfYoRf7YM81qCjrQBo0FZTHUGFMXRUCdyS7tJBPaEr4nhMkD1Amnv4uD2WlwdKxjNQ0W19yL0shFEe_loie7nFcA/s1600/otowebsite.blogspot.com-5.jpg" alt="#htmlcaption"/></a>
                </div></div>

5. Simpan.


Melakukan Perubahan

Jika Anda ingin melakukan perubahan, Anda perhatikan kode-kode yang saya block di atas, dan berikut ini adalah keterangannya:
  • Kode yang di block merah muda adalah lebar gambar.
  • Kode yang di block oranye adalah lebar dan tinggi widget.
  • Kode yang di block kuning adalah url gambar.
  • Kode yang di block biru adalah tempat untuk menempatkan url tujuan.
  • Kode yang di block hijau adalah title dari gambar.

Mengalami Kesulitan?

Jika Anda mengalami kesulitan dalam Cara membuat/memasang Java Script Image Slider, jangan sungkan untuk bertanya, saya akan dengan senang hati membatu Anda

Cara Membuat Facebook Like Auto Hide Di Sebelah Kanan Blog

✔ Anonim Comment


Tidak bisa di pungkiri bahwa facebook adalah sarana paling efektif untuk usaha online, mencari pembaca blog, dan lain-lain.
karna melalui facebooklah orang lain dapat mengetahui produk yang kita jual, blog kita dan lain-lain deh.
biasanya kita membuat suatu halaman khusus di facebook yang sering di bilang sebagai halaaman fans page/fans penggemar dan lain-lain lagi.
seperti pada blog Scholovers Blogger ini yang memiliki halaman fans page di facebook, nah yang kita bahas kali ini bukanlah tentang cara membuat halaman fans page di facebook karna dulu blog ini pernah membahasnya di Cara Cepat Membuat Halaman Fans Page di Facebook, tapi yang akan kita bahas kali ini adalah Cara Membuat Facebook Like Auto Hide Di Blog, sobat psti tau kan maksudnya kalo tidak tau sobat bisa lihat sendiri di gambar, atau melihatnya di bagian samping    kanan blog ini(jika blog ini masih menggunakannya).

Cara Membuat Facebook Like Auto Hide Di Blog tidak jauh beda dengan Cara Membuat dan Memasang Like Box Facebook di Blog, bedanya cara ini agar facebook box like fans page kita terlihat lebih menarik dan tidak terlalu memakan banyak tempat di blog kita, ehm pasti udah pada ngertikan kan sob?!?
oke jika sobat berminat dengan memasasang facebook like auto hide di atas, sobat bisa ikuti langkah-langkah berikut, kemon . . . !!!

1.Pertama-tama silahkan sobat login ke blog sobat.

2.Pada Menu tab klick Rancangan ➮ Edit HTML

3.Pada kotak Edit Template cari kode <head> jika ingin lebih cepat mencarinya sobat bisa baca Cara Cepat Mencari Kode HTML.

4.Jika sudah ketemu sekarang letakkan kode berikut tepat di atas kode tadi


5.Sekarang simpan template.

6.Sekarang kembali klick Rancangan ➮ Tambah Gadget ➮ Pilih HTML/Java Script.

7.Copy kode script berikut dan letakkan di dalam Gadget kotak HTML/Java Script tadi,


<script type="text/javascript">
//<!--
$(document).ready(function() {$(".w2bslikebox").hover(function() {$(this).stop().animate({right: "0"}, "medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 500);});
//-->
</script>
<style type="text/css">
.w2bslikebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:20%;}
.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: #808080;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
</style><div class="w2bslikebox" style=""><div>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http://www.facebook.com/pages/Scholovers-blogger/257118684424929 &amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;connections=12&amp;stream=false&amp;header=false&amp;height=330" scrolling="no" frameborder="0" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#fff;"></iframe><span><a href=" http://www.blooger.co.id/2013/05/cara-membuat-facebook-like-auto-hide-di.html "><b>Get Widget</b></a></span></div></div>

Keterangan: ganti warna merah dengan url/alamat fans page sobat.

8.Simpan, dan lihat hasilnya!

Gimana mudah bukan? okelah sob sekian dulu untuk articles/postingan kali ini, semoga bermanfaat.
Langganan: Postingan (Atom)
Diberdayakan oleh Blogger.