Cara membuat "Embed ULR, HTML, Link Forum" dibawah posting

Pada Tutorial kali ini, saya akan berbagi widget yang saya dapat dari blogger tip and trick. Yaitu bagaimana cara membuat widget yang memudahkan pengunjung blog anda untuk mendapatkan ULR yang dapat menghubungkan kembali ke artikel Anda / posting anda yang ada di blog.

Widget ini biasanya diletakkan dibawah posting atau artikel kita, dengan demikian apabila pengunjung atau pembaca tertarik atau berminat dengan artikel yang telah dibaca, mereka dengan mudah bisa mendapatkan alamat atau ULR artikel tersebut. Anda bisa lihat bentuk widgetnya di bawah artikel ini.

Pada widget ini terdapa tiga 3 macam bentuk kode :

- URL dan kode HTML (yaitu untuk menempatkan link ke sebuah situs web, dan link tersebut merujuk pada ULR posting Anda.)

- Link Forum (yaitu digunakan untuk menanamkan posting Anda ke sebuah forum.)
Bila anda ingin memasang widget seperti ini pada blog anda, silahkan anda ikuti langkah-langkah dibawah ini :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Cari kode yang mirip dengan kode ini : </head>

6. Taruh kode dibawah ini sebelum kode </head> :

<style type='text/css'>
.about-article{
background-color:#f9f9f9;
padding-bottom:5px;
padding-left:20px;
font-size:11px;
}
.about-article input{
background-color:#ffffff;
}
</style>

7. Kemudian anda cari lagi kode : <data:post.body/>
8. Taruh kode dibawah ini setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
&lt;div class=&quot;about-article&quot;&gt;<p>Bila anda merasa artikel diatas bagus dan bermanfaat, anda bisa gunakan URL atau HTML dibawah ini. Silahkan anda dipasang dihalaman web atau blog anda untuk menuju kehalaman ini :</p>&lt;p class=&quot;noborder&quot;&gt;&lt;label for=&quot;aa-url&quot;&gt;URL:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-url&quot; value=&quot;<data:post.url/>&quot; /&gt;&lt;/p&gt;&lt;p&gt;&lt;label for=&quot;aa-forum&quot;&gt;HTML Link:&lt;/label&gt;&lt;br /&gt;&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;&lt;a href=&amp;quot;<data:post.url/>&amp;quot;&gt;<data:post.title/>&lt;/a&gt;&quot; /&gt;&lt;/p&gt;&lt;p&gt;
&lt;label for=&quot;aa-forum&quot;&gt;Forum Link:&lt;/label&gt;&lt;br /&gt;
&lt;input size=&quot;80&quot; readonly=&quot;readonly&quot; onclick=&quot;this.focus();this.select();&quot; type=&quot;text&quot; id=&quot;aa-forum&quot; value=&quot;[url=<data:post.url/>]/<data:post.title/>[/url]&quot; /&gt;&lt;/p&gt;
<p align='center'><a href='http://www.bloggertipandtrick.net/' style='display:none;' target='_blank'>Widget by BloggerTipAndTrick</a></p>
&lt;/div&gt;<br/>
</b:if>

Catatan : Sebaiknya tidak merubah kode diatas, agar widget bisa bekerja dengan baik.
9. Simpan Template

Dan sekarang anda lihat hasilnya akan seperti yang ada dibawah artikel ini.
Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

{

Cara membuat "Embed ULR, HTML, Link Forum" dibawah posting

2012-01-30T15:37:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More

Cara pasang Iklan diatas postingan

Tutorial blog kali ini saya akan jelaskan bagaimana cara memasang Iklan PPC (Pay Per Click) pada blog blogspot. Dan cara yang bagus meletakan Iklan PPC, seperti Google Adsense, Adsense Camp, Kumpul blogger atau yang lain adalah diatas, ditengah, dan dibawah postingan artikel. Sebab potensi iklan diklik pengunjung semakin besar.
Dan kali ini saya akan berikan cara pasang iklan yang berada diatas postingan. Silahkan ikuti langkah-langkah berikut ini : 

Tapi sebelum kita menyisipkan kode atau script iklan pada template, kode atau script iklan harus di PARSE DISINI terlebih dahulu. Baru ke langkah berikutnya :
1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML.






4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode yang mirip dengan kode ini :  

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

7. Letakkan kode atau script iklan yang sudah di parse tadi seperti kode dibawah ini :

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<p align="center">
 DISINI LETAK KODE / SCRIPT IKLAN
</p> 
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>

8. Simpan Template

Dan sekarang anda lihat hasilnya akan seperti yang ada dibawah artikel ini.

Selamat mencoba dan semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentarmu ya......terima kasih.

{

Cara pasang Iklan diatas postingan

2012-01-30T15:36:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More

Cara Membuat Animasi Status Loading

Ketika kita membuka sebuah web ataupun blog, biasanya halaman web atau blog tidak langsung terbuka semua. Kita harus menunggu beberapa saat sampai halaman web atau blog benar - benar tebuka semua. Pada saat itulah Animasi Status Loading muncul.
Bila anda berminat, berikut cara membuatnya :

1. Login ke account blogger kamu.
2. Klik Layout --> Edit HTML.
3. Cari kode <body> di dalam template kamu, kemudian anda ganti kode  <body> tadi  dengan kode di bawah ini :

<body onLoad='init()'&gt<div id='loading' style='position:absolute; width:100%; text-align:center; top:300px;'> <img border='0' src='http://URL Lokasi Simpan.Image'/></div><script src='http://h1.ripway.com/ichal13/preloader.js' type='text/javascript'/></script>

4. Simpan Template dan selesai.

Keterangan : - Silahkan Ganti alamat alamat ULR yang berwarna merah   dengan ULR tempat  kamu menyimpan gambar. - Untuk posisi letak animasi lodingnya, kamu bisa mengganti   kode: "align   center" (tengah), "align right"(kanan), "align left"(kiri),   bawah,atas, terserah selera kamu.

Ok...., Silahkan anda coba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.

{

Cara Membuat Animasi Status Loading

2012-01-30T15:31:00-08:00

Bhepal.Corp

Tips dan Trick|

Comments } Read More