Template Blogger Goyangjo Responsive 2014

19.15 Unknown

Template Blogger Goyangjo Responsive 2014. Ok sobat pada kesempatan ini saya akan membagikan template Blogger responsive yang kebetulan dibuat karena sedang mengedit template bloger JWv7. Keungulan dari template Blogger ini yang paling terasa adalah alexa rank blog anda meramping begitu cepatnya. Untuk anda yang tertarik ingin menggunakan template "Goyangjo" ini silahkan download di link yang telah disediakan.

Template ini juga cocok untuk anda yang blognya bertemakan seputaran mobile karena akan tampil responsive di tampilan mobilenya. H1 adalah Judul artikel pada postingan dan H2 adalah nama Blog anda, jadi anda tidak perlu memikirkan mengedit lagi settingan h1 h2 dst.

Cara setting Template :

untuk menampilkan slider di dalam postingan ( slider di sidebar ) silahkan masukan kode berikut ini di dalam widget html template anda.

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://gamepox.blogspot.com/" // Add your blog URL
});
</script>

Keterangan : silahkan ganti kode warna merah diatas dengan alamat url sobat.
Untuk menambahkan widget berlangganan silahkan ambil widgetnya disini
Untuk menampilkan widget misalnya slider hanya di postingan saja baca disini.
Untuk menampilakan widget sosial yang ada di footer template silahkan tambahkan gatget berikut ini didalam template blogger sobat :

<div class="abt-social-slide">
<ul>
<li><a class="facebook" href="#" target="_blank">Facebook</a></li>
<li><a class="twitter" href="#" target="_blank">Twitter</a></li>
<li><a class="google-p" href="#" target="_blank">Google plus</a></li>
<li><a class="rss" href="#" target="_blank">Rss</a></li>
</ul>
</div>
<style>
.abt-social-slide ul li{list-style:none;border-bottom:none;padding:0}
.abt-social-slide li a{width:59px;height:59px;float:left;text-indent:-99999px;border:solid 1px #222121;border-radius:5px;-webkit-transition:All .3s ease-out;-moz-transition:All .3s ease-out;-o-transition:All .3s ease-out;margin:5px 5px 10px;padding:0}
.abt-social-slide li a.facebook{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtB-Xfp6CrSXgJ3Qab6LW0bubV9rR6UbJO0s-vOyOMEKe9Gy3-fhXuP5kcuNqMzaSsqxk3_TlggqBdUi3PlhaZq7RV6LJuAY1HfEtCQdwVZOKrw3JNoys5rhr3dAaHLirNaHmxUhAKQ/s1600/facebook.png) no-repeat 0 -88px}
.abt-social-slide li a.facebook:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUtB-Xfp6CrSXgJ3Qab6LW0bubV9rR6UbJO0s-vOyOMEKe9Gy3-fhXuP5kcuNqMzaSsqxk3_TlggqBdUi3PlhaZq7RV6LJuAY1HfEtCQdwVZOKrw3JNoys5rhr3dAaHLirNaHmxUhAKQ/s1600/facebook.png) no-repeat 0 0}
.abt-social-slide li a.twitter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1izO8B8F_3WG9s_lCVn7fKQgRC7X9F2aUS13vo4Qiha9_Xj6bC-6_ePMsXd5V6p78RNBgvallArcOCeGYZ-7aq5xQO9BRJbaSPSBVJV6EDGsYapQEJQY_4Ne20Dr1RCZqMMQAz1eQ/s1600/twitter-1.png) no-repeat 0 -88px}
.abt-social-slide li a.twitter:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTM1izO8B8F_3WG9s_lCVn7fKQgRC7X9F2aUS13vo4Qiha9_Xj6bC-6_ePMsXd5V6p78RNBgvallArcOCeGYZ-7aq5xQO9BRJbaSPSBVJV6EDGsYapQEJQY_4Ne20Dr1RCZqMMQAz1eQ/s1600/twitter-1.png) no-repeat 0 0}
.abt-social-slide li a.google-p{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnXLGcd4G920z_cbs4Am_DGA6z2mp8g_jiybqA61Cr3V62y4CsLXrvTNqWTRLCuug1c_x3TpaPra5NmWU5SGWTclMYYB7YA_mB48teLkyBPKchIlebTM0QebdWtAYlGw2BMCp7zYL-A/s1600/google.png) no-repeat 0 -88px}
.abt-social-slide li a.google-p:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdnXLGcd4G920z_cbs4Am_DGA6z2mp8g_jiybqA61Cr3V62y4CsLXrvTNqWTRLCuug1c_x3TpaPra5NmWU5SGWTclMYYB7YA_mB48teLkyBPKchIlebTM0QebdWtAYlGw2BMCp7zYL-A/s1600/google.png) no-repeat 0 0}
.abt-social-slide li a.rss{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNitF2xf-RNjphdF_eU3YME0z8_fYAuNuu3vaNF62Jo1mjAw352LjljYfCFcli2kloDCH28Z5t6eOqPZbXXdSbrH_aTs0yFsXe7YLwo6Q7AtqrAFiXpa1R6F2a14D4bpk3a8tcin7zvw/s1600/twitter.png) no-repeat 0 -88px}
.abt-social-slide li a.rss:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNitF2xf-RNjphdF_eU3YME0z8_fYAuNuu3vaNF62Jo1mjAw352LjljYfCFcli2kloDCH28Z5t6eOqPZbXXdSbrH_aTs0yFsXe7YLwo6Q7AtqrAFiXpa1R6F2a14D4bpk3a8tcin7zvw/s1600/twitter.png) no-repeat 0 0}
</style>

DEMO
DOWNLOAD

Sekian template Blogger responsive yang dapat dibagikan saat ini dan semoga bermanfaat.