Cara Membuat Widget Label Dengan Efek Berputar

STAR-US | Cara Membuat Widget Label Dengan Efek Berputar | Sobat blogger pasti pernah melihat widget label dengan efek berputar kan?, Pasti bingung kan gi mana buat widget seperti itu, tapi jangan khawatir sekarang saya akan memberi tips untuk membuatnya :D agar sobat tidak kebingungan untuk membuatnya ayo simak tutornya.

Cara Membuat Widget Label Dengan Efek Berputar 

HTML/Javascript

1. Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Masukan kode berikut.

<div id="w2bFlashContent"><p style="display:none;">Flash Labels by <a href="http://www.way2blogging.org/">Way2Blogging</a></p></div>
<script type="text/javascript">
/*<![CDATA[*/
var w2bFlashLabelSettings = {
blogurl : "http://dhifakomputer.blogspot.com/",
color : "000000",
hoverColor : "333333",
backgroundColor: "FFFFFF",
size : 14,
speed : 100,
width : 250,
height : 250,
transparency : true
};
/*]]>*/
</script>
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/w2b-new-flash-label-cloud.js"></script>

Catatan: 

Text berwarna Merah dangan Url Blog anda.

Text berwarna Hijau adalah tinggi widget.

Text berwarna Orange adalah lebar widget.

5. Klik "Simpan"

Buka Blog dan liat hasilnya :D 

"SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"

Read More »

Add Comment

Unknown tutorial blog, Widget

Cara Membuat Widget Recent Comment di Blog

STAR-US - Cara Membuat Widget Recent Comment di Blog,Bagi sahabat blogger yang masih bingung dalam Membuat Widget Recent Comment di Blog jangan khawatir karena saya akan memberikan tips nya membuat dengan cara yang mudah agar blog sahabat blogger dapat menampilkanWidget Recent Comment di Blog untuk lebih jelasnya sahabat bisa langsung baca dan langsung praktikkan di blog sahabat masing masing, dengantampilan dan tempat berbeda, langsung saja ^_^

Cara Membuat Widget Recent Comment di Blog 

HTML/Javascript

1. Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Masukan kode berikut.

<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 60,
defaultAvatar = "http://2.bp.blogspot.com/-6pCCeOe7wKA/UKRn7f0MK7I/AAAAAAAAB3s/oWt1dVVzc5Y/s1600/gravatar.jpg",
hideCredits = true;
maxfeeds=20,
adminBlog='Rio Us';
//]]>
</script>
<script type="text/javascript" src="http://www.geocities.ws/reggy1998/rcomment.js"></script>
<script type="text/javascript" src="http://dhifakomputer.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=20"></script>

Catatan:

Ganti tulisan berwarna Merah dengan nama admin blog anda
Ganti tulisan berwarna Orange dengan url blog anda
Ganti tulisan berwarna Hijau adalah jumlah komentar yang di tampilkan.

5. Klik "Simpan"


Buka Blog dan Liat Hasilnya :)

"SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"

Read More »

Add Comment

Unknown tutorial blog, Widget

Cara Membuat Widget Menjadi Simpel dan Rapi

STAR-US | Cara Membuat Widget Menjadi Simpel dan Rapi | Memasang widget/gadget di sidebar merupakan hal yang biasa dilakukan para blogger. Selain dapat mempercantik tampilan blog, widget tersebut juga bermanfaat baik bagi pengunjung maupun pemilik blog itu sendiri. Widget-widget itu berisikan informasi-informasi mengenai blog tersebut sesuai dengan kegunaannya masing-masing.


Bila widget-widget yang dipasang di sidebar cukup banyak dapat membuat sesak ruangan di sidebar. Salah satu solusi untuk menghemat tempat di sidebar adalah dengan memasang widget-widget tesebut ke dalamscroll box. Lalu, bagaimana caranya agar posisi widget-widget tersebut di scroll box menjadi rata tengah sehingga terlihat rapi dan sedap dipandang mata?

Cara Membuat Widget Menjadi Simpel dan Rapi

HTML/Javascript

1. Blogger sobat.
2. Masuk pada bagian Tata Letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Masukan kode berikut.

<div style="text-align:center;">
KODE WIDGET ANDA
</div>

Catatan:

Kode berwarna Orange Agan bisa ganti dengan kode anda.

5. Klik " Simpan "


Buka Blog dan Liat Hasilnya :)

"SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"

Read More »

Add Comment

Unknown tutorial blog, Widget

Cara Membuat Widget Scroll di Blog

STAR-US  | Kali ini saya akan share tentang Cara Membuat Widget Scroll di Blog Scroll pada widget memang hal yang bagus jika dipasang pada blog sobat. Selain agar widget sobat tidak terlalu memerlukan tempat yamg luas, tampilan blog kita juga akan terlihat rapih.

Cara memasangnya juga tidak susah kok sob. Ikuti langkah-langkahnya.

Cara Membuat Widget Scroll di Blog 

                                       

Widget tanpa kode HTML/Javascript.

Pertama kita harus tahu nama widget yang akan kita beri scroll sob. Caranya, masuk menu Tata letak dan sentuhkan cursor di tulisan edit pada widget yang akan sobat beri scroll. Pada bagian bawah akan terlihat nama widget, lihat pada gambar di bawah ini nama widget-nya adalah


PopularPosts1.



                           

Gambar di atas adalah cara mengetahui ID widget.

Masukan kode berikut tepat di atas kode  ]]></b:skin>

#PopularPosts1 .widget-content{
height:230px;
width:auto;
overflow:auto;
}

Kode berwarna Orange ubah dengan ID widget yang ingin di beri scroll



Terakhir, Save dan lihat hasilnya.

Widget dengan kode HTML/Javascript.

Untuk membuat scroll pada Widget dengan HTML/Javascript, sobat hanya perlu menambahkan sedikit kode berikut pada widget yang akan diberikan scroll.

<div style="overflow:auto; width:100%px; height:230px; padding:10px; border:1px solid #999999;">
kode widget anda
</div>

Catatan:

Kode berwarna  Orange  adalah tinggi widget 

Kode berwarna  Hijau   adalah lebar widget

Kode berwarna  Merah  ganti dengan kode widget anda.

Fungsi Scroll Untuk Blogroll Biasa

<div style="border:1px solid#000000;overflow:auto;width:170px;height:100px;">
<ul>
<li><a href="http://dhifakomputer.blogspot.com/">STAR US</a></li>
<li><a href="Url anda">Judul Blog </a></li>
<li><a href="Url anda">Judul Blog </a></li>
</ul>
</div>

Fungsi Scroll Untuk Blogroll Link Open In New Tab

<div style="border:1pxsolid#000000;overflow:auto;width:170px;height:100px;"><ul>
<li><a href="http://dhifakomputer.blogspot.com/" target="new">STAR US</a></li>
<li><a href="Url anda" target="new">Judul Blog </a></li>
<li><a href="Url anda" target="new">Judul Blog </a></li>
</ul>
</div>

Fungsi Scroll Untuk Banner Atau Gambar

<div style="border:1pxsolid#000000;overflow:auto;width:170px;height:100px;">
<ul>
<li><a href="Url anda" target="new"><img src="Url Gambar" height="150" width="200"/></a></li>
<li><a href="Url anda" target="new"><img src="Url Gambar" height="150" width="200"/></a></li>
</ul>
</div>

Terakhir, klik Simpan dan sobat lihat hasilnya.

"SERTAKAN SUMBER [STAR-US] SAAT DI COPYPASTE!!!"

Read More »

Add Comment

Unknown tutorial blog, Widget

Hide/Show Elements Di Sidebar

Pernah tengok expandable posting x? Contoh kat blog Ana yang ini AlmansuQie. Cara membuatnya disini. Ok, kali ni kita nak buat hide/show widget pada sidebar pulak. Sekaligus dapat menjimatkan ruang. Redhwan ade tertanya2. Boleh juga gunakan cara ini untuk hide/show pautan.

Redhwan: Assalamualaikum..Tanye sikit, macam mana nak buat pautan kita pada sidebar boleh expand dan collapse macam blog archive?

1. Pertama masuk ke Layout => Edit HTML dan tambahkan kod berikut selepas kod ]]></b:skin>.

<style type="text/css">
.texthidden {display:inline}
.shown {display:block}
</style>
<script type="text/javascript">
document.write('<style>.texthidden {display:none} </style>');
</script>
<script type="text/Javascript">
function expandcollapse (postid) {
whichpost = document.getElementById(postid);
if (whichpost.className=="shown") {
whichpost.className="texthidden";
}
else {
whichpost.className="shown";
}
}
</script>

2. Klik save template dan selesai di bahagian ini. Pergi ke bahagian page Elements => Add a Gadget => HTML/Javascript. Tambah kod ni..

<ul><a href="javascript:void(0);" onclick="expandcollapse('keyword')"> [+/-] Pautan</a></ul>
<ul class="texthidden" id="keyword">
<li><a href="http://link.com">Link 1</a></li>
<li><a href="http://link.com">Link 2</a></li>
<li><a href="http://link.com">Link 3</a></li>
<li><a href="http://link.com">Link 4</a></li>
<li><a href="http://link.com">Link 5</a></li>
</ul>

4. Tukarkan link2 berwarna merah dengan link Antum yer.. Text biru mesti nama yang sama. Warna ungu boleh ditukar jadi perkataan atau gambar. Yang ni khas untuk pautan. Untuk sembunyikan widget pulak buat macam ni.

<ul><a href="javascript:void(0);" onclick="expandcollapse('Cbox')"> [+/-] Kotak Jerit</a></ul>
<ul class="texthidden" id="Cbox">
...............kod cbox disini...............
...............kod cbox disini...............</ul>

5. Macam tu la jugak pada mana widget yer. Siap!! Selamat mencuba!!

Read More »

Add Comment

Unknown Widget

Pasang Star Rating Pada Posting

Ingin tahu rating sesuatu post dalam blog kita, boleh pasang widget ni. Seperti dibawah post ini ada lima bintang warna kuning. Kalau rasa post ni bagus boleh la bagi bintang skit. Ok ini disediakan kod javascript untuk ditanam dalam template. Caranya..

1. Macam biasa dalam kedaan Loggin. Edit HTML. Tanda pada kotak Expand Widget Template. Cari kod berikut.

<p><data:post.body/></p>

2. Dah jumpa, tambahkan kod berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script language='JavaScript'>
var OutbrainPermaLink=&#39;Your-Post-Permalink-Here&#39;;
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='http://www.geocities.com/almansuqie/limabintang.js' type='text/javascript'/>
</b:if>

3. Tambahan: Kod <p><data:post.body/></p> kemungkinan sudah berubah atau tiada lagi sekiranya Antum gunakan Read More. Tapi jangan kecewa, cuba cari tulisan Read More tu. Tambahkan kod diatas diakhir kod Read Morenya.

4. Dah siap klik save..

Read More »

Add Comment

Unknown Read More, Widget

Script Total Posts & Total Comments

Kebanyakkan teman sudah tahu cara untuk memasang Total Posts dan Total Comments, Banyak blog2 tutorial yang menulis tentang ini. Sekadar untuk simpanan peribadi Ana dan untuk perkongsian bersama rakan². Contoh seperti dibahagian bawah Recent Reader blog ini. Ok berikut scriptnya...

1. Total Posts : 1000

<script style="text/javascript">
function showpostcount(json) {
document.write('Total Posts : <b>' + parseInt(json.feed.openSearch$totalResults.$t,10) + '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>

2. Total Comments : 19870

<script style="text/javascript"></script>
<script style="text/javascript">
function numberOfComments(json) {
document.write('Total Comments : <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');}</script>
<script src="http://namablog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>

3. Gantikan tulisan berwarna ungu dengan nama blog Antum.

4. Untuk pemasangan, cuma tambahkan di bahagian Layout => Page Elements => Add a Gadget => HTML/Javascript. Atau kat mana saja yang Antum suka..

Read More »

Add Comment

Unknown Widget

Cara Membuat Brilliant Button

Ini antara contoh Brilliant Button. kita boleh gunakannya untuk membuat button link kita sendiri atau apa saja laman yang kita rasa berguna untuk disimpan. Untuk membuatnya Antum boleh pergi ke dua laman ini.

LucaZappa.com
Button Maker

Setelah button siap direka, iaitu pada pilihan warna, text dll maka savela button tersebut ke dalam komputer Antum. Pastu upload button tersebut untuk dapatkan linknya seterusnya ditambah ke dalam blog. Boleh upload di Photobucket atau Imageshack

Read More »

Add Comment

Unknown Icon, Link, Widget