Showing posts with label Blogger. Show all posts

Membuat Widget Twitter Untuk Blog

►

Hay Sobat OzoRa Semua , Kali Ini Saya Akan Memberi Sedikit Tutorial
  ''Untuk Membuat Widget Twitter Di Blog'' ,  Demo Nya ada di gambar paling atas  /\  , Jagan Lupa Di Follow Juga Twitter Nya Ya  @Ozora_Official , @Riky_404

Tutorial : 

1. Login di twitter.com
2. Ikuti link ini https://twitter.com/settings/widgets/new (copy saja ke address bar)
3. Isi semua textbox/kolom sesuai kebutuhan, perhatikan gambar berikut
Keterangan angka pada gambar diatas :
  1. Username twitter yang akan ditampilkan dalam widget  (1)
  2. Tinggi widget silahkan Anda tentukan atau biarkan kosong untuk default (600 px) (2)
  3. Ada 2 pilihan tema yaitu Terang dan Gelap (hitam) sesuaikan dengan selera(3)
  4. Ceklist bila ingin foto/media yang di tweet akan terbentang otomatis (sebaiknya jangan di ceklist agar tidak kelihatan lebar) (4)
  5. Warna link silahkan pilih untuk warna link dalam widget (5)
  6. Abaikan saja jangan di ceklist (6)
  7. Buat widget Anda (7)
    4. Setelah widget selesai dibuat copy HTML code yang ada disebelah kanan bawah (lihat gambar) 
    5. Buka blogger.com pilih blog yang akan dipasang widget timeline twitter klik tata letak > tambah gadget > klik HTML/JavaScript paste code yang sudah di copy tadi dan simpan.

    Sumber
    Ozora
    3 Comments
    Tag : ,

    Recent Comment Dengan Animasi

    ►
    Hay para bozzer admin mau minta maaf ni kalo selama ini ada salah dan admin sekalian mau ngepost sesuatu kan udah lama admin gk ngepost,oke tanpa panjang lebar lagi langsung aja,jadi kali ini admin akan share trick blog baru ajaa dehh,ok masih berhubungan dengan widget recent comment,kali inii dengan effeck animasi,yang pasti nya berbeda dari sebelum nya,inii dia demo nya 

    DEMO

    gimana keren banget kann?? ok dehh langsung ajaa

    1.login ke blog kamu
    2.lalu pilih edit html
    3.cari kode ]]><b:skin
    4.letakkan kode di bawah ini di atas kode tadi,tinggal pilih yang dark atau yang white

    CSS WHITE:


    .loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVVHn_xfXsu7gPWW0i8kJr4heA9A_icP28jnKMpoYQpvOvyPSlMSuvrPh6vTReJx_DMGhMGoWpAggfQGiVUIXfGdqPSOGB9kt0pXRg5htUe9PR_mlZMqzQKFL5Qk3MKtVzw_XsAtoCAg/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;background:whiteSmoke;padding:0 8px;border:1px solid #DFDFDF;border-top:1px solid white} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#383838;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:white;font-weight:bold;overflow:hidden;background:#363636;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:white} ul#kmtranimasi p{margin:15px 0 0}

    CSS DARK:

     .loadingxrcm {background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDVVHn_xfXsu7gPWW0i8kJr4heA9A_icP28jnKMpoYQpvOvyPSlMSuvrPh6vTReJx_DMGhMGoWpAggfQGiVUIXfGdqPSOGB9kt0pXRg5htUe9PR_mlZMqzQKFL5Qk3MKtVzw_XsAtoCAg/s1600/progress_ani.gif) no-repeat 50% 50%;width:32px;height:32px;display:block;margin:0 auto;text-indent:-9999px;} ul#kmtranimasi{text-align:left;font:normal normal 11px Verdana,Geneva,sans-serif} ul#kmtranimasi,ul#kmtranimasi li{margin:0;padding:0;list-style:none;overflow:hidden;position:relative} ul#kmtranimasi li{text-indent:0;height:90px;padding:0 8px;background:#252525;color:white;border:1px solid black;border-top:1px solid #353535} ul#kmtranimasi img{border-radius:9999px;overflow:hidden;background:#020202;border:0;float:left;margin:5px 5px 0 0} ul#kmtranimasi .ketkomt{overflow:hidden} ul#kmtranimasi .ketkomt a{display:block;color:black;font-weight:bold;overflow:hidden;background:#ECECEC;border-radius:2px;float:left;padding:0 5px;margin: 5px 0 0 0;} ul#kmtranimasi .ketkomt span{font-size:8px;position:absolute;z-index:2;top:21px;border-radius:2px;display:block;line-height:14px;padding:0 5px;left:68px;background:black} ul#kmtranimasi p{margin:15px 0 0}
    5.setelah kamu pilih salah satu,save template kamu
    6.masuk ke tata letak
    7.lalu pilih widget html/javascrip
    8.masukkan kode di bawah inii di dalam widget tadi


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://ivyth.googlecode.com/svn/js/rckmtr-dgn-animasi.js" type="text/javascript"></script> <div id="rcentcomnets"><span class="loadingxrcm">Loading...</span></div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { rccommnetsx({ id_containrc:"#rcentcomnets", animatedRecentcomments:true, numComments:10, url_blog:"URL_blogmu", adminBlog:"nama_akun blogger/google+" }); }); //]]> </script>
    BACA!!
    jika di dalam template kamu udah ada jquery,maka kode ini
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
    tidak  usah di copy
    yang kode warna  merah,silahkan di edit sendiri,url blog kamu,jumblah komentar yang di tampilkan,url google+ kamu

    9.save template kamu

    gimana?? simple banget kann??
    ok dehh segini dulu

    see you

     Sumber
    MKR & Zynation
    6 Comments
    Tag :

    Memasang Kamera CCTV Pada Blog

    ►
    oke.. kali ini gw mau posting untuk widget blog, yaitu Kamera CCTV pada blog, ya widget ini memang hanya untuk hiasan/mempercantik blog dan mungkin diblog" lain sudah dibahas cara membuatnya,, yaa saya cuma share aja.. siapa tau berguna apalagi untuk blog yg baru yg belum ada widget apapun dan mungkin bisa berguna .. nah untuk demo dari gambar CCTV nya seperti ini:


    nah lumayan keren kan? buat yg belum tau cara memasangnya sebagai berikut:
    1. loggin blogger
    2. tata letak
    3. tambahkan widget
    4. HTML/Javascript
    5. masukkan script berikut dikolom yg terserdia..

    <script language="JavaScript" src="http://js4you.googlecode.com/files/cctv.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEineIoviXtZ-KOu1MTicP_Z1zBi_wk1rp_hYAagSN7T80zb5ysMgf7bn7b7WnangiZznSHAaLNiNXwTDhfwaiA2AQ9Qps1_K99Cw1lvisIEpnASKYgA2IFF9L5GSnadj70LVJAgl5z1BDU/s1600/cctv.gif")</script>
    6. tinggal di save aja.. :D

    nah mungkin cukup sekian dan trick ini sangatlah simple dan mudah dimengerti..hmmm untuk kelemahannay yaitu membuat blog agak berat.. jdi ya dikira" aja ya ..
    oke.. semoga bermanfaat... :D
    1 Comment
    Tag :

    Cara Meningkatkan SEO dan PageRank

    ►
    Google Page Rank
    Hay Sobat Bozzer Kali Ini Admin Akan Memberikan Tips Cara Meningkatkan SEO dan PageRank,Oke Tanpa Basa Basi Lagi Kalo Ingin Tau Langsung Di Baca Aja :
    1. Artikel Yang Menarik : berpikir tentang inovasi, dan memberikan terobosan konten terbaik bagi pembaca atau pengunjung. Google akan memberikan apresiasi yang tinggi ke situs web yang berisi konten yang diperbarui, unik, segar dan asli. Search engine perlu tahu tentang apa halaman web Anda.
    2. Membangun Link : Promosikan situs Anda dengan Bertukar Link ( Link Exchange ) dengan situs / blog lain yang mengarah untuk meningkatkan posisi Anda. Jangan lupa untuk mengirim konten Anda ke direktori Web / Blog.
    3. Internal Link : Hubungkan posting Anda adalah satu dengan tulisan lainnya juga merupakan bagian dari praktek SEO. Hal ini membantu memaksimalkan relevansi dan peringkat sebuah halaman. Pastikan untuk menyertakan anchor text yang sesuai untuk kata kunci dari link internal yang Anda buat.
    4. Inbound Link : Mendapatkan link dari situs lain yang link ke situs Anda akan meningkatkan kredibilitas Anda sebagai sumber yang dapat dipercaya, sehingga mendorong website Anda lebih tinggi dalam hasil mesin pencari.
    5. Kata Kunci : Pastikan kata kunci sesuai dengan apa yang berpotensi tinggi di mesin pencari seperti Google, Yahoo atau Bing. Jika Anda ingin peringkat untuk kata kunci tertentu, kemudian membuat halaman arahan untuk mengurangi tingkat bouncing yang tinggi karena pengunjung akan diarahkan ke halaman Web individu yang memenuhi kriteria tertentu untuk pencarian mereka.
    6. Memanfaatkan Social Media : Media sosial secara aktif bergabung dengan sebuah cara yang efektif untuk pasar website dan mempromosikan link ke konten Anda. Sosial media adalah cara yang bagus untuk bisnis yang bertujuan untuk menyebarkan informasi tentang Web / Blog.
    7. Perangkat Situs : Desain situs Web Anda sehingga user friendly dan mudah dinavigasi untuk mencegah pengunjung pergi. Halaman Web harus diatur sehingga kata kunci dengan tingkat konversi tertinggi.
    8. Autid : Review website Anda dan memutuskan apakah akan kembali Indeks. Sebuah kajian komprehensif termasuk peninjauan usia halaman Web, usang atau copy dan konten paste, link yang rusak atau deskripsi Meta yang tidak relevan untuk judul halaman HTML. Memperbarui situs Web Anda mungkin termasuk mendesain ulang dan konten tambahan.


    Oke Mungkin Itu Aja,Sampai Jumpa Lagi Di Postingan Berikutnya Bye.

    2 Comments
    Tag : ,

    Cara Memproteksi CSS Blog

    ►

    Setelah kemarin saya share tentang 15 Fakta Cowok , sekarang saya akan share tentang Cara Memproteksi CSS Blog kamu . Miris ngelihat banyaknya blog-blog teman yang di Plagiatin sama Plagiator  . Karena itu saya repost postingan ini untuk membantu para sobat blogger. Oke Ikutin Step by Step :)

    Sebelum memulai, kamu harus menyiapkan sebuah hostingan, Saya sarankan gunakan GoogleCode karena servernya cepat. Jangan gunakan hostingan gratisan, servernya suka naik turun soalnya :)

    1. Compress terdahulu CSS blog anda di http://www.cssdrive.com/index.php/main/csscompressor atau di http://htmlcompressor.com/compressor.html itu sih suka suka kamu aja


    2. Ambil kode CSS mu, lalu encrypt di http://tools.irvankadhafi.com/jsencrypt/, Sebelum di encrypt jadikan css mu menjadi HTML seperti ini
    <style>Isi CSS blog mu</style>
    Jika masih gak ngerti ini aku kasih contohnya. Misalkan css blogmu 
    body{background:url(blablabla);font-family:verdana}#wrapper{border:2px solid #000;color:#fff;border-radius:8px}
    3. Setelah di encrypt, copy hasil encrypt itu ke notepad, dan simpan dengan format .js  misalnya cssku.js (Bisa juga tanpa format)

    4.  Upload file yang disimpan itu ke GoogleCode kalo ga tau cara uploadnya cari aja digoogle banyak

    5. Copy link js nya, lalu jadikan linker, seperti ini
    <script src='link-js-kamu' type='text/javascript'/> 
    6. Setelah itu taruhlah linker tersebut diatas html </head>
    7. ^_^ Blog anda sudah terproteksi

    Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)
    NB : Walaupun kamu sudah memproteksinya seaman-aman pun semuanya tetap bisa dibongkar, tapi cara ini hanya untuk mengakali perbuatan Plagiator agar tidak gampang menyuri css anda ^_^ 
    Sumber 1
    Sumber 2
    4 Comments
    Tag : ,

    Kurumi Tokisaki Blogger Template

    ►


    Wow, Johanes Mengeluarkan Template Baru XD Keren Sob, Yg mau Re-Design Coba aj Hasilnya Pasti Bagus^^  mengenai template ini,Template sederhana dengan 2 kolom posting,2 sidebar dan dilengkapi Popular post widget dengan thumbnail.
    Pada template ini,seperti biasa saya selalu mencoba membuat style yang baru,keunikan itu terletak pada style posting yang jarang ditemui oleh blogger template lain.jika kita arahkan kursor pada posting,gambar pada posting akan membesar dengan efek transisi css3,dan deskripsi posting akan hilang lalu menampilkan tanggal posting,penulis blog,jumlah komentar dan kategori posting.awalnya pada template ini,backgroundnya menggunakan gambar/pattern,tetapi karena saya rasa tidak cocok,jadi saya menggunakan css3 gradient untuk diterapkan sebagai background pada template ini,bagi teman teman yang masih tidak tahu cara mengganti warna/jenis background(gambar,warna solid,gradient) bisa dibaca dibawah postingan ini.
    Screenshot




    1. Pengaturan menu
    Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
    setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.


    Contoh:
    <li><a href='http://www.facebook.com'>Facebook</a></li>



    <ul class='dark_menu'>
    <li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
    <li data-role='dropdown'><a href='#'>About</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li><li data-role='dropdown'><a href='#'>Contact</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li>
    <li data-role='dropdown'><a href='#'>Download</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li>
    <li><a href='#'>Report</a></li>
    <li><a href='#'>Anime</a></li>
    </ul>


    Jika kamu ingin menambahkan menunya,tambahkan kode html dibawah ini diantara/didalam kode html
    <ul class='dark_menu'> ....</ul>

    Single menu
    <li class='jolor'><a href='#'>namalink</a></li>


    Dropdown menu
    <li class='jolor' data-role='dropdown'><a href='#'>link kamu</a><ul>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    <li><a href='#'>Lorem Ipsum</a></li>
    </ul></li>


    2. Setting SEO/Meta tag

    setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
    *ganti text yang berwarna merah
    <meta content='deskripsi blog kamu' name='DESCRIPTION'/>
    <meta content='keyword blog kamu' name='KEYWORDS'/>


    Untuk pengertian setting seo/meta tag,anda bisa cari tahu di google atau disini dan disini




    3. Setting Social media : facebook, Twitter, Rss,Pinterest.
    *ganti url linknya
    <a href='http://feeds.feedburner.com/alamat_feed_rss'><div class='rssjo'/></a>
    <a href='http://twitter.com/username'><div class='twitterjo'/></a>
    <a href='http://www.facebook.com/halaman_fan_page_facebook'><div class='facebookjo'/></a>
    <a href='http://www.pinterest.com/id%20kamu'><div class='pinterestjo'/></a>


    Tertarik dengan Template Kurumi Tokisaki Blogger Template?
    Silakan dicoba dan selalu ingat anda menggunakan template ini,selalu backup template lama anda agar tidak terjadi sesuatu yang tidak diinginkan.Terima kasih


    4. Cara mengganti background gradient.


    cari css dibawah ini
    body {
    margin: 0 auto;
    padding: 0px 0px 0px 0px;
    background: rgb(226,220,222); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(226,220,222,1) 0%, rgba(34,34,34,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,220,222,1)), color-stop(100%,rgba(34,34,34,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(226,220,222,1) 0%,rgba(34,34,34,1) 100%); /* IE10+ */
    font-family: 'Open Sans', sans-serif;
    color: #222;
    overflow-x: hidden;
    font-size: 13px;
    }


    Jika kalian perhatikan 6 css background diatas,masing" mempunyai fungsi untuk browser tertentu,mengapa?karena tidak semua css dapat bekerja baik pada seluruh browser,oleh karena itu,jika klian ingin mengganti background,kalian bisa menggunakan cara dibawah ini,Contoh:


    1. background warna solid:
    dengan hexa:
    background:#000;

    dengan rgba:
    background:rgba(255,255,255,1);

    2. background dengan gambar:
    background:url(http://alamatgambar.jpg);

    3.Background dengan Gradient.
    kalian bisa menggunakan css gradient generator.
    http://www.colorzilla.com/gradient-editor/

    -Lebih lanjut mengenai background,kalian bisa baca artikel ini:
    http://djogzs.blogspot.com/2010/11/tips-memilih-warna-design-blog.html

    -Mengenai rgba color
    http://djogzs.blogspot.com/2012/01/tips-design-menggunakan-css3.html


    Intinya,untuk mengganti warna,kalian hanya harus mengganti kode hexa warnanya,begitu juga paga rgba color :)






    *Bonus PSD File Header Kurumi~xD


    Semoga bermanfaat untuk semuanya ^^ ,tapi tetaplah ingat,selalu bijak menggunakan template gratis dan STOP aksi PLAGIAT ,karena itu perbuatan yang merugikan dan sungguh memalukan. Sankyuu minna-san~

     Sumber :
    Blog Johanes
    0 Comments
    Tag : ,

    Membuat Anti CTRL+U Pada Blog

    ►
    wess... di pagi hari kali ini saya akan share tentang membuat anti CTRL+U pada blog.. kalian tau kan fungsi CTRL+U?? klo belom tau saya akan jelaskan secara singkat dan sepengetahuan saya... CTRL+U digunakan untuk melihat source sebuah web/blog .. klo ditekan CTRL+U pada web/blog yg tidak dipasang anti CTRL+U maka sesudah ditekan akan muncul script" HTML penyusun blog/web itu... itu lah yg sering digunakan para PLAGIAT".... dgn menggambil template blog org dengan cara ilegal..


    dan kali ini saya akan mengkasih tips untuk menghindari nya.. langsung saja:

    1. Login Blogger
    2. Menuju menu template
    3. edit HTML
    4. cari kode <head>
    5. lalu copy dan pastekan script dibawah ini DIATAS <head>
    <script src='http://adithya.googlecode.com/files/Apctrl%2Bu.js' type='text/javascript'/>
    6. wokee selesai...
    mudah kan..??
    semoga bermanfaat... :D


    UNTUK DEMONYA KALIAN BISA MENEKAN CTRL+U PADA BLOG INI

    Sumber
    Mr.Kurosaki
    0 Comments
    Tag : ,

    TingzDesign Ganti Nama Menjadi T-Bozz

    ►

    Hay Sobat T-B Wwokwoko Ganti Nama Ganti Juga Nama Sebutan Buat Para Pengunjung T-B Dulukan Panggilannya Cuma Sobat TD Sekarang Admin Akan Memanggil Para Pengunjung Setia T-Bozz Dengan Sebutan Bozzer,Wokwokw Aneh Ya Namanya...Wkowkokwok Ane Pun Juga Merasa Seperti Itu Tapikan Dari Pada Di Panggil Sobat TD Mulu Mending Dipanggil Dengan Nama Lain,Setuju Toh Hehheehhe.

    T-Bozz Telah Berganti Nama Berulang Kali Mulai Dari Iqbal-Technology,Indonesia-Technology,Batakz Design,TingzDesign,Hingga Sekarang Menjadi T-Bozz. Oke Mungkin Ituah Sepnggal Cerita Nama Dari Blog Ini.

    Oke Mungkin Itu Aja Yang Bisa Admin Sampaikan,Terima Kasih Telah Meluangkan Waktu Untuk Membaca Ini....Bye...
    6 Comments
    Tag : ,

    Cara Mematikan Fungsi CTRL+U Pada Blog

    ►

     

    Sebelumya TD akan sedikit menjelaskan fungsi dan manfaatMematikan/mendisable CTRL+U dan CTRL+S ,, yaitu agar blog kita aman dari orang-orang yang mungkin tidak bertanggung jawab (meng-copas artikel yang telah kita buat) seperti TD sendiri sangat tidak suka jika Blog hasil tulisan TD sendiri dicopas dan dipostingkan lagi di web/blog orang yang tidak bertanggung jawab tersebut tanpa meninggalkan link blog saya, jadi masukan saja untuk para blogger dari TD agar jangan seenaknya sendiri mengcopas hasil karya orang lain,, yaaa .. intinya belajarlah menghargai hasil karya orang lain,,
    maka dari itu sedikit uraian buat kalian tentang bagaimana cara mematikan/mendisable CTRL+U dan CTRL+S agar Blog menjadi Aman. Silahkan disimak tutorialnya dibawah ini :

    • Login ke blogger
    • Template - Edit HTML
    • Setelah itu cari kode <body> dan ganti dengan kode dibawah ini :

    <body oncontextmenu='return false;' onkeydown='return false;' onmousedown='return false;'> 

    • Kemudian Save Template!

    Keterangan :
    1. oncontextmenu=’return false;’ (Untuk mematikan fungsi klik kanan)
    2. onkeydown=’return false;’ (Untuk mematikan CTRL+A dan CTRL+U)
    3. onmousedown=’return false;’ (Untuk mematikan fungsi block pada artikel)
    4. ‘return false;’ (Untuk mengaktifkan fungsi pada masing-masing Java Script,kalau ingin dinonaktifkan salah satu ganti saja dengan ‘return true;’ )
     

    Oke mungkin segitu aja semoga bermanfaat
    3 Comments
    Tag : ,

    Cara Mudah Membuat Sitemap/Daftar Isi

    ►
    Hay Sahabat TD Gimana Kabarnya Sehatkan?Oke Kali Ini Admin Akan Berbagi Sedikit Tetang Sitemap/Daftar Isi Cara Buatnya Mudah Kok Tinggal Ikuti Aja Langkah-Langkahnya
    1. Login Ke Blogger (Sudah Pasti) 
    2. Buka Blog Di Dashboard Kalian 
    3. Pilih Laman Terus Pilih Laman Baru ---> Laman Kosong 
    4. Ubah Compose ---> HTML
    5. Setelah Itu Masukkan Script Di Bawah Ini
    <div style="overflow:auto;width:auto;height:auto;padding:10px;border:1px solid #eee"><script style="text/javascript" src="https://blala.googlecode.com/files/TingzDesign%20sitemap.js"></script><script src="http://namablog.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    </div> 
         6.  Ubah http://namablog.blogspot.com/ Ganti Dengan Alamat Blog Kamu
         7.  Simpan Dan Lihat Hasilnya

    Ni Screenshotnya:



    Oke Mungkin Itu Aja
    Selamat Mencoba Dan Semoga Berhasil Ya
    0 Comments
    Tag :

    Template Uciha Madara

    ►
    Hay Sahabat TD Barusankan Admin Udah Share Tentang Banner Slider Dengan CSS3 Nah Sekarang Admin Mau Berbagi Template Buat Kalian,Dan Template Ini Pun Cukup Sederhana Saja,Oke Tanpa Basa-Basi Ni Tak Kasih Screenshotnya

     Screenshot:
    Tuh SS Postingan Dan SidebarNya

    Satu Lagi Kalo Mau Ganti menunya cari code
    <div id='rocking-rolling'>
    <div class='item'>
    <a class='link icon_mail'/>
    <div class='item_content'>
    <h2>KONTAK SAYA</h2>
    <p>
    <a href='#'>Email</a>
    <a href='#'>Twitter</a>
    <a href='#'>Facebook</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_help'/>
    <div class='item_content'>
    <h2>BANTUAN</h2>
    <p>
    <a href='#'>Buku Tamu</a>
    <a href='#'>Lapor</a>
    <a href='#'>Kritik dan Saran</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_find'/>
    <div class='item_content'>
    <h2>TELUSURI</h2>
    <p>
    <form expr:action='data:blog.homepageUrl + &quot;search/&quot;' method='get'><input name='q' type='text'/></form>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_photos'/>
    <div class='item_content'>
    <h2>GALERI FOTO</h2>
    <p>
    <a href='#'>Kategori</a>
    <a href='#'>Arsip</a>
    <a href='#'>Daftar Isi</a>
    </p>
    </div>
    </div>

    <div class='item'>
    <a class='link icon_home'/>
    <div class='item_content'>
    <h2>MULAI DARI SINI</h2>
    <p>
    <a href='#'>Pelayanan</a>
    <a href='#'>Portfolio</a>
    <a href='#'>Pembayaran</a>
    </p>


    Terus Ganti Tanda #


    Dan Ganti Dengan Username Sobat

    Kalo Masih Penasaran ,,
                                                       

    0 Comments
    Tag : ,

    Banner Slider Dengan CSS3

    ►
    Selamat Malam sobat TD, gimana kabarnya semua ?yang jelas baik-baik aja kan,sekarang admin mau bahas "Banner Slider dengan CSS3" contohnya seperti diBlog saya atau SS dibawah ini..

    Banner slider ini hanya untuk banner yang berukuran 468x60 saja..., tapi terserah sih, bisa anda atur :v hahaha.., okey langsung saja saya bahas caranya...
    Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.
    CSS : Di atas kode ]]></b:skin>

    HTML Letakan diantara Kode HTML/Didalam <body> dan </body>
    ( Tergantung, kamu mau letakan dimana.)
    HTML
    <div id='slider2'>
    <div id='mask'>
    <ul><li>
    <a href='#' title='#'><img src='urlgambar'/></a></li>
    <li>
    <a href='#' title='#'><img src='urlgambar'/></a>
    </li>
    <li><a href='#' title='#'><img src='urlgambar'/></a>
    </li>
    <li><a href='#' title='#'><img src='urlgambar'/></a>
    </li>
    </ul>
    </div>
    <div id='progress'>
    </div><div id='overlay'>
    </div><div id='pause'></div></div>   
    a href='#' (ganti tanda pagar dengan URL link yang dituju)
    title='#' (ganti dengan nama link yang dituju)
    'urlgambar' (ganti dengan Url site yang dituju)
    CSS 
    #slider2 {
    width: 468px;
    height: 60px;
    margin:0px 0px 0px 0px;
    overflow: hidden;
    background-color: #F8F8F8;
    border: 10px solid #F8F8F8;
    -moz-transition: all 170ms ease-in;
    -webkit-transition: all 170ms ease-in;
    -o-transition: all 170ms ease-in;
    position: relative;
    border-radius: 10px/20px;
    }
    #mask {
    overflow:hidden;
    }
    #slider2:hover {
    background-color:#fff;
    border:10px solid #fff;
    }
    #slider2:hover #pause {
    opacity:1;
    }
    #slider2:hover #progress {
    background-color:rgba(255,255,255,0.0);
    }
    #slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
    -moz-animation-play-state:paused;
    -webkit-animation-play-state:paused;
    }
    #pause {
    width:468px;
    height:60px;
    position:absolute;
    top:0;
    opacity:0;
    pointer-events:none;
    -moz-transition:all 170ms ease-in;
    -webkit-transition:all 170ms ease-in;
    -o-transition:all 170ms ease-in;
    }
    #progress {
    width:1px;
    height:1px;
    background-color:#ffd000;
    -moz-animation:progress 35s infinite;
    -webkit-animation:progress 35s infinite;
    position:relative;
    top:-1px;
    -moz-transition:all 170ms ease-in;
    -webkit-transition:all 170ms ease-in;
    -o-transition:all 170ms ease-in;
    }
    #overlay {
    width:4680px;
    height:60px;
    position:absolute;
    top:0;
    pointer-events:none;
    -moz-transition:all 170ms ease-in;
    -webkit-transition:all 170ms ease-in;
    -o-transition:all 170ms ease-in;
    opacity:0.5;
    -moz-animation:overlay-fade 35s infinite;
    -webkit-animation:overlay-fade 35s infinite;
    }
    #slider2 ul {
    width:2400px;
    list-style:none;
    padding:0;
    margin:0;
    -moz-animation:slide-animation 35s infinite;
    -webkit-animation:slide-animation 35s infinite;
    position:relative;
    left:0px;
    overflow:hidden;
    }
    #slider2 li {
    display:inline;
    width:468px;
    height:60px;
    margin:0;
    padding:0;
    float:left;
    position:relative;

    }
    #slider2 li:last-of-type {
    background-color:#362c30;
    }
    #slider2 li a {
    display:block;
    text-decoration:none;
    }
    #slider2 li span {
    display:block;
    width:560px;
    padding:15px 20px;
    position:absolute;
    bottom:0;
    left:0;
    background-color:rgba(54,44,48,0.6);
    border-top:1px solid #362c30;
    text-shadow:1px 1px 1px #362c30;
    pointer-events:none;
    text-align:left;
    }

    @-webkit-keyframes slide-animation {
    0% {opacity:0;}
    2% {opacity:1;}
    20% {left:0px; opacity:1;}
    22.5% {opacity:0.6;}
    25% {left:-468px; opacity:1;}
    45% {left:-468px; opacity:1;}
    47.5% {opacity:0.6;}
    50% {left:-936px; opacity:1;}
    70% {left:-936px; opacity:1;}
    72.5% {opacity:0.6;}
    75% {left:-1404px; opacity:1;}
    95% {opacity:1;}
    98% {left:-1404px; opacity:0;}
    100% {left:0px; opacity:0;}
    }
    @-moz-keyframes slide-animation {
    0% {opacity:0;}
    2% {opacity:1;}
    20% {left:0px; opacity:1;}
    22.5% {opacity:0.6;}
    25% {left:-468px; opacity:1;}
    45% {left:-468px; opacity:1;}
    47.5% {opacity:0.6;}
    50% {left:-936px; opacity:1;}
    70% {left:-936px; opacity:1;}
    72.5% {opacity:0.6;}
    75% {left:-1404px; opacity:1;}
    95% {opacity:1;}
    98% {left:-1404px; opacity:0;}
    100% {left:0px; opacity:0;}
    }
    @-webkit-keyframes progress {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:468px; opacity:1;}
    22.5% {width:468px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:468px; opacity:1;}
    47.5% {width:468px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:468px; opacity:1;}
    72.5% {width:468px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:468px; opacity:1;}
    98% {width:468px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-moz-keyframes progress {
    0% {width:0px; opacity:0;}
    2% {width:0px; opacity:1;}
    20% {width:468px; opacity:1;}
    22.5% {width:468px; opacity:0;}
    22.59% {width:0px;}
    25% {width:0px; opacity:1;}
    45% {width:468px; opacity:1;}
    47.5% {width:468px; opacity:0;}
    47.59% {width:0px;}
    50% {width:0px; opacity:1;}
    70% {width:468px; opacity:1;}
    72.5% {width:468px; opacity:0;}
    72.59% {width:0px;}
    75% {width:0px; opacity:1;}
    95% {width:468px; opacity:1;}
    98% {width:468px; opacity:0;}
    100% {width:0px; opacity:0;}
    }
    @-webkit-keyframes overlay-fade {
    0% {opacity:0;}
    2% {opacity:0.5;}
    95% {opacity:0.5;}
    98% {opacity:0;}
    100% {opacity:0;}
    }
    @-moz-keyframes overlay-fade {
    0% {opacity:0;}
    2% {opacity:0.5;}
    95% {opacity:0.5;}
    98% {opacity:0;}
    100% {opacity:0;}
    }
    #slider2 ul li span h2 {
    font-size:24px;
    line-height:24px;
    color:#fff;
    font-weight:normal;
    font-family:'Communist-Regular';
    text-shadow:1px 1px 1px #362c30;
    }

    Untuk pengaturan posisi slidernya,menggunakan margin.

    margin:0px 0px 0px 0px;

    #slider2 {
    width: 468px;
    height: 60px;
    margin:0px 0px 0px 0px;
    overflow: hidden;
    background-color: #F8F8F8;
    border: 10px solid #F8F8F8;
    -moz-transition: all 170ms ease-in;
    -webkit-transition: all 170ms ease-in;
    -o-transition: all 170ms ease-in;
    position: relative;
    border-radius: 10px/20px;
    }



    Setting diatas masih default,kamu tinggal mengatur nilai margin left,top,right dan bottomnya.
    nah gimana ? caranya cukup mudah kan, oke sekian dari TD, semoga artikel ini bermanfaat untuk anda... :)
    Source : Blog Johanes
    0 Comments
    Tag :

    - Copyright © 2013 Bejaring -Zeytions V.1- Powered by Blogger - Template By Johanes Djogan - Design By Muhammad Iqbal Harahap -