Cara Membuat Facebook Page dan Like Box di Blog/Website

Cara Membuat Facebook Page dan Like Box di Blog/Website

 Facebook Page/Fan Page - Like Box semakin lazim digunakan di blog/website mengingat besarnya manfaat untuk perkembangan blog/website maupun product yang ditawarkan. Jaringan sosial beserta pluginnya, khususnya Facebook, terbukti telah memperluas dan meningkatkan popularitas, daya jangkau, traffic, serta penjualan produk jenis apapun. Oleh karena itu, membuat Facebook Fan Page dan memasang Like Box di blog/website merupakan hal yang sangat dianjurkan untuk blog/website anda.

 4. Pilih opsi "website" dan isikan nama Page sesuai dengan yang diinginkan. centang "agreement" dan klik "Get Started", seperti contoh gambar berikut:

 5. Selanjutnya anda akan masuk ke halaman Facebook Page yang telah dibuat. Lakukan kostumisasi terlebih dahulu sesuai petunjuk, misalnya mengupload foto/gambar untuk Facebook Page, mengedit informasi, dan lain sebagainya, atau langsung membuat Facebook Like Box yang nantinya dapat dipasang di blog/website.
 1. Jika anda masih berada di halaman Fcebook Fan Page tadi, pilih menu nomer 5, klik "add like box":

 Atau bisa juga buka halaman berikut: http://developers.facebook.com/docs/reference/plugins/like-box/ Penting: Sebelumnya copy terlebih dahulu url Facebook Fan Page yang telah dibuat. Fungsinya sebagai spesifikasi url untuk like box yang nantinya hendak dibuat.
Contoh url-nya: http://www.facebook.com/pages/Bukan-Rahasia-Lagi/196418780373882
2. Selanjutnya, isikan spesifikasi seperti gambar berikut:

                                               
Setting Facebook Like Box:

- Facebook Page url: url Facebook Page anda

- Width: lebar tampilan facebook like, sesuaikan dengan lebar sidebar widget.

- Color scheme: pilih light jika ingin tampilan terang, dan dark untuk tampilan gelap.

- Show Faces: Centang untuk menampilkan foto profil likers.

- Border color: Isikan dengan kode warna jika ingin memberi border atau kosongkan agar transparan.

- Show stream: Centang jika ingin menampilkan informasi/posting terakhir di like box.

- Show header: Centang jika ingin menampilkan tulisan header "Find Us on Facebook".

Lihat preview tampilan di sebelah kanan form tersebut.

3. Jika settingan yang dibuat sudah beres, klik get code. Kemudian akan muncul pop-up window yang menampilkan 3 jenis kode, HTML5, iFrame dan XFBML, pilih salah satu dan copy kodenya. (Untuk Blogger, saya sarankan pilih HTML 5).

 

4. Buka Dashboard > Design/Rancangan > Klik add a gadget/tambah gadget.

5. Pilih opsi HTML/Javascript.
6. Masukkan kode yang telah dicopy ke dalam kotak kode.
7. Save.
8. Like box telah siap digunakan, dan setiap pengunjung blog/website yang menyukai blog/website anda dapat dengan mudah meng-klik like pada like box yag telah disediakan. 

SEMOGA BERHASIL

Cara Membuat Link Download di Blog

Cara Membuat Link Download di Blog - Dalam dunia blog selain artikel ada juga yang di sebut link, link sebagaimana kita ketahui adalah tautan yang menghubungkan antara halaman satu dengan halaman lain, situs dan situs lain termasuk link download yang tentuhnya mengarah ke situs file sharing tertentu. Contoh link adalah seperti berikut ( baca : blogspot template blog ).

Kali ini masih seputar link, saya akan share tentang cara bikin link download gratis di blogspot. Untuk membuat link download yang pertama harus kita miliki adalah file dan tentunya akun di file sharing ( seperti ziddu, googlecode, 4shared dll ). File yang ada di komputer sobat nantinya kan di upload ke salah satu file sharing tadi guna mendapatka url dari file tersebut. Kali ini kita akan membahas di file sharing ziddu saja.

1. Sign up di ziddu.com ( baca : cara membuat akun di ziddu )
2. Silahkan sobat meng-upload file ke ziddu untuk mendapatkan link downloadnya.
3. Link download dari ziddu kira - kira seperti gambar berikut.

 

 Nah, setelah kita mendapatkan lin downloadnya, sekarang waktunya untuk membuat link downloadnya. setahu saya, ada 2 cara untuk membuat link download, yang pertama dengan mengunakan teks biasa dan kedua dengan menggunakan / menyisipkan gambar pada link download. Berikut penjelasanny


<a href="http://www.ziddu.com/download/21283434/GalaxyBlog.zip.html" target="_blank"><b>DOWNLOAD</b></a>
ingt yah yang tulisan link wrna merah ntu harus di ganti dgn link anda  satu lagi kalo mau kunjung cara membuat link langsung saja klik ke sini atau kemari
 Hasilnya :

DOWNLOAD

 2. Link Download Dengan Gambar

gampang sekali prtma kita buka blogger'nya dan kita cari tulisan pos habis itu kita klik buat entri baru hbis itu kita klik lgi uploda foto yang ada sukai ke insert image kalo sudah di cocokan foto kita klik foto itu hbis ntu kita masukan link ke foto itu dn kita liat hasil'nya di bawah ini 
 
 janganlupa yahh masukan link anda seprti ini  http://www.ziddu.com/download/21283434/GalaxyBlog.zip.html ke dlm foto anda



semoga bermanfaat yah dn semoga berhasi...

CARA MEMBUAT CURSOR NAME BERJALAN DI BLOGGER..

Ikuti tutorial di bawah:

1) Login akaun blogger > Dashboard > Add A Gadget > HTML/Javascript

2) Copy paste kod dibawah pada ruangan html tadi

<style type="text/css">

/* Circle Text Styles */

#outerCircleText {

font-style: normal;

font-weight: normal;

font-family: 'ARIAL';

color: #8D38C9;

position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}

#outerCircleText div {position: relative;}

#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}

</style>

<script type="text/javascript">

;(function(){

var msg = "TEXT HERE";

var size = 24;

var circleY = 0.75; var circleX = 2;

var letter_spacing = 5;

var diameter = 10;

var rotation = 0.4;

var speed = 0.2;

if (!window.addEventListener && !window.attachEvent || !document.createElement) return;

msg = msg.split('');

var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,

ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],

o = document.createElement('div'), oi = document.createElement('div'),

b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

mouse = function(e){

e = e || window.event;

ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position

xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position

},

makecircle = function(){ // rotation/positioning

if(init.nopy){

o.style.top = (b || document.body).scrollTop + 'px';

o.style.left = (b || document.body).scrollLeft + 'px';

};

currStep -= rotation;

for (var d, i = n; i > -1; --i){ // makes the circle

d = document.getElementById('iemsg' + i).style;

d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';

d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';

};

},

drag = function(){ // makes the resistance

y[0] = Y[0] += (ymouse - Y[0]) * speed;

x[0] = X[0] += (xmouse - 20 - X[0]) * speed;

for (var i = n; i > 0; --i){

y[i] = Y[i] += (y[i-1] - Y[i]) * speed;

x[i] = X[i] += (x[i-1] - X[i]) * speed;

};

makecircle();

},

init = function(){ // appends message divs, & sets initial values for positioning arrays

if(!isNaN(window.pageYOffset)){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

} else init.nopy = true;

for (var d, i = n; i > -1; --i){

d = document.createElement('div'); d.id = 'iemsg' + i;

d.style.height = d.style.width = a + 'px';

d.appendChild(document.createTextNode(msg[i]));

oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;

};

o.appendChild(oi); document.body.appendChild(o);

setInterval(drag, 25);

},

ascroll = function(){

ymouse += window.pageYOffset;

xmouse += window.pageXOffset;

window.removeEventListener('scroll', ascroll, false);

};

o.id = 'outerCircleText'; o.style.fontSize = size + 'px';

if (window.addEventListener){

window.addEventListener('load', init, false);

document.addEventListener('mouseover', mouse, false);

document.addEventListener('mousemove', mouse, false);

if (/Apple/.test(navigator.vendor))

window.addEventListener('scroll', ascroll, false);

}

else if (window.attachEvent){

window.attachEvent('onload', init);

document.attachEvent('onmousemove', mouse);

};

})();

</script>

<a href=" http://www.ziddu.com/download/21276397/modifikasi_mobil_60_238.jpg.html" target="_blank"><b>DOWNLOAD</b></a>
Dalam kod di atas, tukarkan :
ARIAL -  font pilihan korang
TEXT HERE - masukkan text korang sendiri

Cara Buat Teks Berjalan di Blogger

Diposkan oleh guntur try haryanto on Kamis
Cara Buat Teks Berjalan di Blogger - Hallo sobat blogger, apa kabar semoga kalian baik-baik saja begitu juga saya. Pada kesempatan kali ini saya akan posting Bagaimana Cara Membuat teks Berjalan di Blogger. Biasanya teks bejalan ini di gunakan untuk mengucapkan selamat datang di blog.

 

Lalu Bagimana Cara membuat Teks berjalan di blogger.

• Pertama copy kode di bawah ini

 <font color="red"><marquee>assalamualaikum wr wb
</marquee></font>

• Lalu klik Tata Letak tambah Gadget
• Pilih HTML/Javascript
• Lalu Paste kode tadi. 
• Kemudian Simpan

Mudahkan, Semoga bermanfaat............... 
Keterangan:
ganti tulisan yang berwarna merah itu adalah warna huruf dan ganti huruf yang berwarna biru denga kata-kata kalian sendiri. 

Kali ini Widget and Tutorial bakal membagikan tutorial tentang cara mengganti kursor di blogspot. Caranya mudah kok. Langsung praktik aja yuk. Begini langkahnya :

• Login blogger kamu
• Masuk ke Dashboard >> Design >> Page Element
• Add a gadget dan pilih HTML/JavaScript
• Copy Paste kode di bawah ini

Kode 1 : Mengubah kursor tapi tidak mengubah ketika menyorot link

<style type="text/css">
body{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}
</style>

Kode 2 : Mengubah kursor walaupun saat menyorot link

<style type="text/css">body{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}body a:hover{cursor: url("http://dl8.glitter-graphics.net/pub/330/330658m8v492ivpa.gif"), auto;}</style>

Ganti tulisan yang berwarna ungu dengan link URL gambar kamu. 

SELAMAT MENCOBA...... N SELAMAT BERJUANG Hehehehehe

CARA BUAT MENU DROPDOWN

• Masuk dulu ke Blogger >> klik Tata Letak >> Edit HTML. 
• Backup dulu template anda. caranya pasti sudah taulah.. >> Download Template Lengkap 
• Cari Code :
  ]]></b:skin> 

Copy paste code di bawah ini tepat di atasnya

• /* Navigasi Dropdown Menu */
        #navdropdownmenu{
        background:black; /*Warna Latar Belakang */
        width:100%;
        height:auto;
        margin:0;
        padding:0;
        }
        #navdropdownmenu ul{
        float:left;
        list-style:none;
        margin:0;
        padding:0;
        }
        #navdropdownmenu li{
        list-style:none;
        float:left;
        }
        #navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
        color:yellow; /* Warna Teks */
        display:block;
        padding:9px 10px 9px 10px;
        font-size: 12px; /* Ukuran Teks */
        font-family: verdana; /* Jenis font */
        text-decoration:none;
        }
        #navdropdownmenu li a:hover{
        background:yellow; /* Warna latar saat kursor mouse berada di atasnya (hover) */
        color:black; /* Warna teks saat kursor mouse berada di atasnya */
        padding:9px 10px 9px 10px;
        }
        #navdropdownmenu li ul{
        z-index:10;
        position:absolute;
        height:auto;
        width:200px; /* Lebar submenu */
        border-width:1px 0 0 0; /* Tebal garis pinggir submenu */
        border-style:solid;
        border-color:#ffff66; /* Warna garis pinggir submenu */
        }
        #navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
        float:none;
        background:black; /* Warna latar belakang submenu */
        width:200px; /* Lebar submenu. Isi dengan nilai yang sama */
        border-width:0 1px 1px 1px; /* Tebal garis pinggir submenu */
        border-style:solid;
        border-color:#ffff66; /* Warna garis pinggir submenu */
        }
        #navdropdownmenu li ul li a:hover{
        background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
        color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
        }
        #navdropdownmenu li:hover ul, #navdropdownmenu li a:hover ul#submenu, #navdropdownmenu li:hover a:hover ul#submenu{
        z-index:10;
        position:absolute;
        height:auto;
        width:200px; /* Lebar submenu */
        left:auto;
        }
        .ngumpet{
        display:none;
        }
        .muncul{
        display:block;
        }
• Cari kode berikut
  
  </head>
   
• Ketikkan code berikut diatasnya
  
  <script>
        var auahgelap = &#39;&#39;;
        function petakumpet(id)
        {
        var menu = document.getElementById(id);
        var sangmantan = menu.className;
        if (sangmantan == &#39;ngumpet&#39;) {
        if (auahgelap != &#39;&#39;) {
        var terlalu = document.getElementById(auahgelap);
        terlalu.className = &#39;ngumpet&#39;;
        }
        menu.className = &#39;muncul&#39;;
        auahgelap = id;
        } else {
        menu.className = &#39;ngumpet&#39;;
        }
        }
        function umpetpetak(id)
        {
        var menu = document.getElementById(id);
        var sangmantan = menu.className;
        if (sangmantan != &#39;ngumpet&#39;) {
        if (auahgelap == &#39;&#39;) {
        var terlalu = document.getElementById(auahgelap);
        terlalu.className = &#39;muncul&#39;;
        }
        menu.className = &#39;ngumpet&#39;;
        auahgelap = id;
        } else {
        menu.className = &#39;muncul&#39;;
        }
        }
        </script>
   
• Cari kode yang mirip kode berikut.
  
  <div id='header-wrapper'>
        <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
        <b:widget id='Header1' locked='true' title='(Judul Blog Anda) (Header)' type='Header'/>
        </b:section>
        </div>
   
• Dibawahnya, ketikkan kode berikut:
  
  <div id='navdropdownmenu'>
        <ul id='navdropdownmenu'>
        <li><a href='#'>Home</a></li>
        <li onmouseout='petakumpet(&quot;submenu1&quot;)' onmouseover='umpetpetak(&quot;submenu1&quot;)'><a href='#'>Software PC</a>
        <div class='ngumpet' id='submenu1'>
        <ul>
        <li><a href='#'>Application</a></li>
        <li><a href='#'>Anti Virus</a></li>
        <li><a href='#'>Internet Browser</a></li>
        <li><a href='#'>Utility</a></li>
        <li><a href='#'>Themes</a></li>
        <li><a href='#'>Desktop</a></li>
        <li><a href='#'>Games</a></li>
        <li><a href='#'>Hack Tools</a></li>
        </ul>
        </div>
        </li>
        <li onmouseout='petakumpet(&quot;submenu2&quot;)' onmouseover='umpetpetak(&quot;submenu2&quot;)'><a href='#'>Mobile Software</a>
        <div class='ngumpet' id='submenu2'>
        <ul>
        <li><a href='#'>Application</a></li>
        <li><a href='#'>Games</a></li>
        <li><a href='#'>Themes</a></li>
        <li><a href='#'>Anti Virus</a></li>
        </ul>
        </div>
        </li>
        <li onmouseout='petakumpet(&quot;submenu3&quot;)' onmouseover='umpetpetak(&quot;submenu3&quot;)'><a href='#'>Tips And Tricks</a>
        <div class='ngumpet' id='submenu3'>
        <ul>
        <li><a href='#'>Blogger</a></li>
        <li><a href='#'>Tutorials</a></li>
        <li><a href='#'>Computers</a></li>
        </ul>
        </div>
        </li>
        <li onmouseout='petakumpet(&quot;submenu4&quot;)' onmouseover='umpetpetak(&quot;submenu4&quot;)'><a href='#'>Music</a>
        <div class='ngumpet' id='submenu4'>
        <ul>
        <li><a href='#'>Indo Hits</a></li>
        <li><a href='#'>Rock</a></li>
        </ul>
        </div>
        </li>
        <li><a href='#'>News Update</a></li>
        </ul>
        </div>
  
  
  Keterangan:
        * Tanda # pada kode <a href='#'> adalah link. Ganti dengan URL yang diinginkan
        * Anda bisa menambah atau mengurangi menu diatas.
  
   

Lalu klik >> Simpan Template

Semoga bermanfaat...
god luck... 

Udah tiga hari nich saya enggak nengok blog 

Tapi pada hari yang baik ini saya akan posting bagaiman membuat burung terbang twitter di blog.

Jejaring sosial ini sangat tepat untuk promosi blog jika follower kita banyak maka tifdak menutup kemungkinan blog kita banyak di kunjungi 

dengan widget ini kita bisa membuat follower di twitter kita bisa bertambah dengan cepat

Lalu bagaiman membuatnya, oke saya akan tunjukan caranya simak baik-baik

 1.Pertama yang mesti dilakukan adalah masuk akun blogger kalian masing-masing, iya lah masak masuk akun saya heheheheh

2.Pilih Rancangan >> klik Tambah Gadget >> HTML/javascript

3. copy script dibawah ini

                !– floating twitter Bird –>

<script type=”text/javascript” src=”http://bloggerpeer.googlecode.com/files/tripleflap.js”></script>
<script type=”text/javascript”>
var birdSprite=”http://warna burung.png“;
var targetElems=new Array(“img”,”hr”,”table”,”td”,”div”,”input”,”textarea”,”button”,”select”,”ul”,”ol”,”li”,”h1″,”h2″,”h3″,”h4″,”p”,”code”,”object”,”a”,”b”,”strong”,”span”);
var twitterAccount = “http://twitter.com/“;
var tweetThisText = “Twitter – UserID http://sukadanau.blogspot.com/“;
tripleflapInit();

</script>

Keterangan:
Ganti tulisan yang berwarna biru
http://twitter.com/ ganti denga username kalian
http://sukadanau.blogspot.com/ ganti dengan blog sobat masing-masing

dan ganti tulisan warna burung.png dengan warna yang kalian inginkan

• Warna Kuning
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkRO3DenirrybcZvnrkTKUUjrikXhK_EwLQjrT9v9mdc2alz9__6JHHtk5_siTtPJwK5SKgk7hBQrFV1U0KcF_pBBMIIFbclZWSEluapuwMvbvZmEaXYxLH3x0FCadmMr2Xv0z5ojFY-Y/s1600/yellow+bird.png
  
  Warna Hitam
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUjlXHoH4_NhtgCzEsW2GvUJVFQdOnBcC8y6-8zjoZwv8prfQVEV5K6pXRm1yTslUkleO5-WfU_32o-_Et-lWSvQweFLK8qOSMbZmWUwn3pOEl2zcRmCNKpfUxLd3mZm_CBk3VzcOZDTM/s1600/black+bird.png
   Warna Biru
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiGhH5t1BPfE1yM6Mor5SqQ_A7XaWVWnSt2ERlZjZjxqYfqqHoBSlQQEqsRI-vKLDenRsPna6vVYP4lOYQK6U2GgAY5ppOrGaxvJ2K6p7n7wWJqzfvLDwOsdIkEuH1nOH19wmUoc8C7s0/s1600/Blue+bird.png
   Warna Coklat
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLp-eTpcxxqo9E8TMU3IKVVSXS6I4Bh6sCxrkidbNC8PM_9rYACD0JY3XgUahPLs7MopmymtpW0xN8BEBy0jhfZVvpTh8rfybej309eBk4waJAZ-t04-S8F3pepAC7LTInu27h2QtMbWk/s1600/brown+bird.png
   Warna Hijau
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0jG-XNKbVszzP40uShfn9bKG7WBUJCIcZ8GlsQdcP33HgNwWS_kWa8lyFgJosKt0njQ5DWAjEiXGgE5bhKDssE7zL-sPcYZeo7QMK5SIYZHXWdCDYIIWSKHhwPVhyvUCCKxTozGxpS98/s1600/Green+bird.png
   Warna Ungu
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj4pPyb419kio0OcR4wI5KoKjEbERcGRymYle9vNQw-kOFn8mfdED9r-sI3b80rnehRx5zO2duLzhPF1b5wFm2JgCB693VTc22HNxSjmQAigvb8LEjf31NA9U3ZKZhFyleMitLzgG5Ugs/s1600/purple+bird.png
   Warna Putih
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Yva_ydc-QAoTV25aikg5eDDp0wzQ0upNlPal-vaqRWlYcKTFhfNJ2akg_SyJUtFWWPTWPAsUGt5VmSYCQc8Fcfj11i-jjkFCKy8fNFyCmtxPT4xf3YuvOr8g197CY8rDHGjSQyj61Uc/s1600/white+bird.png
   Warna Merah
  
  • https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhNKXH_eq_MsqH3p8JotIWYB5LrHjZu4DTk8lq16oaYu5IKbsFsNKIt2BzUtDOlCE2higMXomsodm6uAv2L_Oy0vMTLJm3EzwmgMagrbTF7gmDE5-gzlttC_m1cX_zncv3qfPSoabus3Y/s1600/red+bird.png

 4.Lalu paste dan SIMPAN

Semoga Berhasil......