This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Tampilkan postingan dengan label blogspot. Tampilkan semua postingan
Tampilkan postingan dengan label blogspot. Tampilkan semua postingan

Selasa, 14 Agustus 2012

Membuat Sumber Link Otomatis Saat Artikel di Copy Paste

Membuat Sumber Link Otomatis Saat Artikel di Copy Paste. Seingkali kita menemukan artikel yang kita buat sendiri ada di blog orang lain. Sebagian penulis atau blogger  yang mempunyai artikel tersebut pasti senang dengan banyaknya yang menshare tulisannya di blog lain, apa yang dia tulis bisa bermanfaat untuk orang lain untuk disebarluaskan, apalagi jika ditambah dengan mencamtumkan sumber alamat blog yang dicopas. Dan ada juga yang tidak terlalu senang dengan banyaknya yang copas tulisan dia tanpa mencantumkan sumber blognya. Ya itu semua hak asasi setiap orang sih tapi  yang jelas harusnya kita sebagai penulis / blogger mengikuti kaidah Copas artikel orang lain dengan salah satunya menambahkan sumber link artikel yang kita copas di tulisan. 
Dan untuk memonitor itu semua ada cara yang praktis dan mudah untuk Mencantumkan Link Sumber secara Otomatis saat artikel kita di copas orang lain. Salah satunya dengan menggunakan bantuan Tynt Publisher Tools. Nantinya secara otomatis saat artikel kita dicopas alamat link blog kita akan ikut didalam tulisan yang dicopas. Baiklah mungkin itu dia sekapur sirih dari penulis, Yu langsung saja kita menuju KTP untuk membuatnya.
1. Langkah Pertama, kunjungi situs Tynt . Jika sudah klik bacaan "Start Here. It's Free!!" pada halaman utama situs tersebut untuk memulai SignUp.
2. Langkah selanjutnya isi form pendaftaran Y disediakan, contonya seperti dibawah ini:


Masukkan alamat email sobat, lalu domain/alamat blog sobat, selanjutnya buat password login, jika sudah centang Persetujuan Privasi dan terakhir klik Submit 
3. Lalu sobat akan masuk pada halaman Custumize Address Bar dan Attribution. Disini sobat dapat mengatur dan merubah tampilan address bar [url link sobat] dan Attribution [bisa rubah kata2 dan model sesuai Y diinginkan]. Jika ingin tampilan Default Klik Next untuk ke proses selanjutnya.
4. Dan langkah terakhir pengambilan kode script tynt untuk dipasang pada blog sobat nantinya. Letakkan kode script'a diatas kode </head>. Untuk contoh pemasangan seperti langkah dibawah ini:
Signin ke akun blognya > Klik Opsi Template > Edit HTML (jangan lupa centang Expand Template Widget). Paste kode script Y didapat tadi diatas kode </head> . [gunakan ctrl+f utk mempermudah pencarian]. seperti contoh dibawah ini :
<script type="text/javascript">
if(document.location.protocol=='http:'){
 var Tynt=Tynt||[];Tynt.push('d7ciRsliur4AG8acwqm_6r');Tynt.i={"ap":"Read more:"};
 (function(){var s=document.createElement('script');s.async="async";s.type="text/javascript";s.src='http://tcr.tynt.com/ti.js';var h=document.getElementsByTagName('script')[0];h.parentNode.insertBefore(s,h);})();
}
</script>

</head>
Jika sudah Simpan Template. Dan untuk mengetes apakah kode yang dipasang sudah berhasil atau belum silahkan tes dengan Copas salah satu artikel sobat dan pastekan pada Ms.Word atau Notepad. Jika berhasil maka hasilnya akan seperti ini :
















Minggu, 29 Juli 2012

Cara Membuat Kotak Komentar Facebook di Blog

Halo sobat blogger...Kali ini Putragerald akan membahas tentang cara membuat kotak komentar facebook di blog, gunanya untuk mempermudah pemakaian komentar oleh para reader karena umumnya kotak komentar bawaan blogger agak ribet. Tapi perlu diingat kendala dari pemakaian kotak komentar facebook ini yaitu
notifikai/peringatan kalau ada komentar di blog anda, anda tidak akan mendapat pemberitahuan itu di menu comment dari blogger....kecuali jika anda mengetahuinya secara manual lalu membalas komentar itu maka setelahnya notip itu akan muncul di facebook, beegitulah kekurangannya.

Tanpa panjang lebar beginilah salah satu cara dari banyak cara yang ada untuk membuat kotak komentar di blog, simak baik-baik.
Sebelum melakukan cara ini sebaiknya membackup dulu template anda dengan masuk ke Template - Cadangkan/Pulihkan - Lalu unduh template lengkap (diingat ya sob tempat template anda tadi diunduh buat jaga-jaga kalau terjadi kesalahan saat mengedit)
1. Loggin ke akun facebook anda
3. Lalu isi URL, number of Post, Width (ini untuk mengatur lebar kotak koment fb), dan color scheme
4. Setelah itu klik Get Code, maka akan muncul jendela berikut. Lihat kotak 1
5. Nah, setelah mendapat 2 kotak kode diatas, saatnya anda meluncur ke Blogger.com lalu sign in.
6. Lalu buka template - edit HTML - jangan lupa centang expand template widget
7. lalu cari kode </head> untuk mempermudah pencarian pencet ctrl+F nanti akan muncul kotak search
8. Setelah itu copy dan pastekan kode pada kotak fb 1 dibawah kode </head>
    
Contoh:
....... 
</head>
<div id="fb-root"></div><script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1&appId=367xxxxxx"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));</script>  
Catatan: ganti karakter & dengan &amp;

9. Setelah pekerjaan diatas selesai cari kode <p class='comment-footer'>
biasanya kode tersebut ditemukan 3 buah. Nah di semua 3 kode <p class='comment-footer'> tersebut tepat dibawahnya copykan code berikut ini
<div class='fb-comments' data-num-posts='8' data-width='440' expr:data-href='data:post.url'/>
width menandakan lebar kolom kotak komentar. yg berwarna merah bisa diganti sesuai kebutuhan 
ingat: paste kode diatas tepat  dibawah kesemua kode <p class='comment-footer'> yang ada di template kamu..(baca juga tambahan yang ada dibawah)
10. Setelah itu kita lanjut ke langkah terakhir, langkah ini adalah langkah yang paling mudah tetapi sangat mendebarkan yaitu save template. hahaa.. dan lihat hasilnya
Giamana? ga sulit kan.. Tolong tinggalkan komentar ya biar saya lebih semangat buat blogging. Buat yang masih bingung bisa tanya juga lewat kotak komentar. Makasih.
Tambahan: yang terpenting pemasangan kotak komentar fb ini yaitu pada langkah ke-9, terkadang pemasangan kode <div class='fb-comments' data-num-posts='8' data-width='440' expr:data-href='data:post.url'/> tidak semuanya di paste dibawah ketiga kode <p class='comment-footer'>   ..kalau di template saya, saya pasang dibawah kode <p class='comment-footer'> nomor 2 dan 3.. dicoba-coba sendiri  kalau belum berhasil....
 
                     
Referensi: dikembangkan dan modifikasi dari:
http://monozcore.blogspot.com/2012/01/cara-membuat-komentar-facebook-di-blog.html?fb_comment_id=fbc_10150500712828046_21079850_10150652041468046#f2f94daaa4
 

Cara Mudah Membuat Menu Drop Down di Blog

Hmm.. sebelumnya sudah tau menu drop down belum? yang belum tau silakan lihat paling atas dari blog ini yang berjejer ada tulisan home, tips tricks blog, info sehat, dan lain-lain. Dan sekarang arahkan kursor anda ke tab menu tips tricks blog dan nanti pasti akan muncul seperti daftar yang turun kebawah. Nah itu yang namanya menu dropdown. Tapi jauh sebelumnya saya juga pernah share tentang cara membuat tab menu biasa (yang dulu ini tanpa menu dropdown dan biasaya lebih digunakan untuk newbie). Tapi apa salahnya mencoba cara membuat menu dropdown ini agar blog sobat terlihat lebih professional.
screenshot menu dropdown
Oia, cara ini aku dapat dari wartaberata.com. Dan cara ini menurutku cara yang paling mudah dari beberapa artikel lain yang pernah saya lihat. Saya sungguh berterimakasih akhirnya bisa memasang menu dropdown ini berkat tutorial dari kang wartabeta. Ok begini caranya..
Sebelumnya backup template duyu..
1. Login ke blogger (yang diperbarui bahasa Indonesia)
2. Masuk ke template - edit html -  centang pada expand template widget
3. Cari kode ini ]]></b:skin> (gunakan ctrl+F untuk search) lalu tepat diatasnya letakkan kode ini

#NavbarMenu {background: #555 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC85Rz0qflRDr4B0G89tRclwdaPHyOFeizl6Hy3MFVkC5hJfZxtmZqqveruNwmhBR7TJT-0sjT4qhtkfwLLF1hi2ai3EHyzjq9pFo-LARf1VIztZGdN3Nsq37Uo8SFntQFmUbcUBYTc8w/s400/navbar11.png);width: 960px;height: 35px;font-size: 12px;font-family: arial, Verdana;color: #FFF;font-weight: bold;margin: 0;padding: 0;}#NavbarMenuleft {width: 710px;float: left;margin: 0;padding: 0;}#nav {margin: 0;padding: 0;}#nav ul {float: left;list-style: none;margin: 0;padding: 0;}#nav li {list-style: none;margin: 0;padding: 0;}#nav li a, #nav li a:link, #nav li a:visited {color: #FFF;display: block;font-size: 14px;font-weight:bold;font-family: sans-serif, Verdana;font-weight: bold;text-transform: none;margin: 0;padding: 9px 15px 8px;}#nav li a:hover, #nav li a:active {background: #555;color: #FFF;margin: 0;padding: 9px 15px 8px;text-decoration: none;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a, #nav li li a:link, #nav li li a:visited {background: #555;width: 200px;color: #FFF;font-size: 14px;font-family: "ms sans serif", Verdana;font-weight: normal;text-transform: none;float: none;margin: 0;padding: 7px 10px;border-bottom: 1px dotted #7F7F7F;border-left: 1px solid #7F7F7F;border-right: 1px solid #7F7F7F;-webkit-transition: all .2s ease-in-out;-moz-transition: all .2s ease-in-out;-ms-transition: all .2s ease-in-out;-o-transition: all .2s ease-in-out;transition: all .2s ease-in-out;}#nav li li a:hover, #nav li li a:active {background: #777;color: #FFF;padding: 7px 10px;}#nav li {float: left;padding: 0;}#nav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 170px;margin: 0;padding: 0;}#nav li ul a {width: 140px;}#nav li ul ul {margin: -32px 0 0 171px;}#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;}#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;}#nav li:hover, #nav li.sfhover {position: static;}


4. Selanjutnya cari kode ini  <div id='header-wrapper'> lalu tepat dibawahnya pastekan kode ini

contoh menu drop down untuk kode dibawah
<div id='NavbarMenu'>
<div id='NavbarMenuleft'>
<ul id='nav'>
<li><a href='http://putragerald.blogspot.com/'>Home</a></li>
<li><a href='http://putragerald.blogspot.com/'>profil</a></li>
<li><a href='http://putragerald.blogspot.com/'>Blogging</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun &#187;</a>
<ul>
<li><a href='http://putragerald.blogspot.com//'>Menu turun 1</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 2</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 3</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 4</a></li>
<li><a href='http://putragerald.blogspot.com/'>Menu turun 5</a></li>
</ul></li>
<li><a href='http://putragerald.blogspot.com/'>Contact us</a></li>
</ul>
</div>
</div>

Untuk link warna merah rubahlah dengan link anda, untuk warna oranye rubahlah untuk nama menu-menunya.

5. Simpan. Dan lihat hasilnya....

Jika ada yang ingin ditanyakan silakan tanya lewat komentar. Jika berhasil komen juga yaa big grin

Kamis, 26 Juli 2012

Cara Membuat Widget Update Status Twitter Di Blog

Cara Membuat Widget Update Status Twitter Di Blog - Kali ini saya akan membahas bagaimana Cara Membuat Widget Update Status Twitter Di Blog, fungsi Widget ini tentunya bisa menampilkan Status Twitter Terbaru di Blog, sekalian promosi. Bagi Sobat yang pingin memasang Widget Update Status Twitter di Blog sobat silahkan perhatikan baik-baik langkah dibawah ini.


DEMO

1. Login Ke Akun Twitter kamu.
2. Setelah masuk kamu pilih EDIT  PROFIL yang ada disebelah kanan, setelah itu akan muncul tampilan kaya di bawah ini.


Kamu pilih kata "Anda juga dapat menambahkan Twitter ke Situs Anda di sini." setelah di klik kamu akan dibawa ke halaman selanjutnya kaya gambar di bawah ini.


3. Kamu pilih Widget setelah itu akan muncul tampilan kaya gambar di bawah ini.

Setelah di pilih, akan muncul tampilan seperti di bawah ini.

Keterangan :

Pengaturan : alamat twitter kamu.
Prefensi : Jumlah Twit yang ingin ditampilkan dan lain-lain nya.
Tampilan : Kamu bisa modif sesuai sesukamu warna teks, background nya dan lain-lain.
Ukuran : Sesuaikan dengan ukuran sidebar blog kamu dan tingginya juga.
Setelah semua nya selsai di atur kamu Pilih Selsai Dan Ambil Kode.
Kamu copy kode nya.

Langkah terakhir kamu login ke Blog kamu, pilih add gadget lalu pilih HTML Java Script dan paste dari hasil copy kode diatas.
Selsai deh.
Selamat mencoba Sobat. Tunggu dulu jangan lupa Follow yah Twitter aku @putragerald

Cara Membuat Tab View Pada Blog

Menangapi dari beberapa permintaan yang di ajukan kepada saya oleh beberpa sobat blogger. Kali ini saya mencoba untuk berbagi tutorial blog lai kepada temen-temen semua. Da npaa tulisan kali ini kitaakan mencoba untuk membahas tentang cara membuat menu tabview. Bagi
yang belum tahu apa itu menu tab view contohnya dapat temen lihat pada gambar di samping

Sebenarnya ada banyak variasi tampilan dari menu tab view yang dapat kita buat. Tetapi, pada tulisan ini kita bahas duluh cara pembuatan menu tab view dengan tampilan seperti
Gambar diatas. Gimana kira-kira tertarik ngak untuk membuatnya ? yaudah kalau anda merasa tertarik unuk membuat menu tab view di atas silahkan anda ikuti tutorial di bawah ini.



Cara membuat tab view :

1. Login ke blogger lalu klik menu Layout lalu ambil pilihan Edit Html

2. sesampainya dikotak pengeditan Html cari kode ]]></b:skin>

3. setelah ketemu sisipkan kode di berikut ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 65px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 4px dotted #A3A3A3; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #2A1B0A; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color:#666666; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 4px dotted #A3A3A3; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FFFFFF; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

4. setelah kode di atas dipasang, selanjutnya temukan kode </head> dan taruh kode dibawah ini sebelum kode </head>

<script src='http://resep.fileave.com/tabview.js' type='text/javascript'/>


Info Penting :
"Sebaiknya anda upload sendiri kode js ini keserver penyimpanan JavaScript yang anda ketahui agar nantinya tab view anda dapat berfungsi dengan baik.
Fungsi dari kode JavaScript di atas adalah agar tab view anda dapat berpindah tab dari tab satu ketab lainnya. Jadi, jika tab view anda nantiya tidak dapat berpindah tab maka sebaiknya anda upload ulang kode JS ini ke server penyimpanannya dengan account anda sendiri. Anda dapat mengupload file Js ini diantaranya ke www.fileave.com. Untuk cara pengaploadannya Insyaallah akan segera di publish"

5 setelah selesai klik tombol SAVE

6. kemudian pegi ke halaman “Taa Letak” atau "Page Elements" jika anda menggunakan bahsa inggris

7. lalu PIlih "Add a Gadget" >>> "HTML/Javascript"


8. akan muncl sebah kotak kosong, lalu Isikan kode dibawah ini kedlam kotak kosong ersebut ( sama halnya dengan cara memasukkan kode shoutmix/buku tamu )

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>


Keterangan :

- Angka yang berwarna biru (350px) adalah angka yang menunjukan lebar tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda.


- Angka yang berwarna biru (250px ) adalah angka yang menunjukan tinggi tab view dapat diganti dengan angka lain sesuai dengan ukuran sidebar blog anda


- Kode yang berwarna abu-abu adalah tulisan yang akan ditampilkan di menu utama (Menu Atas).


- Kode yang berwarna ungu adalah isi dari tabview. Kamu bisa mengisinya dengan link postingan anda, gambar, kode javascript recent comment, kode java script recent post,dll
 
 Selamat mencoba..jangan LUPA KOMENNYA YAA SOB..

Senin, 23 Juli 2012

Cara Membuat Widget SMS Gratis di Blog

Mau sms-an Gratis ??? kamu bisa kok pasang widgetnya di blog kamu dan juga tentunya keunggulan dari memasang widget ini ialah dapat mendulang traffik tambahan buat blog kamu.


Namun masih ada kekurang dari widget ini yaitu tidak bisa menerima sms balasan, sehingga bila ada yang membalas kita tidak bisa membacanya. Namun walaupun seperti itu gedget ini sangat bermanfaat terutama buat kita yang suka sms-an.


Silakan copy kode di bawah ini di widget kamu :


<center><iframe name="widgetsms" src="http://www.sms-online.web.id/widget/" width="250" height="300" frameborder="0"></iframe><small><center><a href='http://trikis-zone.blogspot.com/2012/06/cara-membuat-widget-sms-gratis-di-blog.html'>Make Widget</a></center></small>

Hasilnya akan menjadi seperti ini :









Mudah kan..? Selamat mencoba dan semoga bermanfaat...
 
 







Sabtu, 30 Juni 2012

Cara Menambahkan Emoticon Yahoo Pada Komentar Blog

Salam Blogger, kali ini saya sedikit mengulas trik lama yaitu tentang pemasangan emoticon yahoo pada komentar blog, namun tidak semua template bisa berhasil menggunakan cara ini. Kebanyakan cara ini berhasil pada template standar, karena saya coba di template saya tidak berhasil, untuk demonya silakan sobat klik link berikut DEMO.
Trik ini berhasil saya terapkan pada template standar, pada demo tadi terlihat emoticon di bawah kotak komentar dan pada komentar. Kalau untuk template saya mungkin masih butuh banyak belajar lagi untuk otak-atik scriptnya, [ sok pinter,, heheheeeee,,].
Baiklah, bagi sobat blogger yang ingin mencoba ataupun berminat untuk memasang emoticon yahoo pada komentar Silakan ikuti langkah-langkah berikut ini:

Ada tiga langkah, untuk menambahkan emoticon yahoo pada komentar blog :
  1. Penambahan kode CSS
  2. Penambahan kode HTML
  3. Penambahan JavaScript

Menambahkan kode CSS:

1. Masuk ke Dasbor ---> Rancangan ---> Edit HTML
2. Backup template (menjaga kegagalan proses)
3. Tandai Expand Template Widget
4. Cari kode ]]></b:skin> dan tambahkan kode berikut tepat di atasnya.




Menambahkan kode HTML:

1. Cari kode ini :

<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>

2. Tambahkan kode di bawah ini, diantara kedua kode tadi.




Menambahkan JavaScript:

1. Cari kode </body> dan tambahkan kode ini di atas </body>



2. Save / simpan template.

Selesai. Demikianlah Cara Menambahkan Emoticon Yahoo Pada Komentar Blog, semoga bermanfaat ya sobat.

Sumber: http://blog.kangismet.net