Tambahkan Custom Facebook Like Box Untuk Blogger

Tutorial kali ini saya akan menunjukkan kepada Anda tentang Cara Tambah Kustom Facebook Like Box Untuk Blogger. Tambahkan Custom Facebook Like Box Untuk Blogger adalah cara terbaik untuk mendapatkan lebih banyak penggemar facebook. Sebuah Fan Box atau Kotak Facebook memungkinkan pengunjung Blog anda menyukai halaman Anda Fans Facebook, tanpa meninggalkan blog Anda. Widget ini  dibuat oleh line25.com.

Disini saya telah menyingkat pekerjaan Anda agar Anda dapat lebih dengan mudah Menambahkan Custom Facebook Like Box Untuk Blogger Anda. Sebelumnya silahkan Anda lihat Priview dan Demonya di bawah ini, jangan lupa untuk meng-LIKE Fans Oto Website agar Anda dapat memantau Oto Website melalui akun Facebook Anda.

Priview Custom Facebook Like Box

Demo Custom Facebook Like Box Seperti Pada Kotak Berikut

​

Cara Tambah Custom Facebook Like Box Untuk Blogger

1. Pertama Anda harus mengetahui ID Facebook Fans Page Anda.

2. Untuk Cara mengetahuinya silahkan Anda gunakan Facebook ID Finder dengan menekan tombol berikut.

Facebook ID Finder

3. Pada Facebook ID Finder masukkan URL Facebook Fans Page Anda.

4. Lalu Tekan tombol Get Id.

5. Sekarang pergi ke Dasbor Blogger.

6. Pilih Tata Letak ➨ Tambah Gadget ➨ Pilih elemen HTML/Java Script.

7. Lalu copy kode berikut dan letakkan di dalamnya.

<iframe frameborder="0" height="250" width="300" src="http://www.connect.facebook.com/widgets/fan.php?channel_url=http://otowebsite.blogspot.com/?fbc_channel=2&amp;id=ID_FACEBOOK&amp;name=&amp;connections=8&amp;stream=0&amp;logobar=0&amp;css=https://otowebsite-blogspot.googlecode.com/svn/trunk/Fb-hack.css"></iframe>

Penyesuaian dan Keterangan:

• Ganti ID_FACEBOOK dengan ID Facebook Fans Page Yang Anda dapatkan dari Facebook ID Finder.
• Angka 250 menunjukkan tinggi widget ini.
• Angka 300 menunjukkan lebar dari widget.
• Angka 8 menunjukkan berapa jumlah penggemar yang akan kita tunjukkan.

8. Akhirnya menyimpan dan melihat hasilnya!

Bagaimana Kesan Anda ?!!

Jika Anda kurang suka dengan Tambahkan Custom Facebook Like Box Untuk Blogger, Anda bisa melihat tutorial Facebook lainnya yang berada di artikel berikut:

• Cara Membuat Facebook Like Auto Hide Di Blog.
• Facebook Pop-Up Box Untuk Blogger.
• Facebook Pop-Up Box V2.
• Cara Membuat Facebook Like Auto Hide Di Blog - V2.
• New Version Facebook Like Auto Hide Blogger Widget Generator.

Semoga dapat bermanfaat dan dapat membantu Anda, Salam Blogger!

Widget Jam animasi flash Untuk Blogger

Widget Jam animasi flash adalah salah satu widget paling umum untuk widget blogger dan webmaster di letakkan di situs Web mereka / blog adalah sebuah Jam dan jam Calendar memberikan tampilan yang indah untuk sebuah website.

Jam adalah keharusan untuk blog pribadi. jadi saya telah menciptakan generator untuk widget ini karena Anda dapat dengan mudah menambahkan widget ini ke blog Anda yang berada dalam artike ini: Widget Jam animasi flash Untuk Blogger.

Sebelumnya saya mengucapkan banyak terimakasih kepada http://flash-clocks.com/ karna telah menyediakan Jam animasi flash di situs mereka, dan perlu Anda ketahui juga bahwa widget ini saya dapatkan dari situs tersebut dan saya hanya menggabungkannya menjadi satu sehinggan dapat dengan mudah membantu kerja Anda.

---

Cara Menggunakan Generator Jam animasi flash

---

Sebenarnya saya tidak perlu menjelaskan bagaimana cara menggunakan generator ini, karna sebelumya saya sudah membahas caranya yang sangat simple di generator-generator sebelumnya.

Saya akan jelaskan saja agar Anda lebih mengerti.

• Tekan tombol untuk menggunakan generator.
• Pilih jenis jam di generator.
• Isi Tinggi dan Lebar dari Widget.
• Klik tombol "Genetate" untuk menginstal.
• Sesuaikan sendiri judul dari widget.
• Terakhir, klik "Add to Blogger" untuk menambahkannya ke blog Anda.

Widget Generator

Bila Anda mengalami kesulitan dalam menggunakan generator ini jangan sungkan untuk bertanya karna saya ada disini!

Beautiful Email Subscription Forms Untuk Blogger

Berlangganan via email adalah cara yang sangat populer untuk berlangganan setiap blog / situs dan mendapatkan update langsung di kotak email, itu sebabnya Anda selalu dapat melihat bahwa jumlah pelanggan feed .
Disini saya akan berbagi beberapa formulir berlangganan email indah yang dirancang oleh design3edge dan saya telah mengkonversi mereka dari file ke dalam widget blogger. Saya telah mencoba yang terbaik untuk membuat tutorial ini dengan satu langkah installation. Anda hanya perlu copy dan paste kode. Sekarang mari kita pergi ke bentuk dan melihat bagaimana cara menambahkan widget ini ke blogger blog.

---

Cara Tambah Formulir Berlangganan Email Untuk Blogger

---

1. Login ke akun blogger Anda.

2. Pada Dasbor klick Tata Letak.

3. Tambah Gadget.

4. Pilih elemen HTML/Java Script.

5. Lalu letakkan salah satu kode script berikut ke dalamnya.

---

Email Formulir Gaya 1

---

<style type="text/css">
#otowebsite-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoTUdhtYYM70Ic_KqPrDmp3kuMaI9Lm7v4W52k_5FnCba4ahHDlGe0O_YrE74h4InXH30IDUYrCDHwlI44oqO9wKmeib9cDlUvMSwoYWFIrGCgOk_GbpmWPaFjMHytivqnDvS6a1hlHg/s1600/otowebsite.blogspot.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
form#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

---

Email Formulir Gaya 2

---

<style type="text/css">
#otowebsite-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinaayUPmiZb5zilV5F8dAouEUSchMl3aQdeAwUccZ6Vur8ZVwKIeOPLPyyHLirjhOE9U3Jqvi1X3_rHDv2MCMRA1HhhGa3re3Km9jevlUmH9XypN1DpDP_vY3-kMNZ8uRx4UoQhvnmbA/s1600/otowebsite.blogspot.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
form#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri= otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

---

Email Formulir Gaya 3

---

<style type="text/css">
#otowebsite-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC2ppj_WlBmVQr4sdnPzPv9SB7yLgcJBCIaMa0_fNvZSXePSGtPE3NYPKczQE_bIo5Bu7OaEZI3VUTKZD5A9wnhc9ivcs6tdkI46qKOinh3Tm6zUFOuNVBwF9TZgTPIWhyphenhypheny43Lkl2-hQ/s1600/otowebsite.blogspot.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
form#otowebsite-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
form#otowebsite-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
form#otowebsite-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
<div id="otowebsite-emailbox">
    <form id="otowebsite-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="otowebsite" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>

• Ganti dua kode otowebsite dengan id feedsburner Anda.

6. Akhirnya menyimpan.

Sekarang Anda dapat melihat hasilnya pada sidebar blog Anda.

Saya rasa cukup untuk kali ini, mudah-mudahan Anda suka dengan Beautiful Email Subscription Forms For Blogger di atas!
Saya berharap bahwa Anda tidak akan menghadapi masalah ketika menerapkannya ke blog Anda. Namun jika Anda mendapatkan masalah Anda cukup melemparkan masalah dalam komentar!

Tambahkan Widget Berlangganan Di bawah Posting Blogger

Pada tutorial kali ini saya akan berbagi sebuah Widget Berlangganan Di bawah Posting Blogger Anda.
Widget ini pasti akan meningkatkan jumlah subscribers sosial Anda. Anda menulis posting yang baik dan mengharapkan lebih banyak jumlah pelanggan maka widget ini pasti akan membantu Anda. Widget ini berisi formulir berlangganan email, facebook seperti tombol, twitter dan beberapa ikon sosial yang indah di bagian kanan dari widget. Widget ini dapat diinstal dalam satu langkah, Anda hanya perlu copy yang saya berikan dan paste kode di template Anda. Jadi mari kita lihat bagaimana untuk menambahkannya ke blog blogger Anda!

---

Cara Tambahkan Widget Berlangganan Di bawah Posting Blogger

---

1. Login ke akun blogger Anda.
2. Pada Dasbor klick Template ➨ Edit HTML.
3. Centang  Expand Template Widget ➨ Backup template Anda.
4. Sekarang temukan kode <data:post.body/> (Bila kesulitan mencari kode HTML coba klick DISINI)
5. Lalu letakkan kode berikut ini di bawah kode tersebut (Bila menemukan kode tersebut lebih dari dua maka pilih yang ke dua)

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
form.feedburner {
    margin: 20px 0 0;
    display: block;
    clear: both;
}
.OW {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCMEFr-TSCH3rikJQ83u4-BzHfd2EECyBRwy9nAbAVZh_OmAZvAWSRKcN7lZnb3uw2d43i5ch5_pEF6SqHFnwwasxij1qa1IhBL_PJjZy-7NbVSJIF1f74xl0Dk8x1J_H2nOd6zgAwQQ/s1600/otowebsite.blogspot.com-email-icon.png) no-repeat scroll 4px center transparent;
    padding: 7px 15px 7px 35px;
    color: #666;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid #D3D3D3;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
.OWsubmit {
    color: #666;
    font-weight: bold;
    text-decoration: none;
    padding: 6px 15px;
    border: 1px solid #D3D3D3;
    cursor: pointer;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    -goog-ms-border-radius: 4px;
    border-radius: 4px;
    background: #fbfbfb;
    background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4));
    background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='
    #FBFBFB', endColorstr='#F4F4F4',GradientType=0 );
background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%);
}
#OW-widget {
    -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -goog-ms-border-radius: 10px 10px 10px 10px;
    border-radius: 10px;
    background: none repeat scroll 0 0 transparent;
    border: 1px solid #D3D3D3;
    padding: 8px;
    -moz-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    width: 480px;
    -webkit-box-shadow: inset 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: inset    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow: inset         0px 0px 8px rgba(50, 50, 50, 0.75);
    -webkit-box-shadow: inset 0px 5px 0px 0px #D8D8D;
}
#OW-widget:hover {
    background: none repeat scroll 0 0 #FFF;
    -moz-box-shadow: 1px 1px 2px #CCC inset;
    -webkit-box-shadow: 1px 1px 2px #CCC inset;
    box-shadow: 1px 1px 2px #CCC inset;
}
#OW-widget td {
    padding: 3px 0;
}
</style>
<center><br/><div id='OW-widget'>
 <div id='emailwidget'>
  <table style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;' width='100%'>
  <tbody>
  <tr style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
   <td align='left' style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 18px; margin:0px 0px 5px 0px;font-family:georgia;font-style:italic; '>
     Get free daily email updates!
    </p>
    <form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=otowebsite', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' style='margin: 0pt;' target='popupwindow'>
     <input name='uri' type='hidden' value='otowebsite'/>
     <input name='loc' type='hidden' value='en_US'/>
     <input class='OWstyle' name='email' onblur='if (this.value == "") {this.value = "Enter your email…";}' onfocus='if (this.value == "Enter your email…") {this.value = ""}' type='text' value='Enter your email…'/>
     <input alt='' class='OWsubmit' title='' type='submit' value='Submit'/>
    </form>
   </td>
   <td style='border:none; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;'>
    <p style='color:#666; font-weight: bold; font-size: 14px; margin:0px 0px 5px 0px;font-family: georgia; '>
     Follow us!
    </p>
    <a href='http://feeds.feedburner.com/otowebsite' rel='nofollow' target='_blank' title='Suscribe to RSS Feed'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMvx7oWAi_f856wVbn2l_VWweCDwJj3ur0ST7rFLe9gJRGtsDVZ-dOD8kELwWt7G0BLgK2Jd29iZe_lBFDKKB6_J_KzFWw6Sb049W5UtGqJjN9ppv0Qc90Sox9B0oZtLEr1mWSxi4sBA/s1600/otowebsite.blogspot.com-rss.png'/></a>
    <a href='http://twitter.com/otowebsite' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj18D8FCjCDtf3MHMxwd-IxE44BMTTJ0IqtrCdylPBsWJ_Z6BtERAeDe9UdblilfqLnsWA5KP1aw0w9KnU-DyMyll9cTVJJ8EDGpdjnqHqsXDGJH7ijrdWlcb8ijSSKl1qb8OTGTTC1qw/s1600/otowebsite.blogspot.com-twitter.png'/></a>
    <a href='http://www.facebook.com/dekrif' rel='nofollow' target='_blank' title='Follow us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE8cZnZMAW67UV0ED5Mcrv5rf3ZEQDseHW7KHDKTbqOT6qVQTc4bVQ4y0d89T12JbTgDvET_2NnTE2mvm3h-XzX6VIq_k0Sw1V_8Ey-hzV9Sukn4_-GiW0tyncGBLZFdVga10hqnhoag/s1600/otowebsite.blogspot.com-fb.png'/></a>
    <a href='https://plus.google.com/115780777398536909642/' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtTuLZwekc5CO6x0U5f1TS7d0w5auiLUrYohEXWDgv4LaP8ySSeimYj38GQ0D-j-p4SEL-eo6Uv5Vgipl8e2RD6mPIWMRot1MSDEkL0rlAMF56fGHx6ha9dO3tHBTw83363bMQqQSwJQ/s1600/otowebsite.blogspot.com-gplus.png'/></a>
   </td>
  </tr>
  </tbody>
  </table>
  <div align='right'>
   <span style='font-style: italic; font-size: 8px; color: solid #ffffff;'><a href='http://www.otowebsite.blogspot.com/' style='text-decoration: none;' target='_blank'><font color='#000' decoration='none'>[Get this widget]</font></a></span>
  </div>
  <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fdekrif&send=false&layout=standard&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=30" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:30px;" allowtransparency="true">
  </iframe>
  <a class='twitter-follow-button' href='http://twitter.com/otowebsite' rel='nofollow'></a>
  <script src='http://platform.twitter.com/widgets.js' type='text/javascript'></script>
 </div>
</div>
</center>
</b:if>

Keterangan:

• Ganti semua (tiga) otowebsite dengan Nama Pengguna Feedburner
• Ganti semua (dua) dekrif dengan Nama Pengguna Facebook
• Ganti semua (dua) otowebsite dengan Nama Pengguna Twitter
• Ganti  115780777398536909642 dengan ID Google +.
• Anda dapat menyesuaikan widget ini dengan menggunakan OW - HTML Editor.

5. Akhirnya menyimpan template.

Sekarang Anda dapat melihat widget ini di bawah setiap postingan blog Anda.

Jika Anda masih mendapatkan masalah tentang widget ini maka jangan ragu untuk menyebutkannya melalui komentar, saya akan membalas sesegera mungkin.