Cara membuat gadget TIK

Hari ini Tutorial Blog share tentang widget random post dengan tampilan yang berupa tampilan slide secara random atau acak dengan tampilan slide tersebut.

Kalau tertarik untuk membuatnya, mari ikuti tutorial berikut ini :

   1.    Masuk ke blogger.

   2.     Pilih menu Design -->  Edit HTML.

   3.     Cari kode ]]></b:skin>

   4.     Copy kode di bawah ini dan pastekan tepat di atas kode ]]></b:skin>

1. .gfg-root { width: auto; height: auto;   
2. position: relative; overflow: hidden;   
3. text-align: center; font-family: verdana, sans-serif;font-size: 12px;padding:2px;   
4. background:none;border: 0px solid #363636;}   
5. .gfg-title {font-size: 16px;  
6. font-weight : bold;color : #fff;  
7. background-color: none;line-height : 1.4em;  
8. overflow: hidden;white-space : nowrap;}   
9. .gfg-subtitle {font-size: 14px;font-weight: bold;color: #333;  
10. background-color: none;line-height : 1.4em;   
11. overflow : hidden;white-space : nowrap;margin-bottom : 0px;}   
12. .gfg-subtitle a {color : #a43434;display:none !important;}  
13.  .gfg-entry {background-color: none;width : 100%;height : 9.9em;  
14. position : relative;overflow : hidden;text-align : left;margin-top : 0px;}   
15. /* To allow correct behavior for overlay */  
16.  .gfg-root .gfg-entry .gf-result {position : relative;background-color:none;  
17. width : auto;height : 100%;padding-left : 5px;padding-right : 5px;}   
18. .gfg-list {position : relative;overflow : hidden;text-align : left;   
19. margin-bottom : 15px;display:none !important;}   
20. .gfg-root .gfg-entry .gf-result .gf-title {font-size: 13px;  
21. display:block;color:#a43434;font-weight:bold;line-height: 1.2em;  
22. overflow : hidden;white-space : nowrap;text-overflow : ellipsis;  
23. -o-text-overflow : ellipsis;margin-top : 4px;}   
24. .gfg-root .gfg-entry .gf-result .gf-snippet {line-height : 1.3em;  
25. color: #333;margin-top : 3px;font-size: 12px;} .clearFloat {clear : both;}   
26. #feedGadget { margin-top: 3px;margin-left: auto;  
27. margin-right: auto;width: auto;font-family:verdana,   
28. arial;font-size: 10px;color: #333;}  

  5.     Simpan template Anda

Script Random Post

Untuk memasang script random post ini ikuti langkah-langkah berikut.

   6.     Klik tab Page Elements (Elemen Laman).

   7.     Klik Add a Gadget (Tambah gadget).

   8.     Pilih gadget HTML/JavaScript.

   9.     Copy-paste script berikut ke dalam gadget tadi.

1. <script src="http://www.google.com/jsapi/?  
2. key=ABQIAAAAcV2jSs52yGHKNXjYTcwvNBQjGizh_00DUHOFTBoYdXcXzGgaZxRGIm148GyVsULR8I1--uCF7hoW2w"   
3. type="text/javascript">  
4. </script>  
5. <script src="http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js" type="text/javascript">  
6. </script>   
7. <script type="text/javascript"> function showGadget() { var feeds = [ {title:'title', url:'http://namablog.blogspot.com/feeds/posts/default?redirect=false&start-index=1&max-results=999'}, ]; new GFdynamicFeedControl(feeds, 'feedGadget', {numResults : 1000, stacked : true, title: " "}); } google.load("feeds", "1"); google.setOnLoadCallback(showGadget);   
8. </script>   
9. <div id="feedGadget">  
10. <center>  
11. <img src="http://img80.imageshack.us/img80/1577/loadingtrans.gif" />  
12. </center></div>   
13.    
14. <center>  
15. <b>Get this Widget from <a target="_blank" href="http://trikdantutorialblog.blogspot.com/2012/01/widget-random-post-pada-blogger.html" title="Get this Widget">here!!!</a>  
16. </b></center>  

   10.    Ganti namablog.blogspot.com/ dengan url blog kamu.

    11.     Simpan gadget dan lihat hasilnya

Sekarang artikel blog kamu tampil secara random (acak).

Selamat mencoba semoga berhasil, semoga bermanfaat

Happy Blogging

Terimakasih semuanya :) :)