Artikel Terupdate :
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

CARA MEMBUAT BUKU TAMU MELAYANG PADA BLOG

Hai sobat,
Mau punya buku tamu pada blog sobat,,, ? kayak di gambar ini…



Buku Tamu Melayang



Nih saya berikan sedikit cara membuat buku tamu nya, ikuti saja petunjuk di bawah ini :
1. Sobat mesti login dulu ke blog sobat.
2. Silahkan klik Rancangan/desain
3. Kemudian Klik tata letak
4. Klik tambah gadget/add gadget
5. Selanjutnya Klik opsi HTML/Javascript
6. Silahkan sobat Copy Kode HTML di bawah ini, kemudian pastekan pada konten (tanpa judul).

<style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:150px; width:30px; float:left; cursor:pointer; background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2IzIfxrRCcNcpHYS1S_TYV12VQsZ9l8F-YXFyX8hgvTh0ZtBZ-44cYlegA4_FrUNTXjkwE_rjkIwSjPCUd4ePXLEM3nYbuNmvur-nia7hzqcLKgizLio5v4P9M3fb1gIHV7Q8EjYJRNRL/s1600/buku+tamu.png') no-repeat; } .gbcontent{ float:left; border:1px solid #B3B3B3; background:#E6E6E6; padding:5px; } </style> <script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent">   <!-- BEGIN CBOX - www.cbox.ws - v001 --> Code CBox milik sobat <!-- END CBOX -->  <br/>Mau buat buku tamu ini ?<br/>Klik <a href="http://lamongan-blogger.blogspot.com/2013/11/cara-membuat-buku-tamu-melayang-pada.html"target="_blank"> di sini </a> <div style="text-align:right"> <a href="javascript:showHideGB()"> [hide] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script>

7. Silahkan sobat ganti tulisan yang berwarna merah dengan Kode yang sobat peroleh dari cbox.
8. Untuk mendapatkan kodenya dari cbox, silahkan kunjungi cbox.
9. Silahkan Registrasi/Sign Up ( gratis/free ) dengan email yang sobat miliki, kemudian verifikasi email selanjutnya silahkan login.
10. Ikuti petunjuk yang ada.
11. Copy dan Paste kodenya ke tulisan yg berwarna merah tersebut
12. Selesai,,, !!!

CARA MEMBUAT ARTIKEL INFO

Cara Membuat Artikel Info
CARA MEMBUAT ARTIKEL INFO - Cara Membuat Artikel Info di Blog - Saya +Dion Pakusadewo Akan ngeshare artikel tentang Cara Membuat Artikel Info di Blog, widget tersebut sudah saya pasang. Jika ingin Demonya lihat dibawah artikel. hehe. Silahkan ikuti tutorial berikut.


  • Login ke Blogger.com
  • Masuk Bagian Template/Layout. Cari kode ]]></b:skin>
  • Masukan kode berikut diatas kode ]]></b:skin>
 .artikel-info{margin:6px 0 0;border:2px solid #4488dd;background:#fff;overflow:hidden;}
.thumb-info{float:left;margin:0 8px 0 0;width:80px;height:100px !important;}
.artikel-info h4{
background:#4488dd;
border:none;
color:#fff;
font-family:"julee";
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.artikel-info img{
background:#4488dd;
width:90px;
height:90px;
border:1px solid #4488dd;
margin:5px 10px 5px 5px;
float:left;
padding:2px;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
  • Jika sobat sudah melakukan tahap sebelumnya. sekarang cari kode<data:post.body/> (  yang kedua ). Letakkan Kode Berikut di Bawah kode yang diatas.
<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='artikel-info' itemprop='description'>
    
    <b:if cond='data:post.firstImageUrl'><h4>Artikel Info</h4><img class='thumb-info' expr:alt='data:post.title' expr:src='data:post.firstImageUrl' expr:title='data:post.title'/></b:if>
  
      <b>Title</b> : <span itemprop='itemreviewed'><data:blog.pageName/></span><br/>
      <b>Description</b> : <b:if cond='data:post.snippet'><data:post.snippet/></b:if><br/>
      <b>Rating</b> : <span itemprop='rating'>4.5</span><br/>
      <b>Penulis</b> : <b:if cond='data:post.author'><data:post.author/></b:if>
    </div>  </b:if> 
  • Selesai.
Tidak terasa saya ada di akhir artikel ini. jika ada masalah langsung tanyakan di kolom komentar. Terima kasih sudah membaca Cara Membuat Artikel Info di Blog dan. Semoga Berhasil

Fans Page