Ron1st Blog

Sunday, February 2, 2014

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog

10:05 AM Blogger

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.

Membuat Popular Post Dengan Bentuk Bulat di blog

10:03 AM Blogger

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

Cara Membuat Related Posts Dengan Thumbnail

10:01 AM Blogger

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/AVvXsEhB8lM2Y9klUPmvmgQpeZaYCItCnsZYgP_kfYvtiUpok30mAbb1VqaPATgqn_jOVypYu5Gv9INW6rzRZfyrKMP21LKnTzjHpwyByhFUUGD0B3G4kekav7tQortLgjRjks7173cLHiO1NWtw/";

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

Cara Membuat Menu Navigasi Vertical Di Blog

9:57 AM Blogger

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.

Cara Membuat Menu Navigasi Vertical Di Blog

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/AVvXsEj8Ph_gVuEL4AhIHSICOSF6KT6ceKF8CLBYPB8XN8gIC7EfbqSPDsbhyphenhyphen7-X9Gq8x8zznoIBrfcFnJfW1CNoA4WURzdU7uE48IGu4pA5380SVqHzZkShyphenhyphen9joXfMubYWKjjVQC29dLn2vAtn3/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/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/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/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/s1600/hover-bg.png) no-repeat;

}

#v-menu a:active {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkzkH-HGnP0OxttahtR1Rr4-0K4ThIbXwnOGAx5nTi-6BCacnVpbSiu9EZOlLxSlnsalkzwKQn8Gfel8Cmfz5M_ofSCUX3-icWuG8eJPZqCTOUSGGI3_Y8TFt_0FLfDdOoHpWQGBy_5qb2/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. terima kasih.

Tutorial Widget Cloud Label With Efek Css3

9:55 AM Blogger

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.

Tutorial Widget Blogger Css3 Cloud Label

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

Demikian 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

Tutorial Kotak Berlangganan Email Keren Dengan Css

9:53 AM Blogger

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.

Tutorial Kotak Berlangganan Email Keren Dengan Css

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

Demikian artikel 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..

Ron1st Blog

Ingin pasang iklan di slide 3

Ingin pasang iklan di slide 4

Ingin pasang iklan di slide 5

Sunday, February 2, 2014

Memasang Widget Kotak Berlangganan With Sosial Icons Di Blog

Membuat Popular Post Dengan Bentuk Bulat di blog

Cara Membuat Related Posts Dengan Thumbnail

Cara Membuat Menu Navigasi Vertical Di Blog

Tutorial Widget Cloud Label With Efek Css3

Tutorial Kotak Berlangganan Email Keren Dengan Css

follow

Popular Posts

Blog Archive

Statistik Blog

…

…

…

Sponsor

Halaman

Populer

Kategori

Sunday, February 2, 2014

Social Profiles

follow

Popular Posts

Blog Archive

Statistik Blog

…

…

…

Sponsor

Halaman

Populer

Kategori