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.