Cara Membuat News Update Otomatis

Saya akan memposting kembali artikel tentang Widget Blogger. Trik yang akan kita bahas adalah Cara Membuat News Update Otomatis. Widget ini dapat membantu pengunjung melihat artikel terbaru dari blgo yang ia buka. Dibawah adalah contohnya :

Jika anda suka dan ingin memasangnya diblog anda, ikuti saja langkah-langkah berikut :

Instalisasi :
1. Masuk ke blogger
2. Pilih Tata Letak
3. Add Widget
4. Pilih HTML/Javascript
5. Copy-paste kode berikut

<script type="text/javascript"> var hn_url_blog = "http://johannezalbert.blogspot.com"; var hn_jumlah_post = 10; var hn_warna_latar = "#81DAF5"; var hn_warna_garis = "#000000"; var hn_posisi = "top"; var hn_tampilkan_judul = false;var hn_backlink = false;</script><script src="http://copycat91.googlecode.com/svn/trunk/headlinenews.js"></script>

Customize :

• 1. Ganti kode http://johannezalbert.blogspot.com dengan : Url blog anda
• 2. Ganti kode 10 dengan : Jumlah News Update yang ingin ditampilkan
• 3. Ganti kode #81DAF5 dengan : Warna yang ingin anda jadikan bacground
• 4. Ganti kode #000000 dengan : Warna border
• 5. Ganti kode top dengan : bottom jika posisi yang anda inginkan dibawah, jangan ganti jika ingin posisinya diatas.

6. Save/Simpan Perubahan
7. Lihat Hasilnya.

Silahkan beri komentar anda bila anda sudah pasang widget ini.

Happy Blogging

Cara Membuat Instal Widget Otomatis

Seperti biasa, saya akan memposting ulang trik-trik untuk blogger. Kali ini saya aka memposting ulang mengenai Cara Membuat Instal Widget Otomatis. Munurut saya, widget ini adalah widget yang bagus dan praktis. Mengapa saya bilang begitu, jika kita biasanya ingin menginstal widget dengan cara copy-paste kodenya, sekarang anda tidak perlu repot-repot karena anda dengan mudah menginstal widget dengan hanya mengklik tombolnya saja. Jadi, jika anda ingin membuat pengunjung anda senang dan merasa diberi pelayanan yang menarik, tidak usah berpikir panjang untuk memasangnya diblog anda. Berikut adalah penjelasannya :

Contoh :

<img src="http://img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 100px; width: 100px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" />

Dari contoh tersebut, saya pasang kode widget yang berisi animasi twitter follow button, yang anda bisa lihat disini.



Cara Instalisasi :

Masuk ke Blogger
Buka halaman New Entri
Letakkan kode berikut di Mode HTML

Jika sudah, letakkan kode berikut ini :

<form action="http://beta.blogger.com/add-widget" target="_blank" method="post"><input value="# 1" name="widget.title" type="hidden"><textarea rows="3" cols="5" style="display: none;" name="widget.content"># 2</textarea><input value="# 3" class="button" name="go" type="submit"></form>

Customize :

• Hapus kode # 1 dengan : Judul Widget yang ingin di Instal
• Hapus kode # 2 dengan : Kode dari Widget yang ingin di Instal
• Hapus kode # 3 dengan : Kalimat yang berada pada tombol Instal

Perhatian !!!

• Widget ini cocok untuk blog yang memposting artikel tentang Widget
• Tidak cocok untuk blog yang memposting artikel tentang Information, News, dan lain sebagainya

Happy Blogging

Cara Membuat Pesan di Gambar

Jika kemarin saya berbagi tentang Trik Membuat Latar belakang / Background pada Artikel, hari ini saya akan mereshare Trick Membuat Pesan di Gambar yang tidak kalah menarik untuk mempercantik tampilan blog kita, agar pengunjung tidak bosan dengan blog kita.Jangan ada kata bosan untuk mempercantik blog anda. Trik ini berupa Pesan yang akan muncul ketika kita mengklik gambar. Pesan yang akan muncul bisa berupa keterangan dari gambar, sinopsis, atau pesan-pesan lainnya. Pesan tersebut bisa anda ubah sendiri dengan kalimat yang anda ingin pasang di gambar itu. Agar anda tidak kebingungan dengan trik yang saya maksud,  dibawah ini adalah contoh gambar yg saya maksud :

:-Klik gambar ini jika ingin melihat contohnya-:

Jika anda tertarik dan ingin menerapkannya di blog anda, anda tinggal mengikuti langkah-langkah du bawah ini :
1. Upload gambar yang ingin dipasang.
2. Peroleh Image Link nya.
4.Copy-paste kode ini di Mode HTML, saat membuat artikel baru.

<img  onclick="alert('Novelyn :* :D')" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXjQl90Gk8rjT9b2aVOXXjUncM-L6-BprhuRYQt2o7xGJSgKaZihsxCoL-FEpLMc-N9Sx-C3OFUrlY57oeYhd26hczjiblRCYwuxrO0mURfLR-GmLPFMt8kyQeEIzUTMZ3SiB_1O-vyZhu/s320/tvxq1.jpg"  />

Keterangan:

• Kode yang berwarna merah : Pesan yang ingin di tampilkan.
• Kodeyang berwarna biru : Url/link dari gambar

 5. Jika sudah, pratinjau dulu artikel itu.Atau jika memang tidak ada masalah, anda bisa langsung mempublikasikan artikel tersebut.

Good Luck

Trik Membuat Latar belakang / Background pada Artikel

     Sudah banyak cara untuk memperindah/mempercantik tampilan blog, contohnya adalah artikel artikel yang sudah saya share sebelumnya. Seperti biasa, kali ini saya akan ngeshare trik tentang mempercantik blog, tapi bukan seperti sebelumnya, melainkan Cara Memasang Background didalam Postingan. Dengan mempraktekkan trik ini di blog anda, maka anda akan dapat menyesuaikan tema dari isi dari artikel yang anda tulis. Contohnya adalah, jika blog anda menshare tentang Trik Facebook, maka anda akan membuat gambar/icon facebook atau gambar lain yg anda sukai menjadi latar belakang dari isi artikel anda , jika blog anda ngesahre tentang Info-info tentang tempat-tempat indah, ya anda dapat menambahkan gambar pemandangan di artikel tersebut atau gambar yg anda suka, dan contoh lainnya.

Sebagai contoh dari trik ini adalah artikel ini. 

Nah, jika anda tertarik dengan trik yg saya reshare ini, anda dapat mengikuti langkah-langkah yang saya sudah ringkas ini. 

1. Buka halaman yang biasa kita gunakan untuk membuat artikel/entri baru.

2. Pilih mode tulisan HTML

 3. Setelah itu, anda copy-paste kode berikut ini.

<div style="background:url(URL Image) no-repeat Center top; text-align:justify; font-size:100%; padding:10px"> Sisipkan Postingan (Artikel) anda disini </div>

Keterangan : kalimat yg berwarna merah harus anda ganti dengan url gambar yg mau anda pasang.

4. Kemudian, pilih Pratinjau untuk melihat hasil.
5. Atau jika tidak ada masalah, langsung saja andah pilih Publikasikan

Good Luck

Membuat Animasi saat Loading di Blog

Membuat Animasi saat Loading di Blog-Memang banyak cara blogger untuk mempercantik tampilan blognya agar terkesan canggih, menarik, unik, khas, dll. Salah satunya dengan memasang Animasi ini di blog sobat. Bila para blogger sudah banyak yang tahu akan trik ini, ya gpp juga liat-liat. Dan untuk yg belum tau, ini mungkin akan membuat tampilan blog anda makin keren. Animasi ini adalah animasi yg bekerja saat loading yang kita alami dalam memperbarui suatu halaman. Jika sobat agak penasaran, lihat gambar berikut ebagai contoh dari Animasi Loading.

Animasi Loading

Jika sobat dengan senang hati ingin memasang nya di blog sobat, maka ikuti langkah-langkah yang tertera dibawah ini dengan cermat.

Step :

1. Masuk ke blogger

2. Pilih Template > Edit Template > Lanjutkan

3. Kemudian Centang Expand Widget Template

4. Cari script <body> (mempermudah pencarian ctrl + f)

5. Jika sudah ketemu, hapus kode tersebut dan ganti dengan script berikut.

<body onLoad='waitPreloadPage();'> <!-- Loading with Image --> <div id='prepage' style='display:scroll;position:fixed;top:100px;left:3px'><img border='0' src='http://loadinggif.com/images/image-selection/12.gif/></div> <!-- Ends Loading with Image -->

Catatan : script yang berwarna merah adalah URL dari animasi yg kita peroleh. Animasi lainnya dapat di cari di Loading Giff

6. Jika sudah selesai, cari lagi kode </body>, lalu hapus juga dan ganti dengan script berikut :

<script language='javascript' src='http://pageprotection.googlecode.com/files/loading.js' type='text/javascript'/></body>

7. Jika sudah selesai, kemudian pilih Pratinjau, atau jika sudah beres/tidak ada masalah langsung aja pilih Save Template.

Good Luck

Cara membuat Border di Blogger

     Sobat, skrg aku mau share tentang bagaimana Cara Membuat Border di Blogger.  Border ini cocok untuk Blog yg ngesahre tentang trik blog, dimana disitu akan ada kode'' yg harus di copy paste, border ini juga bisa merapikan kode'' itu agar tidak berantakan atau bisa juga dengan Text Area yg lebih bagus dilihat.

     Border biasa digunakan untuk menandai suatu kalimat yang dianggap penting di dalam postingan, atau dipakai sebagai pembatas antara satu sub dengan sub lain. Didalam membuat border, terutama untuk di blog, akan lebih mudah bila menggunakan kode CSS (Casscading Style Sheets)…Border sendiri ada beberapa type, diantaranya tipe solid, tipe dot, tipe dash, tipe outset, tipe inset, tipe double, tipe multiple, tipe ridge… sebagai contoh coba lihat kode dibawah ini.

Border Solid

<div style="width:200px;height:100px;border:1px solid blue;">Teks anda dengan border solid</div>

hasilnya adalah :

Teks anda dengan border solid

Border Dot

<div style="width:200px;height:100px;border:2px dashed blue;">Teks dengan border dash</div>

hasilnya adalah :

Teks dengan border dot

Border Dash

<div style="width:200px;height:100px;border:2px dashed blue;">Teks dengan border dash</div>

hasilnya adalah :

Teks dengan border dash

Border Outset

<div style="width:200px;height:100px;border:5px outset blue;">Teks dengan Outset Border</div>

hasilnya adalah :

Teks dengan Outset Border

Border Inset

<div style="width:200px;height:100px;border:5px inset blue;">Teks dengan border Inset</div>

hasilnya adalah :

Teks dengan border Inset

Border Double

<div style="width:200px;height:100px;border:2px double blue;padding:2px;">Teks dengan border double</div>

hasilnya adalah :

Teks dengan border double

Border Multiple

<div style="width:200px;height:100px;border-width:6px;border-color:blue;border-style:dotted dashed solid double;">Teks dengan burder yang multiple</div>

hasilnya adalah :

Teks dengan burder yang multiple

Border Ridge

<div style="BORDER: 5px ridge yellow; width:350px;">border ridge</div>

hasilnya adalah :

teks dengan border ridge

Cara Membuat Text Area beserta Tombol "Select All"

Sekarang kita akan mempelajari bagaimana Cara Membuat Text Area beserta Tombol "Select All". Tombol ini berguna untuk mengcopy Text / Code Script secara otomatis. Jadi para sobat g perlu capek'' lagi mengcopy Code dengan manual. Ada 2 Metode , yaitu Menampilkan Text Area di Sidebar, dan Menampilkan Text Area di Postingan.






Agar sobat g bingung ini contohnya :

"Disini tempat sobat menyisipkan Text atau Codenya"

Ywd, langsung aja ni trik nya :

 * Untuk Menampilkan Text Area di Sidebar
1. Login ke Blogger
2. Pilih "Rancangan", kemudian "Edit HTML"

3. Cari code </head>
4. Copy dan Paste code berikut ini tepat sebelum code </head>

<script type="text/javascript"> function selectAll(){ document.formtombol.textarea.focus(); document.formtombol.textarea.select(); }</script> <style type="text/css"> div.textareatombol{ width:430px; border:4px solid; border-color:#D8D8D8; background-color:#A4A4A4; padding:10px; }</style>

5. Simpan/Save Template
6. Buka Tata Letak, kemudian pilih tambah Gadget dan Pilih "HTML/JavaScript"
7. Copy dan Paste code berikut ini pada Gadget tersebut.

<center><div class="textareatombol"> <form name="formtombol" > <textarea cols="50" rows="3" name="textarea">"Disini adalah tempat untuk mneyisipkan text/code"</textarea> </form> <input type="button" name="selectit" value="Select All" onclick="selectAll ();"> </div></center>

8. Simpan/Save

Good Luck y sobat...
luangkan watunya buat comment di bawah y...

Cara Membuat Tombol "To Top"

Tombol "To Top" berfungsi untuk mengembalikan halaman dari bawah/dasar sampai ke header/atas dengan cepat tanpa harus menunggu lama. Bahkan hanya 1 klik saja sudah sampai ke header. Jadi, buat para blogger yg bosan menggunakan scroll yg ada di mouseny, bisa mempraktekkan langkah ini di blognya masing''. Langsung saja ya :


1. Login dulu ke Blogger
2. Pilih menu Rancanan
3. Lalu "Edit HTML"

 

 4. Back-up Template untuk mennjaga agar Tampilan Blog tidak berantakan apabila terjadi kesalahan.
5. Cari kode yg sama/mirip dengan kode ini ]]></b:skin>

6. Sisipkan kode di bawah ini "Sebelum/Diatas" kode ]]></b:skin>

/* to top */<br /> #toTop<br /> {<br /> width:60px;<br /> border-style:solid;<br /> border-color:rgb(225, 225, 225);<br /> text-align: center;padding:5px;position:fixed;bottom:10px;right:10px;<br /> cursor:pointer;color:#666;text-decoration:none;<br /> background: -moz-linear-gradient(center left, #c4d69f 0%,#ffffff 100%);<br /> background: -webkit-gradient(linear, left bottom, right bottom, color-stop(0, #c4d69f),color-stop(1, #ffffff));<br /> }<br />

 

7. Kemudian cari kode yg sama/mirip dengan kode ini </body>
8. Sisipkan kode berikut ini "Sebelum/Diatas" kode </body>

<a href="#" id="toTop"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAX9umO9i_-bjz5VsXtt6biZI12IV0C1PXv2zbvGJ0teJPj7quZqbk8pxCyb6Frh1Mrd1HWIWmlGOvMM7ApK1_zC7f2-Pf6HhZhCLrlox8DyZuJHiTcCnWrDzFp6fWQsoDI0fCZy-AE1Jo/s104/back+to+top.jpg" width="50" height="40" /></a><br /> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><br /> <script type='text/javascript'> /*----------------------- * jQuery Plugin: Scroll to Top * by Craig Wilson, Ph.Creative (http://www.ph-creative.com) * Bring to you by Zen from http://zenplate.blogspot.com * Copyright (c) 2009 Ph.Creative Ltd. * Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling. * For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx * Do not delete these infomation * Version: 1.0, 12/03/2009 -----------------------*/ $(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}}); $(function() { $("#toTop").scrollToTop(); }); </script><br />

Catatan : Kode diatas sudah disisipkan informasi penciptanya, jd shbat g perlu menghapus itu dan biarkan saja begitu. OK

9. Simpan/Save Template

Good luck y sobat, semoga info ini membantu...

Cara Membuat Tombol Balas di Post Komentar

Tombol balas komentar mungkin sangat berguna bagi sobat-sobat Blogger, dimana tombol balas/reply ini cepat dalam membalas komentar yang ada di Blog kita, dengan tombol ini, kita tidak harus menyebut kan nama si komentator itu untuk membalasnya. Disini saya akan menshare tentang bagaiman membuat tombol balas/reply komentar kepada sobat-sobat johannez sekalian..

 ywd ni langkah-langkah mebuatnya :

1. Login dulu y sobat dengan akunnya masing-masing.

2. Kemudian masuk ke "Design-->Template-->Edit HTML"

3. "Back Up / Download Template Penuh" untuk menjaga" bila ada kesalahan.

4. Lalu cari kode ini (untuk mencari copy kode lalu Ctrl + F kemudian paste ke wadah yg disediakan)

<dd class='comment-footer'>

5. Kalau sudah ktemu, copy Kode Scipt berikut dan letakkan tepat BAWAHnya.

<a expr:href='"https://www.blogger.com/comment.g?blogID=BLOG ID SOBAT&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450"); return false;'><img alt='Reply To This Comment' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWcmkVBsxpIGuJPCJP5eudD9kN4XOvpCvVBS8M1fqQ5HdA5-OlSu9DQ3usZaWX7LxVfTUhzgmIt2ETi5AFWcqf9tC2gBKontecMF-fiWiNPikTjCtxutWKiEJb5slL9Ht8sNyjMqYzdFQ/s400/reply05.png'/></a>

6. Jangan lupa ya ganti tulisan (BLOG ID SOBAT) dengan kode ID sobat. Gambar ini contohnya..

7. Kalau bingung juga buka terlebih dahulu Perancang Template di Dasbor sobat lalu liat di wadah link atas, disitu letak ID blog sobat.

8. Kalau sudah ketemu, Save Template nya.

9. Lihat hasilnya.

nah untuk sobat johannez, di coba ya...good luck