• 
  Beranda
• blog tutorial
• tips dan triks blog
• widget

Cara membuat kotak like facebook melayang versi modern di blog

POSTED BYwahyucoy3 POSTED ON 14:55 WITH 23 COMMENTS

facebook

Facebook adalah salah satu pioneer (pelopor) jejaring sosial. Mempromosikan blog anda di Facebook sangat diperlukan dan dibutuhkan.Widget ini jauh lebih baik dan efisien untuk mempromosikan blog. Widget jejaring sosial yang satu ini terusan (terbaru) dari widget-widget facebook sebelumnya. Oleh karena itu saya sebut kotak facebook like melayang versi modern ( Modern Floating Facebook Like Box)

View Demo

CARA MENAMBAHKANNYA DI BLOG

Cara menambahkan widget ini cukup mudah, berikut langkah-langkahnya:

• Masuk ke akun blogger
• Klik Tata Letak-> Tambahkan Gadget-> HTML/Javascript
• Pastekan kode berikut dibawah ini di dalamnya: 

<script type="text/javascript">
 /*<![CDATA[*/
 jQuery(document).ready(function() {jQuery(".abtlikebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});
 /*]]>*/
 </script>
 <style type="text/css">
 .abtlikebox{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_CysySbf-hwiw14LPBWCBGKVkKQdlDtk1f2NxiZxyu0SZ1FC3S4TLuAfMz2OYg4wN127Lft4aSSCRuX5HFy8vX6sA6Kn3IuNYvt2sZlT4nlDTBmi2MMOFET3vvSy4X5zJnR6WmJUVf5A/s1600/facebook+floating+box.png") no-repeat scroll left center transparent !important; float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index:  99999;position:fixed;right:-250px;top:20%;}
.abtlikebox div{ padding: 0; margin-right:-8px; border:4px solid  #3b5998; background:#fafafa;}
.abtlikebox span{bottom: 4px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}
 .abtlikebox span a{color: gray;text-decoration:none;}
 .abtlikebox span a:hover{text-decoration:underline;}
}
</style>
 <div class="abtlikebox" style="">
     <div>
     <iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F1.menittulisaddaku&amp;width=245&amp;colorscheme=light&amp;show_faces=true&amp;border_color=white&amp;connections=9&amp;stream=false&amp;header=false&amp;height=270" scrolling="no" frameborder="0" scrolling="no" style="border: white; overflow: hidden; height: 270px; width: 245px;background:#fafafa;"></iframe><span>Widget by :<a href="http://=wahyucoy3.blogspot.com/"> Wawasan spiritual dan blogging</a></span>
     </div>
 </div>

• Ganti 1.menittulisaddaku dengan ID Facebook Fans Page anda
• Simpan Template dan lihat hasilnya...

Terima Kasih Atas Kunjungan Anda
Judul: Cara membuat kotak like facebook melayang versi modern di blog
Ditulis Oleh jalupangna
Jika mengutip harap berikan link yang menuju ke artikel Cara membuat kotak like facebook melayang versi modern di blog ini. Terima kasih atas perhatiannya

   

  selamat mencoba

Cara Membuat Recent Post Berjalan di Blog

   

Cara Membuat Recent Post Berjalan di Blog

 blogspot

Salam Sukses Sahabat Blogger

pada kesempatan yang berbahagia ini saya ingin sedikit berbagi tutorial tentang Cara Membuat Recent Post Berjalan di Blog. FungsiRecent Post sendiri selain untuk mempercantik halaman blog juga berfungsi untuk mempermudah pengunjung untuk mengetahui apa judul postingan kita yang terupdate. Kata orang sich blog itu seperti sebuah MALL jika tempatnya Rapi Bersih Cantik Menarik pasti banyak mengundang pembeli demikian juga dengan blog jika tertata dengan rapi indan dan simple pasti pengunjung ke halaman kita akan memBookmerk halaman kita. Btooool...? itu bisa kita jawab masing-masing dengan hati yang terdalam...!

Lansuns saja
Berikut Cara Membuat Recent Post Berjalan di Blog

Langkah 1. masuk Blogger Home

Langkah 2. klik Tata Letak/ Layout

Langkah 3. Add Gadget/ Tambah Gadget

Langkah 4. copi kode java script di bawah ini

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript">
</script>
<style media="screen" type="text/css">
<!--
#spylist {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:350px;
}
#spylist ul{
width:220px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:208px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:70px;
overflow: hidden;
background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language="JavaScript">
imgr = new Array();
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 70;
thumbheight = 70;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = true;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 20;
home_page = "http://wahyucoy7.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src="http://infonetmu.googlecode.com/files/recentpostthumbslideshow.js" type="text/javascript">
</script></div> 

Langkah 5. Paste kan kode tersebut ke dalam kotak yang telah tesedia

Langkah 6. ganti tulisan http://wahyucoy7.blogspot.com/ dengan alamat blog sobat

Langkah 7. Save/ Simpan dan liat hasilnya

  

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot

Tweet

Horizontal Menu: Pure CSS 3D Button Effect for Blogger

Menu/navigasi horizontal Blogger/Blogspot ini juga dibuat dengan HTML dan CSS murni tanpa sentuhan javascript maupun jquery., sama seperti menu/navigasi horizontal sebelumnya. Cara membuat dan memasangnya pun sangat sederhana dan tanpa mengedit template HTML, karena aturan CSS saya buat menyatu dengan HTML nya.

Cara membuat/memasang widget horizontal menu/mavigation 3d button Blogger/Blogspot:

1.  Copy dan edit kode di bawah ini:

Kode: 

<style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist #active a:visited, #navlist #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style>
<div id="navcontainer">
<ul id="navlist">
<li><a href="#"><span>Link 1</span></a></li>
<li><a href="#"><span>Link 2</span></a></li>
<li><a href="#"><span>Link 3</span></a></li>
<li><a href="#"><span>Link 4</span></a></li>
<li><a href="#"><span>Link 5</span></a></li>
<li><a href="#"><span>Link 6</span></a></li>
</ul>
</div>

- Ganti  # dengan url yang ingin anda pasang di menu, misalnya url homepage, daftar isi, label, dan lain-lain.

- Ganti Link 1, Link 2, Link 3, dan seterusnya dengan nama menu/anchor text sesuai dengan yang anda inginkan, misalnya Home, Daftar Isi, Tips, dan seterusnya.

- Jika ingin menambah/menghapus daftar menu, tambahkan/hapus baris: 

<li><a href="#"><span>Link</span></a></li> sebelum </ul>.

2. Masuk ke dashboard > Design/Rancangan > Klik Add a Gadget

3. Setelah pop up window muncul, pilih opsi HTML/Javascript

4. Kemudian masukkan Kode yang sudah diedit tersebut ke kolom configure HTML/Javascript.

 

7. Klik save.

8. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget).

9. Save lagi.

10. Done! menu/navigasi horizontal Blog Blogger anda siap digunakan.

mencuri adalah pekerjaan pengecut! © buka-rahasia.blogspot.com

Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot
Written by: Ahmad Khoirul Azmi

• Rating: 4.8 Thanks for reading! Suka dengan artikel ini? Please link back artikel ini dengan code ini atau share dengan Facebook like diatas/sharing tool di bawah. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

<a href="http://wahyucoy3">Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot</a>

Membuat Menu TabView Tanpa Edit Template

1. Login ke akun blogger kamu
2. klik menu Element Laman
3. klik Tambah Gadget
4. pilih HTML/JavaScript
5. masukkan kode berikut didalamnya

<style type="text/css">  /* begin css tabview */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 98px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #2C2C2C; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold; /* besar hurup menu */
background-color: #252525; /* warna latar menu */
color: #F0F8FF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #DD0A0A; /* warna background menu aktif */
color: #252525;
}
div.TabView div.Tabs a:hover {
background-color: #DD0A0A; /* warna background menu hover */
color: #F0F8FF;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #252525; /* warna border kotak utama */
overflow: hidden;
background:#252525; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
</style>
<script src="http://naughtyric.googlecode.com/files/tabview.js" type="text/javascript"></script>
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">

ISI Tab View 1

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 2

</div>
</div>
<div class="Page">
<div class="Pad">

ISI Tab View 3

</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script><span style="font-size: xx-small;"><span style="color: #fff;">by </span><a href="http://naughtyric.blogspot.com/2011/06/cara-membuat-menu-tabview.html" style="color: #A52020;">Naughtyric Blog</a></span>

Nah sobat tinggal merubah kode yang diwarnai saja, saya rasa tidak perlu dijelaskan lagi karena sudah ada semua di posting sebelumnya.

Sedikit tambahan memang untuk pengeditan atau mengisi menu tabview seperti ini butuh ketelitian, tapi ndak apa itung" belajar lah, itu juga buat kita sendiri :D

Kalo mo lebih praktis lagi tunggu.. tongkrongin saja blog ini,hehe...
Selamat Membuat Menu TabView Tanpa Edit Template
Semoga Bermanfaat ;)

Cara Memasang Emoticon di Komentar Blog

Cara Memasang Emoticon di Komentar Blog

Apa kabar sobat semua? Sudah pada makan belum? Sudah, selamat ya..
Lanjut, Belajar Internet kali ini akan membahas tentang Cara Memasang Emoticon di Komentar Blog. Emoticon ini mirip dengan emoticon di Yahoo!, pada tahu kan? Baiklah, kali ini emoticon di Yahoo! tersebut akan kita pasang di komentar blog sobat. Caranya? Sangat mudah dan sekedar contoh emoticon yang ingin kita buat adalah seperti gambar di bawah ini.

Lansung saja kita ke TKP. Check it Out....
1. Masuk ke akun blogger Anda
2. Masuk pada bagian template
3. Klik Edit HTML
4. Seperti biasa, jangan lupa centang Expand Template Widget
5. Cari kode </body> untuk lebih mudah lansung saja tekan CTRL+F
6. Letakkan kode berikut tepat di atas kode </body> tadi

  <script src='http://tutorialblogger.googlecode.com/files/smiley.js' type='text/javascript'/>

7. Kemudian, kita cari lagi kode <b:include data='post' name='comment-form'/> dan untuk memudahkan pencarian tekan CTRL+F
8. Letakkan kode berikut tepat di atas kode no.7 tadi

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))</b>
<center><blink><a href="http://wahyucoy3.blogspot.com/2012/09/cara-memasang-emoticon-di-komentar-blog.html" target="_blank">Pasang Emoticon Anda!</a></blink></center>

9. Klik Simpan Template

Sekarang, pada komentar sobat telah diletakkan emoticon yang pastinya unyu-unyu banget. Untuk lihat hasilnya silahkan coba komentar disini atau bisa di komentar blog Anda masing-masing. Selamat Mencoba

بِسْمِ اللّهِ الرَّحْمَنِ الرَّحِيْمِ

huuuhhhh capek'e rek ru maen" ma tmen"..... hehehehe (malah curhat).....

Tapi kalau buat posting saya masih tetep semangat kok,, hehehehe

ok deh langsung saja pada pokok pembahasan yaitu Cara Membuat Pesan Pembuka dan Penutup Pada Blog.



Langkah-langkahnya membuat pesan pembuka :

1. login blog
2. klik Rancangan --> EDIT HTML
3. cari kode <head>
4. taruh kode dibawah ini tepat dibawah kode <head>

<script type='text/javascript'>
alert("welcome to http://wahyucoy7.blogspot.com")
</script>

NB : ganti kata welcome to http://wahyucoy7.blogspot.com dengan kata" sesuka sobat.

kalau sobat pengen tambah dengan pesan penutup. dibawah ini ada juga langkah"nya.

Langkah-langkahnya membuat pesan penutup :

<script type="text/javascript">
// goodbye alert
function goodbye(){
alert(&#39;Thankz for your visit.... good bye&#39;);
}
parent.window.onunload=goodbye;
</script>

NB : ganti kata Thankz for your visit.... good bye dengan kata" sesuka sobat.

5. simpan templates..

good luck sob.... ^_^

cara membuat close 2x pada blogspot cra nya masukan kode di bwah ini