TutorWidget

Membuat Pesan Pembuka pada Blog - Pesan pembuka merupakan ucapan sambutan buat para pengunjung, mungkin trik ini sudah biasa bagi blogger yang sudah profesional tapi TutorWidget akan membahas kembali buat yang pemula/newbie seperti saya. Mari kita simak!!!  Baca : Cara Membuat Energy Saving Mode Dengan CSS Manfaat widget ini memudahkan kita suatu saat jika kita nantinya memberikan suatu informasi yang tentunya ingin di beritahukan kepada pengunjung, baik itu berupa pengumuman, sekedar sapaan, atau bahkan ucapan memasuki pada waktu momen-momen istimewa seperti memasuki Bulan Ramadhan, Hari Raya Idul Fitri, Hari Natal, Tahun Baru dan hari besar lainnya. Banyak macam dan cara yang digunakan untuk menampilkan pesan-pesan tersebut. Mulai dengan tulisan menggunakan marquee, dialog box, banner, dan lain-lain. Pesan pembuka ini bersifat full windows ketika masuk blog dengan background yang menutupi seluruh tampilan blog dengan tombol untuk melanjutkan membaca artikel.

TutorWidget Kali ini akan berbagi Cara Mengetahui Waktu Muat sebuah laman Blog - Widget ini digunakan untuk mengetahui atau menampilkan lama waktu muat sebuah halaman blog . Ini adalah sebuah script sederhana yang berguna untuk menampilkan waktu yang di butuhkan untuk memuat sebuah laman dalam satuan detik. Secara tidak langsung, ini juga membantu kamu untuk memantau akselerasi blog tanpa harus browsing sana-sini. Live Demonya , Seperti dibawah ini: Cara memasangnya ikuti langkah dibawah ini: Pergi ke Dasboard » Tata letak » Tambahkan Gadget » Pilih HTML/JavaScript, Lalu tambahkan kode yang ada di bawah ini <script type="text/javascript"> var startTime=new Date(); function currentTime(){   var a=Math.floor((new Date()-startTime)/100)/10;   if (a%1==0) a+=".0";   document.getElementById("endTime").innerHTML=a; } window.onload=function(){   clearTimeout(loopTime); } </script> <script type="text/javascript"&g

Cara kerja dari widget ini adalah menampilkan komentator yang pernah berkomentar di blog kita di halaman khusus, sebagai wujud apresiasi kepada pengunjung, dengan memberikan mereka kenangan atau memberikan backlink kepada mereka. Script widget ini juga menampilkan jumlah berapa kali komentator berkomentar pada web/blog anda saat profil disorot oleh cursor(efek hover). Tentunya yang paling banyak melakukan komentar akan menduduki posisi teratas dari beberapa komentator yang ada. Bisa jadi, dengan memasang widget ini komentator-komentator di blog kita semakin termotivasi dan ingin sering berkomentar, karena menurut pendapat para blogger posting yang banyak komentarnya berarti posting yang berkualitas, dan dengan banyaknya komentar di posting maka semakin banyak pembaca yang ingin turut berkomentar.     Berikut ini cara membuat widget Member aktif: Masuk dashboard blogger Pilih Entri baru, kemudian ganti mode dari compose ke HTML Kemudian masukkan kode berikut: <st

Membuat Profil Blogger keren Seperti Google+ - Widget yang saya maksud adalah sebuah Widget yang menampilkan Foto Profil Google+, Memudahkan seseorang untuk Melingkari Akun anda atau menjadi teman anda, dan juga menampilkan jumlah lingkaran yang anda miliki saat ini. Selain itu google plus merupakan sarana jaringan yang dapat menghubungkan anda dengan beberapa orang untuk mendapatkan info perkembangan terbaru mengenai apa saja yang anda butuhkan sehingga optimasi blog dapat meningkatkan trafik pengunjung. Modifikasi ini terinspirasi dari profil Google yang berada di pojok kanan atas ketika kita login ke akun Google kita. Di pojok kanan atas akan tampak sebuah photo kita yang kecil dan bulat yang apabila di klik akan keluar sebuah kotak yang berisi profil kita. Cara memasang widget profile ala google+ supaya tampil di blogger ini cukup gampang hanya Dengan menambahkan sedikit custom style CSS dan HTML maka widget Google+ pun siap terpasang dan mempercantik blog, penasaran de

Tombol Slide DEMO dan DOWNLOAD dengan CSS - Button Demo dan download yang akan saya bagikan ini sangatlah simple, ringan, elegant hanya menggunakan Css saja sehingga tidak mempengaruhi beban loading blog. Dalam tombol demo dan download pastinya memiliki fungsi yang sama namun memiliki style atau tampilan yang berbeda-beda, efek slide akan mucul ketika cursor berada di tulisan Download. Screenshoot Sangat berguna untuk kita semua yang bermain di dunia blogger, karena dengan adanya tombol ini akan membuat pengunjung blog kita lebih senang untuk berkunjung kembali di blog kita, apalagi jika web/blog kita bertopik tentang Tutorial dan Download. Berikut ini tutorwidget akan membagikan tutorial blog mengenai bagaimana cara membuat tombol download dan demo dengan efek silde. Arahkan cursor anda di bawah ini. DOWNLOAD DEMO DOWNLOAD   Cara Membuat Tombol Demo dan Download 1. Masuk ke akun blogger anda 2. Pilih menu Template dan pilih Edit HTML 3. Masukkan CSS beri

Pada kesempatan ini tutorwidget akan berbagi tips cara membuat menu slide info di blog dengan css . Pada tutorial ini kita tanpa harus klik terlebih dahulu cukup hanya dengan menyorot atau mendekatkan kursor kita maka menu slide info pun akan terlihat!. akan lebih menarik jika didesign sebagus mungkin untuk menarik perhatian pengunjung. Slide Info ini sangat berguna untuk menunjukan author dari sebuah blog. Tapi kali ini tidak sekedar slide info biasa tapi dibalut dengan paduan CSS sehingga terlihat lebih cantik. Dan dalam pembuatanya pun tergolong cukup mudah dan sederhana, anda hanya cukup memasangnya di gadget jadi tidak perlu edit html. Untuk bereksperiman sobat blogger bisa mencobanya di sini untuk mendapatkan hasil yang sempurna sesuai dengan keinginan sobat. ScreenShoot Sebelum Di Sorot Sesudah Di Sorot Bagaimana cara membuatnya? Oke, langsung saja dimulai tutorialnya. Login ke akun blogger sobat Tambahkan Gadget Pilih HTML/JavaScript lalu CopyPastekan ko

     Membuat Tulisan Berjalan (Marquee) di blog memang sangatlah mudah. Kenapa tulisan berjalan disebut Marquee? karena untuk membuat tulisan berjalan itu menggunakan kode Marquee. Marquee berguna untuk mempercantik tampilan blog, Salah satu cara untuk menarik perhatian pada suatu kata atau kalimat dalam suatu blog atau website sehingga pengunjung bisa lebih suka dengan web/blog anda. Bagaimana cara membuat tulisan berjalan? Tulisan atau teks berjalan atau running text ini. Kali ini kita akan mencoba membuat beberapa jenis marquee, agar lebih banyak variasi yang bisa anda pilih. Terlebih dulu kita akan belajar membuat kodenya, lalu belajar cara memasangnya pada blog. Mungkin sebagian besar sudah mengetahuinya. tapi disini tutorwidget mencoba untuk sharing kepada teman-teman yang belum mengetahui cara pembuatannya. Perlu anda ketahui bahwa kode dasar Marquee adalah... <marquee>TEKS YANG BERGERAK</marquee> DEMO KODE DI ATAS TEKS YANG BERGERAK Jadi, dengan meng

   Memasang script kode warna diblog - Color code generator atau widget kode warna, bagi kita seorang blogger tentu penting peranannya terutama dalam hal menghias tampilan blog, misalnya mengubah background template, warna huruf. Karena mungkin kita malas menghafal kode warna yang sampai 6 digit, apa lagi ditambah dengan perpaduan  kombinasi antara huruf dan angka, mumet deh jadinya. Apa saja sih keuntungan memasang tool ini? tentu saja ada keuntungan memasang tool ini antara lain selain untuk mempermudah kerja kita juga dapat menaikkan traffik blog bila ada visitor yang sedang ingin mengubah penampilan webnya lebih berwarna. Seperti apasih code warna html itu?, Code warna html adalah sebuah code warna yang biasanya untuk membuat sebuah warna pada pembuatan script html. sebenarnya untuk mengetahui kode warna html kita dapat menggunakan photoshop dan sebagainya, akan tetapi mungkin sobat akan sedikit lelah karena harus bolak balik membuka program yang cukup berat tersebut . Li

     Membuat menu tab view tanpa edit html - Fungsi dari menu tab view ini bisa untuk menghemat tempat dalam penempatan widget-widget yang di pasang di sidebar maupun dimana saja pada tata letak blog. Sebab menu tab ini dapat di isi dengan tiga widget sekaligus atau lebih dalam satu kotak atau kolom, yang mempunyai isi widget yang berbeda-beda dalam setiap tab menu. Sekilas tampilan tab view menu ini mirip dengan menu-menu yang lain, namun perbedaanya menu tab view ini yang sering di pasang pada sidebar blog dan mempunyai tampilan yang dinamis dan ringkas. Baca juga : Membuat menu slide info di blog      Agar sobat tidak bingung dan penasaran bagaimana tampilan dari menu tab view ini, disini saya buatkan LIVE DEMO nya secara langsung.      Cara pemasangan di blog sangatlah mudah, karena kita tidak perlu repot-repot lagi edit html dalam template blog yang mungkin bisa memakan banyak waktu dan kesulitan dalam pengeditan. menu tab ini nanti akan kita pasang di sidebar blog den

     Membuat tombol share blog dengan efek slide - Ok sobat blogger semua, dengan adanya tombol sosial media maka saya selalu berharap agar teman-teman blogger atau pembaca artikel blog ini dengan senang hati membagikan artikel-artikel yang ada di tutorwidget ini.      Sosial media memiliki peran aktif  pada sebuah web/situs, pada saat anda berkunjung pada sebuah situs pastinya sudah pernah melihat sosial media, dibagian atas atau dibagian bawah postingan atau diatas header. Sebuah artikel blog akan lebih berguna jika ada pengunjung dan pembaca artikel blog tersebut membagikannya ke media sosial yang mereka miliki dan dengan adanya artikel blog kita didalam sosial media maka akan membuat pengunjung blog akan bertambah. Baca juga : Membuat tombol share keren melayang di blog Karena dengan memasang sosia media pada blog dapat menaikan trafik sebuah blog. Karena mustahil anda bisa mendapatkan trafik yang besar jika hanya anda yang melakukannya. Kali ini akan saya share

     Membuat tombol share di blog - Tidaklah lengkap rasanya jika sebuah weblog tidak difasilitasi dengan button share, mengapa? Karena salah satu untuk membuat postingan artikel anda menjadi terkenal adalah dengan adanya tombol berbagi ke sosial media. Dengan begitu jika pembaca (pengunjung) merasakan manfaat dari artikel anda, mereka tidak akan sungkan untuk share ke temannya tentu saja ini akan menaikkan traffic web anda. Baca juga : Button share dengan efek slide button share juga merupakan komponen utama pendukung untuk mengoptimalkan halaman blog agar lebih seo Friendly. tentu sangat menguntungkan untuk membantu reputasi blog lebih populer dan di kenal banyak orang. Semakin banyak artikel yang di bagikan maka akan semakin besar pula kesempatan blog anda menjadi terkenal seiring bertambahnya pembaca setia. Ok, mungkin sobat tertarik untuk memasang tombol share seperti ini biar templatenya lebih kelihatan keren dan menarik. Sebelum Di Sorot Sesudah Di Sorot Bagi t

      Energy Saving Mode Dengan CSS - Seperti halnya sebuah layar komputer atau laptop ketika tidak digunakan atau dalam keadaan diam (stanby) maka akan muncul berupa gambar atau animasi seperti itu juga yang akan terjadi dengan blog anda, namun ini akan bekerja disaat cursor pointer diarahkan keluar dari area halaman web sobat. Baca juga :  Membuat pesan pembuka di blog Sobat blogger bisa menyesuiakan tampilan energi saving mode tersebut semenarik mungkin, mengenai masalah berat loading blog tidak perlu khawatir karena hanya menggunakan css (tanpa javasript). Bagaimana mau coba? Jika anda arahkan cursor keluar maka tampilan akan tertutup, lalu arahkan kembali cursor kedalam maka halaman pun terbuka.berikut penampilannya 1. Pastikan anda sudah login di blogger.com 2. Pilih Template 3. Klik Edit HTML 4.Cari kode  ]]></b:skin> setelah ketemu copypaste kode dibawah ini tepat diatas kode ]]></b:skin> body::before, body::after {   position:absolute;

     Membuat Gambar Berputar Dengan Efek Zoom - Berikut ini saya bagikan tutorial seputar blog yaitu tentang cara membuat efek zoom berputar pada gambar di postingan blog. Kegunaannya adalah untuk membuat tampilan blog kita menjadi kelihatan lebih keren, efek ini akan terlihat pada saat kursor mouse diarahkan pada gambar di postingan artikel kita. Baca juga : Cara Membuat Gambar Melayang di Sudut Blog Untuk Live demonya arahkan kursor mouse pada gambar dibawah ini. LIVE DEMO: Contoh 1 Contoh 2 Untuk membuat efek rotasi zoom tersebut ikuti Langkah-langkah yang tutorwidget berikan berikut ini dengan mudah: 1) Masuk ke dashboard blogger, cari Template >> Edit HTML. 2) Cari kode ]]></b:skin> atau </style> ( kalau kode </style> ada lebih dari 1 silahkan coba dimana yang cocok). saran saya diatas kode ]]></b:skin>. 3) CopyPastekan CSS di bawah ini tepat di atas ]]></b:skin> atau </style> #tutorwidget img{-mo

     Membuat Notifikasi Komentar Ala Google+ - Kali ini saya akan berbagi widget yang menurut tutorwidget cukup bagus dan keren untuk di pasang di blog sobat. dan memang sudah banyak yang menulis artikel tentang widget ini, akan tetapi akan saya ulas kembali.      Bagaimana cara membuat notifikasi ala Google Plus. Notifikasi ini mirip dengan notifikasi Google+ yang berbentuk lonceng di bagian atas. Notifikasi ini juga sudah saya tambah dengan scrool sehingga memungkinkan untuk menambah jumlah komentar yang ditampilkan dan juga akan mempermudah navigasi pengunjung ketika membaca semua komentar hanya dalam satu kali klik. Tentu saja ini akan sangat berguna bagi anda dan sekaligus juga akan memperbesar peluang dapat backlink internal serta mendapat komentar lebih banyak. Baca juga : Membuat Profil Blogger keren Seperti Google+ Seperti yang kita ketahui komentar sudah menjadi momok yang penting bagi sebuah blog, karena dengan semakin banyaknya komentar maka semakin banyak pul