• 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 June 2013

Thursday, June 27, 2013

Membuat Cloud Label Warna Hitam Untuk Blogspot

Membuat Cloud Label Warna Hitam Untuk Blogspot | Hai... Sob ? kali ini saya akan bagi tutorial tentang label, untuk mempercantik widget label yang biasanya tidak memukau dan biasa saja. untuk itu saya bagikan tutorial untuk mempercantik blog sobat.
Cloud Label Warna Hitam

Langsung saja kita membuatnya yang pastinya sangat mudah diterapin, tapi sobat bisa lihat dulu koleksi cloud label lainnya seperti di bawah ini, dan saja kita coba membuat seperti ini :

Artikel Tentang Cloud Label Lainnya :

Membuat Cloud Label Warna Hijau Untuk Blogger
Cloud Label Warna Ungu

Membuat Cloud Label Warna Hitam Untuk Bloggger
---------------------------------------------------------------------------------


  • Masuk dan login ke Blogger.com
  • Setelah itu, Klik Menu ''Template''
  • Sekarang Cari kode ]]></b:skin Setelah ketemu, sekarang Taruhlah kode dibawah ini di Sebelum/Diatas kode tersebut 

/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}

#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;  
border-bottom-color: #D8D8D8;}

  • Setelah Itu, Sekarang Simpan Template sobat
NOTE!! : Kode diatas akan berkerja kalau label pada widget anda dalam fungsi cloud, kalau belum cara seperti ini :
  • Masuk ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Menu ''LABEL''
  • Setelah itu, pada pengaturan ''Tampilan'' pilih ''Cloud'' bukan ''Daftar''
  • Setelah itu, klik simpan
  • Dan lihat perubahannya di  blog sobat

Gimana Mudah, bukan ? Semoga artikel ini bermanfaat bagi sobat semua, kalau sobat ada yang masih bingung tentang artikel silakan berkomentar di kolom komentar di bawah ini ! dan saya siap menjawab pertanya sobat semua...

Source Code : Blogger Trix

Happy Blogging
Unknown Waktu 07:28 2 comments:

Sunday, June 23, 2013

3 Template Terkeren 2013 Untuk Blogspot

3 Template Terkeren 2013 Untuk Blogspot | hai, sob... pada kesempatan ini saya mau berbagi daftar template, yang pastinya keren sob... kalau sobat mau ganti template, pas sekali karena postingan ini saya akan berbagi 3 Template pilihan saya untuk sobat semua, tidak usah berlama lama lagi, langsung saja kita lihat koleksinya dibawah ini :


Dazzling Designer Blogger Template
3 Template Terkeren 2013 Untuk Blogspot

Demo | Download

E Style Blogger Template
3 Template Terkeren 2013 Untuk Blogspot

Demo | Download

MBL Apollo
3 Template Terkeren 2013 Untuk Blogspot

Demo | Download

Dan Demikianlah artikel ini semoga artikel ini bermanfaat bagi sobat semua, dan maaf kalau artikel di atas kurang detail memahas templatenya.. sobat boleh tentang artikel di atas di kolom komentar di bawah ini....

Happy Blogging
Unknown Waktu 12:29 4 comments:

Friday, June 21, 2013

Membuat Widget Sosial Media Dengan Effect Hover

Membuat Widget Sosial Media Dengan Effect Hover | Hai, Sobat... Pada artikel ini saya selaku (admin), ingin berbagi widget keren yang berjudul Membuat Widget Sosial Media Dengan Effect Hover, Menu Sosial media memang diperlukan untuk pengunjung untuk bisa berhubungan dengan admin di sosial media dan bisa saling mengikat pertemanan antar sesama blogger
Membuat Widget Sosial Media Dengan Effect Hover
Widget ini kalau keliatannya biasa saja pertamanya, tapi kalau sobat mengarahkan kursor kepada salah satu sosial media akan berubah dan ada warnanya sesuai sosial medianya.. sobat tertarik dengan widget dan ingin menggunakan widgetnya di blog sobat ? kalau memang begitu, lihat demonya dibawah ini dan langsung saja kita coba membuat dibawah ini 

Demo

Membuat Widget Sosial Media Dengan Effect Hover
--------------------------------------------------------------------------------

  • Login ke Blogger
  • Pergi ke Menu ''Tata Letak''
  • Selanjutnya klik ''Tambah Gadget''
  • Sekarang, pilih Gadget ''HTML/JavaScript
  • Taruhlah code dibawah ini, di kotak yang tersedia

<style>
a.btrix1_twitter
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjc6d5HBvMSm1ImBeWPuy0X4w_oRuid845qI6ZBgy9lcqOhLrTCbo_CUZVULyWIcDWCsnDP9E2fmC32pSUQPFzAunHJDvkw0T2Q7TzJQ-Cu8A4zEMArPnd6FPn6xQt3wQzDZhXy01Srz00/s1600/btrix_twitter.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
    border:0px;
    float:left;}
a.btrix1_facebook
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwm9JVKqX3cxRIZMMJQPDsrX_bFjaUfCJ1XbBjEVn4tHTtYvZvmUYdVEpD04_2v1BVxNorxxoogZbuVY5DWjiorQ1TlzRxcqwzQp6nXCB-1G-GRDgMTSla4sbr9fKruNBDo_HbGNHGgco/s1600/btrix_facebook.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;}
a.btrix1_linkedin
{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjH4VRafteUkOL_GYiYV9b_bh1m1UObgthgE8rjC0SYGtTf8SXsWRFVV1OD4Ilx2DDPdCs02ZEwA1kpY0veX5SdRYC1fECKYRJlVSXUR-c5hRzc7mDv21ItPtrQKsxrouqC2DFSZ4SYXGg/s1600/btrix_linkedin.jpg);
    background-position:0 0px;
    width:255px;
    height:51px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
a.btrix1_stumbleupon
{   background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwr5KGXxENwRY4MjvumdjcbQwo11KAYFIIdcN4vi72OYHtVAmz_KUcW6px6693v7N7sBH_N3q_z8NybY8o8zo0ibyBBN2SuZIcC250I6UlEggomTtE1UCFJgObwzq65x82iXJP5GPFomA/s1600/btrix_stumbleupon.jpg);
    background-position:0 0px;
    width:255px;
    height:50px;
    text-indent:-9999px;
    display:block;
    background-repeat: no-repeat;
        border:0px;
        float:left;
}
.btrix11social a:hover
{
    background-position:0 -51px;
}
.btrix11social
{
    width:255px;
}
</style>

<br />
<div class="textwidget">
<div class="btrix11social">
<a class="btrix1_linkedin" href="http://in.linkedin.com/Username" target="_blank">linkedin</a>
<a class="btrix1_stumbleupon" href="http://www.stumbleupon.com/Username" target="_blank">stumbleupon</a>
<a class="btrix1_twitter" href="http://twitter.com/Username" target="_blank">twitter</a>
<a class="btrix1_facebook" href="http://www.facebook.com/Username" target="_blank">facebook</a>
</div>
</div>

  • Ganti Username Dengan username linkedin anda
  • Ganti Username Dengan username stumble anda
  • Ganti Username Dengan username Twitter anda
  • Ganti Username Dengan username Facebook anda
  • Kalau sudah di ganti, sekarang klik simpan

Dan demikianlah artikel yang berjudul Membuat Widget Sosial Media Dengan Effect Hover semoga artikel ini bermanfaat bagi sobat semua dan sobat boleh bertanya atau pendapat sobat tentang artikel di atas di kolom komentar di bawah ini

Keep Blogging
Unknown Waktu 10:48 2 comments:

Tuesday, June 18, 2013

Menu Navigasi Horizontal Keren Untuk Blogger

Menu navigasi kerenMenu Navigasi Horizontal Keren Untuk Blogger | Hai, apa kabar ? saya pada kesempatan hari ingin membagi koleksi menu navigasi, pada sebelumnya masih berhubunganya dengan artikel ini : Menu Navigasi Horizontal dengan CSS, menu ini saya dapat dari www.bloggertrix.com

menu ini warna latarnya putih, tapi kalau ada menu disampingnya yang kalau di klik akan berubah menjadi ungu, screenshot di samping ini, dan demonya dibawah ini, sobat tertarik dengan menu navigasi ini ? kalau iya langsung saja kita langsung membuatnya seperti ini :


Demo

  • Pertama kita haru login ke Blogger
  • Setelah di dasbar, kita klik menu ''Template''
  • Klik ''Edit HTML''
  • Sekarang cari kode ]]></b:skin (CTRL+F untuk pencarian), setelah ketemu taruhlah kode dibawah ini di atas kode tersebut
/* The CSS Code for the menu starts here bloggertrix.com */
.btrix_glossymenu1{
 position: relative;padding: 0 0 0 34px;margin: 0 auto 0 auto;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLTszby0L_14gVzFzX7NhN-JMGvBJ1JA0AyXyyJ3NZV6O8kC9xmXd9b3kIUDel4aZI2x0LYSMitTZ_Aiq2_RXyuAmL2R6eRAhuijciFsO3SeS9PP9zwbUhEKOMNnpSmk-bFDKPaSSY6s/s1600/btrix_menupu_bg.gif) repeat-x; 
 height: 46px;
 list-style: none;
}
.btrix_glossymenu1 li{
 float:left;
}
.btrix_glossymenu1 li a{
 float: left;display: block;color:#000;
 text-decoration: none;
 font-family: sans-serif;
 font-size: 13px;
 font-weight: bold;
 padding:0 0 0 16px; 
 height: 46px;
 line-height: 46px;
 text-align: center;
 cursor: pointer; 
}
.btrix_glossymenu1 li a b{
 float: left;display: block;padding: 0 24px 0 8px; 
}
.btrix_glossymenu1 li.current a, .btrix_glossymenu1 li a:hover{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZGm2v4aeN2EbN4HAF7geiCV4amcoZjMGwuaaYAv_yaRNWMfxEGAxwq-wL9CRbBU_xrGMEPR6JB-m5xE7T6BmCt4LO1-DvnwMtfIWdbVqGw4YjgeqxHnLnvz-dLHHr4XpUK-1CV-5oADU/s1600/btrix_menupu_hover_left.gif) no-repeat;
 background-position: left;
}
.btrix_glossymenu1 li.current a b, .btrix_glossymenu1 li a:hover b{
 color: #fff;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Y24e95EBIGsVPoangIXIDXSyuzPnGtxvnSDEQm-KDwmZYLNC7Cv2DK0eJAYS9a6IiS9LCi9xOZZMXF0Ozm0L_G8ZjYIYiYisSSqpun2udrJcA2KYCRtj4iq9U7vusQoQ14GN8KFSaag/s1600/btrix_menupu_hover_right.gif) no-repeat right top;
}
  • Setelah selesai, sekarang simpan template
  • Sekarang kita ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Sekarang pilih gadget ''HTML/JavaScript
  • Copy kode di bawah ini dan simpan si kotak yang tersedia 

<ul class="btrix_glossymenu1">
 <li class="current"><a href="#"><b>Home</b></a></li>
 <li><a href="#"><b>CSS</b></a></li>
 <li><a href="#"><b>Forums</b></a></li> 
 <li><a href="#"><b>Webmaster Tools</b></a></li> 
 <li><a href="#"><b>JavaScript</b></a></li> 
 <li><a href="#"><b>Contact Us</b></a></li> 
</ul>
  • Setelah selesai, Sekarang klik simpan

Dan akhirnya selesailah artikel ini semoga artikel ini bermanfaat bagi sobat dan semuanya dan bagi sobat yang ingin bertanya dan pendapat tentang artikel ini di kolom komentar di bawah ini 

Source Code : BloggerTrix
Unknown Waktu 12:24 2 comments:

Sunday, June 16, 2013

Membuat Menu Navigasi Horizontal Dengan CSS

menu navigasi dengan css

Membuat Menu Navigasi Horizontal Dengan CSS | Apa kabar, untuk artikel ini Ghiyats Blogs, berbagi koleksi menu navigasi yang pastinya keren sob, widget ini berlatar warna merah dan tampilan bagus hehehe, widget ini di buat dengan CSS, kalau sobat sudah mengerti, langsung saja kita buat menu navigasi ini, seperti dibawah ini :

Membuat Menu Navigasi Horizontal Dengan CSS
--------------------------------------------------------------------------------

  • Login ke blogger
  • Sekarang, Masuk ke Menu ''Template''
  • Klik tombol ''Edit HTML''
  • Gunakan CTRL +F , dan Cari kode ]]></b:skin , setelah ketemu taruhlah kode dibawah ini, di atas kode tersebut 

/* The CSS Code for the menu starts here bloggertrix.com */
#roundbar_btrix {
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimoFMz-436dGK1DWYM9J-aKf4h1dbhmnrxVytH5Oz7wUF3TqacphcN-7-0UrxOiFaoUDkUS6rWj6x2MRv3EATAlvSEcSr2MC1t4KsG7zOVQW5QHv8llCnzRMuKhQGZFUhF8UiJArrnLJk/s1600/round_menu.png);
background-repeat:no-repeat;
margin-left:14px;
padding-left:10px;
height:46px;
}

#round_btrix {
float:left;
height:27px;
margin-bottom:0;
font-size:100%;
width:1000px;
line-height:normal;
margin-top:0
}
#round_btrix ul {
list-style:none;
margin:0;
padding:0
}
#round_btrix li {
display:inline;
margin:0;
padding:0
}
#round_btrix a {
float:left;
padding-right:1px;
font-weight:bold;
text-decoration:none
}
#round_btrix a span {
display:block;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
height:27px;
color:#FFF;
font-size:100%;
border-left:0 solid #dcdcdc;
margin-right:0;
float:none
}
#round_btrix a:hover span {
color:blue;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgk715sg4kGYxaeuJU7BARL81ux7ReRv9mcycwHjfkrIMtyDuxG5ZyK5k-PzwaKJf7S1Ybfh9riTNKgZAh67UDhv8IJ-sDFf8382xvvV_u5scexTQi_IzWwOOwogdItgTUZ0D2Q1zBJiw/s1600/round_hover.png);
background-color:maroon;
background-repeat:repeat-x;
height:27px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
font-weight:bold;
font-size:100%;
background-position:0 0
}
  • Setelah selesai, Klik Simpan Template''

Sekarang kita coba, penerapannya di blog

  • Pergi ke ''Tata Letak''
  • Pilih posisi, dan Klik ''Tambah Gadget''
  • Sekarang pilih Widget ''HTML/JavaScript
  • Copy kode di bawah ini, dan simpan di kotak yang tersedia

<div id="roundbar_btrix">
<div id="round_btrix">
<ul>
<li id="current"><a href="#" title="home"><span>Home</span></a></li>
<li><a href="#"><span>Albums</span></a></li>
<li><a href="#"><span>Download</span></a></li>
<li><a href="#"><span>Privacy Policy</span></a></li>
<li><a href="#"><span>Lyrics</span></a></li>
<li><a href="#"><span>Music</span></a></li>
<li><a href="#"><span>Videos</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Contact us</span></a></li>
</ul></div></div>
  • Ganti  # dengan url yang ingin dituju
  • Setelah di edit, Sekarang klik ''Simpan''

KATA PENUTUP
Dan Demikianlah Semoga artikel ini bermanfaat buat semua, dan sobat bole bertanya dan kasih pendapat tentang menu navigasi ini di kolom komentar di bawah ini

Source Code : BloggerTrix
Unknown Waktu 16:29 2 comments:

Saturday, June 15, 2013

Membuat Cloud Label Warna Hijau Untuk Blogger

cloud label untuk bloggerMembuat Cloud Label Warna Hijau Untuk Blogger | Salah satu widget yang bisa dipercantik di blog, yaitu Widget Label Daftar Label / Kategori yang sudah kita publish, kita akan Membuat Cloud Label yang berwarna hijau, tidak begitu sulit menerapinnya dan tidak juga memberatkan blog kita, kita akan coba membuatnya di artikel ini teruslah ikutilah artikel ini sampai selesai, sudah melihat hasilnya mari kita membuatnya seperti dibawah ini :

  • Masuk ke blogger, dengan akun anda
  • Sekarang, pergi ke menu ''Template''
  • Klik ''Edit HTML''
  • Setelah itu cari kode ]]></b:skin (mengunakan CTRL+F), setelah ketemu simpan kode dibawah ini diatas kode tersebut
.label-size{display:inline-block;padding:0px 10px;height:29px;line-height:29px;border-radius:5px;  font-weight:bold;font-size:12px;text-decoration:none}
.label-size{border:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #6ea23b;color:#fff;background-image:linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(bottom,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}
.label-size:hover{background-color:#b7fa66;background-image:linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(top,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(top,#b7fa66 0%,#7ec940 100%)}
.label-size:active{background-image:linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);  background-image:-o-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(top,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}
.label-size{display:inline-block;border-radius:5px 0 0 5px;border-right-width:0;position:relative;  z-index:5;margin-right:20px;margin-bottom:10px}
.label-size:after{content:"";width:22px;height:22px;line-height:18px;font-size:25px;border-top:1px solid #769e42;border-right:1px solid #769e42;box-shadow:inset 0 1px 0 #c5e59c;background-color:#9ed35a;text-shadow:0px 1px 1px #7eac46;border-radius:3px 7px 3px 0;color:#fff;background-image:linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-webkit-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-ms-linear-gradient(135deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);position:absolute;top:3px;right:-12px;  z-index:-3;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);filter:progid:DXImageTransform.Microsoft.Matrix( M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476,sizingMethod='auto expand');zoom:1}
.label-size:hover:after{background-color:#b7fa66;background-image:linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-o-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-moz-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-webkit-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%);background-image:-ms-linear-gradient(-45deg,#b7fa66 0%,#7ec940 100%)}
.label-size:active:after{background-image:linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-o-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);background-image:-moz-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);  background-image:-webkit-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%);  background-image:-ms-linear-gradient(-45deg,rgb(125,196,64) 0%,rgb(157,210,88) 100%)}
.label-size:before{ content:"";height:5px;width:5px;display:block;position:absolute;right:-3px;top:11px;background-color:#fcfdf5;border:1px solid #83ab52;border-radius:5px;box-shadow:0 1px 0 #b2ddd83}
.label-size span{padding:2px 5px;border:1px solid #9e5c26;border-radius:5px;box-shadow:inset 0 1px 0 #f5bf8c;background-color:#ed943f;text-shadow:0px 1px 1px #000;margin-left:10px;background-image:linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-o-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-moz-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-webkit-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%);background-image:-ms-linear-gradient(bottom,rgb(211,95,32) 0%,rgb(223,131,45) 100%)}
#Label1{height:210px !important}
  • Setelah selesai klik ''Simpan Template''
NOTE!! : Kode di atas bisa berkerja kalau label pada widget anda dalam fungsi cloud, kalau belum cara seperti
  • Masuk ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Menu ''LABEL''
  • Setelah itu, pada pengaturan ''Tampilan'' pilih ''Cloud'' bukan ''Daftar''
  • Setelah itu, klik simpan
  • Dan lihat di perubahannya di blog sobat
KATA PENUTUP
Dan demikianlah artikel ini semoga artikel di atas bisa menjadi ilmu bagi sobat dan bermanfaat buat kalian semua, kalau seandainya sobat mau kasih pendapat ataupun ingin bertanya silakan berkomentarlah di kolom komentar di bawah ini

Keep Blogging
Unknown Waktu 13:53 No comments:

Thursday, June 13, 2013

Widget Subsribe Dan Sosial Media Super Keren

Widget Subsribe Dan Sosial Media Super Keren | Hai, sudah lama blog ini tidak update karena kesibukan admin di dunia nyata... masih melanjutkan artikel sebelum yang berjudul Widget Sosial Media Icon Dengan Search Box Untuk Blogger  , Widget ini memiliki efek hover pada kotak berlanganan dan tampilan memukau sob, jadi saya beri judul di ada super keren hehehe.... seperti ini jadinya sob, sobat tertarik langsung saja kita belajar membuatnya seperti dibawah ini
widget super keren

  • Login ke Dasbor Blogger
  • Pilih Menu ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Gadget 'HTML/JavaScript
  • Setelah itu, taruhlah kode di bawah ini dalamnya
<style>
.subscribebtrix {
border: 2px solid #000000;
padding: 8px;
width: 310px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.subscribebtrix:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.btrixsubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.btrixsubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.btrixsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
</style>

<br />
<div class="subscribebtrix">
<div style="color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;">
Free Updates to your Inbox</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID ANDA', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="ID ANDA" />
<input name="loc" type="hidden" value="en_US" />
<input class="tbimailbox" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}" type="text" value="Enter your email..." />
<input alt="" class="btrixsubmit" title="" type="submit" value="Subscribe" />
</form>
</div>
<div style="border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;">
Follow us:</div>
<div style="margin: -32px 0 0 120px;">
<a href="http://www.facebook.com/USERNAME" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9nPYtJOsOZcccDXZG6RdlmtE-GdjGqFSm9I5rCqPZFqB7VQZeIZ_CXL-XG_qKvVg6WZZ99cuEqATYKfTm1i7JXlvUVAA_iCijOwuDsy3glY31nexmpfN6ddzoNgC7oomkhkmRh7dg15c/s1600/facebook_btrix.png" /></a>
<a href="http://www.twitter.com/USERNAME" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmLBrU_1Skg2yuSMJOlgQObnonnJFTBHVeCTSXrZX0U7yTYnFvdAyCY6b9QVhYPYxUTYx2HKaPWp1xz_tH_6pnoIJIWiSum9ceVgpHzSvMor3ZeU1lgGuq7kR-sPVwDd49daUbVqmFVI/s1600/twitter_btrix.png" /></a>
<a href="https://plus.google.com/ID ANDA" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcQrDzyY9WetfJcs-apjoCO3LViHs2F_U6JAfXAC60P-rbzxCR3YcggeJB7oChnJk0ub76uJN2Cxm3MFVo9DyiqNmtMpyB9D8wfk0aQJ0HTIeijFAg-4rZ1iauiP5xS75gAzwWEOxOu1M/s1600/googleplus_btrix.png" /></a>
<a href="http://www.pinterest.com/USERNAME" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik3w_u7ybgaBk02oRyYd6lLXjIwsU1jEyRx_fl9fhWU9sQYTckZFzikVaOUvF0ZWoHkeqYIPH4lMf8xUAiN9n3MBnMeiyg1RHr3E38L52ePiur2TpM9fD7S7mNKxKeihXvgXHgfJ4HSTQ/s1600/pinterest_btrix.png" /></a>
<a href="http://feeds2.feedburner.com/ID ANDA" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtDkQ0C4JGn2hozi13n4WkmOi4GT_lG7raWWRjTbWOuAjnTi-ETgwv5PQ2uQhgs6KFRvQ0R3boCxcDUuIf2EamyfwQo_NgijXFkwAJoP9BlVG6FTDsGnOXOClZ1Ig_4i4tdD32dDXHry4/s1600/rss_btrix.png" /></a>
</div>
<div align="center">
<a href="http://feeds.feedburner.com/ID ANDA"><img alt="" height="26" src="http://feeds.feedburner.com/~fc/ID ANDA?bg=FF9900&amp;fg=444444&amp;anim=1" style="border: 0;" width="88" /></a></div>
</div>
  • USERNAME Ganti dengan Uusername facebook anda
  • USERNAME Ganti dengan Username twitter anda
  • USERNAME Ganti dengan Username Pinterest anda
  • ID ANDA Ganti dengan Id Profile Google Plus Anda
  • ID ANDA Ganti dengan Id Feedburner anda

Dan demikanlah artikel yang berjudul Widget Subsribe Dan Sosial Media Super Keren semoga Artikel ini bermanfaat bagi sobat semua dan kalau ada yang ini di tanya tentang artikel silakan anda berkomentar di kolom koomentar di bawah ini
Unknown Waktu 14:38 4 comments:

Sunday, June 9, 2013

Widget Sosial Media Icon Dengan Search Box Untuk Blogger

Widget Sosial Media Icon Dengan Search Box Untuk Blogger | Halo semua... apa kabar ? Pada Kesempatan Kali ini Ghiyats Blogs , pada artikel ini masih ada hubungannya pada artikel sebelumnya Widget Subsibe Dengan Sosial Media Biru untuk Blogger, karena akhir-akhir ini saya lagi berbagai tentang artikel yang berhubungan dengan widget.

Saya akan share tentang Widget Sosial Media Icon Dengan Search Box Untuk Blogger  , widget ini sangat berguna karena ada sosial medianya dan ada search boxnya bisa menghemat ruang supaya tidak memumpuk kebawah sob, mau lihat screenshotnya seperti di bawah ini, dan tutorialnya di bawah ini :

Widget

Widget Sosial Media Icon Dengan Search Box Untuk Blogger
--------------------------------------------------------------------------------

  • Login Ke Blogger
  • Pilih Menu ''Tata letak'' >> Klik ''Tambah Gadget''
  • Klik Gadget ''HTML/JavaScript
  • Taruhlah kode di bwah ini di dalamnya
<style>
#btrixwidget{width:307px;
padding:0 0 5px 0;
border:1px solid black;}

#btrix-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqUL4fNjqJTPAnm-NeAogH5QLCZIZD-9_-nh5oPT8SQ3jEl3btOeXnwwhtSQnHM0blkM6p2l9UHJA1A8JyYFwTA6he7UliPE48-dwq9fAB-k8uAnJrHh71bFP-rvDSzx2W2LmpCvNHW7_Y/s1600/blue.png) no-repeat scroll center center transparent;
    width: 307px;
    height: 50px;
    disaply: block;
}

form#btrix-searchform {
    display: block;
    padding: 9px 16px;
    margin: 0;
}

form#btrix-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}

form#btrix-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>

<div id="btrixwidget"><center>
<a href="http://twitter.com/USERNAME" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBznKvz1lawr_CXt9qFmrhetdKtS55BWdGR2UPuJuVUF8H7IrV0n_Ifzxu4_InQ-bp5w-otRKuOzRI-cydhoVpDQWMMombFE1DBbI5Aqxslekyr3iC3DN8-wl4lN1gg1HBAsiCrGV8g1U/s1600/btrix-twitter.png" alt="" title="twitter" width="62" height="78" class="alignnone size-full wp-image-6249"></a>

<a href="http://www.facebook.com/USERNAME" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim2vWoaX8VdZ9dJt_CXK8oOcPnptwKRMT5EBdg9HWT1mACmK7YmGwNFINNcXthJdOMukrs855y1Ci41AYXl104maKIWBouMpJxYvulGhpcg6GRS1VpgEapiB8UQuKY5kfBT4pET-TAwh0/s1600/btrix-facebook.png" alt="" title="facebook" width="62" height="78" class="alignnone size-full wp-image-6248"></a>

<a href="http://feeds.feedburner.com/ID Anda" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLuE2Lm8d-2DWnI27SGe7II4TwcPMLKLylsSo2IxqWy7_zTWY0eZ4jmf5U6UuxWdSGM9_NbkoYm7B-z0OvWjX8OOLrsVdInQXPzTxAH4KcuFcqXzx3RS85MX_N20cD9-WlaHVd54Yy5Fw/s1600/btrix-rss.png" alt="" title="rss" width="62" height="78" class="alignnone size-full wp-image-6251"></a>

<a href="http://au.linkedin.com/username" target="_blank" wrc_done="true"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTPSQD1sdNt2JmJ5mPF2YoQ7u99vwF-iEpHVvS7ImSPDCkVCrnYoUKy-K1YLvFyLsBVPkVdKD5r5MZlId1fBrclPt97hrUxQ8JpFH2L5hSHKyUUs3DLqRHUwEP-Xd3lQt3UjW98Y_9J2c/s1600/btrix-linkedin.png" alt="" title="linkedin" width="62" height="78" class="alignnone size-full wp-image-6250"></a>

<div id="btrix-searchbox">
    <form id="btrix-searchform" action="/search" method="get">
        <input type="text" id="s" name="q" value="Search..." onfocus='if (this.value == "Search...") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Search...";}' />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>
</center>
</div>
  • USERNAME Ganti dengan username twitter anda
  • USERNAME Ganti dengan usename facebook anda
  • ID Anda Ganti dengan ID FeedBurner anda
  • USERNAME Ganti dengan username linkedin anda
  • Setelah di Edit, Sekarang Klik Simpan 

Dan Demikianlah artikel yang berjudul Widget Sosial Media Icon Dengan Search Box Untuk Blogger semoga artikel ini bermanfaat bagi sobat dan kalau ada yang masih binggung bisa berkomentar di bawah ini

Source Code : BloggerTrix
Unknown Waktu 17:11 2 comments:

Friday, June 7, 2013

Widget Subsribe Dengan Sosial Media Biru Untuk Blogger

Widget

Widget Subsribe Dengan Sosial Media Biru Untuk Blogger | Subsribe box atau kotak berlanganan pastinya sangat di butuhkan untuk seorang blogger untuk kemajuan blognya, sama dengan widget ini di lengkapin dengan sosial media bisa menghemat tempat dan waktu hehehe, Jangan terlalu lama berbicang, pastinya sobat sudah mengertikan ? langsung saja kita coba mengunakan widget ini yang pastinnya mudah diterapin dan sangat elegan seperti dibawah ini :
Unknown Waktu 09:15 4 comments:

Thursday, June 6, 2013

Cloud Label Warna Ungu Untuk Blogger

Cloud Label Ungu
Cloud Label Warna Ungu Untuk Blogger | Pada Kesempatan hari ini kita akan menbahas artikel tentang label, Tampilan tentu harus diperhatikan terutapa pada widget label, kalau biasanya label hanya dengan daftar list label atau dengan cloud dengan berbeda font dan besar huruf, karena itu saya akan membagikan cloud label ini yang pastinya lebih menarik yang dasar warnanya ungu, sekarang sobat sudah mengerti langsung aja kita coba membuatnya seperti di bawah ini


  • Login Ke Blogger
  • Pilih Menu ''Template'' >> klik ''Edit HTML''
  • Cari kode ]]></b:skin> (Tekan Tombol CTRL+F ) setelah ketemu, copy kode dibawah dan simpan di atas kode tersebut
/*-----Custom Labels widget by www.bloggertrix.com----*/

#Label1 a{
outline:1px dotted #FEB380;border: 1px rgba(0,0,0,0.2) solid;padding: 6px 8px 6px 14px;text-decoration:none;
color:black;white-space: nowrap;
font-family: arial,serif;text-transform:capitalize;
font-size: 12px;font-weight: bold;
position: relative !important;background: #aa00ff;
-moz-opacity:0.75;
-khtml-opacity:0.75;opacity:0.75;
filter:alpha(opacity:75%);
float:left;padding: 4px 3px;
margin: 0 5px 5px 0;
border-radius:4px 4px; -moz-border-radius:8px 4px 4px 4px; -khtml-border-radius:4px 4px 4px 4px; -webkit-border-radius:4px 4px 4px 4px; border-radius:4px 4px 4px 4px;
}
#Label1 a:hover {
-moz-opacity:1;
-khtml-opacity:1;
opacity:1;
background:#A55A27;color:white;
-webkit-transition:all ease-in-out .5s;
-moz-transition:all ease-in-out .5s;
-o-transition:all ease-in-out .5s;
transition:all ease-in-out .5s;
}
#Label1 a:active {
background:#B24700;color:#80FFFE;
-webkit-transition:all linear .5s;
-moz-transition:all linear .5s;
-o-transition:all linear .5s;transition:all linear .5s;
}

  •  Setelah selesai , Klik Simpan Template
NOTE!! : Kode di atas bisa berkerjakalau labelpada widget anda dalam fungsi cloud, kalau belum cara seperti ini
  • Masuk ke ''Tata Letak''
  • Klik ''Tambah Gadget''
  • Pilih Menu ''LABEL''
  • setelah itu, pada pengaturan ''Tampilan'' pilih ''Cloud'' bukan ''Daftar''
  • Setelah itu, klik simpan
  • Dan lihat perubahannya di blog sobat

Dan demikianlah artikel ini semog artikel di atas bermanfaat bagi sobat semua dan  kalau masih binggung beri komentar di kolom komentar dan kasih pendapat atas artikel ini

Happy Blogging
Unknown Waktu 19:40 No comments:

Wednesday, June 5, 2013

Merubah Tulisan Poskan Komentar Dengan Gambar

Merubah Tulisan Poskan Komentar Dengan Gambar Hai apa kabar ni semuanya ? Tampilan Tentu harus diperhatikan oleh kita untuk menarik minat pengunjung, salah satunya di sekitar di kotak komentar, pastinya setiap dalam sekitar kotak komentar terdapat tulisan ''Poskan Komentar'' bagi sobat yang ingin merubah tampilan lebih menarik bisa mengunakan gambar yang khusus untuk ini, ikutilah tutorialnya dibawah ini :
Unknown Waktu 17:12 10 comments:

Monday, June 3, 2013

Membuat Breadcrumbs Terindex Oleh Google

Breadcrumbs Image

Membuat Breadcrumbs Terindex Oleh Google | Kalian tahu apa itu Breadcrumbs ? saya akan memberikan contoh ni, apakah pernah sobat berkunjung ke blog orang lain,  dan melihat seperti menu navigasi seperti petunjuk seperti panah dari home menuju kategori dan menuju judul postingan.
Unknown Waktu 17:38 6 comments:

Sunday, June 2, 2013

Widget Kotak Berlangganan Keren Di Blog

Widget Kotak Berlangganan Keren Di Blog | Saya hari ini akan berbagi tutorial tentang widget kotak berlangganan keren di blog , Widget Kotak berlangganan dengan email sangat berguna untuk menambah trafik blog dan memudahkan pengunjung untuk mendapatkan artikel terbaru dari blog kita langsung ke email mereka, untuk itu saya akan bagi widget ini yang hasil seperti ini
Unknown Waktu 17:35 4 comments:
‹
›
Home
View web version
Find Us :
Powered by Blogger.
Copyright 2013 Ghiyats Blogs - All Rights Reserved
Template by Mas Sugeng | Blogger