Profile Picture Widget Profile Picture Widget

<img id="kotak-propik" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/203436_100001851580451_3934355_n.jpg" style="margin-top:20px; border-right:1px solid #B3B3B3; width:100%; margin-left:-1px;"/> <div class="transparent" style="position:absolute; z-index:99; margin-top:-70px; margin-left:7px;"> <script type="text/javascript"> <!-- document.write('<fb:like href="http://'+window.location.href.split('/')[2]+'" layout="box_count"></fb:like>'); //--> </script> </div>

Silahkan di ganti URL gambar http://profile.ak.fbcdn.net/hprofile-ak-snc4/203436_100001851580451_3934355_n.jpg untuk tampilan Profile Picture default.

---

Tempat nampilin details logged-in user

<div id="kotak-ditel-propil" style="display:none;"> </div>

---

Login Block Element

<center id="login-to-this-blog" style="display:none; position:fixed; z-index:99; top:30%; left:0px; width:100%;" title="Dude, that would be so awesome if you Connect with Facebook"> <img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/203436_100001851580451_3934355_n.jpg" style="margin-bottom:3px; cursor:pointer; -moz-box-shadow:5px 5px 5px #666666; box-shadow:5px 5px 5px #666666; -moz-border-radius:3px; border-radius:3px;" onclick="FB.login(tampolinUserWkwk,{perms:'read_stream,publish_stream'});this.parentNode.style.display='none'" title="Dude, that would be so awesome if you Connect with Facebook"/><br/> <img src="https://feedjit.com/images/facebookConnect.gif" style="margin-bottom:3px; cursor:pointer; -moz-box-shadow:5px 5px 5px #666666; box-shadow:5px 5px 5px #666666; -moz-border-radius:3px; border-radius:3px;" onclick="FB.login(tampolinUserWkwk,{perms:'read_stream,publish_stream'});this.parentNode.style.display='none'"/> </center>

Silahkan di ganti URL gambar http://profile.ak.fbcdn.net/hprofile-ak-snc4/203436_100001851580451_3934355_n.jpg untuk tampilan Foto block element (max-height:300px;).

---

Tombol show follower sama Visitor count (div id="mallware")

<div id="polower" style="width: 100%;display:none;"> <center> <b class="uiButton" onclick="sowPolower()"> <img src="http://www.google.com/friendconnect/scs/images/googleicon.gif" style="margin-right:5px;margin-left:-3px;vertical-align:middle;"/> <span style="vertical-align:middle;color:#333333;">Show followers</span> </b> </center> </div> <div id="mallware"> </div>

Cara bikin Photo Profile untuk Visitor di blog kamu Cara bikin Photo Profile untuk Visitor di blog kamu

Rancangan Tambah Gadget, CoPas Script dibawah:

<td>
      <fb:profile-pic uid="loggedinuser" size="normal">
        <img src="http://clan.warrock.ph/Clan_Data/67411/th_naruto_animation_by_unhai%280%29.gif" style="max-width:200px; _width:200px;"/>
      </fb:profile-pic>
    </td>
<div class="transparent" style="left: 4px; margin-top: -75px; position: absolute;"><iframe src="http://www.facebook.com/plugins/like.php?href=http://pasokan-cendol.blogspot.com/&amp;layout=box_count&amp;show_faces=false&amp;width=55" style="width: 55px; height: 62px; background: none repeat scroll 0% 0% transparent; padding: 0pt; margin: 0pt; border: medium none;"></iframe></div>

Ganti bagian yang di tulis tebel, terus SAVE !! 

Simpan element tersebut di bagian sidebar kiri atas, Hasilnya:

Membuat widget Author Blog keren Membuat widget Author Blog keren

Karena Saya Rasa lebih enak kalo pake efek getar, dari pada seperti di blog blog lain, memakai author blog, tapi gak ada efek getarnya, kan bosan ! 
Hahahaha

Nih lihat :

Mau Tau Caranya, SIMPLE kok

- Login ke blogger

- Tata Letak.

- Edit HTML.

- Carilah kode ]]></b:skin> ,lalu letakkan Kode CSS berikut tepat diatasnya.

/*Author Admin Getar

====================*/

#authorboxmbs {

background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;

width:auto;overflow:hidden;color:#fff;-moz-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;

margin:5px auto;padding:40px 10px 10px 20px;}

.author_getar{position:relative}

#authorboxmbs:hover {-webkit-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);-moz-box-shadow:0px 0px 10px  rgba(0, 0, 0, .3);box-shadow:0px 0px 20px  rgba(0, 0, 0, .3);}

#authorboxmbs h6 {font-size:17px;clear:none;text-shadow:0px 0px 0 rgb(10,11,12), -1px -1px 0 rgb(4,5,6),-2px -2px 1px rgba(0,0,0,0.25),-2px -2px 1px rgba(0,0,0,0.5),0px 0px 1px rgba(0,0,0,.2);

margin:0;font-family:Arial;padding:10px 10px 5px;}

#authorboxmbs .author_small {font-style:italic;}

#authorboxmbs img {-webkit-transition:-webkit-transform .15s linear;-webkit-box-shadow:0 3px 6px rgba(0,0,0,.25);-moz-box-shadow:0 3px 6px rgba(0,0,0,.25);padding:5px 5px 5px 5px;-webkit-transform:rotate(+2deg);-moz-transform: rotate(+2deg);float:left;border:4px solid #04a5d1;margin:10px;padding:0;}

#authorboxmbs img:hover {-webkit-box-shadow:0 3px 6px rgba(0,0,0,.5);-moz-box-shadow:0 3px 6px rgba(0,0,0,.5);-webkit-transform:rotate(-1deg);-moz-transform:rotate(-1deg);}

#authorboxmbs p {color:#F9EAD4;text-shadow:0px -1px 1px rgb(3,3,3);margin:0;font:normal 14px bedizen;padding:0 10px 10px;}

#authorboxmbs a {color:#089fc9;}

Kode Yang Di Beri Garis Tebal Bisa Diganti Dengan Background Sesukamu !

- Langkah Selanjutnya cari lagi Kode <data:post.body/> , Setelah ketemu, letakkan kode berikut tepat dibawahnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id="authorboxakaUTta" class="author_getar" onmouseover="init(this);rattleimage()" onmouseout="stoprattle(this);top.focus()" onclick="top.focus()">
<img alt='' src='https://lh6.googleusercontent.com/-pWBw9iUmbtg/AAAAAAAAAAI/AAAAAAAAACQ/nT1DJgMW7N4/s250-c-k/photo.jpg ' height='100' width='100'/> <h6><a href="http://www.mafiasitez.blogspot.com/' rel='author' title='Posts by Hazhama MafiaWare'>Posts by Mafia Hacker</a></h6>
 <p>Hi aku Yandi, Itu Foto Profil editan ku waktu itu , terima kasih telah membaca Artikel Ini</p> <p>Follow Me On <a href='https://twitter.com/Yandim_MBS'>Twitter</a> Or <a href='https://www.facebook.com/yandidoetha'>Facebook</a> !!</p><a href='https://www.mafiasitez.blogspot.com'>Get This Widget !!</a></div></b:if>

- Bisa juga dibawah kode : <div class='post-footer-line post-footer-line-1'> 

atau diatas kode : <div class='post-footer'> 

- Selanjutnya letakkan script berikut diatas kode </head>

<script src="http://mafiaproject.googlecode.com/files/Mbs_Getar.js" type="text/javascript"></script>

- Tolong Di Preview Dulu, Takutnya Ada Kesalahan ! 

NB : >> Diatas terdapat tulisan yang saya beri warna, sobat tinggal merubahnya saja sesuai keinginan masing-masing.

Semoga Tutorialnya Bermanfaat, Dan Jangan Lupa Komentarnya ! :D

Cara membuat widget daftar menu blog Otomatis Cara membuat widget daftar menu blog Otomatis

Widget ini berfungsi untuk dapat melihat daftar posting dengan mudah, karena tersedia pilihan Sort by : mencari dari Judul yang ada, dan pilihan Sort by label : mencari artikel dengan label postingan yang ingin dicari. Pada widget ini juga sudah dilengkapi dengan scroll. Widget ini dapat menampilkan pisting max 500. Jika blog anda sudah memiliki lebih dari 500 halaman, anda bisa mengubahnya angkanya saja. Oh iya, jangan lupa kalio dalam widget ini ada simbol segitiga disamping Judul artikel, liat gambar disamping. Itu berfungsi jika anda mengklik icon tersebut, maka akan muncullah kalimat ringkasan yang ada didalam Artikel berikut.

Berikut adalah tutorialnya :

• Masuk ke Blogger
• Pilih Tata letak
• Kemudian Add Gadget ( HTML/Javascript )
• Copy kode berikut :

<div style="background:#FFFFFF; no-repeat scroll 0 0; border:2px solid #FFFFFF; height:310px; overflow:auto; padding:10px; width:260px;">

<div id="cl_option">

Loading... </div>

<div id="cl_content_list">

</div>

<script type="text/javascript">

var jumlah_kata_dalam_ringkasan = 250;

</script>

<script src="http://raihanun.googlecode.com/files/DaftarMenuOtomatis.js">

</script>

<script src="http://rayhanzhampiet.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=onLoadFeed&amp;max-results=500">

</script></div>

Customize :

1. Warna merah   : ubah dengan ukuran yang anda suka
2. Warna hijau     : ubah dengan jumlah kata dalam ringkasan
3. Warna biru      : ubah dengan URL blog anda
4. Warna kuning  : ubah dengan jumlah Postingan yang akan muncul dalam widget

• Save/Simpan Perubahan

Happy Blogging