Bikin Social Widget Keren

Baca selengkapnya »

Sobat Vn, Maaf Ya Lama ngepostingya ,lagi males"an nih ,admin aja tadi bolos sekolah loh,hahaha padahal tinggal 1 pelajaran doang,ya gimana lagi admin udah males lagian ,udah panas cuacanya,laper,pokoknya muales deh hari ini, nah tapi soal ngblogger admin gak bosen koo -_-

oke admin akan nambahin ilmu yah ,admin akan ngajarin dan kasih cose cssnya tentang bikin social widget

social widget ini saya ambil dari kaka djhohanez ,hahaha..gapapa lah, dari pada ambil templatnya doang =P

Yang perlu anda siapkan adalah : ES KOPI,ROKOK,SNACK buat ngemil biar ga boring,,wkwkwkw becanda mulu nih si admin ,okkeee langsung ke tkp..

[-] Login dolo ya Sobat vn Seperti biasanya
[-] Pilih Ke Template
[-] Edit HTML
[-] Cari Code ]]><b:skin>
[-] Dan pastekan code dibawah ini :

#jocial{width: 305px;
float: left;margin-top: 10px;margin-left:20px;animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}
#jocial li{position:relative; cursor:pointer; padding: 0 !important;}
#jocial .facebook, .googleplus, .rss, .twitter{
position: relative;
-moz-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
z-index: 5;
display: block;
float: left;
margin: 1px;}
#jocial .icon{overflow:hidden;}
#jocial .facebook{width: 150px;
height: 150px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxNMqsQgebOBXWN3cl2oBAtQu8HlGudRLnfryKU01UNWq_TvrOR9ZSS85k3DNsFYKnwTnaO3ELhDD7NScFNp-JL5ukW4RPn99CXG91wM93J6satHwTH8CNJkYjT8ZZy395WSwWBT33GElh/s1600/facebook.png") no-repeat center center;border-radius:5px 0 0 0}
#jocial .twitter{width: 150px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKfKaukWS3XB-SG_WD59iApENsMFexRBrzB23V16yacoOnPL4l3So9GaT4TN9ItcVfLWXIvXdvb5rNqM1h9f8BwDwJ8ZTpv1rX49won6L7qynMXzqrw3IFUQPM4HJRQZZkZTrtLugSEj3/s1600/Twitter.png") no-repeat center center;border-radius:0 5px 0 0}
#jocial .googleplus{width: 150px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4sziji504BxoVIaBwPSZ1HkrNNBiFqs9bV1ygE_p-q-odMVfnxxMpfK4xe0xdJ-2_-EJpiJ8JF0UsjQk0URTK-gc32H2Noyo3gKtfuGeyupEPtIWxFg9cUjpDS3Gwj_eYGYpoINIP_6L/s1600/google+plus.png") no-repeat center center;}
#jocial .rss{ width: 302px;
height: 74px;
background: #56c5ff url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNSyndoyrjMGYPI1u335L03AD1T16JDxCoWYf45C9Mda31uztYwysahGlmbgVTTgFIeopXJtNAMlQjjohvX98Hliknz9pfEoOcRurX09ict77j3X2KTtuiY02kYQj_7xA4KI3f1BN1kXT/s1600/rss.png") no-repeat center center;border-radius:0 0 5px 5px;}
#jocial li:hover .facebook{background-color:#3468B6;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .twitter{background:rgba(64,153,255,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKfKaukWS3XB-SG_WD59iApENsMFexRBrzB23V16yacoOnPL4l3So9GaT4TN9ItcVfLWXIvXdvb5rNqM1h9f8BwDwJ8ZTpv1rX49won6L7qynMXzqrw3IFUQPM4HJRQZZkZTrtLugSEj3/s1600/Twitter.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .googleplus{background:rgba(228,69,36,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji4sziji504BxoVIaBwPSZ1HkrNNBiFqs9bV1ygE_p-q-odMVfnxxMpfK4xe0xdJ-2_-EJpiJ8JF0UsjQk0URTK-gc32H2Noyo3gKtfuGeyupEPtIWxFg9cUjpDS3Gwj_eYGYpoINIP_6L/s1600/google+plus.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}
#jocial li:hover .rss{background:rgba(255,102,0,1) url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJNSyndoyrjMGYPI1u335L03AD1T16JDxCoWYf45C9Mda31uztYwysahGlmbgVTTgFIeopXJtNAMlQjjohvX98Hliknz9pfEoOcRurX09ict77j3X2KTtuiY02kYQj_7xA4KI3f1BN1kXT/s1600/rss.png") no-repeat center center;-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;}

[-] Dan Patekan Code Ini Sesuai Selera Kalian  :

<ul id='jocial'>
<li><a class='icon facebook' href='http://www.facebook.com/halaman fan page facebook/'></a></li>
<li><a class='icon twitter' href='http://twitter.com/username/'></a></li>
<li><a class='icon googleplus' href='https://plus.google.com/u/0/alamat profil google+/'></a></li>
<li><a class='icon rss' href='http://feeds.feedburner.com/alamat feed rss'></a></li>
</ul>

Bikin Social Widget Keren

Posted by : Unknown on :Minggu, 02 Juni 2013 With 0komentar

Tag : Widget

Cara Membuat Sticky Widget Keren di Blog

Baca selengkapnya »

Sticky widget merupakan widget yang melayang jika layar akan melewati widget tersebut dan melayang mengikuti layar. Setelah layar kembali ke atas sampai ke letak awal widget, widget tidak akan ikut melayang lagi. Biasanya widget yang sticky ini diletakkan di posisi paling bawah. Aneh, jika widget ini diletakkan di posisi paling atas dari widget-widget yang lain, karena akan bentrok jika layar ke bawah. Cara membuat sticky widget ini tidak lah sulit, anda hanya perlu ramuan javascript, CSS dan HTML. Sedikit kok tutorialnya mudah-mudahan. 

JavaScript

Letakkan JavaScript berikut tepat di atas </body>

<script src='http://yourjavascript.com/47203410510/hack4rt.us-sticky.js' type='text/javascript'/>

Kalau pada template anda belum terpasang JQuery, silahkan letakkan JQuery berikut tepat di atas </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

CSS

Letakkan CSS berikut tepat di atas ]]</b:skin>

#sticky{margin-top:10px; width:300px;}

Sesuaikan ukuran width dengan ukuran widget anda.

HTML

Widget yang paling atas menjadi catcher dan anda akan membuat widget elemen baru di bawahnya. Dalam Tampilan EDIT HTML Blogger Baru, akan lebih mudah untuk membuat widget sticky ini karena <b:section> dapat dirampingkan menjadi <b:section>....</b:section>

 kode HTML akan seperti ini

<div id='catcher'>
Widget 1
</div>
<div id='sticky'>
ISI KODE WIDGET ATAU IKLAN
</div>

Dalam pengaplikasian

Cara Membuat Sticky Widget Keren di Blog

Posted by : Unknown on : With 0komentar

Tag : Widget

Cara mempercantik Blog Dengan Widget Keren

Baca selengkapnya »

Hai Sobat setia saya....,walaupun sekarang saya sudah jarang sekalai memposting artikel - artikel baru....,itu karena suatu alasan pribadi...

waduh ko jadi mau curhat ya?
langsung saja daripada bosan .....

Berikut ini adalah daftar widget membuat tampilan blog lebih menarik dan cantik yang sempat ane koleksi.

1. Google gadgets [ http://www.google.com/ig/directory?synd=open ]

Google gadgets adalah sebuah layanan gratis dari google yang mana terdapat banyak pilihan hanya dengan mengetikan nama widget dan menyalin kode script untuk disimpan di sebuah blog.

2. Yahoo ! widgets [ http://widgets.yahoo.com/ ]

Yahoo ! widgets sama halnya dengan Google gadgets yang membedakan mereka adalah Yahoo ! widgets persembahan dari Yahoo sedangkan Google gadgets dari Google.

3. Alexa [ http://alexa.com/ ]    

Sebuah widget yang akan menampilakn nominal dari nilai Alexa rank yang menandakan tingkat popularitas sebuah blog.

4. Mypagerank [ http://www.mypagerank.net/ ]

Sama halnya dengan Alexa, tetapi Mypagerank adalah nominal dari page rank sebuah blog.

5. Rankwidget [ http://rankwidget.com/ ]  

Lebih komplit widget yang akan menampilkan trafic rank dari google page rank, alexa traffic rank, technorati blog rank serta yahoo.

6. Softcircuits [ http://www.softcircuits.net/PageRank/ ]

Sebuah widget gratis persembahan dari google page rank.

7. Widgetbox [ http://www.widgetbox.com/ ]

Widget gratis dari blogger.

8. Clocklink [ http://clocklink.com/ ]

Widget gratis untuk menampilkan jam pada sebuah blog.

9. Localtimes [ http://localtimes.info/Asia/Indonesia/Jakarta/widget/ ]

Tidak ada bedanya dengan Clocklink kebunaannya untuk menampilkan jam
.

10. Clockwidgets [ http://clockwidgets.net/ ]

Widget jam yang mempunyai tampilan lebih lengkap dari fitur diatas.

11. Histats [ http://histats.com/ ]
Widget gratis untuk menampilkan jumlah pengunjung pada sebuah blog.

12. Feedjit [ http://feedjit.com/ ]

 Sebuah widget yang akan menampilkan negara pengunjung.

13. Whos.amung. us [ http://whos.amung.us/ ] 

Sama dengan Histats untuk mengetahui jumlah pengunjung yang online pada blog kita.

14. Flagcounter [ http://flagcounter.com/ ]

Pengunjung yang ditandai oleh bendera negara masing-masing.

15. Shoutbox part 1 [http://www.shoutmix.com/main/] & Shoutbox part 2 [ http://www.myshoutbox.com/ ]

Widget yang akan menampilkan kotak pesan terletak pada halaman blog.

16. Widget animasi [ http://www.animationonline.com/ ]

Beragam animasi berbasis flash swf yang bisa agan ambil kode-nya dan di dimpan di halaman blog agan.

17. Widget costum twitter generator [ http://www.tweetcooker.com/ ]

Widget twitter yang bisa di tampilkan di halaman blog sebagai sarana media sosial.

18. Widget zooshia [ http://zooshia.com/ ]

Widget yang lebih canggih sebagai sarana media sosial seperti halnya witter, facebook dan youtube

Cara mempercantik Blog Dengan Widget Keren

Posted by : Unknown on : With 0komentar

Tag : Widget