Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial. Tampilkan semua postingan

Selasa, 02 Desember 2014

Membuat Text Berkelip Pada Blog

KALI Ini.... Tutorialnya Judulnya Cara Membuat Text Berkelip Pada Blog, Aku sih... Malas  nambahinnya!!! tahu kan?? udah kebanyakan LINK di Blogku! padahal Dulu Blogku banyak LINK-nya tapi gara gara itu jadi Hank :D hihihi!!!! ok! kalian mau ditambahkan gak Text berkelip ini ke blog Kalian??? OK Langsung aja (Ikuti Step).

1. Buka Blogger.

2. Pilih Tata Letak.

3. Tambah Gadget ==> HTML/JavaScript.

4. Copast Code Ini.

<div style="color: black; text-align: center;">
<blink> Text berkelip kalian </blink></div>  

5.  Ganti ganti dulu!!!!! 
black - gantikan dengan warna text yang anda mau.
center - kedudukan text yang anda mau, sama ada center, left atau right.
Text berkelip anda -  gantikan dengan perkataan yang anda mau.

6. Simpan ==> Simpan Perubahan.

"Selesai!!!" ^^

Selamat Mencoba yaaaaa

Credit: Farah

Cara Membuat Private Cbox

Dulu Fia pernah ngepost tutorial cara membuat simple cbox kan? Ok, sekarang Fia akan ngepost tutorial 'Cara Membuat Private Cbox' Buat yang udah punya cbox langsung aja follow this tuto. But, kalau yang belum punya akun cbox, follow tutor cara membuat cbox yg udah Fia post sebelumnya ;;)

  • Login cbox.ws mu 
  • Klik kolom publish
  • Kan ada code cboxmu disitu, tinggal di copy 
  • Login blogmu terus ke tata letak
  • Klik add gadget/javascript
  • Paste kode cboxmu, hapus bagian <div id sampai </iframe></div>
Contoh:


<!-- BEGIN CBOX - www.cbox.ws - v001 --><div id="cboxdiv" style="text-align: center; line-height: 0"><div><iframe frameborder="0" width="200" height="305" src="http://www4.cbox.ws/box/?boxid=4223959&amp;boxtag=wjtgea&amp;sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain4-4223959" style="border:#ababab 1px solid;" id="cboxmain4-4223959"></iframe></div><div><iframe frameborder="0" width="200" height="75" src="http://www4.cbox.ws/box/?boxid=4223959&amp;boxtag=wjtgea&amp;sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform4-4223959" style="border:#ababab 1px solid;border-top:0px" id="cboxform4-4223959"></iframe></div></div><!-- END CBOX -->

  • Save :) 
  • Credit: Aura Sabrina D

Membuat tombol Follow Blog Hello Kitty

ini adalah tutorial kelima untuk hari ini!!! terakhir ya :D kalau kalian masih kurang paham!!! bisa lihat!!!! 
Kalau sudah paham!!!! (Ikuti STEP)

1. Buka Blogger.

2. Pilih Tata Letak.

3. Klik tambah Gadget.

4. Pilih HTML/Java Script.

5. Copy Paste Link ini.
<div style="position:relative; top:5px; right: 4px; width:125px; border:2px solid #FFCBD9; border-radius:2px; position:fixed; padding:3px; color:#000000; font-size:11px; background:#ffffff; opacity:0.7; color:#000000; font-size:11px; text-align:center;"><center><img src="http://i.imgur.com/3RXYeMp.gif" /></center><a href="http://www.blogger.com/home" tip="">Dashboard</a> | <a href="http://www.blogger.com/follow-blog.g?blogID=ID BLOG KALIAN" tip="">Follow</a></div>
 6. Untuk mendapatkan ID Blog bisa dilihat di Tata Letak.

7. Save tanpa judul.

8. Simpan perubahan!!!

Selesai!! Smoga bermanfaat!!

Credit: Farah

Memasang Chat Box di Blog

Haloooooo^^
Adakah yang belum tau cara buat cbox alias chatting box? hmm.... langsung aja yaa ikuti tutor ini hehe xD.


  • Let's go to www.cbox.ws 
  • Sign up >> semua kolom jangan sampai ada yang kosong >> Creat my Cbox
  • Sudah buat akun? OK langsung aja login ;3
  • Dan sekarang kamu ada di menu home. Klik PUBLISH
  • Copy kode cbox mu
  • Udh dpt kode cbox mu? OK sekarang kamu login ke blog
  • Klik tata letak >> Tambah gadget >> Javascript/HTML
  • Paste kode cboxmu
  • SAVE
  • Credit: Aura Sabrina D

Make Random Post

Hi guys, Sekarang Fia akan post cara membuat random post krna waktu itu ada yg tanya cara buat random post gimana. udh pda tau random post sprti apa? bisa di cek di blog sayaa xD. Ingin tau caranya? k, langsung aja ikuti caranyaa xP

  • Login blog 
  • Pilih tata letak abis itu klik tambah gadget/add gadget
  • Copy this code :


<style type="text/css">
#rp_plus_img{height:377px;}
#rp_plus_img li {height:60px;padding:5px;list-style:none;
background-color:#FFFFFF;
border:solid 1px #FFFFFF;}
#rp_plus_img a{color:#00000;}
#rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
text-align:justify;
-moz-border-radius: 5px;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jombinabeloganimatedrecentpost/recentpost.js"></script>
<script type="text/javascript">
var speed = 1500;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul><small></small>

  • Pilih javascript
  • Paste kode yg kamu copy tadi
  • Save 

* kode yang aku kasih warna merah isi dengan kode warna yg kamu mau. cari kodenya http://blog-wandi.blogspot.com/2010/08/kode-warna-html-lengkap.html

Put Status Box

Holaaaaa! Kemarin Slide Status Box, sekarang tanpa Slide. Dulu Fia,, pakek. Tapi sekarang lebih suka yang slide. Hoho... ada yang mau? Ikuti step...


  • Login blogmu
  • Klik tata letak > Add gadget
  • Cari html/javascript terus diklik
  • Copy this code dan paste di kolom html/javasript gausah dikasih judul : 


<style>
#line{
position:fixed;
left:50px;
top:0px;
border-left:10px solid #ffd2e0;
border-right:10px solid #ffd2e0;
width:70px;
height:50px;}


.statioo {
border:1px solid #ffd2e0;
font-family:  'GFS Neohellenic', sans-serif;
font-size:13px;
letter-spacing:2px;
-webkit-transition:All 0.4s ease;
-moz-transition:All 0.4s ease;
-o-transition:All 0.4s ease;color:#ffd2e0;
width:150px;
margin-left:-38px;
margin-top:40px;
text-align:center;
padding:5px;
background:url
(http://i.imgur.com/z46Na.gif);
}
#notii {
border:1px solid #ffd2e0;
width:150px;
font-family:  'GFS Neohellenic', sans-serif;
font-size:13px;margin-top:10px;
margin-left:-38px;
padding:4px;
height:%0px;
text-align:left;
background:url(http://i.imgur.com/z46Na.gif);
color:#ffd2e0;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}
</style>
<div id="line">
<div class="statioo">
STATUS</div>
<div id="notii">

Heey! Welcome to My Bloggie >.< </div>
</div>


  • Dan save :) 
Ungu : Url background
Pink : Your Status


Put Slide Status Box

Halloooo^^ Kalian tau Slide Status Box kayak punyaku? Nah, kalau mau, yuk ikuti step ajah.. ._.

CREDIT : KAK ATIN


  • Blogskin : Paste bawah code </style>
  • Template design : paste dalam add gadget

    • merah : URL background
      oren : Isi status kalian^^
    <style>
    .y{
    border-radius: 0px 15px 15px 0px;
    width:10px;
    padding:10px;
    height:25px;
    margin-top:30px;
    margin-left:255px;
    background: #faafbe;
    color:white;
    font-size:12px;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    }
    #kotakstatus {
    position:fixed;
    border:4px solid #faafbe;
    width:250px;
    left:-265px;
    top:50px;
    height:100px;
    padding:4px;
    text-align:left;
    font-size:11px;
    font-family:arial;
    background-color:white;
    background-image:url(URL BACKGROUND);
    background-position:right;
    color:#333333;
    -webkit-transition: 1.0s;
    -moz-transition: 1.0s;
    }
    #kotakstatus:hover {
    left:1px;
    }
    </style>

    <div id="kotakstatus"><div class="y">
    s</div>
    <div style="margin-top: -80px;"><br>
    PUT STATUS HERE</div></div>
    Gimana? Puas kan? Semoga bermanfaat buat kalian... 

    Cara Membuat Notice Cliptboard

    Fia mau ngasih tuto buat Notice Cliptboard, pernah nyobain tapi akunya enggak mau ^^ Jadi kalau kamu-kamu yang mau, ikuti step





  • Template Lama : Dashboard == > Tata Letak ==> Add Gadget ==> HTML/JavaScript
  • Template Classic/Blogskins : Paste kan Code ini di atas code </style>
  • <style type="text/css">
    #at{
    position:fixed;
    right:200px;
    z-index:+1000;
    top:6;
    }
    * html #at{position:relative;}
    .attab{
    height:500px;
    width:50px;
    float:left;
    cursor:pointer;
    background:url();
    }
    .atcontent{
    float:center;
    background:url(YOUR URL NOTICE)
    no-repeat 0 0 transparent;
    width:800px;
    height:700px;center scroll ;
    padding:56px 0 5px 5px;
    }
    </style>
    <script type="text/javascript">
    function showHideAT(){
    var at = document.getElementById("at");
    var w = at.offsetWidth;
    at.opened ? moveAT(0, -200-w) : moveAT(20-w, 0);
    at.opened = !at.opened;
    }
    function moveAT(x0, xf){
    var at = document.getElementById("at");
    var dx = Math.abs(x0-xf) > 25 ? 35 : 1;
    var dir = xf>x0 ? 1 : -1;
    var x = x0 + dx * dir;
    at.style.top = x.toString() + "px";
    if(x0!=xf){setTimeout("moveAT("+x+", "+xf+")", 10);}
    }
    </script>
    <div id="at">
    <div class="attab" onclick="showHideAT()"> </div>
    <div class="atcontent">
    <div align="center">
    <div style="background:url() no-repeat;">
    <center><div id="author">
    <a href="javascript:void(0);" onclick="showHideAT()">
    </a></div></center></div>
    <script type="text/javascript">
    var at = document.getElementById("at");
    at.style.top = (-500-at.offsetWidth).toString() + "px";
    </script>
    <style type='text/css'>
    a.linkopacity img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;F
    opacity: 0.5;
    -khtml-opacity: 0.5;}
    a.linkopacity:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0; }
    </style>
    <div style='display:scroll; position:fixed; top:150px; right:5px;'>
    <a href="javascript:void(0);"onclick="showHideAT()"/>
    <img src="URL BOTTON CLICK"
    alt="PUSH" title="CLICK ME?" /></a>
    </div></div></div></div>

    Cara Memasang Exchange Link

    Halooooooooooo............! Sekarang Fia mau post tuto tentang cara menambahkan exchange link^^ keliatan gak gambarnya? kalo gak besarin aja gambarnya hihi :3


    • Login blogmu
    • Klik tata letak > Add gadget 
    • Cari html/javascript trus di klik
    • Copy this code & paste di kotak html/javascript:
    <center><b>NAME</b> : <input type="text" size="11" value="YOUR EXC NAME"style="width:180px;font:11px trebuchet ms;color:#666;border:1px  solid #eee;margin-right:6px;background-color:#ffffff;padding:2px;padding-left:4px;" onclick="this.focus()" onfocus="this.select()"><br><b>URL</b> :<input type="text" size="11" value="http://.blogspot.com/"style="width:180px;font:11px trebuchet ms;color:#666;border:1px solid #eee;background-color:#ffffff;padding:2px;padding-left:4px;" onclick="this.focus()" onfocus="this.select()"></center>

    • Dan save :)
    • Credit: Aura Sabrina D


    Pink : Exchange linkmu
    Ungu : Link blogmu 

    • Credit: Aura Sabrina D

    Memasang List Blog dengn Icon Hover

    Haaai..... Aku mau share salah satu requestan kalian. Tapi aku lupa siapa namanya. Semoga berguna buat kalian semuaaa >..< PERHATIAN: Khusus Pemakai Blogskin saja. Credit: Kak Atin.

     




     Copy code di bawahini:
     <style>
    a.chan {
    background:url(URL ICON);
    background-repeat:no-repeat;
    background-size:12px;
    padding-left:19px;
    color:#666;
    display:inline-block;
    font: 12px arial;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    width:280px;
    line-height:18px;
    }
    a.chan:hover{
    background:url(URL ICON);
    background-repeat:no-repeat;
    background-size:12px;
    color: #000;
    }
    </style>
    <a class="chan" href="LINK HERE">Tutorial</a>
    <a class="chan" href="LINK HERE">Tutorial</a>
    <a class="chan" href="LINK HERE">Tutorial</a>
    <a class="chan" href="LINK HERE">Tutorial</a>
    <a class="chan" href="LINK HERE">Tutorial</a>
    <a class="chan" href="LINK HERE">Tutorial</a>

     Paste di list blogmu
    Preview & Save

    Mengganti Home, New & Older Post dengan Gambar

    Halooo.... siapa mau mengganti tulisan Home, New & Older Post dengan gambar seperti di bawah ini?


    Mau kan? Ikuti step
    • Login blogmu
    • Klik design kemudian "Edit HTML"
    • Cari kode dibawah ini, untuk mempermudah tekan ctrl + F serentak 
    <data:newerPageTitle/>

    • Temu? Sip! Hapus kode itu dan gantikan dengan kode ini :  
    <img src="http://i947.photobucket.com/albums/a
    d318/hannacrazee/Decorated%20images/go5.png"/>

    • Terus cari lagi kode ini : 
    <data:olderPageTitle/> 

    •  Udah temu? Hapus dan Gantikan dengan kode ini : 
    <img src='http://i561.photobucket.com/albums/ss
    52/angelicxmelody/Web%20materials/go5.png'/>
  • Cari lagi kode ini : 
  • <data:homeMsg/>



    • Dan kalau sudah temu hapus kode itu dan ganti dengan kode ini : 
    • <img src='http://i561.photobucket.com/alb
      ums/ss52/angelicxmelody/Web%20materials/home1.png'/>


    • Dan save
    • Semoga sukses
    • Credit: Aura Sabrina D
    • Make Wishlist

      Hi guys! Apa harapan kamu dibulan ini? *kepoo* mending kalian tulis aja diblog kalian :D Like this :


      Tulisannya wishlist aura gak kebaca yaa? di besarin aja gambaranya ;)
      • Login blogmu
      • Klik tata letak > Add gadget
      • Cari html/javasript trus diklik
      • Copy & paste kode ini di kotak html/javascript:

      <img src="http://applepine.chu.jp/line/sennasi/kugikuma250.gif" />
      <form name=myform>
      <input type="checkbox" name="mybox" value="satu" checked />YOUR WISH<br />
      <input type="checkbox" name="mybox" value="dua" checked />YOUR WISH<br />
      <input type="checkbox" name="mybox" value="tiga" disabled />YOUR WISH<br />
      </form>
      • Ganti kode yang berwarna biru dengan wish kalian & pink, jika wish mu sudah tercapai ganti dengan checked jika belum ganti dengan disabled  :)
      • Save :) 
      • Semoga sukses
      • Credit: Aura Sabrina D

      Make Back to Top Button

      Heey! Kalian tahu Back to Top? Itu lho... kalau di blog ada tulisan top di samping blog, kalau di klik menjadi ke atas... ini contoh gambarnya:

      Mau kan? Ikuti step
      Blogskin:
      • Dashboard > Template > Edit HTML
      • Tekan ctl + f, cari kode <head>
      • Copy code ini dan paste di bawah kode <head> tadi

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
      </script>
      <script type='text/javascript' language='Javascript'>
      var scrolltotop={
      //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
      //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (1=top).
      setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
      controlHTML: '<img src="URL IMAGE"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
      controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ center of window corner
      anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links
      state: {isvisible:false, shouldvisible:false},
      scrollup:function(){
      if (!this.cssfixedsupport) //if control is positioned using JavaScript
      this.$control.css({opacity:0}) //hide control immediately after clicking it
      var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
      if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
      dest=jQuery('#'+dest).offset().top
      else
      dest=0
      this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
      },
      keepfixed:function(){
      var $window=jQuery(window)
      var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
      var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
      this.$control.css({left:controlx+'px', top:controly+'px'})
      },
      togglecontrol:function(){
      var scrolltop=jQuery(window).scrollTop()
      if (!this.cssfixedsupport)
      this.keepfixed()
      this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
      if (this.state.shouldvisible && !this.state.isvisible){
      this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
      this.state.isvisible=true
      }
      else if (this.state.shouldvisible==false && this.state.isvisible){
      this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
      this.state.isvisible=false
      }
      },
      init:function(){
      jQuery(document).ready(function($){
      var mainobj=scrolltotop
      var iebrws=document.all
      mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
      mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
      mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
      .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
      .attr({title:"Let's Fly High !"})
      .click(function(){mainobj.scrollup(); return false})
      .appendTo('body')
      if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
      mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
      mainobj.togglecontrol()
      $('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
      mainobj.scrollup()
      return false
      })
      $(window).bind('scroll resize', function(e){
      mainobj.togglecontrol()
      })
      })
      }
      }
      scrolltotop.init()
      </script>

      • Save 

      Template biasa(default) dan design :

      • Design > Add Gadget > HTML/Javascript
      • Copy code ini dan paste di html/javascript

      <a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;">
      <img src="URL IMAGE"></a>

      • Save 
      • Semoga bermanfaat buat kalian dan semoga sukses!

      **Pink  = URL Back to the top icon

      Senin, 01 Desember 2014

      Membuat Cursor Ganda


      Tau cursor ganda? Misalnya cursor EXO pink, saat menyentuh link, cursor menjadi EXO black... gitu maksudnya hehe^^ Mau? Yuk, ikuti step:

      1. Dashboard > Design > Edit HTML > Tick Expand Widget Templates
      2. Copy code di bawah ni


      cursor:url("URL CURSOR"),default; filter: none; text-decoration: none;
      3. trus, paste di setiap bawah code ini.

      a:link {
      a img {
      body {

      4. Preview & save
      5. Yang merah itu kalian ganti dengan URL cursornya
      Semoga bermanfaat buat kalian ^^
      Credit: Farah

      Falling Hello Kitty in Blog

      Heeey! Malaaam >..< Fia buat tutorial ini setengah ngantuk gays ._. Ohya, yang penasaran gimana hujan hk di blog mending langsung aja coba :D
      • Copy This code:

      <script type="text/javascript" src="http://bpmaker.giffy.me/userdata/user/37/37074/848/parts.js"></script></a></p>

      • Login Blogmu
      • Klik tata letak
      • Klik Add gadget > Html/Javascript
      • Paste-kan kodenya disitu dan save
      • Oh, ya. Semoga sukses dan berguna buat kalian
      • Dulu, aku memakai ini untuk blog pertamaku, seizzafia.blogspot.com
      • Credit: Aura Sabrina D

      Mengubah Cursor dengan Cursor buatan Sendiri

      Kali ini.... cursor sendiri... bebas!! bisa di Photoshop/Photoscape..... aku creditnya dari blog yang pemiliknya aku belum kenal, heehh namanya Zalfa, ntar di bawah link blognya. mau gak tau caranya??? ok.. (Ikuti Step)

      1. Blogger Dashboard ==> Cari Tata Letak ==> Klik Add a Gadget.


      2. Pilih HTML/Javascript.


      3. Copy code di bawah ini ya :)



      <style>body {cursor:url(URL CURSOR), url(URL CURSOR), auto;} </style><a href="Your Link Blog Here" target=_blank><div style="height: 50px; width: 50px; position: absolute; top: 0px; left: 0px;"> </div></a>
      4. Ganti URL CURSOR Itu dengan URL Cursor buatan kalian sendiri :) kan bisa di PhotoShop/PhotoScape



      5. Ganti Link Blog itu.... dengan Link Blog kalian.

      6. Jika sudah.... Klik Simpan ==> Simpan Perubahan


      Selesai!!!


      credit : Zaifa

      LinkWithin

      Related Posts Plugin for WordPress, Blogger...