Showing posts with label Widget. Show all posts
Showing posts with label Widget. Show all posts

Saturday, 7 April 2012

Membuat Related Post Widget Blogger (Update)


Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.


1.Related Post Widget for Blogger dengan Javascript


Contoh gambarnya sobat bisa lihat dibawah ini:


Related Post Widget Untuk Blogger (Keren Abis!)
Lihat Gambar Besar


Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Related Post Widget.
    Gb.1


  • Selanjutnya pilih tab Edit Html (Gb.2).

    Widget Artikel Yang Berhubungan.
    Gb.2


  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Artikel Terkait / Yang Berkaitan Widget.
    Gb.3


Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0uFlcSG9Bp-NI_HPalHF_oACH9G1AKm0jSBRWRdT6efuG8QVOYOVwS0CoiThg-q5fJ0BsoIUmyFy98sIdK9KDs1qHRtein_UYKZJKcTDEmYHYfXDJ24loFKpKTqI9DImV-CkmiQT_Vio/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>

Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>


Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)



Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:


linkwithin related post widget.

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?

Tuesday, 28 February 2012

Cara Memasang / Meletakkan Twitter Widget di Blog

Bagaimana Menempatkan Widget Twitter di Blogger?

Bismillah,menampilkan status twitter di blog,bagi agan-agan yang berminat menampilkannya baik untuk keperluan bisnis online maupun hanya sekedar 'narsis',bisa ikuti langkahnya sebagai berikut:

Pertama,sobat kunjungi https://twitter.com/about/resources/widgets,lihat gambar:

Cara Memasang Widget Twitter di Blog


Selanjutnya,klik My Website,lihat gambar:

Cara memasang widget twitter blogspot


Selanjutnya sobat klik Profil Widget,nanti akan keluar jendela seperti berikut,dan isilah form dengan nama username dari username twitter yang akan ditampilkan statusnya,misal akun twitter saya sendiri mrpujiajadeh,promo nih,hihihihi:

Pasang Widget Share Fb & Twitter Melayang


Nah,untuk mengatur warna background,jenis text dan warna link dari widget twitter ini,sobat klik tab Appearance,lihat gambar:

pasang widget twitter


Setelah itu sobat klik tombol Finish & Grab Code,lihat gambar:

Cara Pasang Follow me Twitter Di Blog


Dan kini sobat sudah mendapat kode script html yang nantinya kita akan pasang di blog :D,lihat gambar:

Cara Mudah Membuat Tombol Follow Twitter di Blogger blogspot


Bagaimana Menempatkan Kode Script Twitter Widget di Blog?


Pergi ke Dashboard > Tata Letak > Add New Gadget / Tambah Widget > HTML/Javascript

widget twitter.


memasang ftwitter button status.


Setelah itu letakkan kode yang berhasil sobat copy tadi pada widget HTML/Javascript tersebut,dan simpan.

Friday, 24 September 2010

Related Post Widget Untuk Blogger (Keren Abis!)

UPdate! Trik Membuat Related Post Widget Untuk Blogger (Keren Abis!),Sudah Direvisi! Dijamin Berhasil 100%

Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.

Jika related post widget untuk blogger yang satu ini masih valid,contohnya bisa sobat lihat di SINI.
Tapi sebelumnya memang sobat diharuskan membuat label terlebih dahulu,caranya sobat bisa baca di SINI.

Setelah label telah diciptakan,dan pastikan rss sobat valid(available rss),seperti rss pelajaran blog,bisa sobat klik icon rss disebelah kanan browser,tampilannya rss nanti seperti klik disini.

Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.



1.Related Post Widget for Blogger dengan Javascript


Teknik ini menggunakan javascript dari http://theblogtemplates.com/scripts/Related_posts_hack.js,lihat sumbernya.
Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

Contoh gambarnya sobat bisa lihat dibawah ini:

Related Post Widget Untuk Blogger (Keren Abis!)
Lihat Gambar Besar


Dan hasilnya kurang lebih akan seperti di sini

Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

  • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

    Related Post Widget.
    Gb.1


  • Selanjutnya pilih tab Edit Html (Gb.2).

    Widget Artikel Yang Berhubungan.
    Gb.2


  • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

    Artikel Terkait / Yang Berkaitan Widget.
    Gb.3


Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:

<style> #related-posts { float : left; width : 540px; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0uFlcSG9Bp-NI_HPalHF_oACH9G1AKm0jSBRWRdT6efuG8QVOYOVwS0CoiThg-q5fJ0BsoIUmyFy98sIdK9KDs1qHRtein_UYKZJKcTDEmYHYfXDJ24loFKpKTqI9DImV-CkmiQT_Vio/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='https://sites.google.com/site/pujiantoroinc/Home/related_post_pelajaran_blog.js' type='text/javascript'/>


Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:

<br/><br/><b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>


Setelah itu simpan,selesai.

2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)



Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

linkwithin related post widget.

Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

Bagaimana? siap menghias blog dengan tampilan widget related post terbaru?