Berbagi Informasi Bisnis, Berita, Tips & Trik, dll: Widget Profile

Tampilkan postingan dengan label Widget Profile. Tampilkan semua postingan

Add an Audio or Video Clip to a Blogger Profile

Banyak tutorial tentang cara menambahkan audio clip di Profil Blogger, tetapi sayang kebanyakan hanya bo'ong2an. Tutorial yang diberikan terlalu amat sangat pendek (singkat) dan sama sekali tak menyentuh tema yang mereka angkat. Kebiasaan buruk yang sebenarnya tak lebih dari "tipuan busuk yang membuat muak pengunjung blog". Yang lebih menyedihkan lagi adalah para plagiator yang tak ubahnya "kera pengekor" yang dengan "menyengir penuh liur menetes" dengan santainya copy paste sekalipun tutorial blogger yang dicopy hanyalah "bualan pemalas haus popularitas". Memang sebenarnyalah penambahan audio clip ini adalah bagian yang "agak gelap" bagi pengguna karena blogger sendiri tak memberikan keterangan detail tentang ini.

Menambahkan musik pada profil blogger sebenarnya tak hanya dibatasi dalam bentuk audio clip saja. Anda dapat uload juga clip musik berupa video. URL yang kita gunakan juga bukan url yang hanya berisi file audio/video biasa seperti http://audio.mp3 atau http://video.mov. File ini berupa file audio/video lengkap berikut playernya. Ada cara termudah untuk membuat atau mendapatkannya. Ambil saja sebuah link audio/video dari Youtube, Vimeo atau lainnya. Jika anda ingin file pribadi yang digunakan, silahkan upload terlebih dahulu di Youtube, misalnya.

Cara menambahkan clip Video atau Audio di Profil

Klik: Perbesar gambar

Sebelum melakukan proses upload di profil blogger lakukan:

Buat sebuah file audio atau video.
Buat file audio atau video kebentuk klip dengan menambahkan pada player. Anda bisa juga lakukan dengan cara upload file audio atau video tersebut dan dapatkan URL-nya melalui kode embed.
Contoh URL dari Youtube:
http://www.youtube.com/embed/CdXesX6mYUE

Cara menambahkan URL audio/video clip di halaman Profil Blogger

Klik: Perbesar gambar

Setelah anda punya URL audio/video klip yang siap untuk dipergunakan, lanjutkan dengan langkah berikut:

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Edit Profile.
Halaman Edit Profil User » Klip Audio .
- Copy URL klip audio atau video yang sudah dipersiapkan sebelumnya.
- URL Klip Audio » Paste URL klip audio video dalam box yang tersedia.
Klik Simpan Profil (Save Profile).
Klik Lihat Profil yang Telah Diperbarui (View Updated Profile).

21.39 | 0 komentar | Read More

Trick Membuat Scroll Box Widget Recent Comment Blogger Plugins

Scroll Box Widget Recent Comment

Menggunakan widget recent comment blogger plugins memberi maanfaat tersendiri bagi blogger karena bisa memonitor secara cepat komentar yang diterima tanpa harus login terlebih dahulu. Hanya satu yang agak merepotkan bagi widget ini. Teks ataupun linknya tak dapat di atur (ukuran font, warna, tebal dll) agar lebih padu (seragam) dengan bentuk font yang dipergunakan di keseluruhan blog hingga tampilannya terlihat berbeda dan terus terang saja terasa sedikit mengganggu. Ada sebuah solusi untuk membuat widget recent comment ini sedikit tersamarkan dan sekaligus membuatnya lebih rapi dan mudah ditata. Tempatkan saja dalam scroll box.

Untuk membuat scroll box bagi widget recent comment kita tak mungkin melakukannya tanpa melakukan penambahan kode html pada bagian body. Perubahan atau penambahan inipun harus melalui Expand Widget Template. Agar lebih cepat dan lebih aman membuatnya, silahkan ikuti panduan berikut.

Panduan membuat scroll box recent comment

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML
Backup Template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Beri nama dan simpan file template di folder PC. File ini akan berguna ketika anda mengalami kegagalan saat modifikasi yang mengakibatkan kerusakan desain blog. Untuk memulihkan ke kondisi sebelum modifikasi lakukan klik Browse kemudian Upload.
Klik Expand Widget Template.
Cari kode <b:widget id='Gadget1' locked='false' title='Recent Comments' atau title='Recent Comments'. Gunakan Ctrl + F untuk lebih mempercepat pencarian kode.

Di sekitar kode <b:widget id='Gadget1' locked='false' title='Recent Comments' .... akan dijumpai kode lain yang seperti di bawah ini:

Kode HTMl Recent Comment default Blogger:

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'><data:gadgetSnippet/>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Ganti kode dengan kode berikut:

Kode HTMl Recent Comment Baru:

<b:widget id='Gadget1' locked='false' title='Recent Comments' type='Gadget'>
<b:includable id='main'>  
  <!-- only display title if it's non-empty -->
  <b:if cond='data:renderingUrl != ""'>
    <b:if cond='data:title != ""'>
      <h2 class='title'><data:title/></h2>
    </b:if>
    <b:if cond='data:gadgetSnippet != ""'>
<div style='max-height:200px;overflow:auto;'><data:gadgetSnippet/></div>
    <b:else/>
      <div class='widget-content'>
        <b:if cond='data:nonSocialFragment != ""'>
          <data:nonSocialFragment/>
        </b:if>
      </div>
    </b:if>
  <b:else/>
    <data:errorMessage/>
  </b:if>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Klik Simpan Template (Save Template).
Buka blog untuk melihat tampilan baru widget recent comment anda!

Catatan/Keterangan:

Untuk mengatur tinggi scroll box rubah nilai max-height:200px;.
Semakin besar akan semakin tinggi dan sebaliknya semakin kecil akan semakin pendek.
Dengan penambahan elemen DIV baru tersebut anda punya kesempatan untuk membuat beberapa modifikasi baru melalui kode CSS hanya dengan "menempelkan sebuah class atau id.

19.48 | 0 komentar | Read More

Trick Merubah Ukuran Image Profile Blogger

Tips & trick blogger ini berkaitan dengan widget profile blogger. Dalam widget ini, image yang digunakan berukuran maksimal 80px (width) x 80px (height). Jika anda mengupload image dengan ukuran antara width dan height tak sama maka secara otomatis salah satu sisi yang lain (width atau height) di set pada ukuran 80px sedang bagian yang lain menyesuaikan dengan skala image yang diupload. Sebagai contoh, jika misalnya anda upload image berukuran 400px (width) dan 300px (height) maka image profile akan berukuran 80px (width) dan 60px (height). Angka 80px:60px akan sebanding dengan 400px:300px.

Standar ukuran image profile tersebut bukanlah angka mati karena dengan hanya menggunakan kode CSS anda dapat merubahnya dalam berbagai ukuran sekehendak hati. Bahkan, dengan penambahan kode css pengatur height dan width image profile, angka perbandingan (skala) yang berlaku tersebut dapat kita rubah sesuka hati. Di bawah ini disertakan beberapa contoh perubahan ukuran image profile. Silahkan klik pada setiap image agar ditampilkan dalam ukuran sesungguhnya!.

Ukuran standart (default).
Ukuran image profile diperkecil.
Ukuran image profile diperbesar dengan ukuran sedang.
Ukuran image profile diperbesar dengan ukuran maksimal atau selebar box/kolom widget.

Kode CSS perubah ukuran image profile

Kode CSS dibawah ini akan merubah ukuran image profile dengan skala sesuai image yang digunakan sebagai image profil.

Kode CSS

.profile-img{
       width:20% !important;
       height:auto !important;
}

Cara menggunkan kode

Login ke Blogger.
Halaman Dasbor (Dasboard).
Klik Rancangan (Design).
Klik Edit HTML
Backup Template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Beri nama dan simpan file template di folder PC.
Cari kode ]]></b:skin>
Copy dan paste-kan kode CSS di atas ]]></b:skin>
Klik Simpan Template (Save Template).
Buka blog untuk melihat hasil perubahan ukuran image profile.

Catatan/Keterangan:

Lakukan perubahan pada nilai 20% untuk mendapatkan ukuran yang dikehendaki.
Nilai 100% dipergunakan untuk memperoleh ukuran terbesar hingga lebar image sebesar lebar box/kolom widget profil.
Semakin nilai diperkecil maka lebar dan tinggi image akan semakin kecil.

Kode CSS untuk merubah ukuran tanpa skala

Dengan kode CSS ini anda dapat merubah ukuran image tanpa harus mendasarkan pada perbandingan (skala) image yang telah diupload. Tentu saja perubahan tanpa skala perbandingan yang standar akan membuat image terlihat lonjong (melebar atau meninggi), hingga bisa terjadi bila image berupa gambar utuh satu tubuh maka akan terlihat menjadi cebol atau terlalu jangkung.

Kode CSS

.profile-img{
       width:20% !important;
       height:100px !important;
}

Catatan:

Lakukan perubahan pada nilai 20% dan 100pxuntuk mendapatkan ukuran yang dikehendaki.
Semakin besar nilai maka akan semakin lebar dan semakin tinggi.

11.46 | 0 komentar | Read More

Tips & Cara Pasang Photo - Image Blogger Profile

Klik image untuk memperbesar!

Mungkin saja di antara anda ada yang belum memasang image profile blogger sebagai kelengkapan widget profile. Meskipun aku kira semua blogger sudah mengetahui cara untuk menampilkan image profile ini, namun ada beberapa hal kecil seputar image profile perlu anda diketahui. Dibawah ini beberapa di antaranya:

Image profile blogger berukuran maksimal 80px (width) x 80px (height). Dengan mengetahui ukuran ini anda bisa memperkirakan bagimana dan dengan ukuran seberapa image profile yang akan digunakan.
Image profile dapat diupload melalui halaman dasboard dengan ukuran tidak dibatasi. Blogger secara otomatis akan memperkecil image dengan ukuran height maksimal 80px (dengan width=auto) atau width 80px (dengan height=auto) sesuai dengan perbandingan ukuran width dan height image yang diupload.
File image yang bisa dan umumnya dipergunakan adalah gif, jpg dan png. Jiika image atau photo yang akan dipasang menggunakan banyak warna sebaiknya pakai file berekstensi .jpg karena bebannya akan lebih kecil (enteng) jika dibandingkan .gif atau .png .
Image profile dapat dirubah ukurannya (diperkecil atau diperbesar) sesuka hati melalui kode CSS atau kode HTML.
Denagn menggunakan kode CSS dan html sebuah Image profile dapat dimodifikasi hingga mempunyai tampilan berbeda dari image profile blogger pada umumnya. Kesempatan melakukan modifikasi ini memberi peluang blogger untuk dapat memperindah blog melalui berbagai modifikasi pada image profile.

Mempertimbangkan kegunaan utamanya sebagai sebuah widget yang berfungsi sebagai media informasi tentang identitas diri pemilik blog serta melihat peluang yang dapat dimanfaatkan untuk memperindah blog, seperti yang tersampaikan di atas, akan lebih baik kiranya jika setiap blogger menggunakan widget ini. Bagi anda yang belum menampilkan image profile di blogger dan punya keinginan untuk segera memasang, silahkan ikuti panduan di bawah ini;

Cara Upload Image Blogger Profile

Login ke Blogger. Gunakan alamat email atau user name (untuk gmail) dan password.
Halaman Dasbor (Dasboard).
Pilih dan klik Edit Profil atau Edit Photo.
Halaman Edit Profil User | Foto Profil.
- Setelah halaman Edit Profil User terbuka, cari "Foto Profile".
- Upload Image profile. Jika image berasal dari PC anda, pilih dan klik "Dari komputer anda", kemudian lanjutkan klik "Browse".
- Pilih dan tentukan image yang akan digunakan sebagai image profile.
- Klik Open. Tunggu sampai proses upload selesai
Jika ingin menambahkan teks pada profile anda, tuliskan beberapa hal yang berkaiatan pribadi anda atau hal yang lain pada box "Pendahuluan".
Klik Simpan profile.
Untuk kembali ke halaman dasbor, hapus sebagian alamat (URL) pada address bar (http://www.blogger.com/edit-profile.g?saved=true) dan sisakan http://www.blogger.com/. Klik "Enter".
Selesai dan anda sudah kembali di halaman dasbor.
Buka blog untuk melihat profil anda.

Catatan/Keterangan

Jika anda ingin sesuatu yang berbeda pada widget profile, silahkan buka panduan di bawah ini:
Menampilkan 2 photo di Widget Profile Blogger

06.11 | 0 komentar | Read More

Menampilkan Dua Image (Photo) di Widget Profile

Image profile blogger yang ditampilkan dalam widget Profile Blogger Plugin tak lebih dari sebuah thumbnail berukuran kecil berkisar 100px (width). Melalui trik yang dibuat menggunakan kode css setiap blogger dapat menampilkan gambar (image) profile dengan ukuran yang jauh lebih besar. Agar image blogger profile yang berukuran besar ditampilkan lebih atraktif, kode css3 transition dan opacity telah ditambahkan sehingga hover menciptakan sebuah transisi yang disertai fade efek. Jika pada demo di bawah yang ditampilkan bukan sebuah bentuk image profile blogger, ini hanyalah sekedar improvisasi untuk membuat pengunjung tak bosan sekaligus sebagai sebuah informasi bahwa anda tak harus menggunakan image yang sama dengan image profile yang digunakan dalam widget. Gunakan trik ini untuk menampilkan gambar/image sesuka hati anda. Ya..., mo gambar onta, boleh..., mo, gambar kambing, boleh... atau mungkin foto anda yang lagi "e'ok" juga boleh-boleh saja. Pokoknya suka-suka anda, dah!

D e m o

Kode CSS

.widget-content .dapurku{
       position:absolute;
       display:block;
       z-index:0;
       left:0;
       top:0;  /* orignal code by: gubhugreyot - http://gubhugreyot-demo-tutorial-blogger-1.blogspot.com */ 
       width:0;
       height:0;
       padding:4px;
       border:2px solid #eee;
       opacity:0;
       filter:alpha(opacity=0);
       border-radius:10px;
       box-shadow:0 0 8px #000;
       background-size:0 0;
       transition:1s;-o-transition:1s;
       -moz-transition:1s;
       -webkit-transition:1s;
       -ms-transition:1s;
}
.widget-content:hover .dapurku{
       z-index:9999;
       top:-200px;
       opacity:1.0;
       filter:alpha(opacity=100);
       background:red url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-49ZWZL7eUn_Tj4wIlJ0Vs9_lcQGx1AwUdoqjGxn1nlPBU8QPsquFvkl7ddBS5XTQ9vjnMz9052pBRuRWM_Bt5ncyFeVyTwTI0IHYAjDfJ0s6XOUk8S5ZtB5BpaGs-wXC7FfOPax8OQxF/s400/img_gubhugreyot-gadisku-004.jpg") center center no-repeat; 
       width:220px;
       height:320px;
       background-size:200px auto;
}

Cara menampilkan 2 Photo Blogger

Login ke Blogger.
Halaman Dasbor (Dasboard).
Pilih dan Klik Rancangan (Design).
Pilih dan klik Edit HTML.
Lakukan backup template dengan cara:
- Klik Download Template Lengkap (Download Full Template).
- Simpan file template di folder PC.
- Berikan nama untuk memudahkan anda saat ingin digunakan kembali. File yang sudah tersimpan ini dapat digunakan untuk mengembalikan template kembali ke keadaan awal (sebelum prubahan atau penambahan kode htl bar) dengan cara klik Browse (Upload sebuah template dari sebuah file pada hard drive Anda) dilanjutkan "Unggah (Upload)'.
Klik Expand Widget Template.
Cari kode ]]></b:skin>.
Copy dan paste-kan kode CSS tepat di atas kode ]]></b:skin>.
Cari kode <b:widget id='Profile1'. Di bawah kode tersebut terdapat kode :
<div class='widget-content'>.
Ganti kode <div class='widget-content'> dengan Kode HTML Baru di bawah.
Klik Simpan Template (Save Template).
Buka blog untuk melihat hasilnya.

Kode HTML Baru

<div class='widget-content'>
<div class='dapurku'/>

Catatan/Keterangan:

Ganti image yang digunakan pada background di kode CSS (berwarna merah) dengan image lain sesuai apa yang ingin ditampilkan pada widget profile.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-49ZWZL7eUn_Tj4wIlJ0Vs9_lcQGx1AwUdoqjGxn1nlPBU8QPsquFvkl7ddBS5XTQ9vjnMz9052pBRuRWM_Bt5ncyFeVyTwTI0IHYAjDfJ0s6XOUk8S5ZtB5BpaGs-wXC7FfOPax8OQxF/s400/img_gubhugreyot-gadisku-004.jpg

07.57 | 0 komentar | Read More

Berbagi Informasi Bisnis, Berita, Tips & Trik, dll

Add an Audio or Video Clip to a Blogger Profile

Trick Membuat Scroll Box Widget Recent Comment Blogger Plugins

Kode HTMl Recent Comment default Blogger:

Kode HTMl Recent Comment Baru:

Trick Merubah Ukuran Image Profile Blogger

Kode CSS

Kode CSS

Tips & Cara Pasang Photo - Image Blogger Profile

Klik image untuk memperbesar!

Menampilkan Dua Image (Photo) di Widget Profile

D e m o

About Me

Kode CSS

Kode HTML Baru

Adsense Black Magic

Label

Popular Posts Today