Ad Code

Responsive Advertisement

Cara Membuat Widget

Sunardi April 23, 2013



Asalamualaikum teman teman saya mau ngasi tau beberapa Cara Membuat Widget ookeeh langsung adjah yang pertama adalah:

Cara Membuat Widget yang pertama

Cara Membuat Widget Melayang Pada Blog

- Widget Melayang yang akan saya bahas ukurannya akan menyesuaikan sesuai dengan ukuran yang teman teman mau, jadi teman teman tidak perlu lagi mengatur ukurannya. Namun untuk penempatannya teman teman bisa menempatkan dimana saja sesuai dengan keinginan teman teman.

Oke apabila teman teman tertarik untuk memasangnya pada blog teman teman berikut langkah langkah Cara Membuat Widget Melayang Pada Blog :

1. Login terlebih dahulu ke blogger
2. Lalu pilih Rancangan
3. Tambahkan Widget Baru / Add Widget
4. Lalu pilih HTML/Javascript
5. Copy kode dibawah ini lalu tempelkan kedalam widget tadi


<style type="text/css"> #gb{ position:fixed; top:10px; z-index:+1000; } * html #gb{position:relative;} .gbcontent{ float:left;margin-left:220px; border:2px solid #bb0000; background:#eeeeee; padding:10px; } </style> <script type="text/javascript"> functionshowHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.top = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> <div style="text-align:right"> <a href="javascript:showHideGB()"> .:[Close][Klik 2x]:. </a> </div> <center> Silahkan tempelkan kode iklan atau banner milik teman teman disini </center> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.center = (30-gb.offsetWidth).toString() + "px"; </script></div></div>

Keterangan  Cara Membuat Widget Melayang pada blog Silahkan atur posisi dan warna widget teman teman dengan mengganti tulisan yang berwarna hijau dan merah. Untuk menempelkan kode iklan atau banner teman teman silahkan ganti dan tempelkan pada tulisan Silahkan tempelkan kode iklan atau banner milik teman teman disini yang berwarna merah.

Nah selesai Cara membuat widget melayang pada blog.


Cara Membuat Widget Yang Kedua

Cara Membuat Widget Next Page Pada Blog

Tujuan membuat Widget Next Page pada blog adalah untuk mempermudah pengunjung yang membaca artikel kita, Untuk melihat postingan artikel pada halaman yang lainnya, dan hal ini dilakukan karena jumlah postingan artikel yang sudah banyak atau lebih dari 100 postingan. Sehingga pengunjung yang membaca artekel kita sangat membutuhkan witget next page ini, supaya mudah menemukan postingan artikel yang lainnya, Dan mereka betah untuk berlama lama pada Blog kita.


Cara Memasang Widget Next page pada blog adalah sebagai berikut: 

1. Login ke account blogger  anda.
2. Pilih dan Klik menu Layout.
3. Lalu pilih dan klik Add Gadget -----> Pilih gatget yang sesuai dengan letak Next Page  yang akan kita pasang. 
4. Lalu akan muncul Windows baru -----> Pilih HTML java Script -----> Lalu masukkan kode sebagai berikut :


<style type='text/css'>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
</style>
<script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://imtikhan.googlecode.com/files/blogger-page-nav-v2.js'></script>

5. Lalu klik Save atau simpan.
6. Lihat hasilnya.
7. Jika hasilnya belum muncul, Tunggulah beberapa saat atau beberapa jam, Kerena masih dalam Proses penyesuian.
8. Selamat menikmati.

Cara Membuat Widget Next page pada blog selesai.

Cara Membuat Widget Yang Ketiga

Cara Membuat Widget Hanya Tampil pada Homepage

Homepage merupakan halaman utama dari web/blog, pada kesempatan ini kita akan membahas cara membuat widget hanya tampil pada homepage. Agar blog terkesan dinamis dan rapi, sebaiknya beberapa widget yang dianggap penting dan utama hanya ditampilkan di halaman utama atau homepage.

Teman teman ingin membuat widget hanya tampil di halaman utama/homepage, berikut ikuti langkah-langkahnya :

1. Login akun blogger Teman teman.

2. Pilih Template > Edit HTML > centang Expand Template Widget.

3. Jangan lupa backup template agar mudah mengembalikan jika terjadi kesalahan.

4. Cari widgetnya gunakan F3 atau Ctrl + F. Contoh widget: Artikel Terbaru.

5. Letakkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dibawah<b:includable id='main'> dan </b:if> diatas kode </b:includable> seperti berikut: 

<b:widget id='HTML5' locked='false' title='Artikel Terbaru' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

6. Kemudian Simpan template.
sekarang Teman teman bisa mengatur widget untuk memodifikasi tampilan pada halaman utama agar blog terlihat rapi dan dinamis.

Selesai Cara Membuat Widget Hanya Tampil pada Homepage.


Cara Membuat Widget yang Ke empat

 Cara membuat Widget Jam Garuda Pada Blog


Widget jam garuda ini bisa juga untuk mempercantik tampilan blog,
Langkah langkah dalam membuat Widget Jam Garuda Pada Blog Sbb :

 Log in ke Blogger


 Masuk ke Tata Letak

 Tambahkan Gadget


 Pilih HTML/JavaScript

 Copy kode berikut dan letakan dalam kolom Widget HTML/JavaScript



<p align="center"><embed src="http://www.widgipedia.com/widgets/orido/Jam-Garuda-Indonesia-4639-8192_134217728.widget?__install_id=1248336094072&__view=expanded" width="200" height="200" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer" ></embed></p>

Klik Simpan.

Nah udah yaaah teman teman segitu adah dulu.
MOHON MAAF BILA ADA KESAMAAN KATA.
Reactions

Posting Komentar

4 Komentar