Showing posts with label Write. Show all posts
Showing posts with label Write. Show all posts

Cara menampilkan foto profil/avatar komentar di blogger

Cara menampilkan foto profil/avatar komentar di blogger - selain gambar profil blogger, pemilik blog juga bisa menggantinya dengan gambar avatar pilihan sebagai identitas para komentator semisal komentar 'anonim'. Untuk sebagian template bisa dengan mudah menampilkan gambar profil yang memberikan komentar. Tapi ada juga yang mesti sedikit mengoprek template guna menampilkan foto profil komentar. Jika blog sobat termasuk demikian, simak tutorial di bawah ini.

1. Login ke blogger, setelah masuk klik pengaturan, lalu pilih pengaturan komentar.

2. Pada pilihan Tampilkan gambar profil dalam komentar? sobat pilih ya.

3. Lalu klik simpan setelan. Sampai ada keterangan Setting Telah Berhasil Disimpan. Dan lihat hasilnya, Silakan dicoba dengan menulis komentar dengan ID blogger sobat pada salah satu posting. apakah gambar/foto profilnya sudah muncul alias terlihat?

Jika terlihat, berarti cara menampilkan foto profil/avatar komentar di bloggercukup sampai disini. Sebaliknya, jika gambar profilnya masih belum muncul juga. Sobat perlu melakukan langkah tambahan sebagai berikut:

4. Masih dalam keadaan login. Klik rancangan, lanjut dengan mengklik Edit html.

5. Untuk mengantisipasi jika nanti terjadi kesalahan. Backup template dengan cara: klik link download template lengkap.

6. Setelah selesai, beri centang pada kombo disamping expand template widget

7. Selanjutnya cari kode:

]]></b:skin>

8. Setelah ketemu, tepat diatasnya taruh kode berikut:

#comments-block .avatar-image-container img {background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgfAPhvLtI0N1jwH1qEeDjOgeYZWTKfc0ONDRYzVdp5b6Z38TGcQUxNOTMulIZEV5LgvvixuV6WQAh4cKTJtQreOwda9l5hpioMbYtkpSuPTg26emEBeVI7CPpai36IUcsM4Ju5xVI2Cob/) no-repeat left top; width:35px;height:35px}

Pada teks berwarna merah adalah URL gambar avatar yang disimpan pada file hosting. Sobat bisa menggantinya dengan avatar pilihan sobat.

9. Lanjut dengan mecari kode:

<dl id='comments-block'>

10. Hapus kode tersebut lalu ganti dengan kode berikut:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>

11. Masih belum selesai, terakhir cari:

<a expr:name='data:comment.anchorName'/>

12. Lalu hapus dan ganti kode tersebut dengan
kode seperti dibawah ini:

<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

13. Selesai mengutak-atik kode diatas. Langkah terakhir Klik simpan template.

14. Jika berhasil, akan muncul keterangan perubahan anda telah disimpan 'lihat blog'.

Untuk melihat hasilnya. lakukanlah ujicoba dengan memberi/mengetik komentar pada salah satu postingan blog sobat dengan ID blogger (dalam keadaan login). Otomatis foto profil akun blogger sobat akan terlihat. Coba juga dengan ID anonim atauNAME/URL. Maka yang muncul adalah gambar avatar yang sudah ditentukan oleh sobat.

Nah, kurang lebih begitulah Cara menampilkan foto profil/avatar komentar di blogger. Seperti yang pernah saya lakukan pada template ini. Selamat mencoba!

Kata atau kalimat yang berkedip-kedip

Anda bingung ya dengan judul postingannya,maksudnya sebuah kalimat atau kata ataupun Link yang berkedip-kedip seperti lampu,dapat kita lihat pada beberapa Blog yang menggunakan kata atau kalimat yang berkedip -kedip atau berkelap - kelip (sama aja ya), misalnya seperti ini,(melq - nge taC-tiC-toL Blog) dari pengalaman saya hal itu sangat disukai para Blogger.


Disamping itu ada beberapa yang mengirimkan E-mail dengan topik yang sama yaitu cara membuat kata berkelap-kelip,saat itu aku langsung mengirimkan E-mail balasan cara membuatnya, tapi mungkin banyak diluar sana para Blogger yang mempunyai masalah yang sama,untuk itu saya posting masalah ini.


Mungkin buat yang belum tau akan sedikit bingungya gimana cara membuatnya ,ternyata tanpa disadari membuatnya sangat mudah buaaanget.yang hanya menambahkan sedikit kode HTML saja di kalimat yang mau kita kelap-kelipkan.



Berikut langkah-langkahnya

1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Page Elements

4. Klik Add a Page Element

5. Klik ADD TO BLOG pada menu HTML

Lalu copy kan kode berikut





Contohnya seperti ini
 Tulis disini kata atau kalimat yang ingin anda kelap-kelipkan



Note: Tulisan " Tulis disini kata atau kalimat yang ingin anda kelap-kelipkan " dapat gan gan ganti dengan tulisan gan sendiri ...
Gimana gampangkan gan

Oh ya, sekedar tambahan silakan baca artikel saya yang satu ini pasti gan gan tertarik tuk buatnya !!
¿¿¿ıuı ıʇɹǝdǝs nɐɯ ¡¡¡¡ ıuısıp ʞılʞ

selamat berkarya ^_^



Membuat Drop Cap(tulisan bergaya Koran)

Apakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa pada postingan di blog?apakah bisa dilakukan!tentu saja hal tersebut bisa dilakukan,lagi pula membuat Drop cap di blog juga cukup mudah yaitu dengan menambahkan Style CSS pada halaman Edit HTML .

Berikut langkah-langkahnya:


1. Login di blogger dengan ID anda

2. Klik menu Layout

3. Klik Tab Edit HTML

4. Pada kotak Edit HTML paste kan kode berikut persis di atas kode ]]></b:skin>

[ingat! setiap kali gan gan mau copas, copasnya pake CTRL C ya ^_^]

6.jika anda ingin memakai/memasangkan drop cap pada postingan,maka diawal anda harus mengetikan: <span class="awal">hurup awal </span>Contohnya seperti ini:



Maka hasilnya akan seperti ini:
Apakah anda tau dengan Drop cap,jika anda lihat di Microsoft Word,di MS Word ada sebuah fasilitas yang bisa digunakan untukmembuat huruf besar di awal kalimat,yaitu Drop cap.efek Drop cap dapat dijadikan sebagai salah satu alternatif agar postingan pada blog anda terlihat lebih menarik dan bergaya seperti majalah atau koran.seperti pada postingan ini huruf A diawal kalimat lebih besar dibandingkan huruf yang lainnya,lalu bagaimanajika kita ingin menerapkan hal serupa
A=adalah huruf besar yang ditampilkan pada awal kalimat,ganti sesuai hurufnya.

Ok, Selamat Berkreasi!!!
^_^

Membuat Kotak Blogroll

Anda pasti tau dengan Link,itu sebuah kata kunci yang menghubungkan Blog kita dengan Blog yang lain,tapi apa jadi nya ya kalau link itu udah berjumlah jutaan, mampusdeh , tentu link tersebut lebih mendominasi blog kita,jadi nya pengunjung blog hanya melihat kumpulan link-link tersebut yang mungkin panjangnya kayak gedung pencakat langit,hal ini dapat menyebabkan blog kita melorot, trus gimana dong trik untuk mengakalinya,
Tenang saja kali ini aku akan ngejelasin trik untuk menangkalnya

Untuk trik kali ini ada empat macam kotak blogroll yang akan kita buat,jadi terserah kamu mau pilih kotak Bloroll yang mana:
1. Kotak Blogroll Model Textarea

Contohnya saja seperti kotak blogroll seperti punyaku itu, itu yang terdapa ribuan link didalamnya
Nah begini cara membuatnya :
Pertama Log in ke accunt blogger mu lalu Pasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)








keterangan:
- Kode widht: 300px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kamu dapat merubahnya dan menyesuaikanya dengan ukuran yg kamu suka.
- Trus ganti tulisan "#link1,#link2, #link3, #link4 dst" dengan daftar link-link kamu, - Jika kamu pingin daftar link-linknya berjajar, maka kamu hilangkan saja kode


2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar. Link-link atau isi didalam kotak ini akan bergerak/berjalan, secara vertikal ataupun secara horizontal.
Jika kamu ingin membuatnya begini caranya membuatnya:
Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)


Keterangan :
- Kode "up" menunjukan arah pergerakan, kamu bisa menggantinya dengan yang lain seperti down, left, right - Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode
.
- Angka "300" menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll mu.

3. Kotak Blogroll Model Abjact

Akusih ngak tau Model kotak Blogroll nya(aku kasih aja Model Abjact,maaf ya) soal nya Link-link yang terdapat di kotak di ini disusun berurutan abjat(A-Z).tentu ini akan mempermudah pencarian terhadap suatu link,kamu ngak sabar ya ingin membuatnya Oke deh gini cara membuatnya

Pertama masuk dulu ke Dashboard mu lalu kamu hanya tinggal memasang code berikut ini di kedalam Page element kamu (Page Elements --> Add a Gadget --> HTML /Javascript)

4. Kotak Blogroll Model Dropdown

Anda semua pasti telah tau dengan dropdown,tapi kalau belum tau,mari kita belajar lagi, ada salah satu fasilitas blogger yang menggunakan menu dropdown(Archive),yaitu menu yang berjajar dari atas ke bawah,cara ini tentu lebih menguntungkan,karna seberapa banyakpun link dapat ditampung dalam menu dropdown ini,dan tidak memakan tempat yang besar pada blog anda

Udah, kita tidak usah basa-basi lagi, sekarang bagaimana membuat menu dropdown yang didalamnya terdapat link-link,untuk membuatnya silahkan aja copy code dibawah ini



OK SELAMAT MENCOBA......

Menambahkan Tombol Bookmarking pada Postingan



  Dapat anda lihat pada setiap Postingan Blog ini pasti terdapat tombol Bookmarking, caranya sih sangat mudah,jadi pada Trik kali ini,kita akan membuat tombol Bookmarking baiklah tidah usah basa-basi kita langsung saja.

Sebenarnya untuk menanbahkan social bookmarking pada setiap posringan caranya

cukup mudah.Namun sebelumnya anda harus mendaftar terlebih dahulu pada layanan social bookmarking,yaitu adthis.com berikut langkah-langkahnya

1.Masuk ke situs www.addthis.com terlebih dahulu atau klik aja disini
2.Pada halaman Account,isikan data-data lengkap anda pada Create a free account
3.Lalu klik Create Account.
4.Maka akan ditampilkan halaman Create account,lalu anda klik pada Link Get your
Button Code
5.Lalu akan ditampilkan halaman Get Your Button
• What Kind of Button?: Pilih Sharing/Bookmarking button
• Which look : Pilih Bookmark
• Where do you : Pilih on a Blog
• Want to Put the button: Pilih Blogger

6.Kemudian klik Get Your Free Button
7.Pada bagian bawah ditampilkan kode untuk Bookmark.Anda copy kode tersebut
8.SIGN IN ke Blogger.com
9.Jika telah masuk ke halaman Dashboard,klik Link Layout,lalu pilih Edit HTML
10.Berikan tanda ceklist pada opsi Expand Widget Templates,lalu pada kode HTML
carilah kode berikut in.






11.Jika sudah menemukannya,paste kan kode bookmarking di bawah kode tersebut

Sehingga susunannya akan menjadi seperti ini:



12.Jika sudah klik SAVE TEMPLATE
13.Akses blog anda dan bias dilihat bahwa pada seiap Postingan telah ditambahkan
tombol Social Bookmarking

OK Selamat mencoba
 
^_^



Membuat Tulisan terbalik

Apakah anda pernah melihat dengan tulisan terbalik,jika dilihat sekilas emang cukup menarik,membacanya pun sampe nungging2 biar kelihatan.biar seru kita juga bisa membuat tulisan terbalik ini pada blog kita.gimana caranya yach,contohnya seperti ini:
^˙˙˙ǝɥ ǝɥ ǝɥ˙˙˙^ ƃuıƃƃunu-ƃuıƃƃunu ıɐdɯɐs uɐƃuɐɾ ɐɔɐqɯǝɯ uıƃuı ƃuɐʎ ıƃɐq

Untuk membuatnya sangat mudah saat ini sudah banyak tool onlone yang gratis yang bisa digunakan untuk membuat tulisan tersebut mari kita bahas satu-persatu.

www.fliptextgenerator.com

Dengan menggunakan tool dari http://www.fliptextgenerator.com anda bisa membuat tulisan terbalik dengan mudah,berikut cara buatnya:

1.Kunjungi situs http://www.fliptextgenerator.com atau klik disini

2.Buat tulisan yang ingin dibalikan pada kotak dibawah tulisan Original text (type here):

3.Secara otomatis tulisan yang sudah anda buat tadi dibalikan pada kotak Flipped text

4.Copy tulisan tersebut pada blog anda

5.Selesai

http://www.techdo.com

1.Kunjungi situs http://www.techdo.com atau klik disini

2.Buat tulisan yang ingin dibalikan pada kotak dibawah Original

3.Lalu tekan tombol Flip Text

4.Copy tulisan tersebut pada blog anda

5.Selesai

Gimana mudahkan selain itu anda juga bisa meng-kreasikanya seperti ditebalkan,miring dan lainya

contohnya seperti ini:
^˙˙˙ǝɥ ǝɥ ǝɥ˙˙˙^ ƃuıƃƃunu-ƃuıƃƃunu ıɐdɯɐs uɐƃuɐɾ ɐɔɐqɯǝɯ uıƃuı ƃuɐʎ ıƃɐq

Membuat Teks Area(+Highlight)

Sobat semua pasti tau dengan Teks Area kan,masa hari gini ngak tahu ama teks area, ituloh kotak yang didalamnya berisi kode teks atau tulisan,biasanya teks area ini digunakan untuk menyimpan kode2 HTML agar bisa dicopy oleh para pengunjung yang biasanya digunakan untuk tukeran link dengan Blogger lainnya

Untuk lebih memudahkan Anda memahami apa itu Teks Area,silahkan anda perhatikan kotak di sebelah kanan bawah layar anda,ada kotak yang berisi kode-kode HTML nah itulah yang disebut kotak Teks Area.

Untuk membuat Teks Area sangat mudah,silahkan anda copy kode dibawah ini
<p align="center"><textarea name="code" rows="6" cols="20"> Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>
contohnya seperti ini

Keterangan : rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6 tadi dengan angka yang lebih tinggi nilainya.

Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya.

Teks Area yang memakai Tombol Highlight

Selain cara diatas ada Variasi lain untuk membuat Teks Area yaitu Teks Area yang menggunakan tombol Highlight.tombol Highlight ini mempunyai peran tertentu,yaitu dengan adanya Tombol Highlight akan memudahkan pengunjung untuk mengcopy kode-kode yang diberikan,Fasilitas ini sangat berguna apabila kode yang diberikan jumlahnya banyak,dan dengan cara ini akan mengurangi resiko adanya kode yang tertinggal,karna dengan sekali tekan saja semua kode yang didalamnya akan di Highlight dan tinggal mengcopy saja, Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah :

<div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, tulisan ini akan muncul dalam kotak Highlight dan siap di copy oleh para pengunjung</textarea></p></div></form>

Contohnya sebagai berikut:



Ohya kode yang dimunculkan dalam kotak Highlight diatas adalah kode unyuk membuat Recents Coment,pada tulisan http://melq-nge.blogspot.com/ isi dengan alamat blog sobat.

Text Effects Marquee Alpha

Langsung aja nih Contoh demonya..



Contoh isi dari text yang harus kamu ganti,Apakah Anda pernah secara tidak sengaja menghapus file Anda, kemudian sudah meng-empty recycle bin? Atau Anda telah mem-format hard disk tapi ingin data Anda kembali? Atau data hilang / rusak karena virus? Atau karena komputer mati atau restart tiba-tiba? Ada cara untuk mengembalikan data yang hilang, yaitu dengan satu software yang sangat lengkap, yaitu Ontrack EasyRecovery Professional. Inilah cara-cara mengembalikan data Anda yang hilang .
Pertama Anda harus download dulu software tersebut, silakan klik di sini untuk download software Ontrack Easy Recovery Professional. Software ini menyediakan sebuah solusi yang sangat komplit sehubungan dengan data yang hilang atau urusan recovery data yang hilang karena.



Gimana..??
Lumayan bukan..!!!
Pertama-tama sign in di blogger Lalu,melq cari Dasbord --> Element Laman --> Tambah Gadget --> HTML/JavaScript
copy semua code di bawah ini dengan menekan CTRL C dan Paste-kan di HTML/JavaScript

<marquee direction="down" scrollamount="5" scrolldelay="0" style="filter: Alpha(Opacity=100, FinishOpacity=5, Style=1, StartX=0, StartY=45, FinishX=0, FinishY=0); font-weight: bold; height: 250px; overflow: hidden; text-align: center; width: 155px;">

Isi dengan postingan/text yang melq mau.
</marquee>

Untuk "Down" adalah untuk arah gerakan ke bawah bila melq ingin arah ke atas ganti aja dengan "Up" dan untuk angka 5 adalah pergerakan atau kecepatan,dan yang terakhir adalah angka 250px untuk ukuran tinggi dan 155px untuk ukuran lebar,UpsSS hampir lupa yg jelas berwarna Merah adalah isi dari postingan melq..Ok sekian dulu Tips-Trik dari saya,saya udah capek nih..
Dan settingan yang lainnya silahkan melq pikir sendiri hehehe


Original from http://joesetapart.blogspot.com/2011/06/text-effects-marquee-alpha.html#ixzz1f5YwEfUL
Created design by : Blog Acak-Acakan
Under Creative Commons License: Attribution Non-Commercial

Membuat ReadMore di Blog






Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.



Cara membuat readmore otomatis.
(1)



membuat read more baca selengkapnya otomatis.
(2)



otomatis read more.
(3)


Selanjutnya,cari kode </head>,setelah ketemu tepat dibawahnya letakkan kode javascript berikut:

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/read-moreotomatis.js' type='text/javascript'/>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Setelah itu untuk Cara 1.Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'><img alt='Read More..' src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>


Sedangkan untuk Cara 2.Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p>
tersebut dan gantilah dengan kode berikut:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='rmlink' style='float:right;padding-top:20px;'>
<a expr:href='data:post.url'>[ Read More.. ]</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/><br/><p align='right'>
<strong><a href='http://pelajaran-blog.blogspot.com/?cx=partner-pub-7754036656352309%3Aryy79g3xuqq&amp;cof=FORID%3A10&amp;ie=ISO-8859-1&amp;q=toko+online&amp;sa=Search#944'>| <em>Free Bussines?</em> |</a></strong></p></b:if>


Lalu simpan templates dan lihat hasilnya.
Untuk yang terlanjur menggunakan read more secara manual seperti di sini,tinggal hapus kode:

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya...</strong></a></p>
</b:if>













 NB:
Tulisan yang bewarna merah bisa gan ganti dengan "text gan sendiri"..
Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara 2.Semoga berhasil dan selamat ngutak-atik template ya Membuat Read More Otomatis / Auto ReadMore di Blogger Selesai.

Search