• Sitemap
  • About Me
  • Contact Me
  • Privacy Policy
  • Blog Tools ▼
    • Kode Warna
    • Parse HTML
    • Check Pagerank
    • Check Speed Blog
  • Mobile
Ghiyats Blogs
  • Home
  • Blogger
  • Widget
  • SEO
  • Template
  • CSS
  • Menu Bar
  • JQuery
Home » Archive for September 2013

Sunday, September 22, 2013

Membuat Widget Popular Post V2 di Blog

Membuat Widget Popular Post V2 di BlogMembuat Widget Popular Post V2 di Blog | Ghiyats Blogs - Salam Untuk Sobat Semua.. Pada Artikel ini saya Akan Bagikan Sebuah Widget Popular Post, Widget ini berwarna Abu abu dan Widget ini Bernomor Pada Urutannya.


Popular Post ini Tidak Mengunakan Gambar Menjadi lebih sederhana, kalau begitu, Langsung kita akan, Mencoba membuatnya dan Tutorialnya seperti ini




Cara Pertama : Membuat Widget Popular post
  • Login Ke Blogger
  • Pergi ke Menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Cari gadget ''Entri Populer'', dan atur Settinganya Seperti ini : Jangan Ceklis thumbnail gambar dan cuplikan


Cara Ke dua : Memasang Kode CSS
  • LOgin Ke Blogger
  • Pergi Ke Menu ''Template''
  • Klik ''Edit HTML''
  • Cari kode ]]></b:skin setelah ketemu kodenya Masukan kode dibawah ini diatas kode tadi
/* Popular Post Customization */
.popular-posts ul li a {
    background: none repeat scroll 0 0 #DDDDDD;
    color: #444444;
    display: block;
    margin: 0 0 0.5em;
    padding: 0.4em;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #CCCCCC;
    font-weight: 700;
    height: 2em;
    left: -2.5em;
    line-height: 2em;
    margin-top: -1em;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 2em;
}
.popular-posts ul li a:after {
    border: 0.5em solid transparent;
    content: "";
    left: -1em;
    margin-top: -0.5em;
    position: absolute;
    top: 50%;
    transition: all 0.3s ease-out 0s;
}
.popular-posts ul li a:hover {
    background: none repeat scroll 0 0 #CCCCCC;
}
.popular-posts ul li a:hover:after {
    border-left-color: #CCCCCC;
    left: -0.5em;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before{content:"10"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before{content:"9"}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before{content:"8"}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before{content:"7"}
.popular-posts ul li:first-child + li + li + li + li + li a:before{content:"6"}
.popular-posts ul li:first-child + li + li + li + li a:before{content:"5"}
.popular-posts ul li:first-child + li + li + li a:before{content:"4"}
.popular-posts ul li:first-child + li + li a:before{content:"3"}
.popular-posts ul li:first-child + li a:before{content:"2"}
.popular-posts ul li:first-child a:before{content:"1"}
/* Popular Post Customization */
  • Setelah Selesai, Simpan Templatenya

Demikianlah artikel Ini Mudah Kan ? Semoga artikel ini Bermanfaat dan mudah untuk di Pratekkan dan Silakan Komentarin artikel Di kolom komentar dibawah ini..

Via : All Blogger Tricks
Unknown Waktu 14:43 6 comments:

Friday, September 20, 2013

Membuat Widget Social Media Dengan Efek Membesar

Membuat Widget Social Media Dengan Efek Membesar | Ghiyats Blogs - Hai, Salam Untuk Sobat Semua... Pada Kesempatan Kali Ini Saya Ingin Berbagi Sebuah Widget Sosial Media Akhir Akhirnya Saya Sering membagi Widget Seperti ini. 

Membuat Widget Social Media Dengan Efek Membesar
Berbeda Pada Widget Yang Pernah Saya bagikan lainnya, Dalam Widget ini tidak berbentuk sebuah Gambar Dari Sosial Media, Tapi Dengan Tulisannya Saja dan Widgetnya kalau Kursor Bergerak ke salah satu widget nya akan Membesar, Begitulah Langsung saja Kita Coba Saja Membuatnya Seperti ini :

Membuat Widget Social Media Dengan Efek Membesar
---------------------------------------------------------------------------------

  • Login Ke Blogger
  • Setelah Masuk, Sekarang Menuju Ke menu ''Template''
  • Klik ''Edit Html''
  • Cari Kode <data:post.body/> mungkin ada 2 kode tersebut, pilih salah satu saja, Dan Copy kode dibawah ini Setelah Kode Di atas <data:post.body/>
<!-- Widget  -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<link href='https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt.css' rel='stylesheet' type='text/css'/>
<div id="cenbox">
<div class="zoombox">
    <p>FOLLOW US ON</p>
    <button class="facebook"><a href="FB URL" target='_blank' rel='nofollow'>facebook</a></button>
    <button class="twitter"><a href="Twitter URL" target='_blank' rel='nofollow'>twitter</a></button>
    <button class="gplus"><a href="Google+ URL" target='_blank' rel='nofollow'>google+</a></button>
    <button class="pinterest"><a href="Pinterest URL" target='_blank' rel='nofollow'>pinterest</a></button>
</div>
</div>
</b:if>
<!-- Widget -->

  • Ganti FB Url dengan Url facebook anda
  • Ganti Twitter Url dengan Url twitter anda
  • Ganti Google+ Url dengan Url Profile Google+ anda
  • Ganti Pinterest Url dengan Url pinterest anda
  • Setelah Semua diganti, Sekarang Klik ''Simpan'' 


Demikianlah artikel Ini Semoga Artikel Yang saya Bagikan ini Bermanfaat dan mudah Untuk di Pratekan oleh Sobat semua, Dan Kalau sobat masih Kurang jelas Silakan beri Pendapat anda di kolom komentar dibawah ini, Terima Kasih...

Via : All Blogger Tricks
Unknown Waktu 12:03 5 comments:

Friday, September 13, 2013

Memasang Widget Social Media Icons Dengan CSS

Memasang Widget Social Media Icons Dengan CSS
Memasang Widget Social Media Icons Dengan CSS | Ghiyats Blogs - Hai, Sob. Salam Untuk Sobat Semua.. Pada Artikel Yang Akan saya Bagikan ini Saya akan Bagikan Sebuah Widget Keren dan Elegan Tentang Sosial Media.

Berbeda Pada Widget Sosial Media Yang Pernah Saya Bagikan Widget ini Memiliki Effect Hover pada Setiap Sosial icons dan widget ini Memiliki Tampilan yang Menarik dan Elegan.

Langsung Saja Kita coba Membuatnya, Kalau Sobat Tertarik Dan Ingin Mempratekannya Tutorialnya Seperti di Bawah ini.

  • Pertama, Login Ke Blogger.com
  • Setelah Login Dan Berada di Dasbor Blogger, Sekarang Klik Menu ''Tata Letak''
  • Setelah itu Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript''
  • Terus, Copy kode dibawah ini di dalam Gadget Tadi
<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="www.facebook.com/Username" target="_blank">Facebook</a></li>
<li><a class="twitter" href="www.twitter.com/Username" target="_blank">Twitter</a></li>
<li><a class="google-p" href="https://plus.google.com/USER ID ANDA" target="_blank">Google plus</a></li>
<li><a class="rss" href="feeds.feedburner.com/GhiyatsBlogs" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKW_U6t-MB3W-jnTlKXWCam0cBh0s2ijklRL6en3WktPGv5fFWxfgV5t3JH1XuIPr-ut-j4ljVnGq1PGSkppl4FLHzIa65-tedVavJq0JJAiXjVddAQ4mY24umlU40FM1ZalK6gF_RPA/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKW_U6t-MB3W-jnTlKXWCam0cBh0s2ijklRL6en3WktPGv5fFWxfgV5t3JH1XuIPr-ut-j4ljVnGq1PGSkppl4FLHzIa65-tedVavJq0JJAiXjVddAQ4mY24umlU40FM1ZalK6gF_RPA/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmgML0xGhPVII7o5PVMXpMqlyNz47tziH7HKkWdAiLi1kqVnGqHpD4ea71B6FDYnSPDbYoveu0Y5gq043l0TT-paEg38rETtgnhL2HhGzpYcy4DEjtREyjCQxYyWgxyej7oSuVdSp2g/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDmgML0xGhPVII7o5PVMXpMqlyNz47tziH7HKkWdAiLi1kqVnGqHpD4ea71B6FDYnSPDbYoveu0Y5gq043l0TT-paEg38rETtgnhL2HhGzpYcy4DEjtREyjCQxYyWgxyej7oSuVdSp2g/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KdXfbcRR05KHOc5JW4n2znf48mpvUd6UrigzvNE58PhSOUI7WQB63RJH3hvdcFqoJ6sv2Drb6Xh-RDTu5kSwfFj1BD7lYH0-QeDLJi0KfVus6cEwe82oRnk40zq1gPwBYRfjApccsg/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2KdXfbcRR05KHOc5JW4n2znf48mpvUd6UrigzvNE58PhSOUI7WQB63RJH3hvdcFqoJ6sv2Drb6Xh-RDTu5kSwfFj1BD7lYH0-QeDLJi0KfVus6cEwe82oRnk40zq1gPwBYRfjApccsg/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yA82TOyWWBN_Sw3tPuwJb0QQyc9F8QrKsb7YvvfLPerg_BOyG1OaBepOVqFeo1xXj-a0orNKatNZ2vyP7VNrwxpFQtZy81ZE0eNADXwF6X-1h6qh14TrUyhICAl_rJyCBlbjxLPXHA/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4yA82TOyWWBN_Sw3tPuwJb0QQyc9F8QrKsb7YvvfLPerg_BOyG1OaBepOVqFeo1xXj-a0orNKatNZ2vyP7VNrwxpFQtZy81ZE0eNADXwF6X-1h6qh14TrUyhICAl_rJyCBlbjxLPXHA/s1600/twitter.png) no-repeat 0 0}
</style>
  • Ganti Username Dengan Username Facebbok Anda
  • Ganti Username Dengan Username Twitter Anda
  • Ganti USER ID ANDA Dengan ID Profile Google Plus Anda
  • Ganti GhiyatsBlogs Dengan ID Feed Burner Anda
  • Setelah Semua  Di Ganti, Sekarang Simpan Gadgetnya

Demikianlah Artikel ini Mudah Bukan Caranya ? Semoga artikel yang saya bagikan ini Bermanfaat dan mudah di Pratekkan oleh sobat semua, Kalau ada yang Belum Di mengerti Tentang Artikel ini, Silakan Berkomentar di kolom komentar dibawah ini, Terima Kasih...

Via : All Blogger Tricks

Happy Blogging

Unknown Waktu 12:22 14 comments:

Wednesday, September 11, 2013

Memasang Widget Floating Sosial Bookmark Di Blog

Memasang Widget Floating Sosial Bookmark Di Blog
Memasang Widget Floating Sosial Bookmark Di Blog | Ghiyats Blogs - Hai, Sob.. Pada artikel ini Saya akan bagikan sebuah Tutorial Blog Yang Berhubungan Dengan Sosial Media, Floating Sosial Bookmark ini berbentuk sebuah Widget Facebook, Twitter, Pinterest, dan Go
ogle Plus.

Kalau Biasanya widget Apapun Berada di Samping Kanan Blog Kita, Tapi, Kalau ini Berada di kiri sisi Kiri dan widgetnya mengikuti setiap Scrool Blog Kita Kalau ke Atas Atau Ke Bawah, 

Begitu Penjelasan sikat, Langsung Saja kita Akan MenCoba Membuat Widget dan Mempratekkannya Tutorialnya Seperti ini : 

  • Login Ke Blogger, Dengan Akun anda
  • Klik ''Template'' Di Dasbor Blogger
  • Klik ''Edit HTML''
  • Cari Kode </head> Setelah Ketemu Masukan Kode dibawah ini Di atas/ Sebelum Kode Tersebut
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> 
<script language='javascript'> 
var name = &quot;#floatMenu&quot;;
var menuYloc = null;
$(document).ready(function(){menuYloc = 
parseInt($(name).css(&quot;top&quot;).substring(0,$(name).css 
(&quot;top&quot;).indexOf(&quot;px&quot;)))
$(window).scroll(function () { offset = menuYloc+$(document).scrollTop()+&quot;px&quot;;$(name).animate({top:offset},{duration:1000,queue:false});});}); 
#floatMenu {
position:absolute;top:150px;float:left;width:45px;}
#floatMenu ul {list-style: none;}
#floatMenu ul li a {-webkit-transform:scale(0.6);-moz-transform:scale(0.6);-o-transform:scale(0.6);-webkit-transition-duration: 0.5s;-moz-transition-duration: 0.5s;-o-transition-duration: 0.5s;opacity: 0.8;}
#floatMenu ul li a:hover {-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);opacity: 1;}
</style>
  • Terus Cari Lagi Kode </body> Setelah Ketemu Masukan Kode Dibawah ini di atas Kode Tersebut

<div id='floatMenu'>
<ul>
<li><a href='http://facebook.com/Username' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBRnuc0leeB9nxQ5Y3S5r6I-7e_-GOlzedwlIGg5J3q2CjBMy-E6sqhc6w4OP4n7hqJ9xvFRV09DhPGE4BCurv9ZeCq9CFyq_1WTG8ffbyIbhLuHcqTlqt6Q-FsxgIzEF8HxQ8klafrg4/s1600/btrix-facebook.png' style='margin-bottom: 3px;' title='Follow Me On  Facebook'/></a></li>
<li><a href='http://twitter.com/GhiyatsBlogs' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVP4QM_k1I_t4f8JiUOXg_aPDrFze9sKQu9Uif_jVIxGoNU93rDaM7vbMbAw22sQ9WHDAVpvjtPpGCMFuVmjNLO31c5xTkIZ4qiLDB1aQsg5CzjITCXcHoSh_jCT1DueFUpqUZsFfktFU/s1600/btrix-twitter.png' style='margin-bottom: 3px;' title='Follow Me On  Twitter'/></a></li>
<li><a href='http://pinterest.com/Username/' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiszGGupF4qVTkrBYtZzG6otb0ms3mOQ6CbDMYCI0oVsGwn7epmkBYsLUxNBIP7oyG1kOTsarJzDtG533RQuNqxHxP9Pda9h_-iCB1XzxF3ApWpp_mdzhrNpkMhwfJV1tfj5vg2hHvgQo4/s1600/btrix-pinterest.png' style='margin-bottom: 3px;' title='Follow Me On  Pinterest'/></a></li>
<li><a href='https://plus.google.com/User ID anda' target='_blank'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO886a92ojkeOxK3NwRsJyqZkJmrdbp0LwguexKHFz3FU8wMtEsu1lhmiNBRfnOWT_6idXFKCspSNpKs9W79Ri-E5i1_C5-Ctv_lAtVOoZGuX38y3Zkv32HkTf6sAIsyJZ6aygKgp8dgc/s1600/btrix-googleplus.png' style='margin-bottom: 3px;' title='Add Me your Circle'/></a></li>
</ul></div>

  • Ganti Username Dengan Username Facebook anda
  • Ganti GhiyatsBlogs Dengan Username Twitter anda
  • Ganti Username Dengan Username Pinterest anda
  • Ganti User ID anda Dengan ID Profile Google Plus Anda
  • Setelah Selesai, Sekarang Klik ''Simpan'' 

Demikianlah artikel mudah mudahan Artikel Bermanfaat Dan Mudah Di Pratekkan Sama Sobat, Dan Kalau Sobat Masih Kesulitan Silakan Beri Pertanyaan Dan Pendapat Tentang Artikel ini, Di Kolom Komentar Dibawah ini Terima Kasih....

Via : Blogger Trix

Unknown Waktu 20:30 4 comments:

Friday, September 6, 2013

Membuat Widget Popular Posts Keren Dengan CSS

Membuat Widget Popular Posts Keren Dengan CSS - Ghiyats Blogs | Pada kesempatan kali ini akan saya bagikan sebuah artikel yang berhubungan dengan Widget Popular Posts, Widget ini Berbeda sama Widget Populer posts lainnya Karena Widget ini dengan Nomor dan Nomor Urut dari yang Paling di Kunjungi.
Membuat Widget Popular Posts Keren Dengan CSS
Widget ini juga memiliki tampilan yang pastinya keren dan elegan, Dan Tidak menambah berat dan Loading blog kita, Kalau begitu, Langsung saja kita Coba Cara Membuatnya Dan Tutorianya seperti ini.


Membuat Widget Popular Posts Keren Dengan CSS
--------------------------------------------------------------------------------------

  • Masuk Ke Blogger.com, Dengan Akun anda
  • Setelah Berada di Dasbor Blogger, Sekarang menuju ke ''Template''
  • Klik ''Edit HTML''
  • Cari kode ]]></b:skin ,Setelah ketemu Masukan kode dibawah ini di atas/sebelum kode Tersebut
.popular-posts ul li a {
    background: none repeat scroll 0 0 #222222;
    color: #FFFFFF;
    display: block;
    margin: 10px 0;
    padding: 25px 15px 30px;
    position: relative;
    text-decoration: none;
    transition: all 0.3s ease-out 0s;
 width: 85%;
}
.popular-posts ul li a:before {
    background: none repeat scroll 0 0 #2DB3E9;
    color: #FFFFFF;
    font-weight: 700;
    height: 2em;
    line-height: 2em;
    margin-left: 88%;
    padding: 4px;
    position: absolute;
    text-align: center;
    width: 2em;
    transition: all 0.2s ease-in-out 0s;
   -moz-transition: all 0.3s ease-in-out 0s;
}
.popular-posts ul li a:hover {
    opacity: 0.8;
}
.popular-posts ul li a:hover:before {
    border-left-color: #CCCCCC;
    left: -1px;
     -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -ms-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out;
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li + li a:before {
    content: "10";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li + li a:before {
    content: "9";
}
.popular-posts ul li:first-child + li + li + li + li + li + li + li a:before {
    content: "8";
}
.popular-posts ul li:first-child + li + li + li + li + li + li a:before {
    content: "7";
}
.popular-posts ul li:first-child + li + li + li + li + li a:before {
    content: "6";
}
.popular-posts ul li:first-child + li + li + li + li a:before {
    content: "5";
}
.popular-posts ul li:first-child + li + li + li a:before {
    content: "4";
}
.popular-posts ul li:first-child + li + li a:before {
    content: "3";
}
.popular-posts ul li:first-child + li a:before {
    content: "2";
}
.popular-posts ul li:first-child a:before {
    content: "1";
}
.item-snippet {
    display: none;
}
.PopularPosts .item-thumbnail {
    display: none;
} 

  • Setalah Itu, Klik ''Simpan Template''

Begitulah Artikel ini Gimana Mudah kan ? Kalau Sobat Masih Binggung atau sobat Punya Pendapat Tentang Artikel ini , Silakan Bertanya di Kolom Komentar di Bawah ini, Semoga artikel ini Bermanfaat dan mudah untuk di Pratekkan, Terima Kasih.......

Via : All Blogger Tricks

Keep Blogging
Unknown Waktu 11:49 7 comments:

Sunday, September 1, 2013

Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog

Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog | Ghiyats Blogs - Hai, Sob.. Salam Buat Sobat Semua...  Pada Artikel yang akan saya bagikan ini di awal bulan September saya akan Bagikan Sebuah Widget Sosial Media keren untuk Sobat, Widget akan Saya bagikan Ini Adalah Widget Sosial Media.
Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog
Widget ini Kalau Kursor bergerak ke salah Satu Sosial Media, akan ada petenjuk sesuai sosial Masing Masing, Kegunaan Sosial Media Adalah Untuk Membantu Pengunjung untuk berkomunikasi di jejaring sosial dan bisa juga untuk menambah traffic blog kita, begitulah langsung saja, Kita akan mencoba membuatnya dan Tutorialnya Seperti ini :


Widget Sosial Media Icons Keren Dengan Effect Hover Untuk Blog
---------------------------------------------------------------------------------


  • Login Ke Blogger.com
  • Klik Menu ''Tata Letak'', Di Dasbor Blogger
  • Klik ''Tambah Gadget''
  • Pilih Gadget ''HTML/JavaScript'', Dan Masukan kode dibawah ini di dalamnya
<div class="container">
<ul class="action-bar clearfix">
<li>
<a href="http://twitter.com/Username" class="like">
<span class="zocial-twitter"></span>
<span class="tooltip">Follow</span>
</a>
</li>
<li>
<a href="https://plus.google.com/GOOGLEPLUSID" class="favourite">
<span class="zocial-googleplus"></span>
<span class="tooltip">Circle us</span>
</a>
</li>
<li>
<a href="https://www.facebook.com/Username" class="comment">
<span class="zocial-facebook"></span>
<span class="tooltip">Like us</span>
</a>
</li>
<li>
<a href="http://gias-alauddin.blogspot.com/feeds/posts/default" class="share">
<span class="zocial-rss"></span>
<span class="tooltip">Subscribe</span>
</a>
</li>
</ul>
</div>
<style>
@charset "utf-8";
@import url(http://weloveiconfonts.com/api/?family=zocial);
/* zocial */
[class*="zocial-"]:before {
  font-family: 'zocial', sans-serif;
}
/* ---------- GENERAL ---------- */

a { text-decoration: none; }
ul {
list-style: none;
margin: 0;
padding: 0;
}
.clearfix { *zoom: 1; }
.clearfix:before, .clearfix:after {
content: "";
display: table; }
.clearfix:after { clear: both; }
.container {
display: block;
height: 64px;
position: relative;
width: 256px;
}
/* ---------- Action Bar ---------- */
.action-bar li {
float: left;
}
.action-bar a {
-webkit-box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
box-shadow: inset 0 -2px rgba(0, 0, 0, .5);
color: #e7e7e7;
display: block;
font-size: 32px;
height: 64px;
line-height: 64px;
position: relative;
text-align: center;
-webkit-transition: background .3s;
-moz-transition: background .3s;
-ms-transition: background .3s;
-o-transition: background .3s;
transition: background .3s;
width: 64px;
}
.action-bar a:hover .tooltip {
margin-top: 16px;
opacity: 1;
}
.tooltip {
border-radius: 3px;
font-size: 14px;
height: 28px;
left: 50%;
line-height: 28px;
margin: 0 0 0 -50px;
opacity: 0;
position: absolute;
top: 100%;
-webkit-transition: margin-top .3s, opacity .3s;
-moz-transition: margin-top .3s, opacity .3s;
-ms-transition: margin-top .3s, opacity .3s;
-o-transition: margin-top .3s, opacity .3s;
transition: margin-top .3s, opacity .3s;
width: 100px;
}
.tooltip:before {
content: "";
height: 8px;
left: 50%;
margin: -4px 0 0 -4px;
position: absolute;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 8px;
}
.like,
.like .tooltip,
.like .tooltip:before { background: #65B1F8; }
.like:hover { background: #65B1F8; }
.favourite,
.favourite .tooltip,
.favourite .tooltip:before { background: #c93037; }
.favourite:hover { background: #b02b32; }
.comment,
.comment .tooltip,
.comment .tooltip:before { background: #43438e; }
.comment:hover { background: #393978; }
.share,
.share .tooltip,
.share .tooltip:before { background: #FF8000; }
.share:hover { background: #FF8000; }
</style>
  • Ganti Username Dengan Username Twitter anda
  • Ganti GOOGLEPLUSID Dengan ID Google+ anda
  • Ganti Username Dengan Username Facebook anda
  • Ganti gias-alauddin.blogspot.com Dengan Url Blog anda
  • Setelah Semua Di Ganti, Sekarang Klik ''Simpan''

Dan Demikianah Artikel ini semoga Artikel ini Bermanfaat Dan Mudah Untuk Di Pratekkan, Maaf Kalau ada salah salah kata, Kalau sobat masih binggung silakan berkomentar atau sobat punya pendapat tentang artikel ini, Silakan berkomentar di kolom komentar dibawah ini, Terima Kasih...

Via : All Blogger Tricks

Unknown Waktu 05:00 8 comments:
‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger