Post Game: kotak

Showing posts with label kotak. Show all posts

Thursday, December 29, 2016

Cara Membuat kotak Text Berscroll di Blog

Saya Kali ini share cara membuat kotak text scroll

pertama-tama copy text dibawah

<div style="padding: 5px; overflow: auto; width: 500; height: 50px; border: 1px solid #000000;">masukkan text anda di sini</div> See More http://anggadwisaputrablog.blogspot.com/

pastekan dalam entri baru atau laman yg kosong yang mau ditambahkan
kemudian ganti text yg bercetak tebal dengan text and.
selesai dah :)

kalau kurang jelas tinggalkan komentar supaya kita bisa merenungkan bersama

Go to link Download

Cara Membuat Kotak Selamat Datang Di Blog

Go to link Download

Cara Membuat Emoticon di Kotak Komentar Blog

Cara Membuat Emoticon Di Kotak Komentar Blog - Selamat pagi sobat blogger semua !!! Kali ini, fahrurrozi18 akan berbagi cara tentang Cara Membuat Emoticon di Kotak Komentar Blog. Humh... mungkin sobat semua ada yang bingung ya, kenapa kok di beberapa blog terdapat emoticon di atas kotak komentarnya, dan ada juga blog yang tidak ada emoticonnya. Nah... itu karena si orang tersebut ( Admin blog ) memasang kode-kode tambahan di dalam templatenya. dan kali ini, aq akan memberi tahu cara pemasangannya.

Cara Membuat Emoticon di Kotak Komentar Blog :

Login ke acount Blogger sobat.
Kemudian Buka Template.
Pilih Edit Template.
Cari kode ]]></b:skin>.
Copy kode berikut ini dan letakkan diatas kode ]]></b:skin>

.emoWrap {color:greenyellow;font:bold 12px Tahoma,Arial,Sans-Serif;text-align:center;}img.emo, input.emoKey {display:inline-block;display:inline;vertical-align:middle;}input.emoKey {border:1px solid #ccc;background-color:white;font:bold 11px Arial,Sans-Serif;padding:1px 2px;margin:0px 0px 0px 2px;color:black;}

Selanjutnya, sobat Cari kode </body>
Copy kode di bawah ini, lalu paste diatas </body>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js type=text/javascript/><script src=http://codecbd.googlecode.com/files/emotion-coment.js type=text/javascript/><script type=text/javascript>//<![CDATA[var emoRange = "#comments p, div.emoWrap",putEmoAbove = "iframe#comment-editor",emoMessage = "Beri spasi sebelum memasang emoticon.";//]]></script>

Klik Simpan template.

Nah... segitu saja sob yang bisa aq jelasin, Semoga artikelku kali ini tentang

Cara Membuat Emoticon di Kotak Komentar Blog bermanfaat. :)

Go to link Download

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Mat malam sobat blogger pada kesempatan kali ini saya akan membagikan Tutorial blog Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan, mungkin sobat sudah pada tau Tutorial Blog yang satu ini, sudah banyak juga yang memposkannya tapi tak ada salahnya kan saya berbagi lagi untuk mempermudah sobat blogger yang mungkin masih baru seperti saya ini untuk menemukannya

Screen Shoot :

Ingin memasang Kotak Komentar Facebook dan Blog Keren ini

Silahkan ikuti langkah" di bawah ini :

1. Login ke akun Bloger Sobat

2. Masuk ke Bagian Template

3. Klik "Edit HTML"

4. Centang "Expand Template Widget"

5. Cari Kode ]]></b:skin>

6. Letakan kode di bawah ini tepat di Atas kode ]]></b:skin>

.comments-page { background-color: #f2f2f2;}
    #blogger-comments-page { padding: 0px 5px; display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px;
    cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}

Catatan :

Silahkan Hapus kode yang berwarna Merah jika ingin membuat kotak Komentar Facebook menjadi Transparan.

7. Kemudian cari kode </head>

8. Lalu letakan Kode di bawah ini tepat di Atas kode </head>

<script src=http://connect.facebook.net/en_US/all.js#xfbml=1/>
    <script src=http://code.jquery.com/jquery-latest.js/>
    <meta content=ID FP Anda disini property=fb:admins/>
    <script type=text/javascript>
    function commentToggle(selectTab) {
    $(".comments-tab").addClass("inactive-select-tab");
    $(selectTab).removeClass("inactive-select-tab");
    $(".comments-page").hide();
    $(selectTab + "-page").show();
    }
    </script>

Catatan :

Silahkan Ganti Kode berwarna Merah dengan ID FP(Fans Page) anda.. Contohnya https://www.facebook.com/1000r2blog.com atau http://facebook.com/301619369919206

9. Silahkan cari kode <div class=comments id=comments>

10. Umumnya kode <div class=comments id=comments> ada 2, jadi masukan kode di bawah ini tepat di Bawah kedua kode tersebut.

<div class=comments-tab id=fb-comments onclick=javascript:commentToggle("#fb-comments"); title=Comments made with Facebook>
    <img class=comments-tab-icon src=http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png/>
    <fb:comments-count expr_href=data:post.url/> Comments
    </div>
    <div class=comments-tab inactive-select-tab id=blogger-comments onclick=javascript:commentToggle("#blogger-comments"); title=Comments from Blogger>
    <img class=comments-tab-icon src=http://www.blogger.com/img/icon_logo32.gif/> <data:post.numComments/> Comments
    </div><div class=clear/>
    </div>
    <div class=comments-page id=fb-comments-page>
    <b:if cond=data:blog.pageType == "item">
    <div id=fb-root/>
    <fb:comments expr_href=data:post.url num_posts=3 width=400/>
    </b:if>
    </div>
    <div class=comments comments-page id=blogger-comments-page>

Catatan :

Silahkan anda Hapus kode berwarna merah tersebut jika kode di bawah sama, jika tidak y tidak usah. Untuk yang nomor 3 adalah Jumlah komentar yang akan muncul. Untuk nomor 400 adalah Lebar kotak Komentar, Silahkan di ganti sendiri..

Semoga dapat bermanfaat....

Go to link Download

Cara Membuat Emoticon Smile di Kotak Komentar blogger

Hhaahaha

..akhirnya, setelah saya pergi kesana-kemari, dapet juga ni cara bikin emoticon di Post Komentar. Dengan adanya fitur ini, para komentator jadi lebih muda dalam mengekspresikan perasaan dengan emoticon ini. ywd langsung aja nih aku share buat teman-teman.

contoh nya seperti ini sobat :
Emoticon Yahoo :

Ini langkah-langkah membuatnya (Dashboard tampilan Baru) :
1. Login dulu, terus masuk ke "Design-->Template-->Edit HTML" kalo yang klasik masuk ke dashboard--> template-->edit html
2. Beri tanda centang pada "Expand Widget Template"
3. Kemudian cari kode script ini </body>
4. Lalu letakkan script ddibawah ini sebelum kode </body> tepatnya diatas kode </body>..........

5. Kalau sudah, cari sript dibawah ini:

6. Kalau sudah ketemu, letakkan kode berikut ini setelah kode <p class=comment-footer> lebih tepatnya dibawahnya :D

7. Kalau sudah selesai trus di "SAVE"

*Catatan : Kadang-kadang ada beberapa template memiliki kode yang beda. Kalau caranya sudah dilaksanakan dengan benar tapi hasilnya tidak terjadi apa2 atau kodenya tidak berubah menjadi emoticon, kemungkinan itu karena Kode untuk templatenya berbeda atau bisa juga karena mugnkin hosting untuk menaruh file emoticon dan javascriptnya sedang bermasalah.

Go to link Download

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

BERIKUT ini cara kembuat kotak pencarian (Search Box) blog mirip Yahoo, yakni Kotak Pencarian Yahoo Indonesia. This is a Yahoo! Search Box Style!

Fungsi meniru atau menyerupai tampilan sebuah situs web terkenal adalah, selain biar tampak keren dan profesional, juga agar blog kita "user friendly", dikenal dengan istilah UX (User Experience). Pengguna jadi terbiasa dan tidak merasa asing.

Kotak pencarian mirip Yahoo! Search Box ini bisa ditampilkan di header sebelah nama blog (logo), bisa juga di atas atau di bawah posting. Penampakannya seperti di gambar di atas.

CARA MEMBUAT KOTAK PENCARIAN MIRIP YAHOO!

1. Template >Edit HTML
2. Capas kode berikut ini di atas kode ]]></b:skin>

.searchform {background: url(https://lh6.googleusercontent.com/-_1OwVk5Mg6w/VK6wR9-Yf3I/AAAAAAAAJTM/4hlGeo2ddFQ/w550-h47-no/yahoo%2Bsearch.png) no-repeat; width:468px;height:47px;
display: inline-block;zoom: 1; /* ie7 hack for display:inline-block */
*display: inline;border: solid 0px #ccc;padding: 0px;}
.searchform input {font: normal 12px Arial, Helvetica, sans-serif;padding:6px;}
.searchform .searchfield {background: #fff;width: 457px;outline: none;margin: 5px 7px 0px 10px;border-top: 1px solid #888;border-left: 1px solid #888;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;}
.searchform .searchbutton {background: #3775dd;box-shadow: 0 2px #21487f;border: 0;height: 27px;width: 75px;padding: 5px;font: 500 15px sans-serif;color: #fff;border-radius: 4px;}

Catatan:

468px = ukuran lebar kotak ini untuk ditampilkan di samping logo/nama blog. Bisa diubah.
360px = ukuran lebar kotak entry teks, sesuaikan dengan lebar kotak.

3. Save Template!

Kembali ke Dashboard:

4. Layout > Add a New Gadget di samping logo header > pilih "HTML/Java Script"
5. Copas kode berikut ini:

6. Save!!!

Demikian Cara Membuat Kotak Pencarian Blog Mirip Yahoo! Biar keren dan user friendly! Good Luck!

Go to link Download

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

CARA memasang, menampilkan, atau membuat widget Kotak Pencarian (Search Box) plus Ikon Media Sosial di sidebar blog sangat mudah. Kita tinggal pasang kode.

Contohnya ada di sidebar blog CB ini, namun yang persis sama dengan kode yang CB share di bawah ini demonya bisa dilihat di Online News Template yang baru saja dipasang.

Kotak Pencarian merupakan salah satu menu utama dalam sebuah situs web/blog. Kotak ini memudahkan pengunjung dan admin blog sendiri untuk mencari informasi yang dibutuhkan.

Blog yang tidak dipasangi kotak pencarian termasuk kategori yang buruk dan tidak user friendly. Sedangkan ikon sosial media berguna bagi nusa dan bangsa, eh.... berguna bagi meningkatkan jumlah follower, teman, atau liker.

Sebelum memasangnya, tentu saja Anda harus punya dulu akun-akun media sosialnya.

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

1. Layout > Add a Gadget di sidebar paling atas.
2. Copy + Paste kode berikut ini di kolom "Content". Kolom judul biarkan kosong.

<style>
#search-box {position: relative;width: 100%;margin: 0;}
#search-form {height: 30px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text {font-size: 14px;color: #ddd;border-width: 0;background: transparent;}
#search-box input[type="text"]
{width: 90%;padding: 7px 0 12px 1em;color: #333;outline: none;}
#search-button {position: absolute;top: 0;right: 0;height: 32px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 32px;border-width: 0;background-color: #4d90fe;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
</style>
<div id=search-box>
<form action=/search id=search-form method=get target=_top>
<input id=search-text name=q placeholder=Search here... type=text/>
<button id=search-button type=submit><span>Search</span></button>
</form>
</div>



<div class=widget-content>
<style>
#socialwidget {width: 300px;margin:10px 1px 10px 1px;}
.TZ-social{padding:0 5px 15px;}
.TZ-social img:hover{opacity:0.8}
.googleplus {background: #ffffff;border-top: 1px solid white;border-bottom: 1px solid #ebebeb;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ {background: #ffffff;border-top: 1px solid white;font-size: 12px;color: #000;padding: 9px 11px;line-height: 1px;font-family: Verdana, Geneva, sans-serif;}
.TZ span {color: #000;font-size: 11px;position: absolute;margin: -12px 100px;width: 310px;}
#widgetbox .author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id=socialwidget>
<div class=TZ-social>

<center>

<a href=http://facebook.com/cbblogger rel=nofollow style=margin-right: 15px; target=_blank>
<img alt=Facebook src=http://2.bp.blogspot.com/-1UYOmpOWMv8/T65vfQFE80I/AAAAAAAAABY/H0t0CMEwyO0/s1600/facebook.png/></a>

<a href=http://twitter.com/contohblog rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Twitter src=http://1.bp.blogspot.com/-4xPK0hkcELk/T65vi83XGqI/AAAAAAAAAB0/ef6Af1cesHE/s1600/twitter.png/></a>

<a href=https://plus.google.com/106869251529186655236/posts rel=me style=margin-right: 12px; target=_blank>
<img alt=Google Plus src=http://3.bp.blogspot.com/-QEdzJcR1pfI/T65vgBJxxMI/AAAAAAAAABg/2eXrz-32Gds/s1600/gplus.png/></a>

<a href=http://www.pinterest.com/cbblogger style=margin-right: 12px; target=_blank>
<img alt=Pinterest src=http://1.bp.blogspot.com/-2A1sbDGCgOw/T65vhAL4VZI/AAAAAAAAABo/2XDEIAFUuEI/s1600/pinterest.png/></a>

<a href=http://feeds.feedburner.com/contohblognih rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=RSS Feed src=http://1.bp.blogspot.com/-wK9q4eUXA6U/T65viJ1HVmI/AAAAAAAAABs/DyIkCZdJ1Y4/s1600/rss.png/></a>

<a href=http://www.linkedin.com/in/cbblogger rel=nofollow style=margin-right: 12px; target=_blank>
<img alt=Linkedin src=http://1.bp.blogspot.com/-uQdbnT1u1e0/Ui26eZOy3VI/AAAAAAAAJqA/h4wzaYt2L_Y/s1600/linkedin.png/></a>

</center>
</div>
</div>
</div>

3. Ganti ID yang berwarna merah dengan kepunyaan Anda.
4. Save!

Selamat, kini Kotak Pencarian plus Ikon Media Sosial sudah muncul di sidebar blog Anda!

Go to link Download

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Apa kabar sobat Zerone Blog pada kesempatan kali ini saya akan memberikan tutorial Cara Membuat Kotak Script Di Dalam Postingan Blog, Kotak script sendiri di gunakan untuk menaruh script2 di postingan sobat agar terlihat rapih dan teratur dan tidak memakan banyak tempat. Ada yang berbentuk kotak sederhana, ada juga yang berbentuk kotak dengan tambahan scroll, dan lain-lainnya. Kotak script juga bisa diberi warna dibagian backgroundnya, dan juga border yang berbentuk kotak, bisa diatur bentuknya.

Jika sobat ingin menggunakan kotak script sobat bisa tinggal copas saja script di bawah ini maka akan muncul script kotaknya di postingan sobat

Note : sebelum memposting script terlebih dahulu script yang akan sobat diposting di parse dahulu agar tidak terjadi error script nantinya sobat bisa parse script di sini

Contoh Script

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff;
text-align: left;">
.Klik Disini.</div>

Hasilnya akan seperti ini

.Klik Disini.

Ok sobat berikut ini beberapa script yang mungkin bisa sobat gunakan

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
Kode Script Anda yang sudah di parse Di Sini
</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left;">Kode Script Anda Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; text-align: left;">Kode Script Anda Disini</div>

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Kode Script Anda Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Kode Script Anda Disini</div>

Cara penerapannya :

Silahkan sobat copy salah satu kode kotak script di atas
lalu pastekan pada menu tab HTML Artikel entri
ganti kode yang berwarna merah dengan kode script yang ingin sobat masukan parsekan kode terlebih dahulu sobat bisa parsekan di sini

Demikian Cara Membuat Kotak Script Di Dalam Postingan Blog Yang dapat Zerone Blog berikan semoga bermanfaat dan selamat mencoba.

Go to link Download

Cara Membuat Kotak Subsribe di Blog Seperti EVO Magz

Cara Membuat Subscribe atau Artiel Berlangganan Seperti EVO Magz,- Pada postingan sebelumnya saya pernah membagikan Cara membuat Tombol share media sosial ala EVO Magz dan kali ini saya akan membagikan tutorial yang juga terkait template EVO Magz yaitu Cara membuat Subscribe atau artikel berlangganan seperti EVO Magz.

Berbicara mengenai template evo magz tidak ada habisnya, banyak blogger yang ingin mempunyai template evo magz namun apa daya bila tidak mempunyai uang untuk membelinya, Template Premium buatan Mas Sugeng ini merupakan template yang paling SEO dan meiliki tampilan yang sangat bagus dan rata-rata yang menggunakan template EVO Mgaz ini pasti berada di halaman pertama search Google.

Nah pada kesempatan kali ini saya akan membagikan bagi anda yang menginginkan salah satu fitur dari Template EVO Magz yaitu Tombol Subscribe atau artikel berlanganan. dengan Tombol subscribe akan memudahkan pengunjung untuk berlangganan artikel dari Blo anda. Ok tanpa berlama-lama silahkan ikuti saja tutorial dibawah ini.

Cara Buat Tombol Subscribe Seperti EVO Magz

1. Pertama anda harus mempunyai ID Feedburner, Jika belum punya silahkan Cara mendaftarkan Blog di Feedburner Terbaru

2. Jika Sudah Punya Catat ID-nya Contoh feeds.feedburner.com/Lirik-Lagu-For-You, yang berwarna merah merupakan ID Feedburner

3. Untuk Pemasangannya silahkan Login ke Blogger - Template dan Edit HTML. Kemudian Cari ]]></b:skin> dan Pastekan Kode CSS dibawah ini tepat diatas ]]></b:skin>

/* SUBSCRIBER BOX Ala EVO MAGZ by Espada Blog*/
.berlangganan-box {
border: 1px solid #f0f0f0;
padding: 15px;
margin: 0 0 20px;
text-align:center;
}
.berlangganan-box input.email-address[type="text"] {
width:60%;
padding:10px;
border:1px solid #ddd;
text-align:center;
border-radius: 4px;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"] {
transition:all 0.5s;-moz-transition:all 0.5s;-webkit-transition:all 0.5s;
padding:10px 15px;
background:#07ACEC;
border-radius: 3px;
color:#fff;
border:none;
font-weight:bold;
outline:none;
}
.berlangganan-box input.submit-email[type="submit"]:hover {
background:#0D9AD0;
cursor:pointer;
}
.berlangganan-box input.email-address[type="text"]:focus {
background: #f9f2a5;
}

4. Kemudian Cari Lagi Kode Related Post, Contoh Kodenya seperti berikut <div class=related-post id=related-post>

5. Jika Sudah Ketemu silahkan Pastekan Kode CSS dibawah ini Tepat diatas Kode Tersebut.

<div class=berlangganan-box>
<form action=https://feedburner.google.com/fb/a/mailverify method=post onsubmit=window.open('https://feedburner.google.com/fb/a/mailverify?uri=Lirik-Lagu-For-You', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true target=popupwindow>
<p>Subscribe to receive free email updates:</p><p><input class=email-address name=email placeholder=Your email address... type=text/></p><input name=uri type=hidden value=Lirik-Lagu-For-You/>
<input name=loc type=hidden value=en_US/>
<p><input class=submit-email type=submit value=Subscribe/></p>
</form>
</div>

6. Keterangan: Silahkan Ganti Kode berwarna Merah Lirik-Lagu-For-You dengan ID Feedburner anda.

7. Jika sudah Simpan dan Lihat Hasilnya

Itulah Cara Membuat Subscribe atau Artikel Berlangganan Seperti EVO Magz, Demikian Artikel mengenai Cara membuat Subscribe ala Template EVO Magz, Sekian dan Selamat Mencoba.

Go to link Download

Cara Membuat Kotak Like Facebook Menarik Di Blog

Cara Membuat Kotak Like Facebook Menarik Di Blog. Ini adalah salah satu widget yang bisa melayang di blog. Melayang disini bukan seperti burung twitter. Tetapi bisa berjalan mengikuti arah halaman yang berada dibawahnya jika di scroll. Cara ini memang cocok untuk menghis blog anda agar lebih menarik. Supaya lebih cepat membuatnya, anda harus sudah mempunyai FP atau Fans Page di Facebook. Jika belum punya, baca di Cara Membuat Fan Page Facebook.

Kurang lebih seperti diatas lah kotak like facebook menarik yang akan tampil di blog anda. Tapi itu FP punya saya. Kalau anda ingin harus mempunyai HTML Fans Page anda. Jebih jelas mengenai cara membuat atau memasang widget yang menarik ini, silahkan anda simak pada tutorial dibawah ini.

Cara Membuat Kotak Like Facebook Menarik Di Blog

1. Login ke akun blogger anda, pada dashboard pilih blog anda lalu masuk ke Tata Letak

2. Klik tambah gadget pada kolom yang mana saja. Karena widget ini melayang dan tidak menempel pada kolom widget

3. Cari, lalu pilih widget yang bernama HTML/Javascript

4. Copy kode dibawah ini lalu editlah sendiri sesuai ketentuan ketentuan dibawah.

<style type=text/css>

#like-facebook {

position:fixed !important;

position:absolute; /* IE6 */

bottom:-1000px;

right:10%;

margin:0px 0px 0px -182px;

width:auto;

height:auto;
padding:16px;
-webkit-box-shadow: 0px 0px 7px #222;
-moz-box-shadow: 0px 0px 7px #222;
box-shadow: 0px 0px 7px #222; background-color:#E3E3E3; font:normal 1em Cambria,Georgia,Serif;
color:#111;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;}
#kotak-facebook a.close {
position:absolute;
top:-10px;
right:-10px;
background:#333;
font:bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#fff;
border:2px solid #fff;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
cursor:pointer;
}
</style>
<script src=https://jonarendra.googlecode.com/files/Tombol-Close-Jona-Rendra.js/></script>
<div id=kotak-facebook>
<font size="3"><b>Bantu saya untuk klik like ya...</b></font size>
<br/>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, script, facebook-jssdk));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/jonarendra" data-width="292" data-height="400" data-show-faces="true" data-stream="false" data-border-color="green" data-header="true"></div>
<a class=close href=#>×</a></div>

Keterangan :

Kalimat yang berwarna biru bisa anda ganti dengan kalimat yang muncul diatas kotak like facebook nantinya
Rangkaian kode HTML yang berwarna merah ini harus anda ganti dengan kode like facebook anda sendiri

Kode yang merah itu adalah kode Like Box punya saya. Kalau anda mau mudah, edit saja jonarendra di www.facebook.com/jonarendra dengan nama fans page anda. Apabila anda ingin editan sendiri, anda harus mendapatkan HTML nya di Cara Mengetahui Kode HTML Fans Page Facebook.

5. Klik Save/Simpan

Kode HTML diatas sudah dilengkapi dengan CSS dan tombol close. Supaya tampilannya jadi lebih menarik maka saya tambahkan atribut atribut tersebut. Mau melihat live preview nya? Buka HTML Editor, lalu paste dan preview.

Bagaimana? apakah anda sudah berhasil membuat like facebook yang menarik? Sekian dulu postingan Cara Cara saya yang berjudul Cara Membuat Kotak Like Facebook Menarik Di Blog, semoga bermanfaat untuk anda dan jika ada pertanyaan silahkan poskan komentar.

Go to link Download

Post Game

Thursday, December 29, 2016

Cara Membuat kotak Text Berscroll di Blog

Cara Membuat kotak Text Berscroll di Blog

Thursday, December 22, 2016

Cara Membuat Kotak Selamat Datang Di Blog

Cara Membuat Kotak Selamat Datang Di Blog

Wednesday, December 21, 2016

Cara Membuat Emoticon di Kotak Komentar Blog

Cara Membuat Emoticon di Kotak Komentar Blog

Friday, December 16, 2016

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Cara Membuat Kotak Komentar Facebook dan Blog Berdampingan

Wednesday, December 14, 2016

Cara Membuat Emoticon Smile di Kotak Komentar blogger

Cara Membuat Emoticon Smile di Kotak Komentar blogger

Wednesday, December 7, 2016

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

Cara Membuat Kotak Pencarian Blog Mirip Yahoo!

Thursday, November 3, 2016

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Cara Membuat Kotak Pencarian plus Ikon Media Sosial

Friday, October 28, 2016

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru

Sunday, October 23, 2016

Cara Membuat Kotak Subsribe di Blog Seperti EVO Magz

Cara Membuat Kotak Subsribe di Blog Seperti EVO Magz

Cara Buat Tombol Subscribe Seperti EVO Magz

Thursday, October 20, 2016

Cara Membuat Kotak Like Facebook Menarik Di Blog

Cara Membuat Kotak Like Facebook Menarik Di Blog

Cara Membuat Kotak Like Facebook Menarik Di Blog