Ghiyats Blogs

Cara Membuat Widget Sosial Buka/Tutup di Blog

2014-06-03T14:14:00.000+07:00

Cara Membuat Widget Sosial Buka/Tutup di Blog | Ghiyats Blogs - Salam sobat, Di awal Bulan juni ini akan saya awali dengan artikel sosial media, widget yang akan saya bagikan begitu menarik dan berbeda kalau biasanya widget sosial media dengan bentuk begitu saja.

Tapi ini dengan bentuk unik widget yang akan saya bagikan memiliki keunggulan pada bentuk yaitu bisa di buka tutup, maksudnya widget berbentuk sebuah bola yang kalau di buka akan keluar sosial media begitu banyak dan bisa di tutup kembali.

Tutorialnya seperti ini :

Pertama kita login ke blogger
setelah itu ke menu TEMPLATE >> Edit Html
Setelah berada di sana, cari kode </head> untuk mempermudah pencarian klik tombol Ctrl + F, Setelah ketemu masukan kode dibawah ini di atas atau sebelum kode </head>

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/> <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/> <script type='text/javascript'>stLight.options({publisher: "1cce35ce-6744-4bac-9fa5-8f17a67a6fa6", onhover:false});</script> <link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

Terus Cari kode </body> dan masukan kode di bawah ini di atasnya

<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisOrnament'/><script type='text/javascript'>stlib.shareEgg.createEgg('shareThisOrnament', ['facebook','twitter','googleplus','pinterest','stumbleupon','linkedin','email','sharethis'], {title:'

<data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'holiday'});</script></div>

Setelah Klik Simpan

Demikianlah artikel ini yang berjudul ''Cara Membuat Widget Sosial Buka/Tutup di Blog'' Semoga artikel ini bermanfaat dan mudah untuk di pratekkan dan kalau sobat punya pendapat tentang artikel ini silakan beri komentar di kolom komentar di bawah ini,Terima Kasih..

Via : Myblogger-Tricks

Tutorial Membuat Sosial dan Box Subscribe Widget Cantik

2014-05-23T17:35:00.004+07:00

Tutorial Membuat Sosial dan Box Subscribe Widget Cantik | Ghiyats Blogs - Hai, Salam Untuk sobat semua.. Widget yang saya akan bagikan ini berguna dan bermanfaat untuk membuat blog menjadi bisa di kenal, dan memang sangat di perlukan widget seperti ini.

Widget Sosial dan Box Subscribe atau ( Kotak Berlangganan ) sangat berguna untuk membuat blog lebih di kenal lagi Seperti Widget sosial media yang sangat membantu kita para admin untuk bisa menyebar artikel artikel kita supaya bisa di kenal lagi lebih jauh dan membuat pengunjung bisa berkomunikasi dan berinteraksi dengan admin blog tersebut.

Sedangkan Widget Kotak Berlangganan sangat membantu para pengunjung yang suka para blog tersebut dan ingin bisa mendapat update artikel terbaru dari blog tersebut, Tapi yang akan saya bagikan langsung keduanya dalam satu widgetnya yang membuat lebih keren dan juga dengan tampilan warna yang stylish membuat widget begitu cantik, dan ini dia demonya.

DEMO

Kalau sobat tertarik ini dia tutorialnya :

Login Ke Blogger.com
Setelah berada di Dasbor blogger >> Menu Template
Edit HTML >> CarI kode <data:post.body/> Setelah ketemu masukan kode di bawah ini di atas/sebelum kode <data:post.body/>
Ket : Kode <data:post.body/> ada 2-4 kode, jadi kalau widget ini tidak muncul coba anda ganti lokasi kodenya

<section class="newsletter">

<h2>

Tired of checking for new posts ?

</h2>

<div id="form-newsletter">

<div class="social facebook">

<a href="https://www.facebook.com/Username" target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGxpkiHaYPi8Ufiay47VJvaibz37SlWBGMP0GmZbN9Xy-qogXyidKNswrtUtw6P0nmOtKdlU8LVbmDJD7YV-ULXvAaHwBSn_0T72rj0yJIfaBGWuzgcpdPkhvLsAySIrfpxGi1QbG8tHRz/s1600/nl-facebook@2x.png" />

</a>

<iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2FAllBloggerTricks&width=90&height=21&colorscheme=light&layout=button_count&action=like&show_faces=false&send=false&appId=519648428126767&locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">

</iframe>

</div>

<div class="social twitter">

<a href="https://twitter.com/ Username " target="_blank">

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgN8opOnNsb5rnWA-X6DIvlrh3FRJpj09Bk1F43C8i4tr0XG-QjI-pNdEB3yCTZQJ7RPuCRT63nRekDcqocgckty4faVvmt0CJqcN-7jEEcVeEUAMwrETk3ZZwM3vtQbWkWbB0a8yjGmohS/s1600/nl-twitter@2x.png" />

</a>

<iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&id=twitter-widget-0&lang=en&screen_name=AllBloggerTrick&show_count=false&show_screen_name=false&size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">

</iframe>

<script>

!function(d,s,id){

var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';

if(!d.getElementById(id)){

js=d.createElement(s);

js.id=id;

js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');

</script>

</div>

<div class="newsletter-form">

<fieldset>

<h2>

Get all posts directly in your mail.

</h2>

<div class="fields">

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

<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />

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

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

<input class="subscribe" name="commit" type="submit" value="Subscribe" />

</form>

</div>

</fieldset>

</div>

</div>

</section>

<style>

.newsletter{text-align:center;margin:20px 0;}

.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}

.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}

.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}

.newsletter:before,.newsletter:after{content:" ";display:table}

.newsletter:after{clear:both}

.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}

.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}

.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}

.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}

.newsletter .social a:hover img{transform:scale(1.1)}

.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}

.newsletter .social .social-box.fb-like{margin-left:-45px}

.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}

.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}

.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}

.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}

.newsletter .newsletter-form fieldset .fields{position:relative}

.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}

.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}

.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}

</style>

<script type="text/JavaScript">

fontsize = function () {

var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width

$(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);

};

$(window).resize(fontsize);

$(document).ready(fontsize);

</script>

Ganti Username Dengan Username id Sesuai Sosial media
Ganti Dengan kata kata yang anda inginkan
Setelah anda selesai Klik SIMPAN

Demikianlah artikel yang berjudul ''Tutorial Membuat Sosial Dan Box Subscribe Widget Cantik'' Semoga Bermanfaat Dan Mudah untuk di gunakan, Silakan Beri pendapat anda tentang artikel ini dan kalau sobat punya informasi silakan berkomentar di kolom komentar di bawah ini, Terima Kasih...

Via : All Blogger Tricks

Keep Blogging..

Tutorial Membuat Widget Sosial Media Dengan Efek Memutar Di Blog

2014-05-11T15:05:00.001+07:00

Tutorial Membuat Widget Sosial Media Dengan Efek Memutar Di Blog | Ghiyats Blogs -Halo Salam untuk Sobat semua... Pada artikel ini akan saya bagikan untuk sobat semua, Sebuah widget Sosial media Dengan Efek Memutar di blog.

Widget Ini Memiliki keunggulan yang tidak akan keren, dengan widget sosial media yang pernah saya bagikan, Keuggulannya ketika panah layar di arahkan ke salah satu sosial media, sosial media itu akan memutar 360 derajat dan kembali lagi ke bentuk semula, Kalau Sobat Tertarik pada Widget sosial media ini Tutorial seperti ini :

Pertam Login ke blogger.com, dan masuk dengan akun anda
Setelah itu, pergi ke menu ''Tata Letak'' >> Tambah Gadget
Terus cari Gadget yang bertuliskan ''HTML/JavaScript'' setelah ketemu klik dan masukan kode dibawah ini ke dalam gadget tersebut.

style>

    #social img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
    }
    #social img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }
    .comments .comments-content .icon.blog-author{position:absolute;top:-1px;right:-12px;margin:0;background-image: url(http://cdn2.iconfinder.com/data/icons/crystalproject/16x16/apps/keditbookmarks.png);width:36px;height:36px}
    .CSS_LIGHTBOX_BG_MASK
    {
    background-color:#990000 !important;opacity: 0.8 !important;
    }
    .post img {max-width:95% !important;}

    </style>

    <br />
    <center>
    <div id="social">
    <a href="http://feeds.feedburner.com/feedburnerurl" target="_blank" title="Grab Our Rss Feed"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvw5Vc-RtxNO9gxhlKZNqXqIUAFX5eDiZdiHD9naqk5PtkkVkRh64GJwmrMHl7pAWlb0OeH5WeWMEwt_zd0-BiMd_7UJA-_fxR7KSjvG-DXHfROSwKXo0N_OYpPczge11lQWYkgcpee-uF/s1600/RSS-48x48.png" style="margin-right: 1px;" /></a><a href="Url Sosial Media anda" rel="nofollow" target="_blank" title="Get Free Updates Via Email"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfdxKrb_3Ch6sQ7pKKgHAahh5xnDYw_u0h8QNXNiKQgCJGu-ftZg06vfIL5c55GWT0p0fHBuukbh6lJCnqGQYxRZ__NoOwlBv_NnYCMQa5u4EeqfFg-xyF6gWnjZTFg5Cz28uSruK5w6o0/s1600/RSS-EMAIL-48x48.png" style="margin-right: 1px;" /></a><a href="Url Sosial Media anda" rel="nofollow" target="_blank" title="Like Our Facebook Page"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy1WyYLIvKhTyttzMkfUi5Ajyb3mCkdbbrgs7G_AEUtX-WqD9Lh6n4ho9V5C_q76KeayyXD3v3eHszinCR9V_CXvdVp10QRT4F5d4g6mW0uthBJITLGi1o4WHYpjHdt485RJmgnqoZtO7K/s1600/FACEBOOK-48x48.png" style="margin-right: 1px;" /></a><a href="Url Sosial Media anda" rel="nofollow" target="_blank" title="Follow Our Updates On Twitter"><img alt="Icon" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjdtBdVFE7S39XWVDavw7JYcJOtrFs__ZAVHs3kHdXWHEYLV1JRL0oXlUCYM10wGK4-AOlZOXLvrjyoh2PIp4fPLnvku-IVApAyPNSNvN5YFGhehsflzTuszxZFdup5IzL0qatBmF1GBrE/s1600/TWITTER-48x48.png" style="margin-right: 1px;" /></a><a href="Url Sosial Media anda" rel="nofollow" target="_blank" title="Follow Us On Google+"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjz3hlVM6T1tkF8G9UQzTPIXIDDiwhzyr8HElJlBOIWyGYrX2970JfZnlkma-V7a1tdxd-1Fl13ccC1IclrMCI8bd9XNTwR9FDk4l7nmEkW96OGcSzsccB4gBqTcmJUByDvh9WWQ27DJBP/s1600/GOOGLE-PLUS-48x48.png" style="margin-right: 1px;" /></a><a href="Url Sosial Media anda" rel="nofollow" target="_blank" title="Follow Our Pins"><img alt="Follow Me on Pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXBhIsaXVHOxlHb4EjCRZjVPGHfW8fG2AaSyPYPFCdiazhDmW85enw25jX-5JP1e88SrZShPfPXEAX06ex7AHQ3acI2xJxrrdGAL_5CM6malDgBywL_QYspdDKLcfvfO0p5cSb2_fIOZyK/s1600/PINTEREST-48x48.png" style="margin-right: 1px;" /></a></div>
    </center>

Ganti Url Sosial Media anda dengan url sosial media sesuai kode
Setelah Di ganti, Baru sekarang klik Simpan
Dan Widget anda sudah, Tampil

Demikianlah artikel yang baru saya bagikan semoga bermanfaat dan mudah untuk dipratekkan, Silakan berii pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih..

Via : All-bloggertricks

Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript

2014-05-05T07:33:00.004+07:00

Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript | Ghiyats Blogs - Hai, Salam Untuk Semua.. Mudah Mudahan Semua Sahabat dalam keadaan sehat semua ya, Pada artikel yang akan bagikan ini kita akan membuat tentang menu navigasi, Tentu sobat pada tau kan apa itu menu navigasi.

Tapi yang akan saya bagikan untuk sobat semua Kali ini, bukan Menu navigasi biasanya Tapi Menu Navigasi Dropdown, Mungkin sudah banyak blog yang membagikan bermacam macam menu dropdown dengan jenis yang berbeda beda, Tapi menu Dropdown yang bagikan ini, memiliki keunggulan Seperti Menu Dengan Css 3, Langsung saja di bawah cara membuatnya.

Login ke Blogger.com
Ketika Di Sudah masuk, Sekarang menuju ke menu Tata Letak atau Layout
Terus Klik Tambah Gadget >> Setelah itu pilih menu HTML/JavaScript
Setelah itu, masukan kode dibawah ini di dalam widget tersebut.

<style>
/*-- CSS3 Drop Down Menu -----*/

#bt-menu, #bt-menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#bt-menu {
width: 960px;
margin: 60px auto;
background: #DADFE1;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 1px 1px #777;
-webkit-box-shadow: 0 1px 1px #777;
box-shadow: 0 1px 1px #777;
}
#bt-menu:before,
#bt-menu:after {
content: "";
display: table;
}
#bt-menu:after {
clear: both;
}
#bt-menu {
zoom:1;
}
#bt-menu li {
float: left;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#bt-menu a {
float: left;
padding: 12px 30px;
color: #000000;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 0px 0 #000;
}
#bt-menu li:hover > a {
background: #333333;
color: #fafafa;
}
*html #bt-menu li a:hover { /* IE6 only */
color: #333333;
}
#bt-menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 9999;
background: #DADFE1 url('images/pageglare.png') no-repeat scroll;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
#bt-menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#bt-menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#bt-menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#bt-menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#bt-menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#bt-menu ul a:hover {
background-color: #333333;
}
#bt-menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#bt-menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333333;
}
#bt-menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #333333;
}
#bt-menu ul li:first-child a:hover:after {
border-bottom-color: #DADFE1;
}
#bt-menu ul ul li:first-child a:hover:after {
border-right-color: #DADFE1;
border-bottom-color: transparent;
}
#bt-menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}

</style>

<ul id="bt-menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">Jquery</a></li>
<li><a href="#">Blogger Tips</a></li>
</ul>
</li>
<li><a href="#">Free Vector</a>
<ul>
<li><a href="#">Social Icon</a></li>
<li><a href="#">Website Icon</a></li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Tools</a>
<ul>
<li><a href="#">Parser Tool</a></li>
<li><a href="#">Escape Tool</a></li>
</ul>
</li>
</ul>

Ganti # dengan url yang ingin di tuju dan ganti judul menu sesuai kemauan anda
Setelah klik simpan

Demikianlah artikel yang sudah saya bagikan kali ini, ''Yang berjudul Cara Membuat Menu Dropdown Css3 Keren Tanpa Javascript '' dan Semoga Bermanfaat dan berguna, Terima Kasih....

Via : MyBlogger-Tricks

Keep Blogging..

Simple Flat Blogger Template Version 3

2014-04-18T16:28:00.004+07:00

Simple Flat Blogger Template Version 3 | Ghiyats Blogs - Hai Sobat.. Pada Artikel yang akan saya bagikan ini, saya akan memberikan penjelasan, ada di salah satu artikel dan di situ ada salah satu komentar yang ingin memiliki sosial media, jam, dan jumlah komentar seperti di beranda blog ini.

Karena widget itu dari template blog, jadi akan saya bagikan template yang saya pakai, Template ini dari Mas Sugeng, sebenarnya template yang saya akan bagikan berbeda dengan template yang lagi saya pakai karena template ini adalah versi pertama, sedangkan yang akan saya bagikan adalah versi 3,Tenang saya isi di dalam template yang akan saya bagikan ini sama dengan template blog ini.

Kalau sobat tertarik ini dia template simple flat blogger versi 3 :

Template Name	:	Simple Flat Blogger Template
Designer	:	Mas Sugeng
Release Date	:	21 Maret 2013
Updated On	:	16 Februari 2014
Version	:	3

Keunggulan :

SEO Ready
Responsive
Auto Readmore
Breadcrumbs
Related Post

DEMO | DOWNLOAD

Demikianlah artikel ini, Semoga apa yang saya bagikan bermanfaat dan berguna, Kalau sobat punya pendapat atau pertanya silakan berkomentar di kolom komentar di bawah ini, Terima Kasih..

Via : Mas Sugeng

Keep Blogger..

Tontowi/liliyana dan Simon Santoso Juara singapore open 2014

2014-04-14T07:38:00.000+07:00

Tontowi/liliyana dan simon santoso Juara singapore open 2014 - hai, Ada kabar gembira tentang ajang singapore open 2014, 2 gelar direbut oleh indonesia, masing masing dari tunggal putra dan ganda campuran.

Dari tunggal putra yaitu simon santoso berhasil menjadi juara setelah mengalahkan tunggal putra asal malaysia, yang merupakan tunggal putra nomor 1 di dunia , Lee chong wei dengan skor 21 - 15 dan 21 - 10,

Sedangkan pasangan indonesia lainnya dari ganda campuran indonesia, yaitu Tontowi ahmad/ Liliyana natsir mengalahkan pasangan indonesia lainnya Riki Widianto/ Richi Dili Puspita dengan skor 21 - 15, 22 - 20, ini adalah gelar kedua untuk pasangan Tontowi Ahmad/ Liliyana Natsir Setelah memenangkan kejuaraan ini pada tahun sebelumnya di ajang yang sama juga.

Membuat Widget Popular Posts Elegant dengan CSS

2014-04-04T21:11:00.001+07:00

Membuat Widget Popular Posts Elegant dengan CSS | Ghiyats Blogs - Halo, apa kabar semua ? saya harus semuanya dalam keadaan baik ! Pada kesempatan hari akan saya bagikan sebuah widget keren Yaitu widget popular posts berbeda dengan popular posts yang lainnya, Popular posts kali ini lebih elegan dan cantik.

Popular posts kali ini memiliki bentuk yang cantik dengan gambar, judul dan rinkasan dari artikel tersebut, Widget ini menggunakan css yang membuat widget ini menjadi lebih keren, langsung saja kalau sobat semua mau coba, ini dia tutorialnya

Pertama : Memasukan kode CSS

Pertama login ke blogger
pergi ke menu Template
Klik Edit HTML
Setelah itu, cari kode ]]><b:skin setelah ketemu masukan kode di bawah ini di atas kode tadi

/* Popular Posts Widget */

.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }

.PopularPosts .item-title { position: relative; }

.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }

.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }

.item-snippet { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-weight: 900; left: 12%; padding: 10px; position: absolute; text-align: center; top: 95px; width: 70%; }

.item-content:hover img {transform: rotate(10deg) scale(1.2);}

.item-content { position: relative; }

Kedua : Memasukan kode js

Masih di Edit html, setelah itu cari kode </body> setelah ketemu masukan kode dibawah ini di atas kode tersebut

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<script type='text/javascript'>
$(document).ready(function() {$('.PopularPosts img').attr('src', function(i, src) {return src.replace( 's72-c', 's400' );});});
</script>
    <script type='text/javascript'>
    //<![CDATA[
    // Popular Posts customization by AllBloggerTricks.com
    // Trim Code by MS-potilas 2012
    $('.popular-posts ul li .item-snippet').each(function(){
     var txt=$(this).text().substr(0,120);
      var j=txt.lastIndexOf(' ');
      if(j>10)
         $(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,'...'));
    });
    //]]>
    </script>

Catatan : Kode di atas, Yang berwarna merah itu , kalau seandainya kalau di template anda sudah memiliki kode jquery, silakan kamu hapus kode yang berwarna merah di atas.
Setelah selesai Klik Simpan

Demikianlah artikel ini, semoga artikel yang baru saya bagikan ini bermanfaat dan berguna untuk anda, Silakan beri pendapat tentang artikel ini, atau kalau sobat punya masalah tentang artikel silakan, komentar di bawah ini, Terima Kasih..

Via : All Blogger-Tricks

Keep Blogging

2 Wakil Indonesia Juara Di All England 2014

2014-03-12T12:07:00.001+07:00

2 Wakil Indonesia Juara Di All England 2014 | Ghiyats Blogs - Halo, Semua Berita gembira datang dari cabang bulutangkis dua wakil indonesia yaitu Mohammad Ahsan/Hendra Setiawan dan Tontowi Ahmad/ Liliyana Natsir Menjadi juara di Kejuaraan All England Super Series 2014

Keberhasilan mereka membawa harum untuk bangsa indonesia, Dari Ganda Putra yaitu Mohammad Ahsan/Hendra Setiawan yang peringkat 1 dunia, mereka berhadapan dengan Pasangan Nomor 2 dunia asal jepang yaitu Hiroyuki Endo / Kenichi Hayakawa, Ganda Putra Asal indonesia itu Menang dengan skor 21-19, 21-19, dan ini adalah gelar pertama ganda putra Mohammad Ahsan/Hendra Setiawan

Sedangkan Pasangan Ganda Campuran kita Tontowi Ahmad/ Liliyana Natsir ini adalah gelar ketiga mereka di ajang ini secara berturut turut dari tahun 2012, 2013 dan 2014 ini membuat rekor hatrick di kejuaraan ini, di final mereka mengalahkan peringkat 1 dunia asal china yaitu Zhang Nan/ Zhao Yunlai dengan skor 21-13, 21-17 skor ini sama dengan skor di final all england 2013 melawan mereka juga.

Membuat Menu Drop Down Dengan Animasi Di Blog

2014-02-18T11:42:00.002+07:00

Membuat Menu Drop Down Dengan Animasi Di Blog | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, akan saya bagikan menu drop down keren dengan bentuk dan tampilan yang keren dan menarik

Menu ini dengan CSS Dan Tampilan Gambar pada bagikan menunya, Menu ini tampilan animasi keren yang sangat elegan dan indah, Langsung saya kita coba membuat menu ini dan tutorialnya seperti ini :

Login ke Blogger
Pergi ke menu ''Template'' >> Edit HTML
Setelah itu cari kode ]]></b:skin dan kalau sudah ketemu, copy kode dibawah ini, dan masukan di atas atau sebelum kode tadi

#mbt_menu {
background: #656870;
width: 100%;
margin: 0px;
height: 60px;
padding: 0px;
font-size: 13px;
font-family: 'Trebuchet MS', sans-serif;
font-weight: normal;
word-spacing: 2;
-webkit-font-smoothing: antialiased;
}

#mbt_menu li.home a {
padding: 0px 30px;
}

#mbt_menu li.home img {
vertical-align: middle;
}

#mbt_menu ul {
height: 60px;
list-style: none;
margin: 0;
padding: 0px;
}

#mbt_menu li {
float: left;
padding: 0px;
}

#mbt_menu li a {
background: #656870;
color: #CCC;
display: block;
font-weight: bold;
line-height: 60px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li a:hover, #mbt_menu ul li:hover a {
background: #46484E;
color: #FFFFFF;
text-decoration: none;
-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);
transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);
}

#mbt_menu li ul {
background: #656870;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/;
}

#mbt_menu li:hover ul {
display: block;
}

#mbt_menu li li {
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}

#mbt_menu li:hover li a {
background: none;
color: #979EAF;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}

#mbt_menu li ul a {
display: block;
height: 60px;
font-size: 13px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}

#mbt_menu> ul > li ul li a {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-webkit-transition: color ease 0.3s;
-moz-transition: color ease 0.3s;
-ms-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
}

#mbt_menu li ul a:hover, #mbt_menu li ul li:hover a {
background: #46484E;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: #FFF;
text-decoration: none;
padding: 0px 10px 0px 15px;
}

Setelah itu klik simpan

SETELAH ITU

Kita Pergi ke Tata Letak
Klik Tambah Gadget >> Cari gadget HTML/JavaScript
Setelah ketemu, Copy dan Paste di dalam gadget Tadi

<div id="MBT_menu">

<ul>

<li class="home"><a href="http://nama blog anda/" title="Home Page"><img alt="Home" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZYZaAKgJAW9Cnw2oBMFpfdd7xzHyiaxwBIseBEaqw8Qbtkvzx4I-SLcAV0rD6efHQIdfUt35QvgiqZaze06ybzuD-UI9h0ZmQLbKvqzWE9-ji2Cwz6o9uEr23gf0dvgNzhy6QgUCOnGx7/s1600/Very- Basic-Home-icon.png"/></a></li>

<li class="sub "><a href="#"><span>Blogger</span></a>

<ul>

<li><a href="#"><span>SEO</span></a></li>

<li><a href="#"><span>Template</span></a></li>

<li><a href="#"><span>Widgets</span></a></li>

<li><a href="#"><span>Plugins</span></a></li>

</ul>

</li>

<li><a href="#"><span>Applicatoin</span></a>

<ul>

<li><a href="#"><span>HTML Encoder</span></a></li>

<li><a href="#"><span>HTML Editor</span></a></li>

</ul></li>

<li><a href="#"><span>Tools &#187</span></a>

<ul>

<li><a href="#"><span>Online HTML Editor</span></a></li>

<li><a href="#"><span>Color Code</span></a></li>

<li><a href="#"><span>Page Rank Checker</span></a></li>

</ul>

</li>

<li><a href="#"><span>Faqs</span></a></li>

<li><a href="#"><span>About Us</span></a></li>

<li><a href="#"><span>Contact Us</span></a></li>

</ul>

</div>

Ganti http://nama blog anda/ Dengan Url blog anda
Ganti # dengan url yang inngin di tuju
Ganti Blogger, Contact us dan lainnya dengan nama menu yang anda inginkan
Setelah semua di ganti sesuai kemauan anda, Sekarang klik simpan

Demikianlah artikel ini semoga apa yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Silakan beri pendapat anda di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger - Tricks

Keep Blogging

Membuat Widget Social Media Dengan Tooltip Di Blog

2014-02-09T12:47:00.001+07:00

Membuat Widget Social Media Dengan Tooltip Di Blog | Ghiyats Blogs - Halo, Pada Kesempatan Hari ini akan saya bagikan Sebuah sosial media Dengan efek Tooltip, Widget ini dengan gambar icon sosial tersebut dan tampilan keren dan menarik.

Kalau begitu langsung, saja kita coba dan membuat widget ini, Tutorial Seperti di bawah ini :

Membuat Widget Social Media Dengan Tooltip Di Blog :

Login ke Blogger.com
Terus, Kita ke menu ''Template'' >> Edit HTML
Dan cari kode ]]></b:skin> , Setelah itu Copy kode dibawah ini dan taruhlah di atas kode Tadi

#social_profiles-wrap{
width: 450px;
height: 80px;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZzYQtxjmwJr3hMCmc00qoRkaYNRhnR9XRjv4ijWq3ijmpePFikq-OkZXi4t3so-mjqml4UiRCo1TFwo5Iv9VHPT6RWE6Wh7aknNEY6HOJ6t89BlPEmMop9S0OSqPuCJ_rgOmIaqI0q4qx/s1600/Bg.png") no-repeat 15px 10px;
padding:22px 0px 15px 100px;
margin: 14px auto;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.social_profiles{
height: auto;
margin: 0 auto;
}
.social_profiles li{
float: left;
list-style: none;
}
.social_profiles li a {
display: block;
width: 40px;
height: 40px;
margin: 0 auto;
margin-top: 20px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}

.social_profiles li .facebook {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKG2tOANHCFGQoGbXteHZeE14Waz8WiAsh9DmA7mmdCQYBuMpoI3jpJ8cnyGhKYMEXxIWHL92NOJ-slKJJzgUkTrS4wZ43-1nvyKo-bBk5FK2SDkokxa2RskZsW1EYvo5xVM992-sO4Xrf/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
width: 80px;
height: 20px;
line-height: 20px;
padding: 5px;
left: 50%;
margin-left: -52px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-size: 14px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #446cb3;
background: #446cb3;
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 5%;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
-moz-transform: translate(35px) rotate(25deg) scale(1.5);
-o-transform: translate(35px) rotate(25deg) scale(1.5);
-ms-transform: translate(35px) rotate(25deg) scale(1.5);
transform: translate(35px) rotate(25deg) scale(1.5);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;

}
.social_profiles li a span:before,
.social_profiles li a span:after {
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.social_profiles li a span:after {
bottom: -15px;
margin-top: 6px;
margin-left: -12px;
border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
opacity: 0.9;
bottom: 50px;
-webkit-transform: translate(0px) rotate(0deg) scale(1);
-moz-transform: translate(0px) rotate(0deg) scale(1);
-o-transform: translate(0px) rotate(0deg) scale(1);
-ms-transform: translate(0px) rotate(0deg) scale(1);
transform: translate(0px) rotate(0deg) scale(1);
}

Setelah selesai, Klik Simpan

Selanjutnya..

Sekarang ke menu ''Tata letak'' >> ''Tambah Gagdet'' >> ''HTML/JavaScript''
Setelah itu, Masukan kode di bawah ini, di dalamnya
Atau.. Dengan Cara Kedua, ''Template'' >> ''Edit HTML''
Terus cari kode <data:post.body> Setelah ketemu masukan kode dibawah ini, di dalamnya

<div id="social_profiles-wrap">
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/Usernametarget="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/Username target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/Usernametarget="_blank"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/Usernametarget="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/Usernametarget="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/Usernametarget="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.comUsernametarget="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/Usernametarget="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href=Mailto: target="_blank"><span>Mail</span></a></li>
</ul></div>

Ganti Username Dengan Id dari masing masing Sosial media tersebut.
Setelah selesai, Klik Simpan

Demikianlah artikel ini semoga artikel yang saya bagikan ini bermanfaat dan mudah untuk di pratekkan, Beri pendapat tentang artikel ini dan kalau sobat masih bingung silakan kasih pertanyaan anda, di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger-Tricks

Keep Blogging

Tutorial Kotak Berlangganan Email Keren Dengan Css

2014-01-23T15:16:00.002+07:00

Tutorial Kotak Berlangganan Email Keren Dengan Css | Hai Pada artikel yang saya akan bagikan ini, Akan saya bagikan sebuah Widget keren Dan cantik, Yaitu Widget kotak berlangganan di email, Widget ini berwarna latar biru.

Yang sudah saya bilang, Kegunaan Widget ini adalah untuk para pengunjung yang ingin mengetahui artikel artikel yang baru dan blog tersebut yang otomatis ke alamat email, Langsung saja kita coba Membuat Widget ini seperti di bawah ini

Login ke Blogger
Pergi ke ''Tata Letak'' >> Tambah Gadget
Setelah cari ''HTML/JavaScript'', dan masukan kode di bawah ini di dalam gadget tersebut

<center>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Username', 'popupwindow', 'scrollbars=yes,width=70%,height=520');return true" class="login">
<h1>SUBSCRIBE TODAY</h1>
<img src="http://png.findicons.com/files/icons/2198/dark_glass/128/mail_appt.png" alt="Smiley face" align="LEFT" height="48" width="48" /> <center><font size="3" color="white"><span style="line-height:25px"> Sign up and receive our free Newsletter  </span></font></center><br/>
<input type="hidden" value="Username" name="uri" />
<input type="email" name="email" class="login-input" placeholder="Email Address" autofocus />
<input type="hidden" name="loc" value="en_US" />
<input type="submit" value="Subscribe" class="login-submit" />
</form>
</center>
<style>
a.tt{
position:relative;
z-index:24;
color:#3CA3FF;
font-weight:bold;
text-decoration:none;
}
a.tt span{ display: none; }
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
display:block;
position:absolute;
top:0px; left:0;
padding: 15px 0 0 0;
width:200px;
color: #993300;
text-align: center;
filter: alpha(opacity:90);
KHTMLOpacity: 0.90;
MozOpacity: 0.90;
opacity: 0.90;
}
a.tt:hover span.top{
display: block;
padding: 30px 8px 0;
background: url(bubble.gif) no-repeat;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
display: block;
padding: 0 8px;
}
a.tt:hover span.bottom{
display: block;
padding:3px 8px 10px;
color: #548912;
}

::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #bcc0c8 !important;
}
::-webkit-input-placeholder {
color: #bcc0c8;
}
:-ms-input-placeholder {
color: #bcc0c8 !important;
}
.input {
font: 12px/20px "Lucida Grande", Verdana, sans-serif;
color: #404040;
background: #ebc9a2;
}
.input {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.login {
padding: 18px 20px;
width: 80%;
background: #3f65b7;
background-clip: padding-box;
border: 1px solid #172b4e;
border-bottom-color: #142647;
border-radius: 5px;
background-image: -webkit-radial-gradient(cover, #437dd6, #3960a6);
background-image: -moz-radial-gradient(cover, #437dd6, #3960a6);
background-image: -o-radial-gradient(cover, #437dd6, #3960a6);
background-image: radial-gradient(cover, #437dd6, #3960a6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.5);
}
.login > h1 {
margin-bottom: 20px;
font-size: 24px;
font-weight: bold;
text-align: center;
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.login-input {
display: block;
width: 90%;
height: 37px;
margin-bottom: 20px;
padding: 0 9px;
color: white;
text-shadow: 0 1px black;
background: #2b3e5d;
border: 1px solid #15243b;
border-top-color: #0d1827;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0));
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.2);
}
.login-input:focus {
outline: 0;
background-color: #32486d;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 4px 1px rgba(255, 255, 255, 0.6);
}
.lt-ie9 .login-input {
line-height: 35px;
}
.login-submit {
display: block;
width: 100%;
height: 37px;
margin-bottom: 15px;
font-size: 14px;
line-height: 10px;
font-weight: bold;
color: #294779;
text-align: center;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #adcbfa;
background-clip: padding-box;
border: 1px solid #284473;
border-bottom-color: #223b66;
border-radius: 4px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -moz-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: -o-linear-gradient(top, #d0e1fe, #96b8ed);
background-image: linear-gradient(to bottom, #d0e1fe, #96b8ed);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), inset 0 0 7px rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.15);
}
.login-submit:active {
background: #a4c2f3;
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4), 0 1px rgba(255, 255, 255, 0.1);
}
.login-help {
text-align: center;
}
.login-help > a {
font-size: 11px;
color: #d4deef;
text-decoration: none;
text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}
.login-help > a:hover {
text-decoration: underline;
}
</style>

Ganti Username dengan Id Feedburner anda
Setelah itu, Klik Simpan

Demikianalha rtikel ini semoga apa yang saya bagikan ini bermanfaat dan mudah di pratekkan, silakan beri pendapat tentang artikel ini, di kolom komentar dibawah ini, Terima Kasih..

Via : All Blogger Tricks

Tutorial Widget Cloud Label With Efek Css3

2014-01-14T06:00:00.000+07:00

Tutorial Widget Cloud Label With Efek Css3 | Ghiyats Blogs - Label Adalah salah satu widget yang ada di blogger, Tampilan Widget label yang ada di blogger sangat sederhana, dengan begitu kita harus menambahkan Kode Seperti Css, Untuk memperindah tampilannya.

Widget Label yang Saya bagikan ini berbentuk cloud dengan Sentuhan Css3 di dalamnya, dan warna widget ini berwarna biru, Kalau begitu langsung saja kita coba saja membuat widget ini tutorialnya seperti ini :

Pemasangan di Blogger

Login Ke Bloggger >> ''Tata Letak'' >> Tambah Gadget >> Label
Setelah itu, Setting Pengaturan Widgetnya Seperti ini
Centang Cloud di dalam pengaturan tampilan
Setelah Klik Simpan

Pemasangan di HTML

Login Ke Blogger
Pergi ke menu ''Template'' >> Klik Edit HTML
Cari kode ']]><b:skin'' >> Setelah ketemu, Taruhlah kode dibawah ini, di atas kode tadi

.Label a{ background: rgb(0,100,180);
background: -moz-linear-gradient(top, rgba(0,100,180,1) 0%, rgba(20,60,100,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,100,180,1)), color-stop(100%,rgba(20,60,100,1)));
background: -webkit-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -o-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: -ms-linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
background: linear-gradient(top, rgba(0,100,180,1) 0%,rgba(20,60,100,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0064b4', endColorstr='#123d60',GradientType=0 );
display:inline-block;border: 1px solid #005ca6;padding:0 8px; color:#fff!important; height:28px; line-height:28px; text-transform:capitalize; text-decoration:none;float:left;margin-top:5px; font-size:14px;-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out;text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);
}
.Label a:hover{color:#000 !important; background:#123d60;}

Setelah itu Klik Simpan

Demikianlah artikel pada hari ini, Semoga bermanfaat dan mudah untuk di pratekkan oleh sobat semua, Silahkan Beri pendapat tentang artikel ini di kolom komentar dibawah ini,Terrima Kasih...

Via : MyBlogger-Tricks

Cara Membuat Menu Navigasi Dengan Style Putih

2014-01-10T00:30:00.000+07:00

Cara Membuat Menu Navigasi Dengan Style Putih | Ghiyats Blogs - Hai, pada atikel yang akan saya bagikan akan saya berikan sebuah menu navigasi berwarna putih, menu ini dengan tampilan keren dan elegan, Berbeda Dengan Menu navigasi lainnya, Menu ini Warna Menunya Seperti Iphone.

Gimana Tertarik dengan menu yang akan saya bagikan ini ? Langsung saja, Kita coba belajar membuat Menu ini dan Tutorialnya Seperti di bawah ini :

Cara Membuat Menu Navigasi Dengan Style Putih

Pertama login ke blogger
Pergi ke menu Tata Letak >> Tambah Gadget
Cari gadget ''HTML/JavaScript'' Dan masukan kode dibawah ini, Di dalam Gadget tersebut

/* Old */

.old {

width: 960px;

height: auto;

}

.old ul {

display: inline-block;

outline: none;

cursor: pointer;

text-align: center;

}

.old ul li {

float: left;

list-style: none;

}

.old ul li a {

font: bold 12px/100% "Lucida Sans Unicode", Arial, Helvetica, sans-serif;

padding: 11px 35px;

text-decoration: none;

color: rgba(0,0,0,.8);

text-shadow: 0 1px 0 rgba(255,255,255,.5);

background: -webkit-linear-gradient(top, #cacaca, #848484);

background: -moz-linear-gradient(top, #cacaca, #848484);

background: -ms-linear-gradient(top, #cacaca, #848484);

background: -o-linear-gradient(top, #cacaca, #848484);

background: linear-gradient(to bottom, #cacaca, #848484);

}

.old ul li a:before {

border-left: 1px solid rgba(255,255,255,.1);

content: "";

padding: 10px 35px;

margin: 0 -35px;

position: relative;

}

.old ul li a:after {

border-right: 1px solid rgba(255,255,255,.1);

box-shadow: 1px 0px 0px rgba(0,0,0,.5);

content: "";

padding: 10px 35px;

margin: 0 -35px;

position: relative;

}

.old ul li:last-child a:after {border: none; box-shadow: none;}

.old ul li:first-child a {-moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px;}

.old ul li:last-child a {-moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;}

.old ul li a:hover {

background: -webkit-linear-gradient(top, #929292, #535353);

background: -moz-linear-gradient(top, #929292, #535353);

background: -ms-linear-gradient(top, #929292, #535353);

background: -o-linear-gradient(top, #929292, #535353);

background: linear-gradient(to bottom, #929292, #535353);

}

.old ul li a:active {

-webkit-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);

-moz-box-shadow: inset 0 5px 10px rgba(0,0,0,.5);

box-shadow: inset 0 5px 10px rgba(0,0,0,.5);

}

<div class="old">

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Store</a></li>

<li><a href="#">Mac</a></li>

<li><a href="#">iPod</a></li>

<li><a href="#">iPhone</a></li>

<li><a href="#">iPad</a></li>

<li><a href="#">iTunes</a></li>

<li><a href="#">Support</a></li>

</ul>

</div>

Ganti # Dengan Url yang ingin di tuju

Ganti Juga Home, Store dan yang lain seterah Tulisan menu yang anda inginkan

Setelah itu, Klik Simpan

Demikianlah artikel ini yang berjudul ''Cara Membuat Menu Navigasi Dengan Style Putih'' Semoga bermanfaat dan mudah untuk di pratekkan, Kalau sobat masih binggung silakan beri pendapat di kolom komentar di bawah ini, Terima Kasih..

Via : MyBlogger-Tricks

Menu Navigasi Orange Dengan Css3 Dan HTML5

2014-01-07T05:00:00.000+07:00

Menu Navigasi Orange Dengan Css3 Dan HTML5 | Ghiyats Blogs - Hai, Sob Pada kesempatan pada hari ini akan saya bagikan sebuah menu navigasi Yang Berwarna Orange, Apalagi menu ini Dengan Css3 Membuat tampilannya menjadi lebih cantik.

Menu ini juga Dengan HTML5 Yang membuat kode kode menu ini, sudah valid html5, yang sangat bagus untuk struktur Blog, Langsung saja kita coba, artikelnya seperti dibawah ini :

Menu Navigasi Orange Dengan Css3 Dan HTML5

Pertama, Kita Login Ke Blogger, Dengan akun anda
Setelah berada di Blogger, Sekarang kita menuju menu ''Tata Letak''
Klik ''Tambah Gadget'' >> Cari Gadget Bertulis ''HTML/JavaScript''
Salin kode dibawah ini, dan Masukan di Gadget Di atas

<style>

#org_menu {

position: relative;

margin: 0 auto;

clear: both;

width: 960px;

}

#org_menu:before {

content: "";

position: absolute;

left: -10px;

bottom: -9px;

z-index: 1;

border: 10px solid transparent;

border-right-color: #c50;

}

#org_menu ul {

display: block;

position: relative;

z-index: 2;

padding: .2em 30px;

margin-right: -2em;

list-style: none;

background: #f72;

font-family: 'Arial', serif;

font-weight:bold;

font-size: 16px;

line-height: 1;

color: white;

text-transform: capitalize;

border-radius: 0 9999px 9999px 0;

box-shadow: 0 2px 8px -3px rgba(0,0,0,.5),

0 1.4em 2em -0.7em rgba(255, 255, 255, .2) inset;;

}

#org_menu ul:after {

content: "";

clear: both;

display: block;

visibility: hidden;

}

#org_menu li {

float: left;

position: relative;

}

#org_menu a {

display: block;

padding: .8em 1.4em;

text-decoration: none;

text-shadow: 1px 1px 1px rgba(0,0,0,.3);

color: white;

transition:.3s box-shadow, .3s padding;

border-radius: 9999px;

}

#org_menu a:hover,

#org_menu a:active {

background: rgba(0,0,0,.1);

color: #F90;

box-shadow: 1px 1px 5px rgba(0,0,0,.3) inset;

}

#org_menu a:active {

background:white;

color: #eee;

padding: .5em .6em .3em 1em;

text-shadow: 1px 1px 0 rgba(0,0,0,.4);

box-shadow: 10px 6px 1px #c50 inset;

}

#org_menu:hover {

transform: rotate(720deg);

}

</style>

<nav id="org_menu">

<ul>

<li ><a href="#" title="Home">Home</a></li>

<li><a href="#">Projects</a></li>

<li><a href="#">Speaking</a></li>

<li><a href="#">Writing</a></li>

<li><a href="#">Interviews</a></li>

<li><a href="#">Press</a></li>

<li><a href="#">About me</a></li>

</ul>

</nav>

Ganti Home,Projects Dan lain lain, dengan tulisan nama menu yang anda inginkan
Ganti # dengan url yang ingin di tuju
Setelah itu klik simpan

Demikianlah artikel pada hari ini, semoga yang sudah saya bagikan ini, bermanffat dan mudah untuk di pratekkan oleh sobat semua, Kalau sobat kurang mengerti atau memberikan pendapat tentang artikel ini silakan beri komentar di kolom komentar dibawah ini.

Via : MyBlogger-Tricks

Keep blogging..

Css3 Menu Navigasi Dengan Sosial Media + Kotak Pencarian Google

2014-01-01T02:30:00.000+07:00

Css3 Menu Navigasi Dengan Sosial Media + Kotak Pencarian Google | Hai, Salam untuk semuanya... Di awal Tahun baru 2014, Akan Saya bagikan sebuah menu navigasi keren untuk sobat, Menu ini memiliki warna latar berwarna abu abu.

Menu ini juga memiliki fitur sosial media dan Ada juga kotak pencarian google, Menu ini juga mengunakan Css3, dengan tampilan lebih elegan dan menarik, Langsung saja kita belajar membuat menu ini, tutorialnya seperti di bawah ini.

Pertama, Masuk ke Blogger
Kedua, Pergi ke Menu ''Template'' >> Klik ''Edit HTML''
Setelah berada disana, cari kode ]]></b:skin> Setelah ketemu masuk kode dibawah ini, di atas kode tadi.

#btrix1nav{border:none 5px #000000;
-moz-border-radius-topleft: 15px;-moz-border-radius-topright:14px;-moz-border-radius-bottomleft:14px;-moz-border-radius-bottomright:14px;-webkit-border-top-left-radius:15px;-webkit-border-top-right-radius:14px;-webkit-border-bottom-left-radius:14px;-webkit-border-bottom-right-radius:14px;
border-top-left-radius:15px;border-top-right-radius:14px;border-bottom-left-radius:14px;border-bottom-right-radius:14px;-moz-box-shadow: 2px 3px 5px #000000;-webkit-box-shadow: 2px 3px 5px #000000;box-shadow: 2px 3px 5px #000000;
width:900px;
margin: 0 0 0 0px;
padding: 12px 0 8px 0;
clear: both;
background: #696969 left bottom no-repeat; }
#btrix1nav .catList{padding: 4px 0 0 35px;float: left;margin-top:-3px; }
#btrix1nav .pageList{padding: 8px 0px 0 0;float: right; }
#btrix1nav ul li{float: left;margin: 0 18px 0 0 ;}
#btrix1nav a{color: #fff;list-style:none;text-decoration: none;}
#btrix1nav a:hover{color: #919191;}
#btrix1nav li {list-style:none;text-decoration:none;}
#search{margin: -2px 20px 0 0;float: right; }
#updatesBox { margin-left: 100px; }

SELANJUTNYA :
Sekarang Pergi ke ''Tata Letak'' >> Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript''
Setelah itu, masukan kode dibawah ini, di dalam gadget tersebut

<div class="clearfix" id="btrix1nav">
<ul class="catList">
<li class="cat-item cat-item-5"><a href="#">Home</a></li>
<li class="cat-item cat-item-3"><a href="#">Downloads</a></li>
<li class="cat-item cat-item-6"><a href="#">Tools</a></li>
<li class="cat-item cat-item-4"><a href="#">Css3</a></li>
<li class="cat-item cat-item-4"><a href="#">HTML</a></li>
<li class="cat-item cat-item-4"><a href="#">Tips</a></li>
<li class="cat-item cat-item-31"><a href="#">About</a></li>
<li class="cat-item cat-item-11"><a href="#">Contact Us</a></li>
</ul>
<div id="search">
<form action="http://www.google.com/cse" id="cse-search-box" target="_blank">
<div>
<input name="cx" type="hidden" value="004972222991511809341:kobh4_l5t3m" />
<input name="ie" type="hidden" value="ISO-8859-1" />
<input class="googleSearchField" name="q" size="20" style="background-color: white; background-image: url(http://www.google.com/cse/intl/en/images/google_custom_search_watermark.gif); background-position: 0% 50%; background-repeat: no-repeat no-repeat; border: 1px solid rgb(126, 157, 185); padding: 2px;" type="text" />
<input class="button" name="sa" type="submit" value="Search" /></div>
<input name="siteurl" type="hidden" value="bloggertrix.com/" /><input name="ref" type="hidden" value="" /><input name="ss" type="hidden" value="" /></form>
<script src="http://www.google.com/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
</div>
<div id="updatesBox">
<a alt="Subscribe to RSS" class="updatesIcon" href="http://feeds.feedburner.com/USERNAME" target="_blank" title="Subscribe to RSS" style="margin-left: 80px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLT_l5-gmg0fwQgqyMZkHNxsmlcgZ1y0KodWXA8GOc5Aa-8fgTiuRb4dUKxj-SJdt8ZmnqGAsT13a-Stll0O2gIsqnEYO7Jsx6gtFrUyuRKuU18fbTThFzawPx-DFLMkTcrp5rp6tk5pc/s1600/btrix_RSS-icon.png" style=""></a>
<a alt="Follow Us" class="updatesIcon" href="http://twitter.com/USERNAME" target="_blank" title="Follow Us"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9lLqNDCgkKY_4GZoP8HSsLncdxUgQCNrBAKVeq26EPssNYBHmvEbT4VQXov3D8xWvt-OScDhh3ZmaxVYaO8Pux102Ib8RVoA_6Lk3M83a-avtoqdH1Z3xhTztf3mar5hK58RwMHP4tXU/s1600/btrix-twitter-icon.png" /></a>
<a alt="Become a Fan" class="updatesIcon" href="http://www.facebook.com/USERNAME" target="_blank" title="Become a Fan"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP8HZ3NyM7xd9-JhygoohNbGMxMvdW_ZrPxlvuiJD_W_JeFlqKJFn-oH-nD-XT6spyQoD9iJvPZ2F5aVZY4Tp6wh6PV263_xFAljhSfoy3qUCQLzOMANKnu7omOUBjJyMZxJFeKmIlPv0/s1600/btrix-facebook-icon.png" /></a></div>
</div>

Ganti USERNAME Dengan username seperti yang di atas.
Ganti juga # ganti dengan url yang anda ingin tuju.
Ganti Home, Download, Tools dan lain lain dengan tulisan anda inginkan
Setelah selesai, Sekarang Klik ''Simpan''

Via : Blogger Trix

Happy Blogging.......

Cara Membuat Menu Navigasi Vertical Di Blog

2013-12-30T10:01:00.002+07:00

Cara Membuat Menu Navigasi Vertical Di Blog | Ghiyats Blogs - Hai, Pada Artikel ini kita akan membahas sebuah artikel tentang Menu navigasi berbeda pada menu yang sudah saya bagikan yang berbentuk Horizontal ke samping, Tapi Pada menu ini Dengan Bertuk vertical Dan ke Ke Bawah.

Menu ini Dengan Tampilan yang elegan dan cantik, dengan di tambah sebuah icon petunjunk panah dan warna yang stylish, Yang membuat menu ini tambah Menarik, Menu ini bisa Di Taruh Di samping Kanan atau Kiri artikel, Kalau sudah mengerti langsung saja kita coba membuatnya seperti ini :

Pertama Login ke blogger
Pergi ke Menu ''Tata Letak'' >> ''Tambah Gadget''
Cari Gadget ''HTML/JavaScript''
Masukanlah kode dibawah ini, di dalam gadget tersebut

<style>

#v-menu {

margin: 0;

padding: 0;

font-family: Verdana, Helvetica, Arial, sans-serif;

}

#v-menu {

width: 275px;

}

#v-menu ul {

list-style: none;

text-indent: 0px;

}

#v-menu li {

margin-top: 0px;

border-bottom: 1px solid #414141;

}

#v-menu a {

font-family:Verdana, Geneva, sans-serif;

font-size: 15px;

font-weight:bold;

font-variant: inherit;

text-transform:uppercase;

padding: 0px;

color:#CCC;

display: block;

padding: 13px 50px;

height: 26px;

line-height: 26px;

text-decoration: none;

background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6un0yHadaVuOmiTgJ-M_4DSwayNyzXDpNuMx7oJxsF320zf8-wQ3twVcrswi4gaF3U6MySG4v9bf-ieHwHSqn_muMFW39a-rYHsaXUbxEiLKFSj6VbmRQEw60-oriel-dpSQys7otMJ_T/s1600/menu-bg.png) no-repeat;

text-shadow: 1px 1px 1px #111;

-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);

}

#v-menu a:hover {

background: #5e5e5e url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat;

font-size: 14px;

padding: 13px 60px;

-webkit-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-moz-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-o-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

-ms-transition: all 900ms cubic-bezier(0.47, 0, 0.745, 0.715);

transition: all 600ms cubic-bezier(0.47, 0, 0.745, 0.715);

}

#v-menu a:visited {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat;

}

#v-menu a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZiGaLtQvHPfsmBFmtU7hCJgBF6M6YAqyiC1_TyOGEF1ZNkr35LxYq1yXj19_Nc0VmWeHhdl8ckg61Yidl8bUY86m37ekUjy19c5LUOKRYGoGoCX38ibyBw-krsK3EQt6Y-s7-vQHOrgLK/s1600/hover-bg.png) no-repeat;

}

</style>

<div id='v-menu'>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">Widgets</a></li>

<li><a href="#">SEO</a></li>

<li><a href="#">Adsense</a></li>

<li><a href="#">Templates</a></li>

<li><a href="#">Applications</a></li>

</ul>

</div>

Setelah itu, Ganti # Dengan url yang ingin di tuju
Ganti juga, Home, Widget, Seo Dan Lain Lain, Dengan Nama menu yang anda inginkan
Setelah Selesai, Sekarang klik ''Simpan''

Gimana Tertarik dan Mudah kan Artikelnya ? Demikianlah artikel yang baru saya bagikan ini, Semoga artikel ini berguna dan mudah di pratekkan, Silakan Tuliskan pendapat tentang artikel ini di kolom komentar dibawah ini,Terima Kasih...

Via : MyBlogger-Tricks

Menu Navigasi HTML5 Dengan Style Biru

2013-12-23T21:47:00.001+07:00

Menu Navigasi HTML5 Dengan Style Biru | Ghiyats Blogs - Artikel Pada hari ini, Akan saya bagikan sebuah Menu navigasi Berwarna biru, Menu navigasi mungkin sobat sudah mengerti apa kegunaan, Kegunaan menu adalah untuk mempermudah pengunjung mencari halaman yang ada di blog tersebut.

Menu ini juga di lengkapi dengan Html 5, Langsung saja kita coba, Membuat artikel ini, Tutorialnya seperti di bawah ini :

Pertama, Kita harus login ke blogger.com
Terus, menuju ke menu ''Template'' >> Klik ''EDIT HTML''
Cari kode <head> untuk memasukkan style Html5, dan masukan kode dibawah ini, sebelum kode tersebut

<link href="https://dl.dropboxusercontent.com/u/223738947/html5-reset.css" type="text/css" rel="stylesheet">

Setelah itu, Kita Menuju Menu ''Tata Letak'' >> ''Tambah Gadget''
Cari gadget ''HTM/JavaScript'' Terus masukan kode dibawah ini, di dalamnya.

<style>
#nav_menu {
width: 100%;
margin: 10px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: bold;
margin-right: auto;
margin-left: auto;
text-transform: capitalize;

}
#nav_menu ul {
float: auto;
overflow: hidden;
margin:0 auto;
text-align: center;

}
#nav_menu:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}

#nav_menu a {
display:block;
padding: 10px 30px;
color: #fff;
margin: 0 auto;
text-decoration: none;
text-shadow: 0 1px #333;
text-align:center;
}
#nav_menu a:hover {
color: #FFF;
text-shadow: 0 2px #000;
}
#nav_menu li {
text-align: center;
display: inline-block;
margin: 0 auto;
border-style: solid;
border-width: 1px;
border-color: #005fa1 #005fa1 #005fa1 #005fa1;
background: #0096ff; /* Old browsers */
background: -moz-linear-gradient(top, #0096ff 0%, #006bb6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0096ff), color-stop(100%,#006bb6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #0096ff 0%,#006bb6 100%); /* IE10+ */
background: linear-gradient(top, #0096ff 0%,#006bb6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0096ff', endColorstr='#006bb6',GradientType=0 ); /* IE6-9 */
}
#nav_menu li:hover {

background: #404040; /* Old browsers */
background: -moz-linear-gradient(top, #404040 0%, #252525 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,##404040), color-stop(100%,#252525)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, ##404040 0%,#252525 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #404040 0%,#252525 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #404040 0%,#252525 100%); /* IE10+ */
background: linear-gradient(top, #404040 0%,#252525 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#404040', endColorstr='#252525',GradientType=0 ); /* IE6-9 */
border-color: #252525;
}
#nav_menu li:first-child {
border-color: none;
border-radius: 100px 0 0 100px;
}
#nav_menu li:last-child {
border-color: none;
border-radius: 0 100px 100px 0;
}
#nav_menu li:first-child a:hover {
border-color: #252525;
}
</style>

<nav id="nav_menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Faqs</a></li>
<li><a href="#">Contact</a></li>
</ul>

</nav>

Ganti # dengan url yang ingin di tuju

Demikianlah artikel pada hari ini, semoga apa yang saya bagikan bermanfaat untuk sobat semua, Silakan beri komentar anda tentang artikel di kolom komentar di bawah ini, Terima Kasih...

Via : MyBlogger-Tricks

Cara Membuat Related Posts Dengan Thumbnail

2013-12-20T02:30:00.000+07:00

Cara Membuat Related Posts Dengan Thumbnail | Ghiyats Blogs - Salam Untuk Sobat semua.... Pada artikel yang akan saya bagikan ini, kita akan membahas tentang Related Posts atau Artikel Terkait, Artikel Terkait Berguna Untuk Membantu Pengunjung Untuk mencari artikel lain yang berhubungan dengan artikel tersebut, Artikel Terkait biasanya berada di bawah postingan blog.

Ada yang berbentuk daftar atau pun Thumbnail, Akan saya bagikan ini berbentuk Thumbnail dan keunggulan widget ini adalah di sedia gambar bentuk yang menarik, Langsung saja kita coba membuatnya, Tutorialnya seperti dibawah ini :

Pertama Kita login ke blogger
Terus, Pergi menu ''Template''
Klik ''Edit HTML''
Setelah itu, cari kode </head> Setekah ketemu masukan kode dibawah ini di atas / sebelum kode tersebut

<b:if cond='data:blog.pageType == "item"'>

<style type='text/css'>

#related-posts {

float:center;

height:100%;

min-height:100%;

padding-top:10px;

padding-left:15px;

padding-right:15px;

}

#related-posts h2{

font-size: 1.3em;

color: black;

font-family: Arial;

margin-bottom: 0.75em;

}

#related-posts a{

color:black;

}

#related-posts a:hover {

background-color:#eeeeee;

}

</style>

<script type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNNsd0wnh9uOhwxWQ0N1qVf7f1xpLFxvQ7Ong57hTRJ3QnZS_0mMcd2OOb4qfKVLoCM7Ey-_N_AdQCS57FtJhzsOJoh0WjHE-u7Nw5e8fmYMd5CG5LIlz-LAKfCoT-ntiE29NrGTsAf-fn/";

var maxresults=5;

var splittercolor="#cccccc";

var relatedpoststitle="Related post";

</script>

</b:if>

Terus cari lagi kode, <p class='post-footer-line post-footer-line-1'/> atau post-footer-line,Setelah ketemu COPY kode dibawah ini diatas salah satu kode diatas

<b:if cond='data:blog.pageType == "item"'>

<div id='related-posts'>

<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.isLast != "true"'>

</b:if>

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>

<script type='text/javascript'>

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs("<data:post.url/>");

</script>

</div><div style='clear:both'/>

</b:if>

Setelah Klik ''Simpan''

CATATAN :

Ganti Tulisan Related post Dengan tulisan yang anda suka
Ganti juga 5 untuk mengatur jumlah artikel terkaitnya

Demikianlah artikel ini, Terima kasih sudah membaca artikel diatas, dan kalau anda punya kesulitan tentang artikel diatas, silakan berkomentar di bawah ini, Trima Kasih...

Via : Blogger Trix

3 Template Elegan Dan Cantik Untuk Blog

2013-12-16T16:29:00.004+07:00

3 Template Elegan dan Cantik Untuk Blog | Hai sob, sudah lama blog ini tidak update artikel ,karena masalah koneksi , sudah langsung saja, pada artikel yang akan saya bagikan saya akan membahas tentang template. Ada 3 template akan saya bagikan dengan bentuk elegan dan cantik, template ini cocok untuk anda yang ingin memiliki template yang berbeda,langsung saja kita lihat koleksi seperti di bawah ini.

1. Purez

DEMO | DOWNLOAD

2. Warm Mag

DEMO | DOWNLOAD

3. Squid

DEMO | DOWNLOAD

Demikianlah artikel pada hari ini, Gimana Template Templatenya Keren, Bukan ? Maaf Kalau saya kurang detail dalam artikel ini, Dan silakan memberi komentar tentang template template di atas, di kolom komentar di bawah ini.Trima Kasih...

Via : Blogger Yard

Membuat Popular Post Dengan Bentuk Bulat di blog

2013-11-15T11:38:00.001+07:00

Membuat Popular Post Dengan Bentuk Bulat di blog| Pada artikel kali ini, akan saya bagikan sebuah widget yang berbentuk Bulat di widget popular post, artikel ini saya bagikan karena pada artikel sebelumnya Yang membahas popular post.

Ada salah satu komentar yang ingin mengganti kotak dengan bentuk bulat pada gambar artikel popular post, Langsung saja kita mencoba membuat artikel seperti tutorial nya di bawah ini

Langkah Pertama : Memasang widget artikel ter populer

Login ke blogger
Pergi ke menu ''Tata Letak''
klik ''Tambah Gagdet''
Cari Gadget ''Popular posts''
Pasang settingan nya Dengan gambar, Dan Simpan Gadget nya

Langkah Kedua : Memasukkan Kode Css Ke dalam Template

Pergi ke menu ''Template''
Klik ''Edit HTML''
Cari kode ]]></b:skin> Dengan mengunakan Tombol (CTRL+F) Setelah ketemu taruhlah kode dibawah ini di atas kode di atas

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}
.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}
#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

Langkah Ke Tiga : Edit HTML

Masih di menu ''Template''
Cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'> Sampai Yg Terakhir </b:widget> di template, Hapus kode tersebut
Ganti dengan di bawah ini

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
    <ul>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == "false"'>
          <b:if cond='data:showSnippets == "false"'>
            
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == "false"'>
            
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
    </ul>
    <b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Setelah itu Simpan Template

Gimana Tutorial mudah, Di pratekkan bukan ? Kalau sobat masih bingung Cara membuat, langsung saja berkomentar di kolom komentar dibawah ini Untuk Tanya sama Saja, Pasti saya bantu, Terima Kasih...

Via : All Blogger Tricks

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog

2013-11-08T12:28:00.000+07:00

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog | Ghiyats Blogs - Pada perjumpaan kali ini akan saya bagikan widget kotak berlangganan, widget kotak berlangganan sangat membantu para pengunjung yang ingin berlangganan via email kepada dengan begitu mereka tidak akan ketinggalan artikel terbaru dari blog tersebut.

Widget ini Memiliki Warna Latar Berwarna Putih Dan Biru Muda, dan widget ini di lengkapi Sosial Icons untuk bisa berkomunikasi dengan admin blog, gimana Tertarik, Dengan widget ini Tutorial nya widget ini seperti dibawah ini :

Login ke Blogger
Masuk ke Menu ''Tata letak''
Klik ''Tambah Gadget''
Pilih Gadget ''HTML/JavaScript''
Copy kode di bawah ini, Di dalam gadget tersebut

</div>

Ganti Username Ganti dengan username Facebook anda
Ganti Username Ganti dengan username Twitter anda
Ganti GhiyatsBlogs Ganti Dengan Id feedburner anda
Ganti 108021608037797119476 dengan Id Profile Google+ anda
Setelah Semua, Diganti Silakan klik simpan

Demikianlah artikel ini semoga apa yang saya bagikan ini bermnafaat dan mudah untuk di terapkan oleh sobat, Silakan kalau sobat ingin memberi Pendapat tentang artikel yang saya share ini, Di kolom komentar dibawah ini

Via : Blogger Yard

Membuat Popular Posts Dengan Efek Geser di Blog

2013-11-01T15:27:00.001+07:00

Membuat Popular Posts Dengan Efek Geser di Blog | Widget Popular Posts bisa membantu para pengunjung untuk mengetahui artikel artikel apa yang banyak di kunjungin blog kita, Banyak sekali Popular Posts dengan aneka bentuk yang berbeda beda.

Tapi, Popular posts yang akan saya bagikan ini, Memiliki keunikan, Widget di sertakan gambar artikel dan memiliki efek geser, kalau kursor mengarah ke dalam widget ini, dan ke judul artikel popular posts, secara otomatis akan ada penjelasan singkat tentang artikel tersebut.

Artikel dan tutorial nya cara membuatnya seperti di bawah ini :

Login ke Blogger.com
Setekah itu, klik Menu ''Template''
Klik ''Edit HTML''
Cari kode ]]></b:skin Kalau sudah ketemu masukan kode dibawah ini, Sebelum kode ]]></b:skin

/* Popular Post */

.PopularPosts .widget-content ul li{padding:0;position:relative}

.item-snippet {font-size: 90%;line-height: 1.2em;position: absolute;width: 230px;background-color: whiteSmoke;padding: 7px;border-top: 2px solid #FF0202;z-index: 2;left: 300px;top: 60%;height: 4.5em!important;visibility: hidden;opacity: 0;transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-moz-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-webkit-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;-o-transition: all 0.6s cubic-bezier(1,2,0,0) 0s;}

.PopularPosts .widget-content ul li:hover .item-snippet{left:60px;opacity:1;visibility:visible}

.PopularPosts img{width:50px;height:50px}

.PopularPosts .item-title{font-family:'Open Sans Condensed',"Arial Narrow",Arial,sans-serif;font-size:125%}

/* Popular Post */

Setelah itu, klik SIMPAN

Demikianlah artikel ini, Semoga artikel yang saya bagikan bermanfaat dan mudah di pratekkan,Silakan Berkomentar di kolom komentar dibawah ini,Terima Kasih..

Via : All Blogger Tricks

Memasang Widget Kotak Pencarian Metro Style di Blog

2013-10-29T19:10:00.000+07:00

Memasang Widget Kotak Pencarian Metro Style di Blog | Ghiyats Blogs - Salam Untuk Sobat Semua.. Widget Kotak Pencarian sangat di butuhkan dan sebuah blog, karena widget ini bisa membantu pengunjung yang ingin mencari sesuatu di blog kita dengan mudah.

Dengan itulah, Akan saya bagikan sebuah widget keren dan menarik Dengan style Metro, Widget pada kotak search nya berwarna biru, Begitu, Secara sikat tentang widget ini, Kalau sobat tertarik ingin menggunakannya, Tutorialnya seperti ini :

Pertama, Sobat harus login dulu Ke Blogger.com
Setelah Berada, DI Blogger, Sekarang Menuju Ke ''TATA LETAK''
Klik 'TAMBAH GADGET''
Pilih Gadget ''HTML JAVA/SCRIPT''
Copy kode dibawah ini, di dalam gadget tersebut

<style>

#abt-search-btn {

background: none repeat scroll 0 0 #359BED;

border: 0 none;

border-radius: 0 0 0 0;

color: #FFFFFF;

font-weight: 700;

padding: 10px 20px;

}

#abt-search-box {

background: none repeat scroll 0 0 #EEEEEE;

border: 0 none;

padding: 10px;

width: 160px;

}

</style>

<form id="searchthis" action="/search" style="display:inline;" method="get">

<input id="abt-search-box" name="q" size="40" type="text" placeholder=" Type! :D "/>

<input id="abt-search-btn" value="Search" type="submit"/>

</form>

Ganti 160px ukuran kotak pencarian terserah anda
Ganti Type! :D Dengan tulisan yang ada di kotak pencarian
Setelah semua, Di ganti silakan di Simpan Gadget

Demikian artikel ini semoga apa yang saya tulis ini bermanfaat dan mudah anda pratekkan, Silakan beri pendapat tentang artikel di kolom komentar dibawah ini...

Via : All Blogger Tricks

Menu Navigasi CSS Dengan Efek Icon Hover

2013-10-27T19:36:00.002+07:00

Menu Navigasi CSS Dengan Efek Icon Hover | Ghiyats Blogs - Salam Untuk Sobat semua... Pada artikel yang akan Saya bagikan kali ini, Kita akan membahas tentang menu navigasi, Menu navigasi ini berbeda sama menu navigasi lainnya, karena menu ini memiiki gambar dengan efek hover

Menu ini dengan warna warni yang cerah, pada setiap nama nama menu, Langsung, saja tutorial tentang artikel ini, Seperti dibawah ini :

Pertama, Login dulu ke Blogger.com
Masuk ke menu, Template
Klik Edit HTML
Cari Kode ]]><b:skin dengan menggunakan (CTRL + F ) Setdlah ketemu masukan kode dibawah ini, diatas atau sebekum kode di atas

/* The CSS Code */ #btrix-nav {margin: 100px auto;list-style: none;width: 632px;height: 87px;overflow-y: hidden;}

#btrix-nav li {float: left;}

#btrix-nav li a {display: block;color: white;width: 120px;height: 61px;margin-top: 24px;text-decoration: none;text-align: center;border-top: 1px solid #bbb;border-bottom: 1px solid #555;}

#btrix-nav li a span.aname {font: bold 17px/61px "Arial";color: #fff;text-transform: uppercase;cursor: pointer;position: relative;top: 0;transition: top .5s ease;text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);}

#btrix-nav li a img {position: relative;top: 0;transition: top .5s ease;}

#btrix-nav li a:hover {cursor: pointer;}

#btrix-nav li a:hover img {top: -85px;}

#btrix-nav li a:hover .aname {top: 85px;}

#btrix-nav li:nth-child(1) a {background: #3eb006;border-radius: 5px 0 0 5px;border-left: 1px solid #bbb;}

#btrix-nav li:nth-child(2) a {background: #9bc704;}

#btrix-nav li:nth-child(3) a {background: #0dc3ff;}

#btrix-nav li:nth-child(4) a {background: #51a2ec;}

#btrix-nav li:nth-child(5) a {background: #6e3cab;border-radius: 0 5px 5px 0;border-right: 1px solid #555;}

Terus Klik SIMPAN

CARA PEMASANGANNYA :

ke menu Tata letak
Klik Tambah Gadget
Pilih gadget HTML/JavaScript
Copy kode dibawah ini , di dalam gadget tersebut

div id="btrix-nav">

<li> <a href="#"><span class="aname">Homes</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1gLvGUFXVnVKgKwusxdJp3kCRL_e67K7xb5f7_ZEJI3exDIiTLH4uq5ea17aKlipOw7mo3CScmoLcJcyon4rxo38NnRZDFwbTp2emB7y6hSSpyys8us3wNDH0JfVDgT6DUGKXtWpitP0/s1600/btrix-home.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Download</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKHvurDGnvxa9uwKRH9nLgRzhfJD5vaKq3SDmi5ssCZY_4a5RMlNNbG2jU12svCyDA3mW4m_Cp1npBw7La61O5_ai-hiNUh78Jj4vZJVh6xXVA1_3WRhRdnA8oUeeOehhivsr8kvwA-Uc/s1600/btrix-download.png" /> </a> </li>

<li> <a href="#"> <span class="aname"> MySql</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdPx5NqzcynNxp3SKcHijT15JoaqL2Uz7kf9B1f7H_tsTT9jkBledK0Yg_NY3DlAXY3qj6O7_7_nTI_rFJXr5pJFfdoGhbpPkXlxsLTF1waIWshrWm5IA_CfUdtoQqiALwQ4lUwVj7PDs/s1600/btrix-mysql.png" /> </a> </li>

<li> <a href="#"> <span class="aname"> Html</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_gyE4riXpOG_y4ekJwG_OpXx6ONXHPvU1RjYVyUGh4ij60l8dTCJiX6sAngffcsyQuKm3ojrfiNWkX7IKsZkHJo1XjgnoEvcn2p32-WaXaGNSfZecRydsVOJClL6awtDAack9lNIbUmo/s1600/Btrix-html.png" /> </a> </li>

<li> <a href="#"> <span class="aname">Contact</span> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZcHU6P-Qu3IsNQ9GNNIItUAa1-OiuhtYoDogRypjxpUQm-lqBFG74U-zqT4smf602sV-6WTeO2h5xK6pxw05eFjWBlNGcAadYzizI-6P3QfNw4WHMLNzXBA0MVlZBv7PJA0Em58hVOsk/s1600/btrix-contact.png" /> </a> </li> </div>

Ganti # dengan url yang anda tuju
Klik SIMPAN

Demikianlah artikel ini, semoga artikel yang baru saja saya bagikan bermanfaat dan mudah untuk dipratekkan, Silakan Komentarin artikel ini, di kolom komentar dibawah ini, Terima Kasih..

Via : Blogger Trix

Memasang Widget Social Hover Dengan Angka Penghitung

2013-10-22T16:19:00.000+07:00

Memasang Widget Social Hover Dengan Angka Penghitung | Ghiyats Blogs - Hai, Pada artikel yang akan saya bagikan kali ini, Saya bagikan sebuah tutorial sosial media dengan efek angka penghitung, widget ini memiliki Efek hover pada setiap sosial medianya, dan dengan angka pada setiap sosial medianya tergantung pengikut di setiap sosial media.

Widget ini memiliki warna yang cerah dan sangat elegan, Kalau memang sobat ingin mempraktekkan widget ini tutorialnya seperti ini

Memasang Widget Social Hover Dengan Angka Penghitung

Login ke blogger
Pergi ke ''Tata letak''
Klik ''Tambah Gadget''
Pilih '''HTML/JavaScript''
Masukan kode dibawah ini, didalam gadget tersebut

<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sliding-social.css"/>

<div class="abt-social">

<ul>

<li><a class="abt-box facebook" href="#"><p>15K+</p>Facebook </a></li>

<li><a class="abt-box twitter" href="#"><p>10K+</p>Twitter</a></li>

<li><a class="abt-box gplus" href="#"><p>5K+ </p>Google+</a></li>

<li><a class="abt-box pinterest" href="#"><p>4K+ </p>Pinterest</a></li>

<li><a class="abt-box rss" href="#"><p>10K+</p>RSS</a></li>

</ul>

</div>

KETERANGAN :
Ganti # dengan url sosial media anda, ganti juga nomor angka yang berwarna merah.

Demikianlah artikel ini semoga artikel ini bermanfaaat dan mudah untuk di terapkan sama sobat, Silakan kasih pendapat tentang artikel ini di kolom komentar di bawah ini, Terima Kasih...

Via : All Blogger Tricks