Cara Membuat Like Facebook , Twitter , dan Google+ Melayang di Sisi Blog

Selamat datang sahabat,,, :) Kali ini Saya akan membahas tutorial cara membuat widget sosial Facebook, Twitter, Google+ melayang di sebelah kanan blog. Mungkin di blog-blog lain juga sudah banyak yang posting tentang widget ini, ini sangat bermanfaat bagi blog Sobat yang laman blognya sudah dipenuhi artikel-artikel atau iklan. Selain tampilannya yang simpel, ini juga akan membuat blog Sobat menjadi lebih keren and sexy, seperti gambar di bawah ini:

 

Bagaimana cara membuat widget ini? Ikuti langkah-langkah  berikut:

1. Seperti biasanya masuk ke akun Blogger Sobat

2. Pilih tataletak, tambah gadget

3. Selanjutnya pilih HTML/JavaScript

4. Lalu copas kode script di bawah ini:

<style>

img,a {

    border: 0;

}

#on {

    visibility: visible;

}

#off {

    visibility: hidden;

}

#facebook_div {

    width: 196px;

    height: 340px;

    overflow: hidden;

}

#twitter_div {

    width: 246px;

    height: 353px;

    overflow: hidden;

}

#google_plus_div {

    width: 152px;

    height: 97px;

    overflow: hidden;

    margin-left: 50px;

    margin-top: 10px;

}

#knfeedburner_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

    margin-top: 5px;

    margin-left: -4px;

}

#kakinetwork_div {

    width: 300px;

    height: 97px;

    overflow: hidden;

}/* right side style */#facebook_right {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    right: -200px;

}

#facebook_right img {

    position: absolute;

    top: -2px;

    left: -35px;

}

#facebook_right iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    left: -2px;

    top: -3px;

}

#twitter_right {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    right: -250px;

}

#twitter_right_img {

    position: absolute;

    top: -2px;

    left: -35px;

    border: 0;

}

#google_plus_right {

    z-index: 10003;

    background-color: #F2F2F2;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-right: 2px solid #0056a0;

    border-left: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    right: -154px;

}

#google_plus_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;

}

#feedburner_right {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-right: 2px solid #5b5b5b;

    border-left: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    right: -303px;

}

#feedburner_right_img {

    position: absolute;

    top: -2px;

    left: -33px;

    border: 0;

}

#kakinetwork_right {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;

}

#kakinetwork_right img {

    position: absolute;

    top: -2px;

    left: -101px;

}/* left side style */#facebook_left {

    z-index: 10005;

    border: 2px solid #3c95d9;

    background-color: #fff;

    width: 196px;

    height: 353px;

    position: fixed;

    left: -200px;

}

#facebook_left img {

    position: absolute;

    top: -2px;

    right: -35px;

}

#facebook_left iframe {

    border: 0px solid #3c95d9;

    overflow: hidden;

    position: static;

    height: 360px;

    right: -2px;

    top: -3px;

}

#twitter_left {

    z-index: 10004;

    border: 2px solid #6CC5FF;

    background-color: #6CC5FF;

    width: 246px;

    height: 353px;

    position: fixed;

    left: -250px;

}

#twitter_left_img {

    position: absolute;

    top: -2px;

    right: -35px;

    border: 0;

}

#google_plus_left {

    z-index: 10003;

    background-color: #006ec9;

    border: 2px solid #006ec9;

    border-top: 2px solid #0056a0;

    border-bottom: 2px solid #0056a0;

    border-left: 2px solid #0056a0;

    border-right: hidden;

    width: 152px;

    height: 97px;

    position: fixed;

    left: -154px;

}

#google_plus_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;

}

#feedburner_left {

    z-index: 10003;

    background-color: #fefefe;

    border: 2px solid #5b5b5b;

    border-top: 2px solid #5b5b5b;

    border-bottom: 2px solid #5b5b5b;

    border-left: 2px solid #5b5b5b;

    border-right: hidden;

    width: 300px;

    height: 97px;

    position: fixed;

    left: -303px;

}

#feedburner_left_img {

    position: absolute;

    top: -2px;

    right: -33px;

    border: 0;

}

#kakinetwork_left {

    z-index: 10003;

    border: 2px solid #303030;

    background-color: #fff;

    width: 300px;

    height: 97px;

    position: fixed;

}

#kakinetwork_left img {

    position: absolute;

    top: -2px;

    right: -101px;

}

.box-title1 {

    border: 1px solid #ddd;

/*border-radius*/

    -webkit-border-radius: 6px;

    -moz-border-radius: 6px;

    border-radius: 6px;

/*box-shadow*/

    -webkit-box-shadow: 5px 5px 5px #CCCCCC;

    -moz-box-shadow: 5px 5px 5px #CCCCCC;

    box-shadow: 5px 5px 5px #CCCCCC;

    padding: 10px;

    margin: 10px 0;

}

.enteryouremail {

    background: #fff !important;

    border: 1px solid #d2d2d2;

    padding: 0px 8px 0px 8px;

    color: #a19999;

    font-size: 12px;

    height: 25px;

    width: 165px;

/*border-radius*/

    -webkit-border-radius: 5px;

    -moz-border-radius: 5px;

    border-radius: 5px;

    margin: 0px;

}

.submitbutton {

    background: #F2F2F2;

    border: 1px solid #F66303;

/*box-shadow*/

    -webkit-box-shadow: 3px 3px 3px #666;

    box-shadow: 3px 3px 3px #666;

    font: bold 12px Arial, sans-serif;

    color: #000000;

    height: 25px;

    padding: 0 12px 0 12px;

    margin: 0 0 0 5px;

/*border-radius*/

    -webkit-border-radius: 5px;

    border-radius: 5px;

    cursor: pointer;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>


<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>


<script type="text/javascript">jQuery(document).ready(function(){ jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#facebook_right").stop(true,false).animate({right: -200}, 500); });    jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 500); });     jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -154}, 500); });    jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });    });</script>

<div id="on">

 <div id="facebook_right" style="top: 18%;">

  <div id="facebook_div">

   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8SZ9yQUKcaUtb1ZXB8yiN0Ve2yzhdd5Q-OWWTJk3TG7932cjL1my1aTvRtYGeM7Go30krv0PgtwZOrB5g0QIAI26Fkeydsx9QiYB2W9SJuD7VY4zoo5DkHWe2802GNHBo5dafAC_TVgc/s1600/helperblogger.com-facebook-icon.png" alt=""/>

   <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2F4bdulkh0lik&amp;width=200&amp;height=346&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:346px;" allowtransparency="true">

   </iframe>

  </div>

 </div>

</div>

<div id="on">

 <div id="twitter_right" style="top: 35%;">

  <div id="twitter_div">

   <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqTwq3h59gq8vjcpPCzFaqRLF_cYuhIk9NApSv5H9dfhAUy-zr22Spi1bcB0GmBmFvDonD15mXk31pwnh6HnZu92AQ9H_2E_yPceWpF1xqRAIiPy0IkeEexorHywFsFVNpDkdP6P6x0-w/s1600/helperblogger.com-twitter-icon.png"/>

   <script src="http://widgets.twimg.com/j/2/widget.js"></script>

   <script>new TWTR.Widget({version: 2,type: 'profile',rpp: 4,interval: 1000,width: 246,height: 265,theme: {shell: {background: '#63BEFD',color: '#FFFFFF'},tweets: {background: '#FFFFFF',color: '#000000',links: '#47a61e'}},features: { loop: false,live: true,scrollbar: false,hashtags: false,timestamp: true,avatars: true,behavior: 'all' }}).render().setUser('browzink').start();</script>

  </div>

 </div>

</div>

<div id="on">

 <div id="google_plus_right" style="top: 52%;">

  <div id="google_plus_div">

   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6_Y1Y67qi_2vbZqD9Q54Qh9kM5lhCIVC6Rm8WrVnguOQl0dq68U9GwGSmxA3FGMkn9GDSutQVJH_NxCLzdJsJgJ3XXRv6lkBZkDBXWohp-mLf1FQlCjN_JPoV0FaY35krVX1c8G2MpvE/s1600/helperblogger.com-google-plus-icon.png"/>

   <div style="float:left;margin:10px 10px 10px 0;">

    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>

   </div>

  </div>

 </div>

 <div id="on">

  <div id="feedburner_right" style=" top: 69%;">

   <div id="knfeedburner_div">

    <center>

    <h4 style="color:#F66303;">You can also receive Free Email Updates:</h4>

    <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Se-carablogspotcomBloggerTrick-Kampus-TipsSeo-WidgetBlog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

     <input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text"/><input value="Se-carablogspotcomBloggerTrick-Kampus-TipsSeo-WidgetBlog" name="uri" type="hidden"/><input value="Submit" class="submitbutton" type="submit"/>

    </form>

    </center><img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMK8rcKhE9hvj7-qEy8u7dngIZusBuSzlOt9KVqNdYFFyQphrhYA5p71yxHdYA1vtrJXDq1bEFJtCwppoUbJpzcFUycHk9nGz0AQ0rZ0zHVaOH9QMbA0ntWt9wOKgZT4dke3SPJaBqCFQ/s1600/helperblogger.com-subscribe-icon.png"/>

   </div>

  </div>

 </div>

</div>

KETERANGAN: 

Kode yang berwarna merah itu adalah kode javascript slide. Jika widgetnya tidak berfungsi, mungkin di blog Sobat sudah ada javascript untuk slide, hapus kode yag berwarna merah.

Yang berwarna kuning silahkan ganti dengan ID Facebook Page, ID Twitter dan ID Feedburner Sobat.

5. Klik simpan dan lihat hasilnya.

Semoga bermanfaat, jangan lupa tinggalkan komentarnya..!
 

07.02 7 komentar

Membuat Label/categories Blog Keren

Hai sobat blogger,..Gak kerasa.. Hampir postingan ke 100...   
Kali ini kita membahas tentang bikin label keren dan berputar-putar...
 berikut tips bagaimana cara membuat tag cloud berputar di blog, atau label berputar di blog kita.

Caranya cukup mudah namun ada beberapa catatan bahwasanya tidak semua template dapat mendukung untuk dikasih tag cloud.


Oleh karena itulah sebelum mencoba sebaiknya download dahulu template blog kita.


Langkah-langkah membuat cloud label sebagai berikut :

1. Login ke blogspot
2. Klik Design/Rancangan kemudian Edit HTML dan centang Expand Templates Widget
3. Cari kode (klik f3 untuk cepat) : <b:section class='sidebar' id='sidebar' preferred='yes'>
4. Copy paste kode di bawah ini tepat berada di bawah kode tadi 

<b:widget
 id='Label99' locked='false' title='Tag Cloud Comulus Labels'
type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/></h2>
</b:if>
<div class='widget-content'>
<script
src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js'
type='text/javascript'/>
<div id='flashcontent'>
Blogumulus by <a
href='http://www.roytanck.com/'>Roy Tanck</a> and <a
href='http://www.bloggerbuster.com'>Amanda
Fazani</a></div>
<script type='text/javascript'>
var so = new
SWFObject("http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf",
 "tagcloud", "240", "300", "7", "#ffffff");
// uncomment next line to enable transparency
//so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("mode", "tags");
so.addVariable("distr", "true");
so.addVariable("tspeed", "100");
so.addVariable("tagcloud", "<tags><b:loop values='data:labels'
var='label'><a expr:href='data:label.url'
style='12'><data:label.name/></a></b:loop></tags>");
so.addParam("allowScriptAccess",
 "always");
so.write("flashcontent");
</script><a
href='http://nanangnutriyas.blogspot.com/2013/04/bikin-label-blog-keren-hai-sobat.html'>Pasang widget di blog mu</a>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

5. Preview terlebih dahulu sebelum kamu save. Setelah berhasil baru simpan.

CATATAN :
1. Tag Cloud akan berjalan apabila komputer sudah terinstal adobe flash player.
2. Kita dapat merubah ukuran, background tag cloud, serta ukuran huruf nya

06.51 8 komentar

CARA MEMASANG BANNER IKLAN 125X125 DI BLOG

CARA MEMASANG BANNER IKLAN 125X125 DI BLOG 

Assalammualaikum,
Apa kabar sobat bloger, kali ini saya mau berbagi cara memasang banner iklan di blog/website ukuran 125x125 pixel. Siapa tau ada yang berminat untuk memasang iklan di blog sobat. Amin....
Ok, banner iklan ini nantinya terdapat 4 kotak iklan seperti gambar di bawan ini : 

Bagi sobat yang mau tahu Cara Memasang Banner Iklan 125x125 di Blog sebenarnya caranya cukup mudah, masuk ke blogger> rancangan> add gadget> HTML/Javascipt, kemudian masukkan kode di bawah ini : 

<div align="center"> 

<table border="0"  cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 

<tbody><tr> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

</tr> 

<tr>

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td>

</tr>

</tbody></table> 

<table border="0" bordercolor="#0084ce" cellpadding="2" cellspacing="6" width="265" bgcolor="#ffffff"> 

<tbody> 

      <tr> 

       <td><center><a href="URL/Alamat Blog" rel="nofollow"><img width="265" height="37" border="0" alt="Pasang Iklan Di Sini" src="URL/Alamat Gambar advertise here" /></a></center></td> 

      </tr>

    </tbody></table>

</div>

Pengaturan  Banner Iklan:

1.  Ganti kata URL/Alamat IKLAN dengan alamat website pemasang iklan

2.  Ganti kata URL/Alamat Gambar Iklan dengan link atau alamat gambar iklan di hosting

3.  Ganti kata Deskripsi Iklan dengan informasi dan deskripsi mengenai iklan yang dipasang, deskripsi ini akan muncul pada saat kursor mouse digerakkan ke arah banner iklan. 

4.  Ukuran default sidebar adalah 265, jadi pastikan ukuran sidebar blog sobat tidak kurang dari itu. 

Jika sobat ingin menambah kotak iklan lagi dibawahnya misalnya menjadi 6 kotak tinggal masukkan kode di bawah ini, di bawahnya kode yang berwarna biru.

<tr> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

<td><center><a href="URL/Alamat IKLAN" rel="nofollow"><img border="0" alt="Deskripsi Iklan" width="125" src="URL/Alamat Gambar Iklan" height="125"/></a></center></td> 

</tr>

Nah, mudah bukan. Silahkan di coba :-)

Silangkan tinggalkan Komentar, Kritik, dan Saran demi perkembangan blog ini..

22.19 4 komentar

Cara Melihat Alamat / Url Gambar di Browser

Pada postingan kali ini saya akan menerangkan bagaimana cara melihat url/link gambar pada browser , postingan ini saya buat karena banyak teman-teman pemula blogger kita yang kurang paham bagaimana caranya? sangat mudah sobat! berikut cara nya ..

1. Cari 1 gambar pada web / blog orang lain .. jika sudah , arahkan mouse pada gambar tersebut lalu klik kanan tepat pada gambar tersebut, jika di google chrome klik (open image in new tab) jika di firefox klik (view image) ..

contoh lihat gambar dibawah ini :

2. Jika sudah di Klik (Buka gambar di tab baru) nya , lalu sobat lihat pada lokasi url browser sobat , dan sobat akan mengetahui URL Image/gambar tersebut , seperti gambar dibawah ini :

3. Silahkan, Sobat Lihat Langsung di https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYRROwE__9vXHbD7XPXKgG0Drtrd8gbrF_eI5Rz1h0a54PmRUyHzI6y9YVFizQ6Ids6MeZgAsa6KfxxvPhukIzeGbpiXwBXE8-PT_ITr2W9B8z_jEjIsYXhm4GIdvMZWDRliAuIn0qOlnr/s200/css3.jpg

Semoga bermanfaat .. untuk sobat blogger pemula! :)

22.15 0 komentar

         Selamat berjumpa kembali dengan saya dari admin blog ini, pada pembahasan sebelumnya saya telah menjelaskan bagaimana  Tips Cara Mengamankan Email di Dicuri dan Tips Cara Aman Menggunakan Facebook ,oke kita lanjutkan ke topiknya yaitu membahas seputar daftar-daftar domain dengan blogspot terutama di indonesia, jadi disini kita akan menghitungnya mulai dari atas yaitu yang terbaik sampai ribuan kesana jumlahnya. apa tujuan saya mempublikasikan artikel ini, tujuan saya adalah begitu anda membaca artikel ini anda jadi tahu sebenarnya blogspot blogspot terbaik indonesia itu siapa saja, dan tabel dibawah ini adalah saya ambil berdasarkan informasi dari situs alexa jam 01.00 tanggal 2 juni 2013 dan tidak menutup kemungkinan pasti hari selanjutnya akan ada perubahan statistik atau pergeseran daftar dan yang harus anda ketahui nilai tabel dibawah ini dihitung berdasarkan nilai traffic pada blog tersebut. oke tanpa panjang lebar lagi silahkan disimak daftar-daftarnya:

Daftar Situs Dengan Domain Blogspot Terbaik di Indonesia Berdasarkan Situs Alexa.com

DAFTAR BLOG TOP BLOGSPOT INDONESIA
Nama Blog	Ranking Indonesia	Ranking Dunia
01.trikmudahseo.blogspot.com	249	16.366
02.terselubung.blogspot.com	273	15.162
03.buka-rahasia.blogspot.com	414	23.410
04.impoint.blogspot.com	476	32.649
05.iniunic.blogspot.com	497	28.444
06.ittaqi-tafuzi.blogspot.com	572	63.363
07.d-copy.blogspot.com	602	50.976
08.zicblogger.blogspot.com	667	37.719
09.digitalareas.blogspot.com	798	56.390
10.christiantatelu.blogspot.com	756	49.548
11.terbaru-terbaik.blogspot.com	919	51.732
12.sweet-myheart.blogspot.com	895	60.707
13.makelar-berita.blogspot.com	995	82.717
14.caramembuatada.blogspot.com	935	76.783
15.zaidanxzanderz.blogspot.com	1.000	93.496
16.informasiksekarang.blogspot.com	1.014	84.149
17.arifpoetrayunar.blogspot.com	1.152	72.830
18.ahlikompi.blogspot.com	1.060	94.053
19.panduantemplateblog.blogspot.com	1.054	70.613
20.hengkikristiantoateng.blogspot.com	1.078	86.489
21.kesiangansekolah.blogspot.com	1.130	92.425
22.karodalnet.blogspot.com	1.121	62.597
23.carakata.blogspot.com	1.162	60.227
24.mkr-site.blogspot.com	1.173	65.059
25.mdf-blog.blogspot.com	1.192	72.664
26.pelajaran-blog.blogspot.com	1.196	78.874
27.luhurfatah10.blogspot.com	1.244	80.736
28.gratisdownloadgame.blogspot.com	1.425	60.467
29.damzaky.blogspot.com	2.015	82.949

        Untuk tambahan penjelasan tabel diatas, walaupun kebanyakan blog-blog diatas adalah blog-blog nofollow tetapi menurut saya blog-blog tersebut sangat memberikan dampak yang positif buat kekuatan blog anda nantinya, jadi intinya silahkan kunjungi blog-blog diatas dan berikan komentar anda dengan target kata kunci yang sobat inginkan, ingat..!!! walaupun blognya kebanyakan nofollow tetapi jika anda meninggalkan jejak di blog-blog tersebut, blogwalking anda tidak akan sia-sia karena blog blog ini sudah diakui kekuatannya serta trafficnya oleh mesin pencari jadi ciptakan backlink anda dari blog yang benar-benar memiliki refutasi di dunia perblogan.

02.57 0 komentar