Malvin Share

Home » Posts filed under Tutorial Blogger

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Kamis, 22 Maret 2012

Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress

By Unknown On 16.59 with 4 comments

MalvinShare-Pada kesempatan kali ini MalvinShare akan ngasih tutorial mengenai Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress. Seperti Widget Subcribe e-Mail yang lainnya, Subcribe e-Mail Pop Up Style ala Wordpress ini berfungsi sama yaitu sebagai komponen pelengkap sebuah blog untuk para pengunjung yang berfungsi sebagai fasilitas berlangganan artikel update yang kita tulis. Namun yang mesti teman-teman ketahui, widget ini memiliki style khas dengan efek Pop up yang tampilannya sama persis seperti subcribe e-Mail pada wordpress. Dari segi tampilanya yang mirip dengan subcribe e-Mail pada wordpress, widget ini bloeh diacungi jempol, karena stylenya yang tidak berlebihan sehingga membuat loading widget ini ringan.

Untuk demonya, teman-teman bisa lihat langsung pada bagian kanan bawah blog ini yang bertuliskan follow(sekalian aja follow ya, hehe), atau lihat screenshotnya dibawah ini.

Berikut akan saya jelaskan tutorial cara Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress di blogger.

Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress di Blogger

1. Login account blogger kamu

2. Pilih Rancangan

3. Klik tambah gadget, lalu pilih HTML/Javascript, kemudian masukkan kode dibawah ini kedalamnya

<style type="text/css">

/*<![CDATA[*/

#djnotefollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}

.followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}

.djnotefollowButton {background: #464646;color: #fff;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}

.djnotefollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSJupaZ6TUhkJ_jXOu_ziY1zqUxA_GeSU5C0DX6AamqRln1ZAJ8wiWlKfqVFPV7QRj8SEZt74ta-JlzgukBUsbuJfHNiFoakK2PG_aH1ALHnK5dRgrQBY8dyKmFxJE51ErXxncjcLvpldT/s1600/follow-djnote.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}

.djnotefollowButton:hover,.followActive {color: #fff !important;}

.djnotefollowButton:hover span,.followActive span {background-position: 0 -37px !important;}

.followactive {background-color: #333;}

.djnotefollowForm {padding: 15px;}

.djnotefollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}

.djnotefollowForm p {margin: 0 0 10px;}

.djnotefollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}

.djnotefollowForm form {text-align: center;}

.djnotefollowForm .emailInput:focus {color: #000;border-color: #000;}

.djnotefollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}

.emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}

.emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}

.djnoteFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}

.djnoteFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}

.djnoteFollowFooter a:hover {color: #fff;background: none;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

;(function(djnote){djnote(document).ready(function(){djnote.extend(djnote.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=djnote("#djnotefollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);djnote(".djnotefollowButton").click(function(e){if(followBox.hasClass("followOpened")){djnote(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{djnote(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);

/*]]>*/

</script>

<div id="djnotefollowSubscribe" style="display:none;">

<div class="djnotefollowForm">

<a class="djnotefollowButton" href="#" title="Follow"><span>Follow</span></a>

<h3>Follow "MalvinShare"</h3>

<p>Get Free Instant Email updates directly to your Inbox!</p>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=MalvinShare', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>

<input type="hidden" value="DjNote" name="uri"/>

<input type="hidden" name="loc" value="en_US"/>

<input type="submit" value="Subscribe" class="emailSubmit"/>

</form>

<p class="djnoteFollowFooter">

<a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>

</p>

</div>

</div>

4. Simpan

5. Selesai

Keterangan :

- Ganti kode yang berwarna merah dengan URL feedburner kamu

Cara Membuat Menu Navigasi Red Slide Out di Blog

By Unknown On 14.54 with 3 comments

MalvinShare-Pada kesempatan sebelumnya, MalvinShare sudah ngasih tutorial tentang Cara Membuat Kotak Circle Banner di Blogger, yang komponennya murni menggunakan kode CSS. Sama seperti pada postingan sebelumnya tadi, pada postingan kali ini, saya akan ngasih tutorial mengenai Cara Membuat Menu Navigasi Red Slide Out di Blog yang komponennya juga murni menggunakan CSS. Seperti pada namanya yaitu Navigasi Red Slide Out, navigasi ini berwarna merah dan memiliki efek slide out yang melayang. Navigasi ini sangat cocok untuk teman-teman yang ingin blognya tampil elegan dan tentunya profesional. Seperti yang saya tuturkan diatas, teman-teman tidak usah khawatir tentang loadingnya, karena Navigasi Red Slide Out ini menggunakan pure CSS, maka sudah barang tentu loadingnya ringan dan cepat.

Untuk demonya teman-teman bisa melihatnya di page halaman ini tepat di pojok kanan atas atau lihat screenshotnya di bawah ini. Berikut akan saya jelaskan mengenai tutorial cara membuatnya.

Tutorial Membuat Menu Navigasi Red Slide Out di Blog
1. Login account blogger kamu
2. Masuk rancangan lalu pilih edit HTML
3. Jangan lupa centang expland template
4. Kemudian itu cari kode berikut

]]></b:skin>

5. Setelah ketemu kode ]]></b:skin>, lalu sisipkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

ul#navigation {
position:fixed; margin:0px;
padding:0px;
top:0px; right:10px;
list-style:none;
z-index:999999;
width:820px;
font:normal 11px Arial,Sans-Serif;
-webkit-animation:2s fxhompinav ease-in-out;
-moz-animation:2s fxhompinav ease-in-out;
-ms-animation:2s fxhompinav ease-in-out;
animation:2s fxhompinav ease-in-out;
} ul#navigation li {
width:103px;
display:inline;
float:left;
margin:0 0 0 2px;
}
ul#navigation li a {
display:block; float:left;
margin-top:-78px;
width:100px;
height:22px;
background-color:#9E242C;
background-repeat:no-repeat;
background-position:50% 150px;
border:3px solid #303030;
-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow:0 1px 2px rgba(0, 0, 0, 0.5);
-moz-border-radius:0px 0px 10px 10px;
-webkit-border-bottom-right-radius:10px;
-webkit-border-bottom-left-radius:10px;
-khtml-border-bottom-right-radius:10px;
-khtml-border-bottom-left-radius:10px;
border-radius:0px 0px 10px 10px;
color:#ccc;
text-decoration:none;
text-align:center;
text-shadow:0 1px 1px #000;
padding-top:85px;
-webkit-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-moz-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
-o-transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
transition:margin-top 0.3s ease-in-out,background-position 0.4s ease-out;
}
ul#navigation li a:hover {
margin-top:-3px;
background-position:50% 10px;
color:#fff; position:relative;
}
ul#navigation li a:hover:after {
content:""; width:0px;
height:0px;
position:absolute;
top:100%;
left:45%;
margin-top:-10px;
border-width:5px;
border-style:solid;
border-color:transparent transparent #e6e6e6 transparent;
}
ul#navigation li:nth-child(1) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzZxfwc8YT3eN7g8K1Be3-RotNVLSu1KJgzpcsVdsNO46ouX01FghdIevzJWqGD3axGD5_cmqiJj3as97JLB9Y-t7bgH_FckixGJCsodbswZxVXP_TMR1PCJci5nYELbhd5DCmrofzyTY/s1600/home.png);
}
ul#navigation li:nth-child(2) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWwOliHjSeA7D2IS_rUO10bB9tuddtT4jPq8uzaiu5npgigLCm5vrVCi0RmJFW8ahp8Heiipr2A0rl50cfh9fsjUHTxh7tbi_MkjiRRge9V2VVtI3lp7nVdQqQ1-mElKzFQu9UbcroxnQ/s1600/user.png);
}
ul#navigation li:nth-child(3) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8lpj848EG-k26BEwUy7CHsYqjM5E5Jh5XxT61ryJ6Mb8M1nu6hMmPL6RMBaTjkLroLosfMijjCB5uE7Jp0FIKLJb1iozBKd880rSDiao7CtTUIq5-K7312SjKISGa66icIw_GI0sWFus/s1600/mail.png);
}
ul#navigation li:nth-child(4) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDyWVNV6j2Gf9LCdYpYFJi-MK8pPxXgJj1xjzhj3t64quTrlqjk_ySgo1LrV5DO3a5mIO69PNMeOWSk2RtuC3FlmZ0S3-gEWSUYw5Ezh9Muq5BLKYKxyV2hpeD83uM-KgMaIx1KOMtcpI/s1600/rss.png);
} ul#navigation li:nth-child(5) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGo9DS7Sb5xT6RgXh6Lkjuo_Bo5QZvKkjbXSuJlgtCC-v2SIUTS-ttfl4mTw8PkeOwdxBF9tXzyflbi5onqcsPBDi1mjyMQxNh_19kjRK-VfxUzgUj-fiikrhgnfRodclgtk46VbmYNoY/s1600/link.png);
}
ul#navigation li:nth-child(6) a {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGb2picoWKbzMYttdKN_VDNh5XMQLJgD0ZSRYgpI9nkC3AGsCrJoWJy4MZOffEDHNiB7TJcBARMun6Q7p-vwxZ80LutzNlr1Qzh9qUXeDjB1gzroZg0cYoYcZc_G0FaTDah-r76Oxn3Y/s1600/color.png);
}
@-webkit-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-moz-keyframes fxhompinav {
from{margin-right:-1000px;} to {margin-right:0px;}
}
@-ms-keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}
@keyframes fxhompinav { from{margin-right:-1000px;} to {margin-right:0px;}
}

6. Selanjutnya cari kode dibawah ini

</body>

7. Kemudian letakkan kode dibawah ini tepat diatas kode yang kita cari pada langkah 6

<ul id='navigation'>
<li><a href='Alamat Url'>Home</a></li>
<li><a href='Alamat Url'>About Me</a></li>
<li><a href='Alamat Url'>Contact</a></li>
<li><a href='Alamat Url'>Rss Feed</a></li>
<li><a href='Alamat Url'>Link Exchange</a></li>
<li><a href='Alamat Url'>Color Tools</a></li>
</ul>

8. Simpan
9. Selesai

Keterangan :
a. ganti tulisan alamat URL dengan alamat URL tujuan
b. Home ganti dengan nama komponen URL tujuan

Selasa, 20 Maret 2012

Cara Membuat Kotak Circle Banner di blogger

By Unknown On 21.37 with 4 comments

MalvinShare-Pada kesempatan ini MalvinShare akan ngasih tutorial mengenai Cara Membuat Kotak Circle Banner di blogger. Sebelumnya akan saya jelaskan terlebih dahulu apa itu Kotak Circle Banner, Kotak Circle Banner adalah widget yang digunakan untuk menempatkan iklan, namun Kotak Circle Banner ini bukan kotak baner biasa, karena dilihat dari namanya saja kita sudah pasti bisa menebak, seperti apa bentuk Kotak Circle Banner ini. Kotak Circle Banner ini berbentuk lingkaran, yang diberi efek CSS, sehingga apabila Kotak Circle Banner ini disorot atau disentuh oleh mouse, yang tadinya berbentuk lingkaran 360 derajat menjadi kotak persegi yang unik dan memiliki tampilan profesional. Untuk demonya teman-teman bisa melihatnya langsung di blog ini, karena saya menggunakannya. Disamping tampilannya yang elegan dan profesional, widget Kotak Circle Banner ini, dalam hal loading page sangatlah ringan. Seperti yang saya tuturkan diatas tadi, alasan mengapa saya mengatakan widget Kotak Circle Banner ini ringan karena pembuatannya yang murni hanya menggunakan CSS saja. Berikut akan saya jelaskan tentang Tata Cara Pembuatan Widget Kotak Circle Banner di Blogger.

Cara Membuat Kotak Circle Banner di blogger

1. Login account blogger kamu

2. Masuk rancangan lalu pilih edit HTML

3. Jangan lupa centang expland template

4. Kemudian itu cari kode berikut

]]></b:skin>

5. Setelah ketemu kode ]]></b:skin>, lalu sisipkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

/* Kotak Iklan 125x125 By http://www.MalvinShare.blogspot.com"dont change any credit"
===================== */
#kotak-iklan-125x125 {
margin: 0px;
padding: 5px;
text-align: center; }

#kotak-iklan-125x125 img {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c0c0c0;
-webkit-border-radius:70px;
-moz-border-radius:70px;
-o-border-radius:70px;
border-radius:70px;
-webkit-transition: all 0.45s ease-out;
-moz-transition: all 0.45s ease-out;
-o-transition: all 0.45s ease-out;
transition: all 0.45s ease-out;
}

#kotak-iklan-125x125 img:hover {
margin: 0px 8px 4px 0px;
padding: 3px;
text-align: center;
border: 3px solid #c33f00;
-webkit-border-radius:0px;
-moz-border-radius:0px;
-o-border-radius:0px;
border-radius:0px;
}

6. Lalu Simpan

7. Masuk pada Design, lalu pilih page element , klik add gadget , pilih HTML/javascript, masukkan kode berikut kedalamnya.

<div id="kotak-iklan-125x125">

<a target="_blank" href="http://malvinshare.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAfTNRz4FoSP0xJZPyJso8pi75fzWWpl_0vBDRy2aeSg4InFMVbXGfJ-ixpmLX7FOLzkJ_NZPq3dtJB4pHqiHlHjc4EV1NXO1Vz2dA9LEgfe40u24tOdlAKg8r24T8iR6Zt8WAisjBJE/s125/colorful_text_box.jpg" border="0"/></a>

<a target="_blank" href="http://malvinshare.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAfTNRz4FoSP0xJZPyJso8pi75fzWWpl_0vBDRy2aeSg4InFMVbXGfJ-ixpmLX7FOLzkJ_NZPq3dtJB4pHqiHlHjc4EV1NXO1Vz2dA9LEgfe40u24tOdlAKg8r24T8iR6Zt8WAisjBJE/s125/colorful_text_box.jpg" border="0"/></a>

<a target="_blank" href="http://malvinshare.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAfTNRz4FoSP0xJZPyJso8pi75fzWWpl_0vBDRy2aeSg4InFMVbXGfJ-ixpmLX7FOLzkJ_NZPq3dtJB4pHqiHlHjc4EV1NXO1Vz2dA9LEgfe40u24tOdlAKg8r24T8iR6Zt8WAisjBJE/s125/colorful_text_box.jpg" border="0"/></a>

<a target="_blank" href="http://malvinshare.blogspot.com"><img alt="banner ads" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAfTNRz4FoSP0xJZPyJso8pi75fzWWpl_0vBDRy2aeSg4InFMVbXGfJ-ixpmLX7FOLzkJ_NZPq3dtJB4pHqiHlHjc4EV1NXO1Vz2dA9LEgfe40u24tOdlAKg8r24T8iR6Zt8WAisjBJE/s125/colorful_text_box.jpg" border="0"/></a>
</div>

7. Klik Simpan

8. Selesai

Keterangan :

a. http://malvinshare.blogspot.com ganti dengan URL iklan

b. https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKAfTNRz4FoSP0xJZPyJso8pi75fzWWpl_0vBDRy2aeSg4InFMVbXGfJ-ixpmLX7FOLzkJ_NZPq3dtJB4pHqiHlHjc4EV1NXO1Vz2dA9LEgfe40u24tOdlAKg8r24T8iR6Zt8WAisjBJE/s125/colorful_text_box.jpg ganti dengan URL gambar iklan

Demikian postingan kali ini, semoga bermanfaat.

Senin, 19 Maret 2012

Cara Mengubah Tampilan Komentar Blogger Menjadi Tampilan Komentar Bertingkat Ala Wordpress

By Unknown On 16.19 with 10 comments

MalvinShare-Baik platform blogger maupun wordpress, keduanya memiliki tampilan atau ciri khasnya sendiri. Pada kasus kali ini yaitu tentang tampilan komentar, banyak sobat blogger yang tampilan komentarnya diubah seperti tampilan bertingkat wordpress. Alasan pemilihan tampilan ini dikarenakan untuk loading komentarnya sendiri, kiranya sama saja dengan tampilan komentar pada blogger. Disamping itu, tampilan komentarnya yang dinamis membuat blog tampil rapi dan profesional tentunya.

Pada tutorial kali ini MalvinShare akan ngasih tutorial mengenai Cara Mengubah Tampilan Komentar Blogger Menjadi Tampilan Komentar Bertingkat Ala Wordpress. Tutorial ini tidak menggunkan threaded comment blogger yang baru, tetapi menggunakan sistem komentar lama, dan dimodifikasi sehingga menyerupai komentar ala wordpress (wordpress threaded comment).

Untuk tampilan, teman-teman bisa melihat screenshotnya dibawah ini. Langsung saja akan saya jelaskan tentang tata Cara Mengubah Tampilan Komentar Blogger Menjadi Tampilan Komentar Bertingkat Ala Wordpress.

Cara Mengubah Tampilan Komentar Blogger Menjadi Tampilan Komentar Bertingkat Ala Wordpress

1. Login account blogger kamu

2. Kemudian pilih rancangan, lalu klik edit HTML

“Untuk jaga-jaga, sebaiknya teman-teman back up dulu template blogger dengan cara download template lengkap”

3. Klik expand template widget

4. Selanjutnya cari kode dibawah ini

]]></b:skin>

5. letakkan kode dibawa ini tepat pada kode yang kita cari pada langkah 4

/*----------------------------------------------------
{--------} Comment by http://www.malvinshare.blogspot.com {--------}
----------------------------------------------------*/
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ-jLpYq3QSSFWmZBLtJGodnZJRsRAsOdRUwLMLeVT-0QkH6cZHMywOOwd3GDq4BsZU7D4Xjz6ip7UsEP05VMPFonNYUnHGSl2BYHMKi_wLay_b7BNK8SuHrQx5Xwyu7BD_zVkoZQVkAtl/s1600/avatar01.png);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:none;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 white;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 10px 10px 0 10px;
background: #FCFCFC;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 10px 10px 0 10px;
background: #FCFCFC;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH3MGPBWalSI1_UKf3pAJJYRf_nK2dc90ApWw0URWUxFGvakTpzr3vMbK9wLDTYnQdr6LkuAZNR0fts-F-xrTJjAEBwxnj3krFkJT3ULP9fJJ4a3mFRXbcJlxbOTxFDF_n1SZcjtriJI8/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -19px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F6F6F6;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #D4E8F4;
background-color: #F1F8FC;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
padding-top:0px;
}
.cm_name_a {
font-family:Arial, sans-serif;
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:Arial, sans-serif;
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:2px;
}
.cm_entry p {
padding-right: 0px;
clear: both;
border:none;
background-color:none;
font-size: 12px;
color: #404040;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 0px 5px 0px 0px;
clear: both;
background-color:none;
font-size: 12px;
color: #404040;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px white;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}

6. lalu cari kode dibawah ini

</body>

7. tambahkan kode dibawah ini tepat sebelum kode yang kita cari pada langkah 6

<script type="text/javascript"></script>

8. cari kode dibawah ini

<b:includable id='comments' var='post'>
“kode panjang yang mesti diganti, untuk setiap template kadang berbeda-beda”
</b:includable>

9. setah ketemu simpan kode dibawah ini tepat diantara <b:includable id='comments' var='post'> dan </b:includable>

<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
        <h4>
             <b:if cond='data:post.numComments > 0'>
          <b:if cond='data:post.numComments == 1'>
            <span id='cm_total'>1</span> comment
          <b:else/>
            <span id='cm_total'><data:post.numComments/></span> comments
          </b:if>
        </b:if>
        </h4>

        <div id='cm_reply_css'/>

        <div class='cm_pagenavi' id='cm_page'/>

        <div id='cm_block'>
            <b:loop values='data:post.comments' var='comment'>
                <b:if cond='data:comment.isDeleted'>
                <b:else/>

                    <div expr:id='data:comment.anchorName'>
                        <div class='cm_wrap'>
                            <a expr:name='data:comment.anchorName'/>

<b:if cond='data:comment.author == data:post.author'>
                               <div class='cm_head'>
                                <div class='cm_avatar_a'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=_BlogID_&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
<b:else/>

                            <div class='cm_head'>
                                <div class='cm_avatar'>
                                    <b:if cond='data:blog.enabledCommentProfileImages'>
                                        <data:comment.authorAvatarImage/>
                                    </b:if>
                                </div>
                                <div class='cm_reply'>
                                    <a expr:href='"https://www.blogger.com/comment.g?blogID=__BlogID__&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
                                </div>
                            </div>
</b:if>

<b:if cond='data:comment.author == data:post.author'>
                                <div class='cm_entry_a'>
                                <span class='cm_arrow'/>
                                <div class='cm_info_a'>
                                    <div class='cm_name_a'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                       <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>


<b:else/>

                            <div class='cm_entry'>
                                <span class='cm_arrow'/>
                                <div class='cm_info'>
                                    <div class='cm_name'>

                                      <b:if cond='data:comment.author == data:post.author'>
                                                                                      <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                                           <b:else/>

                                        <b:if cond='data:comment.authorUrl'>
                                            <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'>
                                                <data:comment.author/>
                                            </a>
                                        <b:else/>
                                            <b><data:comment.author/></b>
                                       </b:if>
                                        </b:if>
                                    </div>

                                            <b:if cond='data:comment.author == data:post.author'>
                                     <div class='cm_date_a'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>

                                            <b:else/>

                                    <div class='cm_date'>
                                        <data:comment.timestamp/>
                                        <b:include data='comment' name='commentDeleteIcon'/>
                                    </div>
                                    <div class='clear'/>
                                            </b:if>
                                </div>
                                  <b:if cond='data:comment.author == data:post.author'>
                                     <div class='comment-body-author'>
                                <p><data:comment.body/></p>
                                     </div>
                                            <b:else/>
                                <p><data:comment.body/></p>
                                 </b:if>
                            </div>
</b:if>
                        </div>
                    </div>
                </b:if>
     </b:loop>
        </div>

        <div class='cm_pagenavi' id='cm_page_copy'/>

    <b:if cond='data:post.embedCommentForm'>
            <b:if cond='data:post.allowNewComments'>
                <b:include data='post' name='comment-form'/>
            <b:else/>
                <data:post.noNewCommentsText/>
            </b:if>
            <b:else/>
            <b:if cond='data:post.allowComments'>
                <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
            </b:if>
    </b:if>

</b:if>
</div>

Ganti Tulisan _BlogID_ dengan blog id blogger kamu.

10. Simpan

11. Selesai

Keterangan :

Apabila langkah-langkah tersebut sudah dilakukan, tetapi masih belum berubah, berarti template kamu memakai sistem komentar baru. Silahkan hapus sistem komentar baru, untuk cara menghapusnya akan saya berikan pada tutorial berikutnya.
Untuk demo, teman-teman bisa melihatnya langsung pada tampilan komentar di blog ini.

Minggu, 18 Maret 2012

Cara Membuat Widget MintShare Sosial Share Button di Blog

By Unknown On 06.56 with 4 comments

MalvinShare-Pada postingan kali ini, MalvinShare akan ngasih tutorial dengan tema sama seperti postingan sebelumnya tentang Cara MembuatWidget Subcribe e-Mail Versi 1. Tapi kali ini widget yang kita buat bukan widget subcribe e-Mail, melainkan widget Sosial Share Button. Widget sosial share botton ini dikembangakan oleh bloggermint, dengan nama MintShare Sosial Share Button, agak ribet sih kalau di ucapkan, tapi lihat hasil dan tampilannya yang luar biasa. Dalam pembuatannya, widget ini murni hanya menggunakan CSS dan HTML saja, tanpa JQuery maupun Javascript, sehingga membuat loading widget ini cepat.

Widget ini terdiri dari 5 layout tampilan berbeda, yang semuanya murni hanya menggunakan CSS dan HTML seperti yang saya katakan tadi. Ok langsung saja akan saya berikan tutorialnya. Untuk demonya bisa langsung teman-teman lihat disini.

Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 1

Screenshot Widget MintShare Sosial Share Button Layout Versi 1

1. Login account blogger kamu

2. Masuk rancangan lalu pilih edit HTML

3. Jangan lupa centang expland template

4. Kemudian itu cari kode berikut

]]></b:skin>

5. Setelah ketemu kode ]]></b:skin>, lalu sisipkan kode CSS dibawah ini tepat di atas kode ]]></b:skin>

/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_mini, #mintshare_mini ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_mini {width:100px; height:30px; border:1px solid #888; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_mini a.sharetext {
display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_mini a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}

#mintshare_mini .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_mini .flyout ul {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
list-style:none;
position:absolute;
left:-1000px;
top:-27px;
width:365px;
height:30px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
overflow: hidden;
padding-left: 15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 15px 15px 0;
-icab-border-radius: 0 15px 15px 0;
-khtml-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
-webkit-border-radius: 0 15px 15px 0;
border-radius: 0 15px 15px 0;
}

#mintshare_mini:hover .flyout ul{
left:50px;
}

#mintshare_mini .flyout ul li {
float: left;
}

#mintshare_mini .flyout ul li a{

}

#mintshare_mini .flyout ul a img {

}

#mintshare_mini .flyout ul li.drop-li {position:relative; width:35px; height:30px; float:left; z-index:100; margin-top: -2px;}
#mintshare_mini .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_mini .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_mini .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_mini .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

/* For IE6 */

#mintshare_mini .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_mini .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_mini .get_mintshare {
    font-size: 10px;
    margin-left: 5px;
    position: relative;
    top: 2px;
}

6. langkah berikutnya Cari Kode <data:post.body/>, lalu letakkan kode dibawah ini tepat dibawah kode yang kita cari tadi <data:post.body/>

<div id='mintshare_mini'>
                <a class='sharetext'><b>Share This</b></a>

                                
                                <div class='flyout'>
                                                <ul class='icons'>
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoxD6ZJvRnDE_aNKJSZ1ROaZvDaGraya7NFytrklPS8mMtfb15pdD5W3B7p5oRCGLQ9zfJITigs8Lnw2lS_HkkDP-h71lcITnuMqZeEpCk2dqCTnDqDb7lgQRM2wLrV3r45odBxP4yfmLv/s1600/facebook_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjALVb2gEP8vdOdFPqdhmEVI9PwTSMSinEx4cFW9042bNkcc2glYFhyphenhyphenEsQU9Y_40jGSUgTBiDBctTiAzzMJIxwfLewgpxPzomqP7b5l1SrcfJDN6-mm6S-pYOy7hUNn7BWlcxHKcNfFgaBm/s1600/twitter_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHN_QpTpXXWsKY8zBgAwnpqufpg38__rDEW3SZx8-A7DnYMIW6tBs1Zd0sOg0vrlL-ybTnV1elr3RXPfbORPCRtRLbhyphenhyphenSe7_wEBe5T_mUAm-YDi-3KbgIrUifGf_v8p2qb1o3TVUCgmk3u/s1600/stumbleupon_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJnNLJkSO_-4-ObGzi37AwZC5poXcpvJ6VwMH8CmYVE0vCAfdKxcMeHbkSTNNKpE2Y154UQmlINyUtmL0TuyZrHZ954LH9xLhwv5GJyXkOsFatIY2hU-gI6PEKm7Cj9ptPwFwHUu_QXyKL/s1600/digg_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxAk17pydB7kN2NBAjXjIJ0STGKZvI-18-zx5LM7Gey57oto-5nNWR7mqgNGz1KGtfPsPbpNb2jcxWfw7j_X-Pos8NMs_N6jkxYQzn_Ho4-kKyaErZMcWoGuEjvmX5uRefedzlUD5vPTEX/s1600/technorati_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6KOrnhoKwGXjEaOiRgMZX3Fwok0w_uadHcHNcZFAw5WT3_NbLHsNvoH_bf2nyGV2QZ1AtR_GCP5AgTGZIpYBY3i0yz11TAx0cH1Rbo6Qz_5tyvA5vjcXOVU4BRWDq1sb7vUcnUcx79xFE/s1600/reddit_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbcrI75VsWZtJy6x3fYEAulUqzCnM4Va9qPr1v32XbCMnqfZcthdDVOOmMVpUOLNybctnaCSPSHrumH4P0IuPrcXE1D0ICIlFrujrYS16BiN6_hr0OY1r78rgSsqnxsYdOPEJXQvlVdKwx/s1600/yahoo_small.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxK7fP8-pKcO7of_FNDQws6qf_KBbOi5P5myzXYNjjm-WRtqKeN3loR1H1iSq1Kh07y9RTI-XNmoyvl2Mfq334X3ZjBWtGFivuJ1LsguHeFaER8SciYklsgw2Ld_3iWESIzQNYaIiQzHkq/s1600/delicious_small.png"/></a></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare!</a></span>

                                                </ul>
                                </div>
</div>

Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 2

Screenshot Widget MintShare Sosial Share Button Layout Versi 2

Untuk Tutorial pada versi 2 ini sama saja dengan versi 1, hanya kode CSS dan HTMLnya saja yang berbeda, berikut kode CSS dan HTMLnya
a. CSS

/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_c, #mintshare_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; padding: 0 15px;
-o-border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}

#mintshare_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_c div.mintshare-wrap a.top-a {display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a img {padding:0; background:none; display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-right:5px;
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_c div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}

/* for IE6 */
#mintshare_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}

/* Misc */

#mintshare_c .get_mintshare {
font-size:10px;
margin-left:3px;
}

b. HTML

<div id="mintshare_c">
                <div class="mintshare-wrap"><a class="top-a">Share This</a>
                
                                <div class="flyout">
                                                <ul class="icons">

<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOWXM3Ph7xOPiKuvbLpXl5vYreY3xoJyPKW4YCunK_WCzkjvVVDjQ9uskIVDxxn1DuzUCKskHnO5Pf9eImVu8QnYS28r93Iiaqzk8vAbUwaIOgeVFcEXD-3ssbwoFRf7vPD4UpykIH_CO/s1600/facebook_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg83H9yTLZ360POw-X84O75TA6jRTJywdmRmoXolLQ9A69p3QIghmvm7XA6lab8Ul9mJ9gNNHXlSvIh0XGW0osu51vcP97xRX03Tq2HlUvf3RsjRHzQ49H_bn_IAMN9Gb0JdZ_ZIq9gyLdO/s1600/twitter_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYLuuxUD5S7TSoeAQr4DxqGUb75PBNVPyrNhYCOn3Ck50galDRnLbfvHDxx91KCl2AMvykco2M6dSrrqHHJYmGlDylJyyYiB7-WisKeX6Q9IbPGJiLqt1oBVtDMJ9Rogcj-KpLUp61xJfA/s1600/delicious_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflDTRcj6qihIy_Y6yrfoASFPTT7FTeSeJqm7UxClsNEO8M3P2pO6L7UXQDZpna2DbSJgGMvrYgdspieM6-cWoD2Rhn6hIJKNqAq6tLfWSjXHwwSJqbG2oHu7qgVuOfYQKAgIwD5C3hhyc/s1600/stumbleupon_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvp2OUuBfYGelPbzU_q3jUEmbVroOSs9_IqhY3QLs8TmM5u6iL82Z3lGo47LDG1zpuY-Nk-rGLgiQ81Mg_HS6dioCt60vq0pgFJgagc2vtg28Fcos5SpRdz40gpUcDwGjSRqw3-8ZyMReS/s1600/digg_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfK5cuv4rW8kv1qqZGzx8qdeG0NFLmKlekulx5EZhlYclzPg_Uq-DOJcF0zgQycSjZM7WH5asAX0PZuC3Rqob9O-PvjHfR8qcPrSbzZyDtaVtm3oWAT60fyMKodRN0o-70JaVnA4D1bWLY/s1600/technorati_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA5G8OnoMIYS-U-bRSLFVIoLGKVstqsPBxb2sWZsXOKBAK9cSm9WyuWoepEO8BBn4Y-tYyhLGi0U2nBbIYSSTCiE7m1EIm4eJpgFErZG_48ocq1jaUBTihumW8REXCjEuA1TRIfKDLHCl/s1600/reddit_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyFG4gWOj8ETG6zT-allhDKIYhsiITbWIwsu2qB2pGekuFync3AROSpsovN-5ov1stbC54cd5K2XcSteWg8XHuiTGXGCtgM3eRjOoOWagTwaov4A7rOVFLS4bRHNRUTExmoV_vgrYREu2/s1600/yahoo_mini.png"/></a></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                
                </div>
</div>

Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 3, 4 dan 5

Untuk toturial Versi 3, 4 dan 5 saya gabung karena langkah-langkahnya sama. seperti tutorial versi 2 hanya kode CSS dan HTMLnya saja yang berbeda. disamping itu untuk Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 3, 4 dan 5 ini, langkah-langkah awalnya sama seperti Tutorial atau Cara Membuat Widget MintShare Sosial Share Button Layout Versi 1, dari langkah nomor 1 sampai 5. untuk langkah berikutnya yaitu penempatan kode HTML, pertama-pertama simpan template kamu yang sudah disisipkan kode CSS, lalu pergi ke Rancangan, kemudian Pilih tambah gadget, terakhir masukkan Kode HTMLnya, Pilih simpan, Selesai.

Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 3

Screenshot Widget MintShare Sosial Share Button Layout Versi 3

/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_fl {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9Gjc-zoWIetA_PxZdyBEX5qEPNpNrejMgf_P3MahXFKlP1qp0ApCayGIxc9m3fkHpMisKjwEYEyYgmUaM0aObJZxy5uuuqN73PIR3lJgGb8F8yRjIXLZdNEQR2qg1FVAdY2uESWhGwmZ/s1600/btn-grey-hori.gif") repeat-y scroll 0 0 #EAEAEA;
    border: 1px solid #888;
    float: left;
    height: 100px;
    padding: 5px 0;
    position:fixed;
    left:0;
    z-index:1001;
    width: 35px;
    -moz-border-radius:0 5px 5px 0;
    -webkit-border-radius:0 5px 5px 0;
    -o-border-radius:0 5px 5px 0;
    border-radius:0 5px 5px 0;
    top:100px;
}

#mintshare_fl a.sharetext {
                display: block;
                float: left;
                line-height: 30px;
                text-decoration: none;
                cursor:pointer;
}

#mintshare_fl a.sharetext img {
    border: 0 none;
    display: block;
    margin-left: 10px;
}

#mintshare_fl .flyout {
    background: none repeat scroll 0 0 #AAAAAA;
    height: 113px;
    left: 40px;
    position: relative;
    top: -4px;
    width: 0;
transition: width 1s ease-in-out;
-o-transition: width 1s ease-in-out;
-moz-transition: width 1s ease-in-out;
-webkit-transition: width 1s ease-in-out;
}

#mintshare_fl .flyout ul {
background:#FFF;
list-style:none;
position:absolute;
left:-570px;
top:-5px;
width:440px;
height:85px;
border:1px solid #888;
border-left:0;
padding-right:10px;
z-index: 500;
padding-left: 5px;
overflow: hidden;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 5px 5px 0;
-icab-border-radius: 0 5px 5px 0;
-khtml-border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);

}

#mintshare_fl:hover .flyout ul{
left:-4px;
}

#mintshare_fl .flyout ul li {
float: left;
}

#mintshare_fl .flyout ul li a{

}

#mintshare_fl .flyout ul a img {

}

#mintshare_fl .flyout ul li.drop-li {position:relative; width:65px; height:65px; float:left; z-index:100; margin-top: 3px;}
#mintshare_fl .flyout ul li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_fl .flyout ul li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-left:20px;
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_fl .flyout ul li.drop-li a b {background:lightBlue; padding:2px 0; font-family:arial, sans-serif; display:block; width:100px; margin-top:58px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-o-border-radius:10px;
}

#mintshare_fl .flyout ul li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_fl .flyout ul li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

/* For IE6 */

#mintshare_fl .flyout ul li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_fl .flyout ul li.drop-li a:hover b {filter: alpha(opacity=100);}

/* Get MintShare */

#mintshare_fl .get_mintshare a img {
border:none;
margin-left: 35px;
margin-top: 7px;
}

Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 3

<div id="mintshare_ft">
                <div class="mintshare-wrap"><a class="top-a">Share This</a>
                
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiki66T77CZ52zVJqe7rMCIRFY3JCvLABYpTddwyB77oq6ef5MwHjkolkMQ1NHRZ8wZD-ASJ_JGuau5v8HkquPhClOTrRxp70zoIeXV-HK4oG_HPn-dHX8EU5Rax3MYK3mF4EXucnr9WcLJ/s1600/facebook.png"/><b>Share on FB</b></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6i5a3XxkxcPevC9AOt0X3qCiu6Mw5ZhcWbw30-6wMypIsXPGDx1LUW_Bl7phQaP4X4mqTnaSNnOsJ3Hpded7GDrCh0wlQVYvJ_GwbYb70IC6AknvvN0zs2MKr-TQ5BLcsDfxvT4MkYRCf/s1600/twitter.png"/><b>Tweet This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQV1l4BS8dZAasde0GxGxFGwdPh_9COj0ow-VN57A4uFQPuqbr_rlo33Di_bT-9y_6a2956cYlknqlexDdbHoyozhDDl3W5xT61LO2zODki9XnHe947jB2fNjsp1RNfvkAeH5-P9wYRpb/s1600/stumbleupon.png"/><b>Stumble It</b></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/s1600/digg.png"/><b>Digg This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/s1600/technorati.png"/><b>Technorati</b></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-GBt7Bc8VhJAnLA1WskQv0wabYFMvIu3b9ifEM4PDbsljjq7_IMfFVFA9WKI8Bl2YrM7pMcXfAngAXEq9ymFGzX9Ef_yL1toSqoRzQPKgoB7STaJyJTZeyegPEtYQvU5v8VpBY8VeWzh/s1600/delicious.png"/><b>Delicious</b></a></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                
                </div>
</div>

Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 4

Screenshot Widget MintShare Sosial Share Button Layout Versi 4

/* ================================================================
This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the footer links intact which provides
credit to its author.
=================================================================== */

#mintshare_ft, #mintshare_ft ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}

#mintshare_ft {width:100px; height:30px; border:1px solid #888; position:fixed; z-index:1001; top:0; margin-left:70px;padding: 0 5px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

#mintshare_ft div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft div.mintshare-wrap a.top-a {margin-left: 5px;display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}
#mintshare_ft div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_ft div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:15px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:100px; height:65px; float:left; z-index:100;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-left:20px;
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; padding-top:20px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
text-shadow:0 1px #FFF;
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_ft div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_ft div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_ft div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}

/* for IE6 */
#mintshare_ft div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_ft table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}

/* Misc */

#mintshare_ft .get_mintshare {
font-size:10px;
margin-left:3px; }

Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 4

<div id="mintshare_ft">
                <div class="mintshare-wrap"><a class="top-a">Share This</a>
                
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiki66T77CZ52zVJqe7rMCIRFY3JCvLABYpTddwyB77oq6ef5MwHjkolkMQ1NHRZ8wZD-ASJ_JGuau5v8HkquPhClOTrRxp70zoIeXV-HK4oG_HPn-dHX8EU5Rax3MYK3mF4EXucnr9WcLJ/s1600/facebook.png"/><b>Share on FB</b></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6i5a3XxkxcPevC9AOt0X3qCiu6Mw5ZhcWbw30-6wMypIsXPGDx1LUW_Bl7phQaP4X4mqTnaSNnOsJ3Hpded7GDrCh0wlQVYvJ_GwbYb70IC6AknvvN0zs2MKr-TQ5BLcsDfxvT4MkYRCf/s1600/twitter.png"/><b>Tweet This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZQV1l4BS8dZAasde0GxGxFGwdPh_9COj0ow-VN57A4uFQPuqbr_rlo33Di_bT-9y_6a2956cYlknqlexDdbHoyozhDDl3W5xT61LO2zODki9XnHe947jB2fNjsp1RNfvkAeH5-P9wYRpb/s1600/stumbleupon.png"/><b>Stumble It</b></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQVWLtiC5hcWv0O2CXUoDIB-cPlVmoSU9aMIwtWkZFCK22hyphenhyphenAdXbvfVIpJGn2vBVrIrQ98OO6IGRyFcPqUj02OkEzEeDrbWk4iNolneW6SHUC5kfy0HvosNy3x2an2PdA2me_BRZgaHa_/s1600/digg.png"/><b>Digg This</b></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvBi0unMjvSlO-Y8Y86NHWzYu4feNtoSNlkiFAmLAKB-pupQ8vnGdYhkii5X2sE-KRwzj9lmW3lI0MCkOmryqmxQztZNMgz6TBs3LoDrLqHUWBBcFG7PCql3FTCOmvtlEkNBmpT4ueuzFl/s1600/technorati.png"/><b>Technorati</b></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2-GBt7Bc8VhJAnLA1WskQv0wabYFMvIu3b9ifEM4PDbsljjq7_IMfFVFA9WKI8Bl2YrM7pMcXfAngAXEq9ymFGzX9Ef_yL1toSqoRzQPKgoB7STaJyJTZeyegPEtYQvU5v8VpBY8VeWzh/s1600/delicious.png"/><b>Delicious</b></a></li>

<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>

                                                </ul>
                                </div>
                
                </div>
</div>

Kode CSS untuk Widget MintShare Sosial Share Button Layout Versi 5

Screenshot Widget MintShare Sosial Share Button Layout Versi 5

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

This copyright notice must be untouched at all times.

* MintShare button comes under a Creative Commons license. Get MintShare
button from ( http://www.bloggermint.com/2011/01/mintshare-social-bookmarking
-sharing-button-widget ).
* Copyright (c) 2009-2011 Bloggermint. All rights reserved.
Please you must keep the credit links intact which provides
credit to its author.
=================================================================== */

#mintshare_ft_c, #mintshare_ft_c ul {padding:0; margin:0; list-style:none; width:100px; font-family:arial, sans-serif; background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgykXMCU9wEXfCDmvr0vaRlD5UWYp1jIVc_agV2se5kLZOtYvRYuGTExWBDcaodCW8Wqf42LyE74AWD9thuBnUpL3afpb_hi32pYVLl6TBd_KrOLR0JKlXUcRQ91iRVF2jnGD6CQNcnzRFm/s1600/bkg-btn-grey.gif") repeat-x scroll 0 0 #EDEDED;
}
#mintshare_ft_c {width:100px; height:30px; border:1px solid #888; position:relative; z-index:100; margin-left:70px;padding: 0 15px;
-o-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
position:fixed;
top:0;
z-index:1001;
}

#mintshare_ft_c div.mintshare-wrap {width:100px; height:30px; float:left; position:relative;}
#mintshare_ft_c div.mintshare-wrap a.top-a {display:block; width:100px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; font-size:13px; font-weight:bold;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsxVoRDgY87isYMZ5BABKYvwDi06P1yZieqKE40ZuujOMwlRY9YakoMpBM0y2k4qPf6njAEaY1tx_Vt13RkiCbfxRupd3YPL79Dc_2YiZmALI00XJdbzAtWXw0wBdr0V4fxmtOTehhJUzm/s1600/plus.png") no-repeat scroll 0 center transparent;
padding-left:5px;
cursor:pointer;
}

#mintshare_ft_c div.mintshare-wrap div.flyout {height:0; overflow:hidden; left:-1px; top:30px; width:110px; position:absolute; z-index:500;
transition: height 1s ease-in-out;
-o-transition: height 1s ease-in-out;
-moz-transition: height 1s ease-in-out;
-webkit-transition: height 1s ease-in-out;
}

#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons {background:#FFF; position:absolute; left:0; top:-500px; border:1px solid #888; border-top:0; padding-bottom:10px;padding-top:10px;
transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-border-radius: 0 0 5px 5px;
-icab-border-radius: 0 0 5px 5px;
-khtml-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-o-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-icab-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-khtml-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li {position:relative; width:40px; height:45px; float:left; z-index:100; margin-left:6px;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a {display:block; width:100px; float:left; text-decoration:none; line-height:16px;}

#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a.drop-a img {display:block; border:0; position:absolute; left:5px; top:5px; z-index:-1; opacity:1; filter: alpha(opacity=100);margin-right:5px;
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a b {display:block; width:100px; height:60px; padding-top:20px; text-align:center; cursor:pointer; color:#000; font-size:14px; opacity:0; filter: alpha(opacity=0);
transition: 0.4s ease-in-out;
-o-transition: 0.4s ease-in-out;
-moz-transition: 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a img {opacity:0.5; filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons li.drop-li:hover > a b {opacity:1; filter: alpha(opacity=100);}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout {height:522px;}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout:hover {height:522px;}

#mintshare_ft_c div.mintshare-wrap:hover div.flyout ul.icons {top:1px;}

/* for IE6 */
#mintshare_ft_c div.mintshare-wrap a:hover {direction:ltr;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout {height:522px;}
#mintshare_ft_c div.mintshare-wrap a:hover div.flyout ul.icons {top:0;}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover img {filter: alpha(opacity=50);}
#mintshare_ft_c div.mintshare-wrap div.flyout ul.icons li.drop-li a:hover b {filter: alpha(opacity=100);}

#mintshare_ft_c table {border-collapse:collapse; position:absolute; left:0; top:0; width:0; height:0; margin-bottom:-1px;}

/* Misc */

#mintshare_ft_c .get_mintshare {
font-size:10px;
margin-left:3px;
}

Kode HTML untuk Widget MintShare Sosial Share Button Layout Versi 5

<div id="mintshare_ft_c">
                <div class="mintshare-wrap"><a class="top-a">Share This</a>
                
                                <div class="flyout">
                                                <ul class="icons">
<li class="drop-li"><a expr:href=""http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWOWXM3Ph7xOPiKuvbLpXl5vYreY3xoJyPKW4YCunK_WCzkjvVVDjQ9uskIVDxxn1DuzUCKskHnO5Pf9eImVu8QnYS28r93Iiaqzk8vAbUwaIOgeVFcEXD-3ssbwoFRf7vPD4UpykIH_CO/s1600/facebook_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://twitter.com/share?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg83H9yTLZ360POw-X84O75TA6jRTJywdmRmoXolLQ9A69p3QIghmvm7XA6lab8Ul9mJ9gNNHXlSvIh0XGW0osu51vcP97xRX03Tq2HlUvf3RsjRHzQ49H_bn_IAMN9Gb0JdZ_ZIq9gyLdO/s1600/twitter_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYLuuxUD5S7TSoeAQr4DxqGUb75PBNVPyrNhYCOn3Ck50galDRnLbfvHDxx91KCl2AMvykco2M6dSrrqHHJYmGlDylJyyYiB7-WisKeX6Q9IbPGJiLqt1oBVtDMJ9Rogcj-KpLUp61xJfA/s1600/delicious_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.stumbleupon.com/refer.php?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflDTRcj6qihIy_Y6yrfoASFPTT7FTeSeJqm7UxClsNEO8M3P2pO6L7UXQDZpna2DbSJgGMvrYgdspieM6-cWoD2Rhn6hIJKNqAq6tLfWSjXHwwSJqbG2oHu7qgVuOfYQKAgIwD5C3hhyc/s1600/stumbleupon_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvp2OUuBfYGelPbzU_q3jUEmbVroOSs9_IqhY3QLs8TmM5u6iL82Z3lGo47LDG1zpuY-Nk-rGLgiQ81Mg_HS6dioCt60vq0pgFJgagc2vtg28Fcos5SpRdz40gpUcDwGjSRqw3-8ZyMReS/s1600/digg_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://www.technorati.com/faves?add=" + data:post.url" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfK5cuv4rW8kv1qqZGzx8qdeG0NFLmKlekulx5EZhlYclzPg_Uq-DOJcF0zgQycSjZM7WH5asAX0PZuC3Rqob9O-PvjHfR8qcPrSbzZyDtaVtm3oWAT60fyMKodRN0o-70JaVnA4D1bWLY/s1600/technorati_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIA5G8OnoMIYS-U-bRSLFVIoLGKVstqsPBxb2sWZsXOKBAK9cSm9WyuWoepEO8BBn4Y-tYyhLGi0U2nBbIYSSTCiE7m1EIm4eJpgFErZG_48ocq1jaUBTihumW8REXCjEuA1TRIfKDLHCl/s1600/reddit_mini.png"/></a></li>
<li class="drop-li"><a expr:href=""http://myweb2.search.yahoo.com/myresults/bookmarklet?t=" + data:post.url + "&title=" + data:post.title" class="drop-a"><img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSyFG4gWOj8ETG6zT-allhDKIYhsiITbWIwsu2qB2pGekuFync3AROSpsovN-5ov1stbC54cd5K2XcSteWg8XHuiTGXGCtgM3eRjOoOWagTwaov4A7rOVFLS4bRHNRUTExmoV_vgrYREu2/s1600/yahoo_mini.png"/></a></li>
<span class="get_mintshare"><a href="http://malvinshare.blogspot.com/2012/03/cara-membuat-widget-mintshare-sosial.html">Get MintShare Now</a></span>
                                                </ul>
                                </div>
                
                </div>
</div>

Selesailah tutorial yang sungguh panjang ini, semoga mudah dipahami, terimakasih.

Malvin Share

Kamis, 22 Maret 2012

Cara Membuat Widget Subcribe e-Mail Pop Up Style ala Wordpress

Cara Membuat Menu Navigasi Red Slide Out di Blog

Selasa, 20 Maret 2012

Cara Membuat Kotak Circle Banner di blogger

Senin, 19 Maret 2012

Cara Mengubah Tampilan Komentar Blogger Menjadi Tampilan Komentar Bertingkat Ala Wordpress

Minggu, 18 Maret 2012

Cara Membuat Widget MintShare Sosial Share Button di Blog

Protect by

Email Newsletter

Popular Posts