"NEW" Membuat Icon Twitter Flying

Gan Kali Ni da Animasi tambahan dari artikel yg dulu ane buat artikel yg ni  Membuat Icon Twitter "Flying Bird"  Sekarang da tambhan animasi yang macem" caranya :

  1. Di mana-mana kalau mau tambah Gadget pasti harus Log In dolo kan ke Blogger.
  2. Klik Rancangan
  3. Klik Tambah Gadget
  4. Copy Script di bawah ni
  5. <script type="text/javascript" src="https://sites.google.com/site/exeloph/file/Twitterbang.js"></script>
    <script type="text/javascript">
    var birdSprite="https://lh5.googleusercontent.com/_6TkGtddC4V4/TWCovySxGkI/AAAAAAAAACo/Q1lEVEwc0h0/red.png"; var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span"); var twitterAccount = "http://twitter.com/TwitterEnte";var tweetThisText = "Twitter - TwitterEnte http://blognewb1e.blogspot.com/";tripleflapInit();</script>
  6. Terus Simpan.

NB :

  • Ganti URL Gambar yg Berwarna Hijau dengan Pilihan animasi di bawah.
  • Ganti URL TwitterEnte yg Berwarna Biru Twitter Dengan @ID_TwetterKamu.
  • Ganti URL Web yg Berwarna Merah dengan alamat Blog ente.




Pilihan Animasi
  1. Burung Twitter 


    Gunakan Kode :
    http://2.bp.blogspot.com/-8OMXyMFgt_U/Tj6zeqBYXgI/AAAAAAAAAGo/9R5OeUN8Gyc/s1600/birdsprite.png

  2. Stickman Twitter


    Gunakan Kode :
http://3.bp.blogspot.com/-NAKoyko-svs/Tj7Uc2htyvI/AAAAAAAAAGw/jeN3tnVdZfo/s1600/birdsprite_MonozCore_Stickman.png

  1. Star Scream Twitter

    Gunakan Kode :
    http://3.bp.blogspot.com/-1dG05Y_qH3g/Tkq6eVlW5XI/AAAAAAAAAKY/HNy-cLcFGgc/s1600/StarScream.png

  2. Bat Twitter

    Gunakan Kode :
    https://lh5.googleusercontent.com/-EnXkKay4ZWE/TlUem7_IG5I/AAAAAAAAAOk/rfRBs4panss/s800/MonozCore.blogspot.com_BatTwitter.png

  3. SantaBird Twitter

    Gunakan Kode :
    https://lh6.googleusercontent.com/-hWgSLV-IZFE/TlU7h7lt9SI/AAAAAAAAAOw/DsMxhHAdeIU/s800/MonozCore.blogspot.com_SantaBirdTwitter.png

  4. Dragon Twitter

    Gunakan Kode :
    https://lh5.googleusercontent.com/-FuWkS1def0c/TlZ7Api4tjI/AAAAAAAAAQg/3RFLnfqHpiE/s800/MonozCore.blogspot.com_Dragon_Twitter.png

  5. DBZ Twitter

    Gunakan Kode :
    https://lh6.googleusercontent.com/-OG97ysrMZHc/TlZ1Agdp08I/AAAAAAAAAQY/0GbYuQmaFDM/s800/MonozCore.blogspot.com_DBZ_Twitter.png

  6. Dracula Twitter

    Gunakan Kode :
    https://lh6.googleusercontent.com/-FPaxJ9tqw5s/Tv8FNwjXEoI/AAAAAAAAAsM/Dl163KLaang/s800/Drakula.png


Semoga Bermanfaat & Selamat Mencoba.!!!

Cara Mengedit Template Blogger Terbaru

Tutorial kali ini membahas Cara Mengedit Template Blogger Terbaru untuk membantu proses pencarian kode yang ingin ditemukan, dan bagaimana menemukan kode <data:post.body/> di dalam edit template.

Karena pada pembahasan sebelumnya anda sudah mengetahui fitur-fitur dan fungsi dari menu-menu dan istilah di dalam pengeditan template, topik saat ini mengacu pada proses penemuan sebuah kode-kodee yang ingin dicari.

Langkah dan tahapan untuk menggunakan Kotak Search di dalam Edit HTML :
1. Masuk ke Menu Template di dalam Blogger.
2. Pilih Edit HTML.

edit html


3. Letakkan pointer mouse di dalam kotak Edit HTML tersebut. Klik Edit Template terlebih dahulu.
4. Klik di dekat kode apapun seperti terlihat pada contoh gambar :

mengedit template terbaru
5. Untuk melihat keseluruhan kode, silahkan klik icon logo hitam kecil berbentuk tombol play.
6. Untuk melakukan pencarian kode CSS / HTML, silahkan tekan CTRL + F.

search html code
7. Letakkan kode yang ingin dicari di dalam kotak tersebut.
8. Selesai.


Untuk Menemukan kode <data:post.body/> cara manual :
  1. Masuk ke Edit HTML di Template.
  2. Cari Kode Blog1 dan klik tanda tombol hitam di sebelah kirinya untuk menemukan semua kode.

  3. mengedit template
  4. Kemudian, Klik pada bagian post seperti terlihat di gambar.
        Maka anda akan menemukan kode-kode yang berkaitan dengan tampilan artikel posting.

data post body

Sebenarnya untuk menemukan kodee <data:post.body/> anda bisa menggunakan kotak search seperti pada panduan pertama, tetapi jika ingin menggunakan cara manual maka dilakukan dengan panduan yang kedua.

Semoga dengan artikel ini dapat membantu anda mengedit template, edit html blog,dan cara mengedit template terbaru yang mudah. Cara Mengedit Template Blogger memang terlihat agak sulit namun apabila sudah sering dicoba pasti akan terlihat mudah.

Cara Membuat Banner Logo Keren

Cara Membuat Logo - Banner adalah salah satu media untuk mempromosikan sebuah produk. Sedangkan logo adalah sebuah citra realitas yang mencerminkan nama atau  label yang dipublikasikan. Contoh dari penggunaannya adalah apabila kita melakukan tukar link, banyak sekali yang menggunakan banner blog sebagai lambang dan mempromosikan blog anda. Banner yang menarik akan lebih mudah disukai dan ditreima pengunjung.


Pada perkembangan saat ini, banner lebih sering dimanfaatkan untuk membuat iklan. Jangan heran apabila anda banyak melihat banner yang terpasang di bagian blog baik itu diatas, header, sidebar, footer, post dan sebagainya. Selain untuk beriklan, banner juga banyak dimanfaatkan untuk memperbanyak backlink. Para blogger langsung memburu jumlah lalu lintas link ke sebuah website terkenal dengan pagerank tinggi. Lalu, apakah dengan metode tersebut blog anda akan disukai oleh search engine?

Sebelum melangkah ke pembahasan yang lebih detail, kita harus mengetahui cara membuat banner yang mudah adalah dengan memanfaatkan sebuah website yang menyediakan tools pembuat banner.

Membuat Logo / Banner di cooltext :
  • Silahkan anda kunjungi www.cooltext.com
  • Pilih tipe tulisan atau logo yang ingin dibuat.
membuat logo di blog
  • Ganti dan Tulis Nama Blog anda pada kolom text yang tersedia.
  • Pilih pengaturan dan ukuran karakter text dan lainnya.
  • Masukkan gambar background yang telah anda persiapkan di komputer anda.
  • Pilih Format File gambar yang nanti akan didownload. Pilih tipe PNG / JPEG agar hasilnya lebih bagus.
  • Klik Create Logo
  • Download Image.

Setelah anda mendownload, anda dapat langsung menguploadnya ke bagian header yaitu dengan cara masuk ke blogger.com lalu pilih Layout / Rancangan / Design. Klik Header. Kemudian masukkan gambar logo yang telah didownload tadi. Pilih opsi yang kedua pada penempatan judul dan description blog. Lalu Save.

Maka anda akan melihat banner yang menjadi karakter serta judul dari blog anda. Anda juga dapat memilih berbagai macam icon untuk menghiasi background banner tersebut dengan mendownloadnya di iconfinder.com Semoga dengan tips ini anda dapat menghiasi bagian atas blog dengan indah dan mudah.

Anda juga bisa mendapatkan kode script HTML banner yaitu dengan melakukan upload terlbih dahulu. Silahkan anda upload di www.photobucket.com . Untuk bisa upload anda harus login atau registrasi terlebih dahulu apabila belum mendaftar.

Cara Membuat Social Icon Mobil

Social icon mobil bergerak ini fiturnya keren, pertama ada background kotanya jadi keliatan kayak beneran gan. Terus Agan INI buat 2 efek berbeda yang satu mobilnya gerak otomatis kalo disentuh baru berhenti dan yang satunya mobilnya diem kalo disentuh baru mobilnya bergerak gan. Dan yang paling penting ini kode murni CSS gak pake javascript jadi aman buat SEO gan.



Ok gan langsung aja ke cara membuat social icon mobil bergeraknya. Caranya gampang tinggal nambahin widget gak perlu edit HTML. Silahkan disimak caranya gan kalo Ente suka.


Membuat Social Icon Mobil Bergerak Di Blog

  



Buat di Blogger

  • Pertama loe masuk ke dashboard Blogger terus pilih Layout lalu klik Add a Gadget terus tambahin HTML/Javascript dan copy salah satu kode di bawah ini lalu pastein di kotak kosongnya gan.


Buat di Wordpress

  • Buat di Wordpress, caranya sama loe masuk ke Dashboard Wordpress lalu pilih Appearance lalu klik Widget dan tambahin widget Text ke sidebar dan copy salah satu kode dibawah ini lalu pastein di widget tersebut gan.


Kode social icon mobil diam


<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ --> <style type="text/css"> #SCsocial a:hover{ position:relative; animation:SCgerak 10s infinite; -moz-animation:SCjalan 10s infinite; /* Firefox */ -webkit-animation:SCjalan 10s infinite; /* Safari and Chrome */ -o-animation:SCjalan 10s infinite; /* Opera */ transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; /* Firefox 4 */ -webkit-transition: all 3s ease-in-out; /* Safari and Chrome */ -o-transition: all 3s ease-in-out; /* Opera */ } @keyframes SCgerak { 0% {right:0px;} 100% {right:300px;} } @-moz-keyframes SCjalan /* Firefox */ { 0% {right:0px;} 100% {right:250px;} } @-webkit-keyframes SCjalan /* Safari and Chrome */ { 0% {right:0px;} 100% {right:250px;} } @-o-keyframes SCjalan /* Opera */ { 0% {right:0px;} 100% {right:250px;} } </style> <center><div id="SCsocial" style="background-image: url(http://1.bp.blogspot.com/-08SF0c0n8D0/UP6b7vVbZlI/AAAAAAAACSo/LMTSqBXFnXo/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;"> <!--Start Facebook Icon--> <a title="Like Us on Facebook" href="URL Facebook Ente" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-gAmdUWWlHso/UP6Wm_FJseI/AAAAAAAACQ4/Y6RPi0oUFq4/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a title="Follow Us on Twitter" href="URL Twitter Ente" target="_blank" rel="nofollow"><img border="0" src="http://1.bp.blogspot.com/-RngqWlUQ4Po/UP6WnwXHzhI/AAAAAAAACRE/XP1DmM3kQZs/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us on Google+" href="URL Google+ Ente" target="_blank" rel="author"><img border="0" src="http://1.bp.blogspot.com/-shuV4bVmcsw/UP6Wm_mLtsI/AAAAAAAACRI/xUx-HthPRkY/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Google+ Icon--> <!--Start Rss Icon--> <a title="Grab Our RSS Feed" href="URL RSS Feed Ente" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-Oqfvq05w5mU/UP6WngRY-lI/AAAAAAAACRM/4qF5H9vscn8/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Rss Icon--> </div></center>


Kode social icon mobil Gerak Otomatis

<!-- Social Icon Mobil Bergerak by http://seociyus.blogspot.com/ --> <style type="text/css"> #SCsocial a{ position:relative; animation-name: SCgerak; -moz-animation-name:SCgerak; /* Firefox */ -webkit-animation-name:SCgerak; /* Safari and Chrome */ -o-animation-name:SCgerak; /* Opera */ animation-duration: 15s; -moz-animation-duration:15s; /* Firefox */ -webkit-animation-duration:15s; /* Safari and Chrome */ -o-animation-duration:15s; /* Opera */ animation-iteration-count: infinite; -moz-animation-iteration-count:infinite; /* Firefox */ -webkit-animation-iteration-count:infinite; /*Safari and Chrome*/ -o-animation-iteration-count:infinite; /* Opera */ animation-timing-function: linear; -moz-animation-timing-function:linear; /* Firefox */ -webkit-animation-timing-function:linear; /* Safari and Chrome */ -o-animation-timing-function:linear; /* Opera */ transition: all 5s ease-in-out; -moz-transition: all 5s ease-in-out; /* Firefox 4 */ -webkit-transition: all 5s ease-in-out; /* Safari and Chrome */ -o-transition: all 5s ease-in-out; /* Opera */ } @keyframes SCgerak { 0% { right: -250px; } 100% { right: 300px; } } @-moz-keyframes SCgerak /* Firefox */ { 0% { right: -250px; } 100% { right: 300px; } } @-webkit-keyframes SCgerak /* Safari and Chrome */ { 0% { right: -250px; } 100% { right: 300px; } } @-o-keyframes SCgerak /* Opera */ { 0% { right: -250px; } 100% { right: 300px; } } #SCsocial a:hover{ animation-play-state:paused; -moz-animation-play-state:paused; /* Firefox*/ -webkit-animation-play-state:paused; /* Safari and Chrome */ -o-animation-play-state:paused; /* Opera */ } </style> <center><div id="SCsocial" style="background-image: url(http://1.bp.blogspot.com/-08SF0c0n8D0/UP6b7vVbZlI/AAAAAAAACSo/LMTSqBXFnXo/s1600/city.jpg); background-repeat:no-repeat; height: 225px; width: auto; border: 0; overflow:hidden;"> <!--Start Facebook Icon--> <a title="Like Us on Facebook" href="URL Facebook Ente" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-gAmdUWWlHso/UP6Wm_FJseI/AAAAAAAACQ4/Y6RPi0oUFq4/s1600/truck+facebook-2-icon.png" height="50" widht="50" alt="Icon" style="margin-top:175px;"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a title="Follow Us on Twitter" href="URL Twitter Ente" target="_blank" rel="nofollow"><img border="0" src="http://1.bp.blogspot.com/-RngqWlUQ4Po/UP6WnwXHzhI/AAAAAAAACRE/XP1DmM3kQZs/s1600/truck+twitter-icon.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us on Google+" href="URL Google+ Ente" target="_blank" rel="author"><img border="0" src="http://1.bp.blogspot.com/-shuV4bVmcsw/UP6Wm_mLtsI/AAAAAAAACRI/xUx-HthPRkY/s1600/truck+google.png" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Google+ Icon--> <!--Start Rss Icon--> <a title="Grab Our RSS Feed" href="URL RSS Feed Ente" target="_blank" rel="nofollow"><img border="0" src="http://4.bp.blogspot.com/-Oqfvq05w5mU/UP6WngRY-lI/AAAAAAAACRM/4qF5H9vscn8/s1600/truck+rss-icon.pn" height="50" widht="50" alt="Icon" style="margin-left:8px;"/></a> <!--End Rss Icon--> </div></center>

  • Kalo udah di pastein sekarang tinggal ganti semua tulisan yang Ane highlight sama URL profile sosial media dan Feed Ente lalu di save beres gan. 
  • Coba sekarang di buka blognya apa udah ada social icon mobil bergeraknya belum gan. Selamat menikmati social icon mobil bergerak yang baru di blog gan.

Cara Membuat Back To TOP Pada Blog

Saat kita baca postingan yang panjang banget sampe ke bawah, terus pengen baca lagi dari atas tapi scroll mouse rusak. Apa pernah Ente ngalamin hal tersebut gan? Kalo pernah pasti repot karena harus narikin tombol scroll di browser ya gak. Apalagi kalo pake laptop cuma pake touch pad waduh bikin sebel.

Nah kita sebagai pemilik blog harus cari cara buat mengatasi masalah itu, biar pengunjung blog betah baca postingan kita gan. Caranya ya kita pasang tombol back to top, jadi pengunjung tinggal ngeklik tombol aja kalau pengen balik ke atas gan.

Blog kalian udah ada tombol back to topnya belom? Kalo belom, pasang sekarang juga, tombol back to top ini emang bukan navigasi utama tapi bisa jadi sangat penting buat beberapa pengunjung gan. Gak susah kok membuat tombol back to top di blog gan cuma tinggal nambahin widget tanpa perlu edit HTML.

Kali ini gw bakal share cara membuat tombol back to top di blog yang gampang gan. Kalo Ente berminat silahkan langsung disimak cara buatnya gan gak pake ribet. Contohnya kayak yang ada di blog ini posisi tombol ada di kanan gan.

Pertama masuk ke Blogger lalu pilih Layout terus Add a Gadget dan tambahin HTML/JavaScript gan. Terus tinggal Ente pastein kode di bawah ini di kotak kosongnya.


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/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 (0=top).
    setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
    controlHTML: '<img src="URL Gambar Back To Top" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
    controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom 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:'Scroll Back to Top'})
                .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>
Kalo udah di pastein sekarang tinggal di ganti URL Gambar Back To Top sama url gambar punya Ente gan lalu di Save. Coba sekarang buka blog Ente pasti udah ada tombol back to topnya gan.

Kalo Ente gak punya gambar tombolnya ni gw sediain gan, ada yang animasi sama standar tinggal dipilih aja.

Animasi :











Standar :
















Ada cara 1 lg gan kadang kan Script yg Kita pasang terkadang ga cocok Dengan Script Yg di atas skarang bisa make Script yg satu ni Tp sayangnya Kalau palai script yg ni gambarnya nongol Terus ga kaya Script yg di atas Untuk Cara-caranya Monggoh Kita Simak.
  1. Login ke Dashboard Blogger Ente gan dan melanjutkan ke "Layout".
  2. Klik "Tambah Gadget" dan pilih "HTML / Javascript".
  3. Copy kode di bawah ini dan paste di dalam kotak konten.
  4. <a title="Back to Top" href="#top" style="position: fixed; bottom: 5px; right: 5px;"><img src="URL of Image"></a>
  5. Pastikan untuk mengganti "URL Gambar" dengan link ke gambar yang ingin ente gunakan.
  6. "Simpan" . Gampang kan GAN.?
Semoga Bermanfaat dan Berhasil pasang Tombolnya ya gan..

Photoshop Online

Sekarang Edit Photo Jadi Gampang Tinggal Up Load Photo atau File sejenisnya Disini langsung tinggal Edit.
           
 
(◕‿-) Designer By Alfiandika Nur Muhammad Putra
Sponsored By Blog Newb1e