Monday, April 30, 2012

Memasang Sosial Media di Sisi Kiri Blog

8:34 AM  Unknown  No comments

Setelah beberapa hari disibukkan dengan urusan per......an akhirnya pada hari ini tepatnya sore ini saya menyempatkan diri untuk membagikan postingan yang sudah saya ujikan di blog ini. Tapi Sebelumnya alangkah baiknya jika sahabat iDesainer semu membaca juga postingan kami sebelumnya mengenai Membuat Recent Post bergambar. Pada postingan kali ini kami akan mempostingan mengenai cara Memasang sosial media di sisi kiri halaman blog yang masih termasuk dalam label Tutorial Blog.





Disini sosial media yang dimaksudkan adalah Facebook fans page, twitter, Google Plus, Youtube dan subcribe lewat email. Untuk lebih jelasnya silahkan perhatikan gambar di bawah ini :

Untuk meletakkan media sosial tersebut ada beberapa langkah yang harus dilakukan diantaranya :
Pertama :
Anda login terlebih dahulu ke Akun Blogger Anda

Kedua :
Pergi ke Design / Rancangan >> Edit HTML

Ketiga :
Cari kode (Tekan Ctrl+F)  ]]></b:skin>
Letakkan kode di bawah ini tepat DIATAS kode Langkah Ketiga tadi ( ]]></b:skin> ) :
No Kode HTML / Scripts




img, a { border: 0; }
#on {visibility:visible;}

#off {visibility:hidden;}

#facebook_div {width:245px;height: 260px;overflow: hidden;}

#twitter_div {width:260px;height: 238px;overflow: hidden;}

#google_plus_div {width:320px;height: 143px;overflow: hidden;}

#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}

#youtube_div {width:300px;height: 97px;overflow: hidden;}



#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}

#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:260px;height: 238px;position: fixed;right: -264px;}

#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}

#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}

#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

#youtube_right {z-index: 10002;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 100px;position: fixed;right: -303px;}

#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

#feedburner_right {z-index: 10001;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;}

Keempat :
Cari lagi (Ctrl+F) kode </head>
Dan Letakkan kode dibawah ini tepat DIATAS kode tersebut.
No Kode HTML / Scripts




<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<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: -249}, 500); });   

jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },

function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 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: -323}, 500); });   

jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right:  0}, 500); },

function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 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>

Kelima :
Pergi ke Rancangan / Design (bukan Edit HTML)

Keenam :
Tambah Kode HTML /Script di widget blogger anda dengan kode dibawah :
No Kode HTML / Scripts




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

        <div id="facebook_div">

            <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJ-h8_SQ9VzDQCgC_pHnvDXc9CSss2JeiOuiEFJ9uHl5hasPTr9J4u4-ubxku6jwYEUealplB2guBWSiV4zrG-gLxKvECCkZA5iy2aCuhLP_uf5lrkhyAPs3G_X4RfhiIeqWG-8QWfzw/s1600/Facebook.png" />

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

        </div>

    </div>

</div>

<div id="on">

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

        <div id="twitter_div">

            <img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMB8s86O5scJK_eRIP_3vNIwOYBVO5_NanpzLZEwVV3qmQLwuT-Wr9LyT1DaoDzHZCY9Z0Hgdhse89vtVHKdVpHptCcoIMTdYGDIrsIO_eS4oh8IKVrEeW14C2PcaCg3iyynL9v9a42g/s1600/Twitter.png" />

            <script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>

      <div id="twitterfanbox"></div>

      <script type="text/javascript">fanbox_init("idesainer");</script>

        </div>

    </div>

</div>

<div id="on">

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

        <div id="google_plus_div">

            <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJARZLiqKa3cgB_7WZKubQPNfRZZt0tIZFw-cdEHeXgbzCqzBfUOquX0iP3Opxa4g3ByulMCeq4u3kfuCLJgJC1PM1d7BipFZ9lkphotJXkfg6n_yBGD5ZeArDAZeGT0fPGhnsKcV17w/s1600/Google+Plus.png" />

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

   <script type="text/javascript">mbgc='ffffff';ww='320';mbc='006ec9';bbc='3F79D5';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='006ec9';tc='006ec9';nc='006ec9';bc='006ec9';l='y';fs='16';fsb='13';bw='100';ff='4';pc='4889F0';b='l'; pid='115921464120058542011';</script><script type="text/javascript" src="http://widgetsplus.com/google_plus_widget.js"></script>

   </div>

  </div>

 </div>

</div>

<div id="on">

    <div id="youtube_right" style="top: 59%;">

        <div id="youtube_div">

            <img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNe_1CDjUGZZbBywWhC1Elk53kczI70EIstYjQGOOHaAuzUGvoArp_xPCKMKm167jFxLRwS19MQjxp6Njwyzek1Hur3QZDlN4gYF_3eFR95JTg9fp_er1S5FpmcgcKBrmrlYdxfw9UAg/s1600/YouTube.png" />

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

   <iframe src=http://www.youtube.com/subscribe_widget?p=danghilal style="height: 105px; width: 300px; border: 0;" scrolling="no" frameBorder="0"></iframe>

   </div>

  </div>

 </div>

</div>

<div id="on">

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

        <div id="knfeedburner_div">

   <center><br/>▼▼▼▼▼▼▼▼▼▼▼▼

   <h4 style="color:#F66303;">You Can Also Receive Free E-Mail 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=idesainer', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your E-Mail Here...&#39;;}" onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="idesainer" 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/AVvXsEgqno69J7YLEQ6_DA28hsv7OZS94YvhkxUYIgeFL6eGvPnZY52FHhckYgL9-dQgHBtRtTR-GbOFwOS9EbJJtjp039tw9oF0QeAcbof5lQjl4ZPVDjULseH5wHcsisrf-wx64Cx73ZxPrA/s1600/Subscribe.png" />

        </div>

    </div>

</div>

Keterangan untuk pengeditan :
Pertama :
Ganti kode di bawah : 
<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FIDesainer%2F148240711943571&amp;width=290&amp;height=290&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;appId=133580686742000" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:290px; height:290px;" allowtransparency="true"></iframe>  
dengan kode Plugin Box Facebook Page Anda

Kedua :
Ganti kode  fanbox_init("idesainer") dengan akun TWITTER anda yakni pada bagian (idesainer)

Ketiga :
Ganti pid='115921464120058542011'; dengan ID untuk Google Plus Anda

Keempat :
Ganti kode  p=danghilal dengan username YOUTUBE anda

Kelima :
Ganti kode  uri=idesainer dengan kode / username / URL feedburner anda

Selesai.. Silahkan Lihat hasilnya dengan menyimpan Rancangan / Design Anda terlebih dahulu
Selamat Mencoba
Related Posts Plugin for WordPress, Blogger...
Meta Keyword
software,modem+aha, modem+smart, koneksi+smart, dns, ip+address, proxy+changer, facebook, internet, visual+basic, vb6+source, gadget, software+gratis, download+software, mp3, tips+blogger, tips, bisnis, bisnis+onlline, amazon, iklan+ppc, ppc+lokal, bukti+pembayaran, paypal, verifikasi+paypal, hacking, sql+injection, google+dork, iklan+gratis, internet+gratis, browser+tercepat, download+manager, notebook, android, handphone, gadget, iphone, hacking+ppc, hacking+ptc, cewek+seksi, cewek+sma, abg+hot, cara+amazon, buku+tamu, software+hacking, internet, keluarga, komputer, pendaftaran, alami, air, video, situs, kanker, percetakan, masyarakat, apartemen, bayi, download, motor, hadiah, teknologi, konsultasi, perusahaan, telkomsel, biaya, perawatan, domain, kelahiran, seks, pria, wanita, kansultan, digunakan, asi, komputer, paket, musik, kasus, gratis, sayur, mobile, china, sony, foto, tinggi, kamera, umrah, kamera, badan, penyakit, kesehatam, surabaya, musik, pulsa, ibu, gambar, eksklusif, ibu, lembaga, tampil, kontes, center, siswa, dollar, perempuan, jakarta, menuju, lebaran, angka, haji, sablon, seksual, apartemen, banyumas, kabupaten, ponsel, tradisional, akses, barat, pc, terbesar, kulit, world, islam, anggota, timur, publik, low, ungu, iso, harga, umrah, beras, lagu, jawaservices, ketua, smartphone, ahm, paket, gambar, indonesia, jaringan, meningkat, bangunan, kecantikan, masalah, nelepon, menarik, yahoo, penjualan, usaha, cepat, honda, bonus, rumahinformasi, akses, center, makanan, terbaik, tanah, bakar, menu, naik, web, obat, kegiatan, warga, biaya, kelahiran, aksi, hotel, pendidikan, android, putih, indonesia, personal, consulting, terbaik, internet 7 download, wireless internet internet providers internet marketing internet browsers what is internet internet services internet radio home internet internet access internet speed test get,internet internet,service ie9 internet,9 mobile,internet, internet,speed, cable,internet, internet,connection, history,of,internet, internet,explorer9, internet,browser, internet,exploer,8, internet,exploer,9, definition,of,internet, wireless,internet,providers,

Posted in:

0 comments:

Post a Comment